moparisthebest/mail
1
0
Fork 0
mirror of https://github.com/moparisthebest/mail synced 2024-12-21 23:08:50 -05:00
Code Issues Releases Wiki Activity

Add .active class for touchstart, Disable css transitions in mobile

Browse Source
This commit is contained in:
Tankred Hase 2014-06-27 12:38:12 +02:00
parent a479d5850e
commit 9373bee556
8 changed files with 68 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
res/run_cca.sh
View File

@ -6,4 +6,4 @@ cd ..
cd release/cca/Whiteout
#cca run ios
cca run android
cca run android --device

32
src/sass/components/_buttons.scss
View File

@ -31,8 +31,8 @@
&.active {
background-image: none;
box-shadow: none;
top: 1px;
right: -1px;
top: 2px;
right: -2px;
}
&.disabled,
@ -108,8 +108,10 @@
width: 2em;
text-align: center;
-webkit-font-smoothing: antialiased;
transition: color 0.3s;
transform: translate3d(0,0,0); // to prevent flickering
@include respond-to(desktop) {
transition: color 0.3s;
transform: translate3d(0,0,0); // to prevent flickering
}
outline: none;
&.disabled,
@ -124,8 +126,8 @@
&:active,
&.active {
outline: 0;
top: 1px;
left: 1px;
top: 2px;
left: 2px;
}
&:after {
@ -141,15 +143,19 @@
padding: 2px;
z-index: -1;
background: $btn-icon-color;
transition: transform 0.3s, opacity 0.4s;
transform: scale(1.2);
@include respond-to(desktop) {
transition: transform 0.3s, opacity 0.4s;
transform: scale(1.2);
}
opacity: 0;
}
&:hover {
color: $color-white;
&:after {
transform: scale(0.8);
opacity: 1;
@include respond-to(desktop) {
&:hover {
color: $color-white;
&:after {
transform: scale(0.8);
opacity: 1;
}
}
}
}

25
src/sass/components/_lightbox.scss
View File

@ -5,7 +5,9 @@
width: 100%;
height: 100%;
z-index: 2000;
backface-visibility: hidden;
@include respond-to(desktop) {
backface-visibility: hidden;
}
@include respond-to(desktop) {
margin: 0 auto;
@ -41,6 +43,11 @@
margin: 0;
color: $color-grey-dark;
outline: none;
&.active {
top: 2px;
right: -2px;
}
}
h2 {
margin: 0;
@ -81,10 +88,14 @@
&.show-add {
display: block;
opacity: 0;
transition: opacity 0.3s;
@include respond-to(desktop) {
transition: opacity 0.3s;
}
.lightbox-body {
transform: scale(0.7);
transition: transform 0.3s;
@include respond-to(desktop) {
transition: transform 0.3s;
}
}
}
&.show-add-active {
@ -96,10 +107,14 @@
&.show-remove {
display: block;
opacity: 1;
transition: opacity 0.3s;
@include respond-to(desktop) {
transition: opacity 0.3s;
}
.lightbox-body {
transform: scale(1);
transition: transform 0.3s;
@include respond-to(desktop) {
transition: transform 0.3s;
}
}
}
&.show-remove-active {

5
src/sass/components/_mail-list.scss
View File

@ -12,7 +12,7 @@
padding: $padding-vertical $padding-horizontal;
background: $color-white;
cursor: pointer;
transition: background-color $time-li-fade, color $time-li-fade;
//transition: background-color $time-li-fade, color $time-li-fade;
margin-top: 11px;
&:before {
@ -120,8 +120,9 @@
overflow: hidden;
}
&.active,
&:hover {
background-color: mix($color-white, $color-blue, 90%);
background-color: mix($color-white, $color-blue, 85%);
}
&.mail-list-active,

20
src/sass/components/_nav.scss
View File

@ -12,14 +12,18 @@
left: 0;
z-index: 99;
height: 100%;
transition: transform $time-nav-animation;
@include respond-to(desktop) {
transition: transform $time-nav-animation;
}
}
.nav-menu-open .nav-pusher::after {
width: 100%;
height: 100%;
opacity: 1;
transition: opacity $time-nav-animation;
@include respond-to(desktop) {
transition: opacity $time-nav-animation;
}
}
.nav-pusher::after {
@ -31,7 +35,9 @@
background: rgba(0,0,0,0.2);
content: '';
opacity: 0;
transition: opacity $time-nav-animation, width 0.1s $time-nav-animation, height 0.1s $time-nav-animation;
@include respond-to(desktop) {
transition: opacity $time-nav-animation, width 0.1s $time-nav-animation, height 0.1s $time-nav-animation;
}
}
.nav-menu {
@ -45,7 +51,9 @@
height: 100%;
background: $color-blue;
background-image: linear-gradient(to right ,$color-blue 98%, darken($color-blue, 1%) 100%);
transition: all $time-nav-animation;
@include respond-to(desktop) {
transition: all $time-nav-animation;
}
border-right: 1px solid $color-grey-light;
}
@ -65,7 +73,9 @@
.nav-effect.nav-menu-open .nav-effect.nav-menu {
visibility: visible;
transition: transform $time-nav-animation;
@include respond-to(desktop) {
transition: transform $time-nav-animation;
}
transform: translate3d(0, 0, 0);
}

4
src/sass/views/_mail-list.scss
View File

@ -35,6 +35,10 @@
display: none;
}
}
&.active {
background-color: darken($color-white, 10%);
}
}
.search {

4
src/sass/views/_navigation.scss
View File

@ -65,8 +65,8 @@
vertical-align: middle;
text-shadow: none;
}
&:hover, &:focus {
background-color: mix($color-blue, $color-white, 80%);
&.active, &:hover, &:focus {
background-color: mix($color-blue, $color-white, 70%);
}
}
}

4
src/sass/views/_read.scss
View File

@ -24,6 +24,10 @@
display: none;
}
}
&.active {
background-color: darken($color-white, 10%);
}
}
.date {