From 0b0e9be22fea0ce97b74decdb575d206e363b8a6 Mon Sep 17 00:00:00 2001
From: Jeff Atwood <jatwood@codinghorror.com>
Date: Tue, 23 Dec 2014 02:52:20 -0800
Subject: [PATCH] standardize on @transition mixin

---
 .../stylesheets/common/base/compose.scss      |  1 -
 .../stylesheets/common/foundation/mixins.scss | 39 +++++--------------
 .../stylesheets/desktop/topic-post.scss       |  7 ++--
 3 files changed, 13 insertions(+), 34 deletions(-)

diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss
index 9e632cae8fc..d8c6b77a1a3 100644
--- a/app/assets/stylesheets/common/base/compose.scss
+++ b/app/assets/stylesheets/common/base/compose.scss
@@ -136,7 +136,6 @@ div.ac-wrap {
 #reply-control {
   .composer-loading {
     position: absolute;
-    @include fades-in(0.25s);
     left: 45%;
     top: 20%;
   }
diff --git a/app/assets/stylesheets/common/foundation/mixins.scss b/app/assets/stylesheets/common/foundation/mixins.scss
index 3a8663e2b84..7332537233a 100644
--- a/app/assets/stylesheets/common/foundation/mixins.scss
+++ b/app/assets/stylesheets/common/foundation/mixins.scss
@@ -52,15 +52,6 @@
   background-image: linear-gradient(to bottom, $start-color, $end-color);
 }
 
-// Transition
-
-@mixin transition($transition) {
-  .discourse-no-touch & {
-    -webkit-transition: #{$transition};
-            transition: #{$transition};
-  }
-}
-
 // Visibility
 // --------------------------------------------------
 
@@ -72,34 +63,24 @@
   }
 }
 
-@mixin fades-in($time: 0.5s) {
-  opacity: 0;
-  visibility: hidden;
-  .discourse-no-touch & {
-    -webkit-transition: visibility 0s linear $time, opacity $time linear;
-        -ms-transition: visibility 0s linear $time, opacity $time linear;
-            transition: visibility 0s linear $time, opacity $time linear;
-  }
-}
-
-@mixin fade-soft($time: 1s) {
-  -webkit-transition: opacity $time ease-in-out;
-      -ms-transition: opacity $time ease-in-out;
-          transition: opacity $time ease-in-out;
-
-}
-
 @mixin visible {
   opacity: 1;
   visibility: visible;
-  -webkit-transition-delay: 0s;
-          transition-delay: 0s;
+  transition-delay: 0s;
 }
 
+// Transitions
+// --------------------------------------------------
+
+@mixin transition($transition-property, $transition-time, $method) {
+    transition: $transition-property $transition-time $method;
+}
+
+
 //
 // --------------------------------------------------
 
-// Unselectable
+// Unselectable (avoids unwanted selections with iPad, touch laptops, etc)
 
 @mixin unselectable {
   -webkit-user-select: none;
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index 7394f156c75..0ce0c338aeb 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -40,9 +40,8 @@ h1 .topic-statuses .topic-status i {
 .gutter {
   .reply-new {
     .discourse-no-touch & {
-     opacity:0;
-     @include transition(opacity linear 0.4s);
-
+      opacity:0;
+      @include transition(opacity 0.7s ease-in-out);
     }
     .discourse-touch & {opacity: 1;}
   }
@@ -51,7 +50,7 @@ h1 .topic-statuses .topic-status i {
 div.actions, .post-actions {
     .discourse-no-touch & {
       opacity: 0.2;
-      @include fade-soft(1s);
+      @include transition(opacity 0.7s ease-in-out);
     }
     .discourse-touch & {opacity: 1;}
   }