Studio: abstracts and formalizes set animation/transition Sass variables

cms/static/sass/_base.scss

@@ -19,7 +19,7 @@ body, input, button {
 }
 
 a {
-  @include transition(color 0.15s ease-in-out 0);
+  @include transition(color $tmg-f2 ease-in-out 0);
   text-decoration: none;
   color: $blue;
 
@@ -642,7 +642,7 @@ hr.divide {
 
 // system notifications
 .toast-notification {
-  @include transition(all 0.2s linear 0);
+  @include transition(all $tmg-f2 linear 0);
   display: none;
   position: fixed;
   top: 20px;
@@ -794,7 +794,7 @@ hr.divide {
 
 .tooltip {
   @include font-size(12);
-  @include transition(opacity 0.1s ease-out 0);
+  @include transition(opacity $tmg-f3 ease-out 0);
   position: absolute;
   top: 0;
   left: 0;
@@ -867,7 +867,7 @@ body.js {
     background: $white;
 
     .action-modal-close {
-      @include transition(top 0.15s ease-in-out 0);
+      @include transition(top $tmg-f3 ease-in-out 0);
       @include border-bottom-radius(3px);
       position: absolute;
       top: -3px;

cms/static/sass/_variables.scss

@@ -161,6 +161,17 @@ $shadow-d2: rgba($black, 0.6);
 
 // ====================
 
+// timing - used for animation/transition syncing
+$tmg-s3: 3.0s;
+$tmg-s2: 2.0s;
+$tmg-s1: 1.0s;
+$tmg-avg: 0.75s;
+$tmg-f1: 0.50s;
+$tmg-f2: 0.25s;
+$tmg-f3: 0.125s;
+
+// ====================
+
 // specific UI
 $notification-height: ($baseline*10);
 

cms/static/sass/assets/_anims.scss

@@ -18,7 +18,7 @@
 
 // canned animation - use if you want out of the box/non-customized anim
 .anim-fadeIn {
-  @include animation(fadeIn 0.25s linear 1);
+  @include animation(fadeIn $tmg-f2 linear 1);
 }
 
 
@@ -39,7 +39,7 @@
 
 // canned animation - use if you want out of the box/non-customized anim
 .anim-fadeOut {
-  @include animation(fadeOut 0.25s linear 1);
+  @include animation(fadeOut $tmg-f2 linear 1);
 }
 
 
@@ -63,7 +63,7 @@
 
 // canned animation - use if you want out of the box/non-customized anim
 .anim-rotateUp {
-  @include animation(rotateUp 0.25s ease-in-out 1);
+  @include animation(rotateUp $tmg-f2 ease-in-out 1);
 }
 
 
@@ -84,7 +84,7 @@
 
 // canned animation - use if you want out of the box/non-customized anim
 .anim-rotateDown {
-  @include animation(rotateDown 0.25s ease-in-out 1);
+  @include animation(rotateDown $tmg-f2 ease-in-out 1);
 }
 
 
@@ -105,7 +105,7 @@
 
 // canned animation - use if you want out of the box/non-customized anim
 .anim-rotateCW {
-  @include animation(rotateCW 1.0s linear infinite);
+  @include animation(rotateCW $tmg-s1 linear infinite);
 }
 
 
@@ -126,7 +126,7 @@
 
 // canned  animation - use if you want out of the box/non-customized anim
 .anim-rotateCCW {
-  @include animation(rotateCCW 1.0s linear infinite);
+  @include animation(rotateCCW $tmg-s1 linear infinite);
 }
 
 
@@ -186,7 +186,7 @@
 
 // canned animation - use if you want out of the box/non-customized anim
 .anim-bounceIn {
-  @include animation(bounceIn 0.5s ease-in-out 1);
+  @include animation(bounceIn $tmg-f1 ease-in-out 1);
 }
 
 
@@ -209,5 +209,5 @@
 
 // canned animation - use if you want out of the box/non-customized anim
 .anim-bounceOut {
-  @include animation(bounceOut 0.5s ease-in-out 1);
+  @include animation(bounceOut $tmg-f1 ease-in-out 1);
 }

cms/static/sass/elements/_footer.scss

@@ -49,7 +49,7 @@
           background: transparent;
 
           [class^="icon-"] {
-            @include transition(top 0.25s ease-in-out 0.25s);
+            @include transition(top $tmg-f2 ease-in-out 0.25s);
             @include font-size(15);
             display: inline-block;
             vertical-align: middle;

cms/static/sass/elements/_header.scss

@@ -77,7 +77,7 @@
     .title {
       @extend .t-action2;
       @extend .btn-dd-nav-primary;
-      @include transition(all 0.25s ease-in-out 0);
+      @include transition(all $tmg-f2 ease-in-out 0);
 
       .label, .icon-caret-down {
 
@@ -160,7 +160,7 @@
 
     // entire link
     .course-link {
-      @include transition(color 0.25s ease-in-out 0);
+      @include transition(color $tmg-f2 ease-in-out 0);
       display: block;
       color: $gray-d1;
 

cms/static/sass/elements/_navigation.scss

@@ -33,7 +33,7 @@ nav {
     }
 
     .ui-toggle-dd {
-      @include transition(all 0.25s ease-in-out 0);
+      @include transition(all $tmg-f2 ease-in-out 0);
       margin-left: ($baseline/10);
       display: inline-block;
       vertical-align: middle;
@@ -58,7 +58,7 @@ nav {
   }
 
   .wrapper-nav-sub {
-    @include transition (opacity 0.25s ease-in-out 0s);
+    @include transition(opacity $tmg-f2 ease-in-out 0s);
     position: absolute;
     top: ($baseline*2.5);
     opacity: 0.0;

cms/static/sass/elements/_system-feedback.scss

@@ -145,7 +145,7 @@
 // prompts
 .wrapper-prompt {
   @extend .depth5;
-  @include transition(all 0.05s ease-in-out 0);
+  @include transition(all $tmg-f3 ease-in-out 0);
   position: fixed;
   top: 0;
   background: $black-t0;
@@ -437,7 +437,7 @@
   &.saving {
 
     [class^="icon"] {
-      @include animation(rotateCW 3.0s linear infinite);
+      @include animation(rotateCW $tmg-s3 linear infinite);
       width: 25px;
       margin: -4px 10px 0 0;
       @include transform-origin(52% 60%);
@@ -644,7 +644,7 @@
       pointer-events: auto;
 
       .prompt {
-        @include animation(bounceIn 0.5s ease-in-out 1);
+        @include animation(bounceIn $tmg-f1 ease-in-out 1);
       }
     }
   }
@@ -660,7 +660,7 @@
     .wrapper-prompt {
 
       .prompt {
-        @include animation(bounceOut 0.5s ease-in-out 1);
+        @include animation(bounceOut $tmg-f1 ease-in-out 1);
       }
     }
   }
@@ -680,12 +680,12 @@
 
     // varying animations
     &.is-shown {
-      @include animation(notificationSlideUp 1.0s ease-in-out 1);
+      @include animation(notificationSlideUp $tmg-s1 ease-in-out 1);
       @include animation-fill-mode(forwards);
     }
 
     &.is-hiding {
-      @include animation(notificationSlideDown 1.0s ease-in-out 1);
+      @include animation(notificationSlideDown $tmg-s1 ease-in-out 1);
       @include animation-fill-mode(forwards);
     }
   }

cms/static/sass/elements/_system-help.scss

@@ -14,7 +14,7 @@
 
   .copy {
     @extend .t-copy-sub1;
-    @include transition(opacity 0.25s ease-in-out 0);
+    @include transition(opacity $tmg-f2 ease-in-out 0);
     opacity: 0.75;
   }
 

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 0.15s linear 0);
+          @include transition(all $tmg-f3 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 0);
+            @include transition(color $tmg-f3 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 0);
+            @include transition(color $tmg-f3 ease-in-out 0);
             display: block;
             margin-top: ($baseline/4);
             color: $gray-l3;

cms/static/sass/views/_checklists.scss

@@ -31,7 +31,7 @@ body.course.checklists {
       background: $gray-l4;
 
       .viz-checklist-status-value {
-        @include transition(width 2.0s ease-in-out .25s);
+        @include transition(width $tmg-s2 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 0.15s ease-in-out 0);
+        @include transition(color $tmg-f2 ease-in-out 0);
         width: flex-grid(6, 9);
         margin: 0 flex-gutter() 0 0;
         float: left;
 
         .ui-toggle-expansion {
-          @include transition(all 0.15s ease-in-out 0);
+          @include transition(all $tmg-f2 ease-in-out 0);
           @include font-size(21);
           display: inline-block;
           vertical-align: middle;
@@ -118,7 +118,7 @@ body.course.checklists {
     // checklist actions
     .course-checklist-actions {
       @include clearfix();
-      @include transition(border 0.15s ease-in-out .25s);
+      @include transition(border $tmg-f2 ease-in-out .25s);
       box-shadow: inset 0 1px 1px $shadow-l1;
       border-top: 1px solid $gray-l2;
       padding: $baseline ($baseline*1.5);
@@ -208,8 +208,7 @@ body.course.checklists {
     overflow: hidden;
 
     .task {
-      @include transition(background 0.15s ease-in-out 0);
-      @include transition(border 0.15s ease-in-out 0);
+      @include transition(background $tmg-f2 ease-in-out 0, border $tmg-f3 ease-in-out 0);
       @include clearfix();
       position: relative;
       border-top: 1px solid $white;
@@ -239,7 +238,7 @@ body.course.checklists {
         font-weight: 500;
 
         .task-name {
-          @include transition(color 0.15s ease-in-out 0);
+          @include transition(color $tmg-f2 ease-in-out 0);
           vertical-align: baseline;
           cursor: pointer;
           margin-bottom: 0;
@@ -247,20 +246,20 @@ body.course.checklists {
 
         .task-description {
           @extend .t-copy-sub1;
-          @include transition(color 0.15s ease-in-out 0);
+          @include transition(color $tmg-f2 ease-in-out 0);
           color: $gray-l2;
         }
 
         .task-support {
           @extend .t-copy-sub2;
-          @include transition(opacity 0.15s ease-in-out 0);
+          @include transition(opacity $tmg-f2 ease-in-out 0);
           opacity: 0.0;
           pointer-events: none;
         }
       }
 
       .task-actions {
-        @include transition(opacity 0.15s ease-in-out 0.25s);
+        @include transition(opacity $tmg-f2 ease-in-out 0.25s);
         @include clearfix();
         display: inline-block;
         vertical-align: middle;

cms/static/sass/views/_index.scss

@@ -151,7 +151,7 @@ body.index {
             background: $white;
 
             .action-zoom {
-              @include transition(bottom 0.25s ease-in-out 0);
+              @include transition(bottom $tmg-f2 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(all 0.25s ease-in-out 0);
+              @include transition(all $tmg-f2 ease-in-out 0);
               border-radius: ($baseline/4);
               position: relative;
               top: 0;

cms/static/sass/views/_outline.scss

@@ -64,7 +64,7 @@ body.course.outline {
 
               .menu {
                 @include font-size(12);
-                @include transition(opacity 0.15s linear 0);
+                @include transition(opacity $tmg-f2 linear 0);
                 border-radius: 4px;
                 box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
                 z-index: 1;
@@ -246,7 +246,7 @@ body.course.outline {
               }
 
               .section-name-span {
-                @include transition(color 0.15s linear 0);
+                @include transition(color $tmg-f2 linear 0);
                 cursor: pointer;
 
                 &:hover {
@@ -342,7 +342,7 @@ body.course.outline {
 
               .menu {
                 @include font-size(12);
-                @include transition(opacity 0.15s linear 0, display 0.15s linear 0);
+                @include transition(opacity $tmg-f2 linear 0, display $tmg-f2 linear 0);
                 border-radius: 4px;
                 box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
                 z-index: 1;
@@ -452,7 +452,7 @@ body.course.outline {
       }
 
       .section-name-span {
-          @include transition(color 0.15s linear 0);
+          @include transition(color $tmg-f2 linear 0);
           cursor: pointer;
 
           &:hover {

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 0);
+      @include transition(color $tmg-f2 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 0);
+          @include transition(color $tmg-f2 ease-in-out 0);
           margin: 0 0 ($baseline/4) 0;
           font-weight: 400;
 
@@ -713,7 +713,7 @@ body.course.settings {
           }
 
           .tip {
-            @include transition(opacity 0.5s ease-in-out 0s);
+            @include transition(opacity $tmg-f1 ease-in-out 0s);
             opacity: 0.0;
             position: absolute;
             bottom: ($baseline*1.25);

cms/static/sass/views/_static-pages.scss

@@ -137,7 +137,7 @@ body.course.static-pages {
   }
 
   .xmodule_display {
-    @include transition(background-color 3.0s linear 0);
+    @include transition(background-color $tmg-s3 linear 0);
     padding: 20px 20px 22px;
     font-size: 24px;
     font-weight: 300;

cms/static/sass/views/_subsection.scss

@@ -335,7 +335,7 @@ body.course.subsection {
       }
 
       .menu {
-        @include transition(opacity 0.15s linear 0);
+        @include transition(opacity $tmg-f2 linear 0);
         z-index: 1;
         position: absolute;
         top: -12px;

cms/static/sass/views/_unit.scss

@@ -256,7 +256,7 @@ body.course.unit {
               color: #3c3c3c;
 
               &:hover {
-                @include transition(background-color 0.15s linear 0);
+                @include transition(background-color $tmg-f2 linear 0);
                 background: tint($green,30%);
                 color: #fff;
               }
@@ -291,7 +291,7 @@ body.course.unit {
                 float: left;
 
                 [class^="icon-"] {
-                  @include transition(opacity 0.15s linear 0);
+                  @include transition(opacity $tmg-f2 linear 0);
                   display: inline-block;
                   top: 1px;
                   margin-right: 5px;
@@ -303,7 +303,7 @@ body.course.unit {
               }
 
               .editor-indicator {
-                @include transition(opacity 0.15s linear 0);
+                @include transition(opacity $tmg-f2 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.5s ease-in-out 0);
+          @include transition(box-shadow $tmg-f1 ease-in-out 0);
           @include linear-gradient($blue, $blue);
           color: $blue-d1;
           box-shadow: inset 0 1px 2px 1px $shadow-l1;
@@ -587,7 +587,7 @@ body.course.unit {
       }
 
       &:hover {
-        @include transition(opacity 0.25s ease-in-out);
+        @include transition(opacity $tmg-f2 ease-in-out);
         opacity: 1.0;
       }
 
@@ -612,7 +612,7 @@ body.course.unit {
 
       label.setting-label {
         @extend .t-copy-sub1;
-        @include transition(color, 0.15s, ease-in-out);
+        @include transition(color $tmg-f2 ease-in-out 0s);
         font-weight: 400;
         vertical-align: middle;
         display: inline-block;
@@ -673,7 +673,7 @@ body.course.unit {
 
         &:focus {
           box-shadow: 0 0 1px $shadow;
-          @include transition(opacity 0.25s ease-in-out);
+          @include transition(opacity $tmg-f2 ease-in-out 0);
           background-color: $yellow;
         }
 
@@ -698,7 +698,7 @@ body.course.unit {
 
         &:hover {
           box-shadow: 0 1px 1px $shadow;
-          @include transition(opacity 0.15s ease-in-out);
+          @include transition(opacity $tmg-f2 ease-in-out 0);
           background-color: $blue-s3;
           border: 1px solid $blue-s3;
           color: $white;
@@ -956,7 +956,7 @@ body.unit {
 
 
   &:hover {
-    @include transition(opacity 0.25s ease-in-out);
+    @include transition(opacity $tmg-f2 ease-in-out 0);
     opacity: 1.0s;
   }
 }