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

res/run_cca.sh

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

src/sass/components/_buttons.scss

@@ -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;
+            }
         }
     }
 }

src/sass/components/_lightbox.scss

@@ -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 {

src/sass/components/_mail-list.scss

@@ -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,

src/sass/components/_nav.scss

@@ -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);
 }
 

src/sass/views/_mail-list.scss

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

src/sass/views/_navigation.scss

@@ -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%);
                     }
                 }
             }

src/sass/views/_read.scss

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