Merge pull request #2896 from awesomerobot/master

sticking transitions into a sass mixin

app/assets/stylesheets/common/base/header.scss

@@ -53,6 +53,7 @@
       text-align: center;
       margin: 0 0 0 5px;
       list-style: none;
+
       > li {
         float: left;
       }
@@ -65,6 +66,7 @@
         border-top: 1px solid transparent;
         border-left: 1px solid transparent;
         border-right: 1px solid transparent;
+        @include transition(all linear .15s);
 
 
         &:hover {
@@ -168,7 +170,7 @@
       a {
         display: block;
         padding: 5px;
-        transition: all linear .15s;
+        @include transition(all linear .15s);
       }
 
       &:hover a:not(.badge-notification) {

app/assets/stylesheets/common/foundation/mixins.scss

@@ -57,7 +57,6 @@
 @mixin transition($transition) {
   .discourse-no-touch & {
     -webkit-transition: #{$transition};
-        -ms-transition: #{$transition};
             transition: #{$transition};
   }
 }

app/assets/stylesheets/desktop/discourse.scss

@@ -206,17 +206,17 @@ body {
     border: 1px solid scale-color-diff();
     border-radius: 3px;
     box-shadow: inset 0 1px 1px rgba(0,0,0, .3);
-    -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
     transition: border linear 0.2s, box-shadow linear 0.2s;
+    -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
   }
   input {
     &[type="text"], &[type="password"], &[type="datetime"], &[type="datetime-local"], &[type="date"], &[type="month"], &[type="time"], &[type="week"], &[type="number"], &[type="email"], &[type="url"], &[type="search"], &[type="tel"], &[type="color"] {
       background-color: $secondary;
       border: 1px solid scale-color-diff();
       border-radius: 3px;
-    box-shadow: inset 0 1px 1px rgba(0,0,0, .3);
-      -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
+      box-shadow: inset 0 1px 1px rgba(0,0,0, .3);
       transition: border linear 0.2s, box-shadow linear 0.2s;
+      -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
     }
   }
   textarea:focus {

app/assets/stylesheets/desktop/topic-post.scss

@@ -47,8 +47,8 @@ h1 .topic-statuses .topic-status i {
   .reply-new {
     .discourse-no-touch & {
      opacity:0;
-     transition: opacity linear 0.4s;
-     -webkit-transition: opacity linear 0.4s;
+     @include transition(opacity linear 0.4s);
+
     }
     .discourse-touch & {opacity: 1;}
   }
@@ -57,8 +57,7 @@ h1 .topic-statuses .topic-status i {
 div.actions, .post-actions {
     .discourse-no-touch & {
       opacity: 0.2;
-       transition: opacity linear 0.4s;
-    -webkit-transition: opacity linear 0.4s;
+      @include transition(opacity linear 0.4s);
     }
     .discourse-touch & {opacity: 1;}
   }
@@ -89,7 +88,8 @@ nav.post-controls {
 
   span.badge-posts {
     margin-right: 5px;
-    transition: all linear 0.15s;
+    @include transition(all linear 0.15s);
+
   }
 
   .actions {
@@ -147,7 +147,7 @@ nav.post-controls {
     background: transparent;
     border: none;
     margin-left: 3px;
-    transition: all linear 0.15s;
+    @include transition(all linear 0.15s);
          &:hover {
           background: scale-color-diff();
           color: $primary;
@@ -830,7 +830,7 @@ $topic-avatar-width: 45px;
   font-weight: normal;
   line-height: 18px;
   color: $primary;
-  transition: all linear .15s;
+  @include transition(all linear .15s);
 
   & > div {
     margin-left: 26px;
@@ -1032,8 +1032,8 @@ span.highlighted {
 
 .read-state.read {
   opacity: 0;
-  -webkit-transition: opacity 1s ease-out;
-  transition: opacity 1s ease-out;
+  @include transition(opacity ease-out 1s);
+
 }
 
 

app/assets/stylesheets/desktop/topic.scss

@@ -74,8 +74,7 @@ a.reply-new {
     background: $secondary;
     padding: 1.5px 3px;
     border-radius: 20px;
-    transition: linear 0.15s;
-    -webkit-transition: linear 0.15s;
+    @include transition(all linear .15s);
     margin-left: -20px;
   }
 }
@@ -206,7 +205,8 @@ a:hover.reply-new {
     width: 0;
     border-right: 1px solid  scale-color-diff();
     background-color:  dark-light-diff($success, $secondary, 60%, -35%);
-    transition: width .75s;
+    @include transition(width .75s);
+
   }
 }
 

app/assets/stylesheets/mobile/modal.scss

@@ -26,7 +26,6 @@
 }
 
 .modal.fade {
-  -webkit-transition: opacity .3s linear, top .3s ease-out;
   transition: opacity .3s linear, top .3s ease-out;
   top: -25%;
 }

app/assets/stylesheets/mobile/topic-list.scss

@@ -252,8 +252,9 @@ tr.category-topic-link:nth-of-type(odd) {
 }
 .fade {
   opacity: 0;
-  -webkit-transition: opacity 0.15s linear;
-  transition: opacity 0.15s linear;
+  transition: opacity linear .15s;
+  -webkit-transition: opacity linear .15s;
+
 }
 .fade.in {
   opacity: 1;
@@ -316,4 +317,4 @@ td.main-link {
   a.title {
     padding: 5px 10px 5px 0;
   }
-}
+}

app/assets/stylesheets/vendor/font_awesome/_variables.scss

@@ -512,4 +512,3 @@ $fa-var-yen: "\f157";
 $fa-var-youtube: "\f167";
 $fa-var-youtube-play: "\f16a";
 $fa-var-youtube-square: "\f166";
-