From 41d9fa3785bb99595f061a5f6d1087659fb4f0f4 Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Tue, 9 Jul 2013 13:38:03 -0400
Subject: [PATCH] Studio: syncs up syntax, ordering, and timing for all Sass
 transition mixins

---
 cms/static/sass/_base.scss                    |  8 +++----
 cms/static/sass/_mixins-inherited.scss        |  2 +-
 cms/static/sass/assets/_graphics.scss         |  6 +++---
 cms/static/sass/elements/_footer.scss         |  2 +-
 cms/static/sass/elements/_header.scss         |  4 +---
 .../sass/elements/_system-feedback.scss       |  6 +++---
 cms/static/sass/views/_account.scss           |  6 +++---
 cms/static/sass/views/_checklists.scss        | 21 +++++++++----------
 cms/static/sass/views/_index.scss             |  6 +++---
 cms/static/sass/views/_outline.scss           | 11 +++++-----
 cms/static/sass/views/_settings.scss          |  6 +++---
 cms/static/sass/views/_static-pages.scss      |  4 ++--
 cms/static/sass/views/_subsection.scss        |  2 +-
 cms/static/sass/views/_unit.scss              | 10 ++++-----
 common/static/sass/_mixins.scss               |  2 +-
 15 files changed, 46 insertions(+), 50 deletions(-)

diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss
index d8cfb87baa..b50bd65e19 100644
--- a/cms/static/sass/_base.scss
+++ b/cms/static/sass/_base.scss
@@ -19,9 +19,9 @@ body, input, button {
 }
 
 a {
+  @include transition(color 0.15s ease-in-out 0);
   text-decoration: none;
   color: $blue;
-  @include transition(color 0.25s ease-in-out);
 
   &:hover {
     color: $orange-d1;
@@ -642,6 +642,7 @@ hr.divide {
 
 // system notifications
 .toast-notification {
+  @include transition(all 0.2s linear 0);
   display: none;
   position: fixed;
   top: 20px;
@@ -657,7 +658,6 @@ hr.divide {
   font-size: 13px;
   text-align: center;
   color: #fff;
-  @include transition(all .2s);
 
   p, span {
     color: #fff;
@@ -794,7 +794,7 @@ hr.divide {
 
 .tooltip {
   @include font-size(12);
-  @include transition(opacity 0.1s ease-out);
+  @include transition(opacity 0.1s ease-out 0);
   position: absolute;
   top: 0;
   left: 0;
@@ -867,7 +867,7 @@ body.js {
     background: $white;
 
     .action-modal-close {
-      @include transition(top .25s ease-in-out);
+      @include transition(top 0.15s ease-in-out 0);
       @include border-bottom-radius(3px);
       position: absolute;
       top: -3px;
diff --git a/cms/static/sass/_mixins-inherited.scss b/cms/static/sass/_mixins-inherited.scss
index 2b3224e6d4..82813153fa 100644
--- a/cms/static/sass/_mixins-inherited.scss
+++ b/cms/static/sass/_mixins-inherited.scss
@@ -120,8 +120,8 @@
 // mixins - grandfathered
 @mixin button {
   @include font-size(14);
+  @include transition(background-color 0.15s, box-shadow 0.15s);
   box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 0 0 rgba(0, 0, 0, 0);
-  @include transition(background-color .15s, box-shadow .15s);
   display: inline-block;
   padding: ($baseline/5) $baseline ($baseline/4);
   font-weight: 700;
diff --git a/cms/static/sass/assets/_graphics.scss b/cms/static/sass/assets/_graphics.scss
index 300cf3b692..be047d5215 100644
--- a/cms/static/sass/assets/_graphics.scss
+++ b/cms/static/sass/assets/_graphics.scss
@@ -1,11 +1,11 @@
 .expand-collapse-icon {
+	@include transition(none);
 	position: relative;
 	display: inline-block;
 	width: 9px;
 	height: 11px;
 	margin-right: 10px;
 	background: url(../img/expand-collapse-icons.png) no-repeat;
-	@include transition(none);
 
 	&.expand {
 		top: 1px;
@@ -101,7 +101,7 @@
 	background: url(../img/edit-icon.png) no-repeat;
 
 	&.white {
-		background: url(../img/edit-icon-white.png) no-repeat;		
+		background: url(../img/edit-icon-white.png) no-repeat;
 	}
 }
 
@@ -132,7 +132,7 @@
 	background: url(../img/delete-icon.png) no-repeat;
 
 	&.white {
-		background: url(../img/delete-icon-white.png) no-repeat;		
+		background: url(../img/delete-icon-white.png) no-repeat;
 	}
 }
 
diff --git a/cms/static/sass/elements/_footer.scss b/cms/static/sass/elements/_footer.scss
index b9e2619c76..c767feee4e 100644
--- a/cms/static/sass/elements/_footer.scss
+++ b/cms/static/sass/elements/_footer.scss
@@ -49,7 +49,7 @@
           background: transparent;
 
           [class^="icon-"] {
-            @include transition(top .25s ease-in-out .25s);
+            @include transition(top 0.25s ease-in-out 0.25s);
             @include font-size(15);
             display: inline-block;
             vertical-align: middle;
diff --git a/cms/static/sass/elements/_header.scss b/cms/static/sass/elements/_header.scss
index a828e05252..ff2861143e 100644
--- a/cms/static/sass/elements/_header.scss
+++ b/cms/static/sass/elements/_header.scss
@@ -160,7 +160,7 @@
 
     // entire link
     .course-link {
-      @include transition(color 0.25s ease-in-out);
+      @include transition(color 0.25s ease-in-out 0);
       display: block;
       color: $gray-d1;
 
@@ -310,7 +310,6 @@
 
       .action-signup {
         @include blue-button;
-        @include transition(all .15s);
         @include font-size(14);
         padding: ($baseline/4) ($baseline/2);
         text-transform: uppercase;
@@ -319,7 +318,6 @@
 
       .action-signin {
         @include white-button;
-        @include transition(all .15s);
         @include font-size(14);
         padding: ($baseline/4) ($baseline/2);
         text-transform: uppercase;
diff --git a/cms/static/sass/elements/_system-feedback.scss b/cms/static/sass/elements/_system-feedback.scss
index e22e44487c..886f3bb0d1 100644
--- a/cms/static/sass/elements/_system-feedback.scss
+++ b/cms/static/sass/elements/_system-feedback.scss
@@ -145,7 +145,7 @@
 // prompts
 .wrapper-prompt {
   @extend .depth5;
-  @include transition(all 0.05s ease-in-out);
+  @include transition(all 0.05s ease-in-out 0);
   position: fixed;
   top: 0;
   background: $black-t0;
@@ -364,7 +364,7 @@
   }
 
   [class^="icon"] {
-    @include transition (color 0.5s ease-in-out);
+    @include transition (color 0.50s ease-in-out 0);
     @include font-size(22);
     width: flex-grid(1, 12);
     height: ($baseline*1.25);
@@ -531,7 +531,7 @@
   }
 
   [class^="icon"] {
-    @include transition (color 0.5s ease-in-out);
+    @include transition (color 0.50s ease-in-out 0);
     @include font-size(22);
     width: flex-grid(1, 12);
     margin: ($baseline/4) flex-gutter() 0 0;
diff --git a/cms/static/sass/views/_account.scss b/cms/static/sass/views/_account.scss
index 7f79fc5fc6..4145c85f0d 100644
--- a/cms/static/sass/views/_account.scss
+++ b/cms/static/sass/views/_account.scss
@@ -70,7 +70,7 @@ body.signup, body.signin {
         .action-primary {
           @include blue-button;
           @extend .t-action2;
-          @include transition(all .15s);
+          @include transition(all 0.15s linear 0);
           display: block;
           width: 100%;
           padding: ($baseline*0.75) ($baseline/2);
@@ -109,7 +109,7 @@ body.signup, body.signin {
 
           label {
             @extend  .t-copy-sub1;
-            @include transition(color, 0.15s, ease-in-out);
+            @include transition(color 0.15s ease-in-out 0);
             margin: 0 0 ($baseline/4) 0;
 
             &.is-focused {
@@ -172,7 +172,7 @@ body.signup, body.signin {
 
           .tip {
             @extend .t-copy-sub2;
-            @include transition(color, 0.15s, ease-in-out);
+            @include transition(color 0.15s ease-in-out 0);
             display: block;
             margin-top: ($baseline/4);
             color: $gray-l3;
diff --git a/cms/static/sass/views/_checklists.scss b/cms/static/sass/views/_checklists.scss
index ddc6c80c99..d9c3513eeb 100644
--- a/cms/static/sass/views/_checklists.scss
+++ b/cms/static/sass/views/_checklists.scss
@@ -31,7 +31,7 @@ body.course.checklists {
       background: $gray-l4;
 
       .viz-checklist-status-value {
-        @include transition(width 2s ease-in-out .25s);
+        @include transition(width 2.0s ease-in-out .25s);
         position: absolute;
         top: 0;
         left: 0;
@@ -55,13 +55,13 @@ body.course.checklists {
       padding: $baseline ($baseline*1.5);
 
       .checklist-title {
-        @include transition(color .15s .25s ease-in-out);
+        @include transition(color 0.15s ease-in-out 0);
         width: flex-grid(6, 9);
         margin: 0 flex-gutter() 0 0;
         float: left;
 
         .ui-toggle-expansion {
-          @include transition(rotate .15s ease-in-out .25s);
+          @include transition(all 0.15s ease-in-out 0);
           @include font-size(21);
           display: inline-block;
           vertical-align: middle;
@@ -118,8 +118,8 @@ body.course.checklists {
     // checklist actions
     .course-checklist-actions {
       @include clearfix();
+      @include transition(border 0.15s ease-in-out .25s);
       box-shadow: inset 0 1px 1px $shadow-l1;
-      @include transition(border .15s ease-in-out .25s);
       border-top: 1px solid $gray-l2;
       padding: $baseline ($baseline*1.5);
       background: $gray-l4;
@@ -208,8 +208,8 @@ body.course.checklists {
     overflow: hidden;
 
     .task {
-      @include transition(background .15s ease-in-out .25s);
-      @include transition(border .15s ease-in-out .25s);
+      @include transition(background 0.15s ease-in-out 0);
+      @include transition(border 0.15s ease-in-out 0);
       @include clearfix();
       position: relative;
       border-top: 1px solid $white;
@@ -239,7 +239,7 @@ body.course.checklists {
         font-weight: 500;
 
         .task-name {
-          @include transition(color .15s .25s ease-in-out);
+          @include transition(color 0.15s ease-in-out 0);
           vertical-align: baseline;
           cursor: pointer;
           margin-bottom: 0;
@@ -247,20 +247,20 @@ body.course.checklists {
 
         .task-description {
           @extend .t-copy-sub1;
-          @include transition(color .15s .25s ease-in-out);
+          @include transition(color 0.15s ease-in-out 0);
           color: $gray-l2;
         }
 
         .task-support {
           @extend .t-copy-sub2;
-          @include transition(opacity .15s .25s ease-in-out);
+          @include transition(opacity 0.15s ease-in-out 0);
           opacity: 0.0;
           pointer-events: none;
         }
       }
 
       .task-actions {
-        @include transition(opacity .15s .25s ease-in-out);
+        @include transition(opacity 0.15s ease-in-out 0.25s);
         @include clearfix();
         display: inline-block;
         vertical-align: middle;
@@ -274,7 +274,6 @@ body.course.checklists {
         .action-primary {
           @include blue-button;
           @extend .t-action4;
-          @include transition(all .15s);
           font-weight: 600;
           text-align: center;
         }
diff --git a/cms/static/sass/views/_index.scss b/cms/static/sass/views/_index.scss
index c79401fedd..7f416cff0e 100644
--- a/cms/static/sass/views/_index.scss
+++ b/cms/static/sass/views/_index.scss
@@ -151,7 +151,7 @@ body.index {
             background: $white;
 
             .action-zoom {
-              @include transition(bottom .50s ease-in-out);
+              @include transition(bottom 0.25s ease-in-out 0);
               position: absolute;
               bottom: -30px;
               right: ($baseline/2);
@@ -214,7 +214,7 @@ body.index {
 
             .proofpoint {
               @include box-sizing(border-box);
-              @include transition(color .50s ease-in-out);
+              @include transition(all 0.25s ease-in-out 0);
               border-radius: ($baseline/4);
               position: relative;
               top: 0;
@@ -233,6 +233,7 @@ body.index {
               }
 
               &:hover {
+                @extend .fake-link;
                 box-shadow: 0 1px ($baseline/10) $shadow-l1;
                 background: $blue-l5;
                 top: -($baseline/5);
@@ -319,7 +320,6 @@ body.index {
           &.action-primary {
             @extend .t-action1;
             @include blue-button;
-            @include transition(all .15s);
             padding: ($baseline*0.75) ($baseline/2);
             font-weight: 600;
             text-align: center;
diff --git a/cms/static/sass/views/_outline.scss b/cms/static/sass/views/_outline.scss
index 0cc15b9032..2a768ffae7 100644
--- a/cms/static/sass/views/_outline.scss
+++ b/cms/static/sass/views/_outline.scss
@@ -64,9 +64,9 @@ body.course.outline {
 
               .menu {
                 @include font-size(12);
+                @include transition(opacity 0.15s linear 0);
                 border-radius: 4px;
                 box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
-                @include transition(opacity .15s);
                 z-index: 1;
                 display: none;
                 opacity: 0.0;
@@ -246,8 +246,8 @@ body.course.outline {
               }
 
               .section-name-span {
+                @include transition(color 0.15s linear 0);
                 cursor: pointer;
-                @include transition(color .15s);
 
                 &:hover {
                   color: $orange;
@@ -342,10 +342,9 @@ body.course.outline {
 
               .menu {
                 @include font-size(12);
+                @include transition(opacity 0.15s linear 0, display 0.15s linear 0);
                 border-radius: 4px;
                 box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
-                @include transition(opacity .15s);
-                @include transition(display .15s);
                 z-index: 1;
                 display: none;
                 opacity: 0.0;
@@ -428,9 +427,9 @@ body.course.outline {
           }
 
           .expand-collapse-icon {
+              @include transition(none);
               float: left;
               margin: 25px 6px 16px 16px;
-              @include transition(none);
 
               &.expand {
                   background-position: 0 0;
@@ -453,8 +452,8 @@ body.course.outline {
       }
 
       .section-name-span {
+          @include transition(color 0.15s linear 0);
           cursor: pointer;
-          @include transition(color .15s);
 
           &:hover {
               color: $orange;
diff --git a/cms/static/sass/views/_settings.scss b/cms/static/sass/views/_settings.scss
index e1b6fc6ac6..7e3249f4f7 100644
--- a/cms/static/sass/views/_settings.scss
+++ b/cms/static/sass/views/_settings.scss
@@ -98,7 +98,7 @@ body.course.settings {
 
     .tip {
       @extend .t-copy-sub2;
-      @include transition(color, 0.15s, ease-in-out);
+      @include transition(color 0.15s ease-in-out 0);
       display: block;
       margin-top: ($baseline/4);
       color: $gray-l3;
@@ -155,7 +155,7 @@ body.course.settings {
 
         label {
           @extend .t-copy-sub1;
-          @include transition(color, 0.15s, ease-in-out);
+          @include transition(color 0.15s ease-in-out 0);
           margin: 0 0 ($baseline/4) 0;
           font-weight: 400;
 
@@ -714,7 +714,7 @@ body.course.settings {
           }
 
           .tip {
-            @include transition (opacity 0.5s ease-in-out 0s);
+            @include transition(opacity 0.5s ease-in-out 0s);
             opacity: 0.0;
             position: absolute;
             bottom: ($baseline*1.25);
diff --git a/cms/static/sass/views/_static-pages.scss b/cms/static/sass/views/_static-pages.scss
index de03b238cc..7a0f83bfb4 100644
--- a/cms/static/sass/views/_static-pages.scss
+++ b/cms/static/sass/views/_static-pages.scss
@@ -137,11 +137,11 @@ body.course.static-pages {
   }
 
   .xmodule_display {
+    @include transition(background-color 3.0s linear 0);
     padding: 20px 20px 22px;
     font-size: 24px;
     font-weight: 300;
     background: #fff;
-    @include transition(background-color 3s);
   }
 
   .static-page-item {
@@ -186,12 +186,12 @@ body.course.static-pages {
 
   .page-contents {
     @include box-sizing(border-box);
+    @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3));
     width: 100%;
     height: 360px;
     padding: 15px;
     border: 1px solid #b0b6c2;
     border-radius: 2px;
-    @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3));
     background-color: #edf1f5;
     box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset;
     font-family: Monaco, monospace;
diff --git a/cms/static/sass/views/_subsection.scss b/cms/static/sass/views/_subsection.scss
index 5c54ec3a18..d08cc58114 100644
--- a/cms/static/sass/views/_subsection.scss
+++ b/cms/static/sass/views/_subsection.scss
@@ -335,6 +335,7 @@ body.course.subsection {
       }
 
       .menu {
+        @include transition(opacity 0.15s linear 0);
         z-index: 1;
         position: absolute;
         top: -12px;
@@ -349,7 +350,6 @@ body.course.subsection {
         font-size: 12px;
         border-radius: 4px;
         box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
-        @include transition(opacity .15s);
 
 
         li {
diff --git a/cms/static/sass/views/_unit.scss b/cms/static/sass/views/_unit.scss
index 471bdc4848..c6e6ee0d4f 100644
--- a/cms/static/sass/views/_unit.scss
+++ b/cms/static/sass/views/_unit.scss
@@ -250,15 +250,15 @@ body.course.unit {
           .new-component-template {
 
             a {
+              @include transition(none);
               background: #fff;
               border: 0px;
               color: #3c3c3c;
-              @include transition (none);
 
               &:hover {
+                @include transition(background-color 0.15s linear 0);
                 background: tint($green,30%);
                 color: #fff;
-                @include transition(background-color .15s);
               }
             }
 
@@ -291,7 +291,7 @@ body.course.unit {
                 float: left;
 
                 [class^="icon-"] {
-                  @include transition(opacity .15s);
+                  @include transition(opacity 0.15s linear 0);
                   display: inline-block;
                   top: 1px;
                   margin-right: 5px;
@@ -303,7 +303,7 @@ body.course.unit {
               }
 
               .editor-indicator {
-                @include transition(opacity .15s);
+                @include transition(opacity 0.15s linear 0);
                 float: right;
                 position: relative;
                 top: 3px;
@@ -507,7 +507,7 @@ body.course.unit {
         @include blue-button;
 
         &.is-set {
-          @include transition(box-shadow 0.5 ease-in-out);
+          @include transition(box-shadow 0.5s ease-in-out 0);
           @include linear-gradient($blue, $blue);
           color: $blue-d1;
           box-shadow: inset 0 1px 2px 1px $shadow-l1;
diff --git a/common/static/sass/_mixins.scss b/common/static/sass/_mixins.scss
index c376644237..e3108a72bf 100644
--- a/common/static/sass/_mixins.scss
+++ b/common/static/sass/_mixins.scss
@@ -117,7 +117,7 @@
 // extends - buttons
 .btn {
   @include box-sizing(border-box);
-  @include transition(color 0.25s ease-in-out, border-color 0.25s ease-in-out, background 0.25s ease-in-out, box-shadow 0.25s ease-in-out);
+  @include transition(color 0.25s ease-in-out 0, border-color 0.25s ease-in-out 0, background 0.25s ease-in-out 0, box-shadow 0.25s ease-in-out 0);
   display: inline-block;
   cursor: pointer;