Merge pull request #347 from edx/update-sass

Update SASS and Bourbon, add Neat
2013-07-10 11:09:11 -07:00
parent 9824ba43cf 18474986f3
commit cb62797306
147 changed files with 2725 additions and 1753 deletions
--- a/cms/static/sass/_base.scss
+++ b/cms/static/sass/_base.scss
@@ -19,9 +19,9 @@ body, input, button {
 }

 a {
+  @include transition(color $tmg-f2 ease-in-out 0s);
  text-decoration: none;
  color: $blue;
-  @include transition(color 0.25s ease-in-out);

  &:hover {
    color: $orange-d1;
@@ -591,8 +591,8 @@ hr.divide {
 }

 .window {
-  // @include border-radius(3px);
-  // @include box-shadow(0 1px 1px $shadow-l1);
+  // border-radius: 3px;
+  // box-shadow: 0 1px 1px $shadow-l1;
  // margin-bottom: $baseline;
  // border: 1px solid $gray-l2;
  // background: $white;
@@ -607,7 +607,7 @@ hr.divide {
    border-radius: 2px 2px 0 0;
    @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
    background-color: $lightBluishGrey;
-    @include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset);
+    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
    font-size: 14px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
  }
@@ -642,6 +642,7 @@ hr.divide {

 // system notifications
 .toast-notification {
+  @include transition(all $tmg-f2 linear 0s);
  display: none;
  position: fixed;
  top: 20px;
@@ -653,11 +654,10 @@ hr.divide {
  border: 1px solid #333;
  @include linear-gradient(top, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0));
  background-color: rgba(30, 30, 30, .92);
-  @include box-shadow(0 1px 3px rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .1) inset);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .1) inset;
  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 $tmg-f3 ease-out 0s);
  position: absolute;
  top: 0;
  left: 0;
@@ -857,7 +857,7 @@ body.js {
  .content-modal {
    @include border-bottom-radius(2px);
    @include box-sizing(border-box);
-    @include box-shadow(0 2px 4px $shadow-d1);
+    box-shadow: 0 2px 4px $shadow-d1;
    position: relative;
    display: none;
    width: 700px;
@@ -867,7 +867,7 @@ body.js {
    background: $white;

    .action-modal-close {
-      @include transition(top .25s ease-in-out);
+      @include transition(top $tmg-f3 ease-in-out 0s);
      @include border-bottom-radius(3px);
      position: absolute;
      top: -3px;
--- a/cms/static/sass/_mixins-inherited.scss
+++ b/cms/static/sass/_mixins-inherited.scss
@@ -1,454 +0,0 @@
-// studio - utilities - INHERITED mixins and extends
-
-// NOTE: these are older/poorly architected mixins that we want to move away from using or refactor in the future.
-// They are still referenced when styliing current interface elements and as such need to be preserved for the time being.
-// talbs: we need to slowly ween ourselves off of these
-// ====================
-
-
-// line-height (old way)
-@function lh($amount: 1) {
-  @return $body-line-height * $amount;
-}
-
-// inherited - vertical and horizontal centering
-@mixin vertically-and-horizontally-centered ($height, $width) {
-  left: 50%;
-  margin-left: -$width / 2;
-  min-height: $height;
-  min-width: $width;
-  position: absolute;
-  top: 150px;
-}
-
-// ====================
-
-// inherited - dividers
-.faded-hr-divider {
-  @include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%,
-                                                    rgba(200,200,200, 1) 50%,
-                                                    rgba(200,200,200, 0)));
-  height: 1px;
-  width: 100%;
-}
-
-.faded-hr-divider-medium {
-  @include background-image(linear-gradient(180deg, rgba(240,240,240, 0) 0%,
-                                                    rgba(240,240,240, 1) 50%,
-                                                    rgba(240,240,240, 0)));
-  height: 1px;
-  width: 100%;
-}
-
-.faded-hr-divider-light {
-  @include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%,
-                                                    rgba(255,255,255, 0.8) 50%,
-                                                    rgba(255,255,255, 0)));
-  height: 1px;
-  width: 100%;
-}
-
-.faded-vertical-divider {
-  @include background-image(linear-gradient(90deg, rgba(200,200,200, 0) 0%,
-                                                    rgba(200,200,200, 1) 50%,
-                                                    rgba(200,200,200, 0)));
-  height: 100%;
-  width: 1px;
-}
-
-.faded-vertical-divider-light {
-  @include background-image(linear-gradient(90deg, rgba(255,255,255, 0) 0%,
-                                                    rgba(255,255,255, 0.6) 50%,
-                                                    rgba(255,255,255, 0)));
-  height: 100%;
-  width: 1px;
-}
-
-.vertical-divider {
-  @extend .faded-vertical-divider;
-  position: relative;
-
-  &::after {
-    @extend .faded-vertical-divider-light;
-    content: "";
-    display: block;
-    position: absolute;
-    left: 1px;
-  }
-}
-
-.horizontal-divider {
-  border: none;
-  @extend .faded-hr-divider;
-  position: relative;
-
-  &::after {
-    @extend .faded-hr-divider-light;
-    content: "";
-    display: block;
-    position: absolute;
-    top: 1px;
-  }
-}
-
-.fade-right-hr-divider {
-  @include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%,
-                                                    rgba(200,200,200, 1)));
-  border: none;
-}
-
-.fade-left-hr-divider {
-  @include background-image(linear-gradient(180deg, rgba(200,200,200, 1) 0%,
-                                                    rgba(200,200,200, 0)));
-  border: none;
-}
-
-// ====================
-
-// inherited - ui
-.window {
-  @include clearfix();
-  @include border-radius(3px);
-  @include box-shadow(0 1px 1px $shadow-l1);
-  margin-bottom: $baseline;
-  border: 1px solid $gray-l2;
-  background: $white;
-}
-
-// ====================
-
-// mixins - grandfathered
-@mixin button {
-  @include font-size(14);
-  @include 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;
-
-  &.disabled {
-    border: 1px solid $gray-l1 !important;
-    border-radius: 3px !important;
-    background: $gray-l1 !important;
-    color: $gray-d1 !important;
-    pointer-events: none;
-    cursor: none;
-    &:hover {
-      box-shadow: 0 0 0 0 !important;
-    }
-  }
-
-  &:hover, &.active {
-    @include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset, 0 1px 1px rgba(0, 0, 0, .15));
-  }
-}
-
-@mixin green-button {
-  @include button;
-  @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
-  @include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
-  border: 1px solid $green-d1;
-  border-radius: 3px;
-  background-color: $green;
-  color: $white;
-
-  &:hover {
-    background-color: $green-s1;
-    color: $white;
-  }
-
-  &.disabled {
-    border: 1px solid $green-l3 !important;
-    background: $green-l3 !important;
-    color: $white !important;
-    @include box-shadow(none);
-  }
-}
-
-@mixin blue-button {
-  @include button;
-  @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
-  border: 1px solid $blue-d1;
-  border-radius: 3px;
-  background-color: $blue;
-  color: $white;
-
-  &:hover, &.active {
-    background-color: $blue-s2;
-    color: $white;
-  }
-
-  &.disabled {
-    @include box-shadow(none);
-    border: 1px solid $blue-l3 !important;
-    background: $blue-l3 !important;
-    color: $white !important;
-  }
-}
-
-@mixin red-button {
-  @include button;
-  @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
-  border: 1px solid $red-d1;
-  border-radius: 3px;
-  background-color: $red;
-  color: $white;
-
-  &:hover, &.active {
-    background-color: $red-s1;
-    color: $white;
-  }
-
-  &.disabled {
-    @include box-shadow(none);
-    border: 1px solid $red-l3 !important;
-    background: $red-l3 !important;
-    color: $white !important;
-  }
-}
-
-@mixin pink-button {
-  @include button;
-  @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
-  border: 1px solid $pink-d1;
-  border-radius: 3px;
-  background-color: $pink;
-  color: $white;
-
-  &:hover, &.active {
-    background-color: $pink-s1;
-    color: $white;
-  }
-
-  &.disabled {
-    @include box-shadow(none);
-    border: 1px solid $pink-l3 !important;
-    background: $pink-l3 !important;
-    color: $white !important;
-  }
-}
-
-@mixin orange-button {
-  @include button;
-  @include linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 60%);
-  @include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
-  border: 1px solid $orange-d1;
-  border-radius: 3px;
-  background-color: $orange;
-  color: $gray-d2;
-
-  &:hover {
-    background-color: $orange-s2;
-    color: $gray-d2;
-  }
-
-  &.disabled {
-    border: 1px solid $orange-l3 !important;
-    background: $orange-l2 !important;
-    color: $gray-l1 !important;
-    @include box-shadow(none);
-  }
-}
-
-@mixin white-button {
-  @include button;
-  @include linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
-  @include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
-  border: 1px solid $mediumGrey;
-  border-radius: 3px;
-  background-color: #dfe5eb;
-  color: rgb(92, 103, 122);
-  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
-
-  &:hover {
-    background-color: rgb(222, 236, 247);
-    color: rgb(92, 103, 122);
-  }
-}
-
-@mixin grey-button {
-  @include button;
-  @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
-  @include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
-  border: 1px solid $gray-d2;
-  border-radius: 3px;
-  background-color: #d1dae3;
-  color: #6d788b;
-
-  &:hover {
-    background-color: #d9e3ee;
-    color: #6d788b;
-  }
-}
-
-@mixin gray-button {
-  @include button;
-  @include linear-gradient(top, $white-t1, rgba(255, 255, 255, 0));
-  @include box-shadow(0 1px 0 $white-t1 inset);
-  border: 1px solid $gray-d1;
-  border-radius: 3px;
-  background-color: $gray-d2;
-  color: $gray-l3;
-
-  &:hover {
-    background-color: $gray-d3;
-    color: $white;
-  }
-}
-
-@mixin dark-grey-button {
-  @include button;
-  border: 1px solid $gray-d2;
-  border-radius: 3px;
-  background: -webkit-linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0)) $gray-d1;
-  box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset;
-  color: $white;
-
-  &:hover {
-    background-color: $gray-d4;
-    color: $white;
-  }
-}
-
-@mixin edit-box {
-  @include box-shadow(0 1px 0 rgba(255, 255, 255, .2) inset);
-  padding: 15px 20px;
-  border-radius: 3px;
-  background-color: $lightBluishGrey2;
-  color: #3c3c3c;
-
-  label {
-    color: $baseFontColor;
-  }
-
-  input,
-  textarea {
-    border: 1px solid $darkGrey;
-  }
-
-  textarea {
-    min-height: 80px;
-  }
-
-  h5 {
-    margin-bottom: 8px;
-    color: #fff;
-    font-weight: 700;
-  }
-
-  .row {
-    margin-bottom: 10px;
-    padding: 0;
-    border: none;
-  }
-
-  .save-button {
-    @include blue-button;
-    margin-top: 0;
-  }
-
-  .cancel-button {
-    @include white-button;
-    margin-top: 0;
-  }
-}
-
-@mixin tree-view {
-  border: 1px solid $mediumGrey;
-  background: $lightGrey;
-
-  .branch {
-    margin-bottom: 10px;
-
-    &.collapsed {
-      margin-bottom: 0;
-    }
-  }
-
-  .branch > .section-item {
-    border-top: 1px solid #c5cad4;
-  }
-
-  .section-item {
-    position: relative;
-    display: block;
-    padding: 6px 8px 8px 16px;
-    background: #edf1f5;
-    font-size: 13px;
-
-    &:hover {
-      background: #fffcf1;
-
-      .item-actions {
-        display: block;
-      }
-    }
-
-    &.editing {
-      background: #fffcf1;
-    }
-
-    .draft-item:after,
-    .public-item:after,
-    .private-item:after {
-      margin-left: 3px;
-      font-size: 9px;
-      font-weight: 600;
-      text-transform: uppercase;
-    }
-
-    .draft-item:after {
-      content: "- draft";
-    }
-
-    .private-item:after {
-      content: "- private";
-    }
-
-    .private-item {
-      color: #a4aab7;
-    }
-
-    .draft-item {
-      color: #9f7d10;
-    }
-  }
-
-  a {
-    color: $baseFontColor;
-
-    &.new-unit-item {
-      color: #6d788b;
-    }
-  }
-
-  ol {
-    .section-item {
-      padding-left: 56px;
-    }
-
-    .new-unit-item {
-      margin-left: 56px;
-    }
-  }
-
-  ol ol {
-    .section-item {
-      padding-left: 96px;
-    }
-
-    .new-unit-item {
-      margin-left: 96px;
-    }
-  }
-}
-
-// ====================
-
-// sunsetted mixins
-@mixin active {
-  @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
-  @include box-shadow(0 -1px 0 rgba(0, 0, 0, .2) inset, 0 1px 0 #fff inset);
-  background-color: rgba(255, 255, 255, .3);
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
-}
--- a/cms/static/sass/_mixins-inherited.scss
+++ b/cms/static/sass/_mixins-inherited.scss
@@ -0,0 +1 @@
+../../../common/static/sass/_mixins-inherited.scss
--- a/cms/static/sass/_reset.scss
+++ b/cms/static/sass/_reset.scss
@@ -143,7 +143,7 @@ abbr[title] {
 	width: 100%;
 	@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
 	//background-color: $lightBluishGrey;
-	@include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset);
+	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset;

 	li:first-child {
 		margin-left: 20px;
--- a/cms/static/sass/_variables.scss
+++ b/cms/static/sass/_variables.scss
@@ -161,6 +161,17 @@ $shadow-d2: rgba($black, 0.6);

 // ====================

+// timing - used for animation/transition mixin 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);

--- a/cms/static/sass/assets/_anims.scss
+++ b/cms/static/sass/assets/_anims.scss
@@ -1,36 +1,140 @@
 // studio animations & keyframes
 // ====================

-// rotate clockwise
-@mixin rotateClockwise {
+// fade in
+@include keyframes(fadeIn) {
+  0% {
+    opacity: 0.0;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+
+  100% {
+    opacity: 1.0;
+  }
+}
+
+// canned animation - use if you want out of the box/non-customized anim
+.anim-fadeIn {
+  @include animation(fadeIn $tmg-f2 linear 1);
+}
+
+
+// fade out
+@include keyframes(fadeOut) {
+  0% {
+    opacity: 1.0;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+
+  100% {
+    opacity: 0.0;
+  }
+}
+
+// canned animation - use if you want out of the box/non-customized anim
+.anim-fadeOut {
+  @include animation(fadeOut $tmg-f2 linear 1);
+}
+
+
+// ====================
+
+
+// rotate up
+@include keyframes(rotateUp) {
  0% {
    @include transform(rotate(0deg));
  }

+  50% {
+    @include transform(rotate(-90deg));
+  }
+
+  100% {
+    @include transform(rotate(-180deg));
+  }
+}
+
+// canned animation - use if you want out of the box/non-customized anim
+.anim-rotateUp {
+  @include animation(rotateUp $tmg-f2 ease-in-out 1);
+}
+
+
+// rotate up
+@include keyframes(rotateDown) {
+  0% {
+    @include transform(rotate(0deg));
+  }
+
+  50% {
+    @include transform(rotate(90deg));
+  }
+
+  100% {
+    @include transform(rotate(180deg));
+  }
+}
+
+// canned animation - use if you want out of the box/non-customized anim
+.anim-rotateDown {
+  @include animation(rotateDown $tmg-f2 ease-in-out 1);
+}
+
+
+// rotate clockwise
+@include keyframes(rotateCW) {
+  0% {
+    @include transform(rotate(0deg));
+  }
+
+  50% {
+    @include transform(rotate(180deg));
+  }
+
  100% {
    @include transform(rotate(360deg));
  }
 }

-@-moz-keyframes rotateClockwise { @include rotateClockwise(); }
-@-webkit-keyframes rotateClockwise { @include rotateClockwise(); }
-@-o-keyframes rotateClockwise { @include rotateClockwise(); }
-@keyframes rotateClockwise { @include rotateClockwise();}
-
-@mixin anim-rotateClockwise($duration, $timing: ease-in-out, $count: 1, $delay: 0) {
-  @include animation-name(rotateClockwise);
-  @include animation-duration($duration);
-  @include animation-delay($delay);
-  @include animation-timing-function($timing);
-  @include animation-iteration-count($count);
-  @include animation-fill-mode(both);
-
+// canned animation - use if you want out of the box/non-customized anim
+.anim-rotateCW {
+  @include animation(rotateCW $tmg-s1 linear infinite);
 }

+
+// rotate counter-clockwise
+@include keyframes(rotateCCW) {
+  0% {
+    @include transform(rotate(0deg));
+  }
+
+  50% {
+    @include transform(rotate(-180deg));
+  }
+
+  100% {
+    @include transform(rotate(-360deg));
+  }
+}
+
+// canned  animation - use if you want out of the box/non-customized anim
+.anim-rotateCCW {
+  @include animation(rotateCCW $tmg-s1 linear infinite);
+}
+
+
 // ====================

+
 // notifications slide up
-@mixin notificationsSlideUp {
+@include keyframes(notificationSlideUp) {
  0% {
    @include transform(translateY(0));
  }
@@ -44,25 +148,8 @@
  }
 }

-@-moz-keyframes notificationsSlideUp { @include notificationsSlideUp(); }
-@-webkit-keyframes notificationsSlideUp { @include notificationsSlideUp(); }
-@-o-keyframes notificationsSlideUp { @include notificationsSlideUp(); }
-@keyframes notificationsSlideUp { @include notificationsSlideUp();}
-
-@mixin anim-notificationsSlideUp($duration, $timing: ease-in-out, $count: 1, $delay: 0) {
-  @include animation-name(notificationsSlideUp);
-  @include animation-duration($duration);
-  @include animation-delay($delay);
-  @include animation-timing-function($timing);
-  @include animation-iteration-count($count);
-  @include animation-fill-mode(both);
-
-}
-
-// ====================
-
 // notifications slide down
-@mixin notificationsSlideDown {
+@include keyframes(notificationSlideDown) {
  0% {
    @include transform(translateY(-($notification-height*0.99)));
  }
@@ -76,57 +163,12 @@
  }
 }

-@-moz-keyframes notificationsSlideDown { @include notificationsSlideDown(); }
-@-webkit-keyframes notificationsSlideDown { @include notificationsSlideDown(); }
-@-o-keyframes notificationsSlideDown { @include notificationsSlideDown(); }
-@keyframes notificationsSlideDown { @include notificationsSlideDown();}
-
-@mixin anim-notificationsSlideDown($duration, $timing: ease-in-out, $count: 1, $delay: 0) {
-  @include animation-name(notificationsSlideDown);
-  @include animation-duration($duration);
-  @include animation-delay($delay);
-  @include animation-timing-function($timing);
-  @include animation-iteration-count($count);
-  @include animation-fill-mode(both);
-}

 // ====================

-// bounce in
-@mixin bounceIn {
-  0% {
-    opacity: 0.0;
-    @include transform(scale(0.3));
-  }
-
-  50% {
-    opacity: 1.0;
-    @include transform(scale(1.05));
-  }
-
-  100% {
-    @include transform(scale(1));
-  }
-}
-
-@-moz-keyframes bounceIn { @include bounceIn(); }
-@-webkit-keyframes bounceIn { @include bounceIn(); }
-@-o-keyframes bounceIn { @include bounceIn(); }
-@keyframes bounceIn { @include bounceIn();}
-
-@mixin anim-bounceIn($duration, $timing: ease-in-out, $count: 1, $delay: 0) {
-  @include animation-name(bounceIn);
-  @include animation-duration($duration);
-  @include animation-delay($delay);
-  @include animation-timing-function($timing);
-  @include animation-iteration-count($count);
-  @include animation-fill-mode(both);
-}
-
-// ====================

 // bounce in
-@mixin bounceOut {
+@include keyframes(bounceIn) {
  0% {
    opacity: 0.0;
    @include transform(scale(0.3));
@@ -140,7 +182,16 @@
  100% {
    @include transform(scale(1));
  }
+}

+// canned animation - use if you want out of the box/non-customized anim
+.anim-bounceIn {
+  @include animation(bounceIn $tmg-f1 ease-in-out 1);
+}
+
+
+// bounce out
+@include keyframes(bounceOut) {
  0% {
    @include transform(scale(1));
  }
@@ -156,16 +207,7 @@
  }
 }

-@-moz-keyframes bounceOut { @include bounceOut(); }
-@-webkit-keyframes bounceOut { @include bounceOut(); }
-@-o-keyframes bounceOut { @include bounceOut(); }
-@keyframes bounceOut { @include bounceOut();}
-
-@mixin anim-bounceOut($duration, $timing: ease-in-out, $count: 1, $delay: 0) {
-  @include animation-name(bounceOut);
-  @include animation-duration($duration);
-  @include animation-delay($delay);
-  @include animation-timing-function($timing);
-  @include animation-iteration-count($count);
-  @include animation-fill-mode(both);
+// canned animation - use if you want out of the box/non-customized anim
+.anim-bounceOut {
+  @include animation(bounceOut $tmg-f1 ease-in-out 1);
 }
--- 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;
 	}
 }

--- a/cms/static/sass/elements/_controls.scss
+++ b/cms/static/sass/elements/_controls.scss
@@ -163,7 +163,7 @@
  }

  &.current, &.active, &.is-selected {
-    @include box-shadow(inset 0 1px 2px 1px $shadow-l1);
+    box-shadow: inset 0 1px 2px 1px $shadow-l1;
    border-color: $gray-l3;
  }
 }
--- a/cms/static/sass/elements/_footer.scss
+++ b/cms/static/sass/elements/_footer.scss
@@ -44,12 +44,12 @@
        }

        a {
-          @include border-radius(2px);
+          border-radius: 2px;
          padding: ($baseline/2) ($baseline*0.75);
          background: transparent;

          [class^="icon-"] {
-            @include transition(top .25s ease-in-out .25s);
+            @include transition(top $tmg-f2 ease-in-out 0.25s);
            @include font-size(15);
            display: inline-block;
            vertical-align: middle;
--- a/cms/static/sass/elements/_forms.scss
+++ b/cms/static/sass/elements/_forms.scss
@@ -12,7 +12,7 @@ textarea.text {
  border-radius: 2px;
  @include linear-gradient($gray-l5, $white);
  background-color: $gray-l5;
-  @include box-shadow(inset 0 1px 2px $shadow-l1);
+  box-shadow: inset 0 1px 2px $shadow-l1;
  font-family: 'Open Sans', sans-serif;
  font-size: 11px;
  color: $baseFontColor;
@@ -135,6 +135,6 @@ code {
  border: 1px solid $mediumGrey;
  @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3));
  background-color:  #edf1f5;
-  @include box-shadow(0 1px 2px rgba(0, 0, 0, 0.1) inset);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
  font-family: Monaco, monospace;
 }
--- a/cms/static/sass/elements/_header.scss
+++ b/cms/static/sass/elements/_header.scss
@@ -3,7 +3,7 @@

 .wrapper-header {
  @extend .depth3;
-  @include box-shadow(0 1px 2px 0 $shadow-l1);
+  box-shadow: 0 1px 2px 0 $shadow-l1;
  position: relative;
  width: 100%;
  margin: 0;
@@ -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 0s);

      .label, .icon-caret-down {

@@ -160,7 +160,7 @@

    // entire link
    .course-link {
-      @include transition(color 0.25s ease-in-out);
+      @include transition(color $tmg-f2 ease-in-out 0s);
      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;
--- a/cms/static/sass/elements/_navigation.scss
+++ b/cms/static/sass/elements/_navigation.scss
@@ -33,7 +33,7 @@ nav {
    }

    .ui-toggle-dd {
-      @include transition(rotate .25s ease-in-out .25s);
+      @include transition(all $tmg-f2 ease-in-out 0s);
      margin-left: ($baseline/10);
      display: inline-block;
      vertical-align: middle;
@@ -58,7 +58,7 @@ nav {
  }

  .wrapper-nav-sub {
-    @include transition (opacity 1.0s ease-in-out 0s);
+    @include transition(opacity $tmg-f2 ease-in-out 0s);
    position: absolute;
    top: ($baseline*2.5);
    opacity: 0.0;
@@ -74,9 +74,9 @@ nav {
  }

  .nav-sub {
-    @include border-radius(2px);
+    border-radius: 2px;
    @include box-sizing(border-box);
-    @include box-shadow(0 1px 1px $shadow-l1);
+    box-shadow: 0 1px 1px $shadow-l1;
    position: relative;
    width: 100%;
    border: 1px solid $gray-l3;
--- 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 $tmg-f3 ease-in-out 0s);
  position: fixed;
  top: 0;
  background: $black-t0;
@@ -162,8 +162,8 @@
  }

  .prompt {
-    @include border-radius(($baseline/5));
-    @include box-shadow(0 0 3px $shadow-d1);
+    border-radius: ($baseline/5);
+    box-shadow: 0 0 3px $shadow-d1;
    display: inline-block;
    vertical-align: middle;
    width: $baseline*17.5;
@@ -176,7 +176,7 @@
    }

    .nav-actions {
-      @include box-shadow(inset 0 1px 2px $shadow-d1);
+      box-shadow: inset 0 1px 2px $shadow-d1;
      border-top: 1px solid $black-t1;
      padding: ($baseline*0.75) $baseline;
      background: $gray-d4;
@@ -244,14 +244,14 @@
 .wrapper-notification {
  @extend .depth5;
  @include clearfix();
-  @include box-shadow(0 -1px 3px $shadow, inset 0 3px 1px $blue);
+  box-shadow: 0 -1px 3px $shadow, inset 0 3px 1px $blue;
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: $baseline ($baseline*2);

  &.wrapper-notification-warning {
-    @include box-shadow(0 -1px 3px $shadow, inset 0 3px 1px $orange);
+    box-shadow: 0 -1px 3px $shadow, inset 0 3px 1px $orange;

    [class^="icon"] {
      color: $orange;
@@ -259,7 +259,7 @@
  }

  &.wrapper-notification-error {
-    @include box-shadow(0 -1px 3px $shadow, inset 0 3px 1px $red-l1);
+    box-shadow: 0 -1px 3px $shadow, inset 0 3px 1px $red-l1;

    [class^="icon"] {
      color: $red-l1;
@@ -267,7 +267,7 @@
  }

  &.wrapper-notification-confirmation {
-    @include box-shadow(0 -1px 3px $shadow, inset 0 3px 1px $green);
+    box-shadow: 0 -1px 3px $shadow, inset 0 3px 1px $green;

    [class^="icon"] {
      color: $green;
@@ -275,7 +275,7 @@
  }

  &.wrapper-notification-saving {
-    @include box-shadow(0 -1px 3px $shadow, inset 0 3px 1px $pink);
+    box-shadow: 0 -1px 3px $shadow, inset 0 3px 1px $pink;
  }

  // shorter/status notifications
@@ -364,7 +364,7 @@
  }

  [class^="icon"] {
-    @include transition (color 0.5s ease-in-out);
+    @include transition (color 0.50s ease-in-out 0s);
    @include font-size(22);
    width: flex-grid(1, 12);
    height: ($baseline*1.25);
@@ -437,7 +437,7 @@
  &.saving {

    [class^="icon"] {
-      @include anim-rotateClockwise(3s, linear, infinite);
+      @include animation(rotateCW $tmg-s3 linear infinite);
      width: 25px;
      margin: -4px 10px 0 0;
      @include transform-origin(52% 60%);
@@ -455,7 +455,7 @@
 .wrapper-alert {
  @extend .depth2;
  @include box-sizing(border-box);
-  @include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $blue);
+  box-shadow: 0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $blue;
  position: relative;
  overflow: hidden;
  width: 100%;
@@ -472,7 +472,7 @@
  }

  &.wrapper-alert-warning {
-    @include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $orange);
+    box-shadow: 0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $orange;

    [class^="icon"] {
      color: $orange;
@@ -480,7 +480,7 @@
  }

  &.wrapper-alert-error {
-    @include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $red-l1);
+    box-shadow: 0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $red-l1;

    [class^="icon"] {
      color: $red-l1;
@@ -488,7 +488,7 @@
  }

  &.wrapper-alert-confirmation {
-    @include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $green);
+    box-shadow: 0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $green;

    [class^="icon"] {
      color: $green;
@@ -496,7 +496,7 @@
  }

  &.wrapper-alert-announcement {
-    @include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $blue);
+    box-shadow: 0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $blue;

    [class^="icon"] {
      color: $blue;
@@ -504,7 +504,7 @@
  }

  &.wrapper-alert-step-required {
-    @include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $pink);
+    box-shadow: 0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $pink;

    [class^="icon"] {
      color: $pink;
@@ -531,7 +531,7 @@
  }

  [class^="icon"] {
-    @include transition (color 0.5s ease-in-out);
+    @include transition (color 0.50s ease-in-out 0s);
    @include font-size(22);
    width: flex-grid(1, 12);
    margin: ($baseline/4) flex-gutter() 0 0;
@@ -627,16 +627,16 @@
    pointer-events: none;

    .prompt {
-      opacity: 0.0;
+
    }
  }

-  // prompt showing/hiding
+  // prompt showing
  &.prompt-is-shown {

    .wrapper-view {
-      -webkit-filter: blur(2px) grayscale(25%);
-      filter: blur(2px) grayscale(25%);
+      -webkit-filter: blur(($baseline/10)) grayscale(25%);
+      filter: blur(($baseline/10)) grayscale(25%);
    }

    .wrapper-prompt.is-shown {
@@ -644,8 +644,23 @@
      pointer-events: auto;

      .prompt {
-        @include anim-bounceIn(0.5s);
-        opacity: 1.0;
+        @include animation(bounceIn $tmg-f1 ease-in-out 1);
+      }
+    }
+  }
+
+  // prompt hiding
+  &.prompt-is-hiding {
+
+    .wrapper-view {
+      -webkit-filter: blur(($baseline/10)) grayscale(25%);
+      filter: blur(($baseline/10)) grayscale(25%);
+    }
+
+    .wrapper-prompt {
+
+      .prompt {
+        @include animation(bounceOut $tmg-f1 ease-in-out 1);
      }
    }
  }
@@ -665,11 +680,13 @@

    // varying animations
    &.is-shown {
-      @include anim-notificationsSlideUp(1s);
+      @include animation(notificationSlideUp $tmg-s1 ease-in-out 1);
+      @include animation-fill-mode(forwards);
    }

    &.is-hiding {
-      @include anim-notificationsSlideDown(0.25s);
+      @include animation(notificationSlideDown $tmg-s1 ease-in-out 1);
+      @include animation-fill-mode(forwards);
    }
  }
 }
--- a/cms/static/sass/elements/_system-help.scss
+++ b/cms/static/sass/elements/_system-help.scss
@@ -4,7 +4,7 @@
 // notices - in-context: to be used as notices to users within the context of a form/action
 .notice-incontext {
  @extend .ui-well;
-  @include border-radius(($baseline/10));
+  border-radius: ($baseline/10);

  .title {
    @extend .t-title7;
@@ -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 0s);
    opacity: 0.75;
  }

--- a/cms/static/sass/elements/_tender-widget.scss
+++ b/cms/static/sass/elements/_tender-widget.scss
@@ -7,8 +7,8 @@
 }

 #tender_window {
-  @include border-radius(3px);
-  @include box-shadow(0 2px 3px $shadow);
+  border-radius: 3px;
+  box-shadow: 0 2px 3px $shadow;
  height: ($baseline*35) !important;
  background: $white !important;
  border: 2px solid $blue;
--- a/cms/static/sass/elements/_vendor.scss
+++ b/cms/static/sass/elements/_vendor.scss
@@ -8,7 +8,7 @@
  background: #fff;
  font-family: $f-sans-serif;
  font-size: 12px;
-  @include box-shadow(0 5px 10px rgba(0, 0, 0, 0.1));
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  z-index: 100000 !important;

  .ui-widget-header {
--- a/cms/static/sass/views/_account.scss
+++ b/cms/static/sass/views/_account.scss
@@ -57,8 +57,8 @@ body.signup, body.signin {

    form {
      @include box-sizing(border-box);
-      @include box-shadow(0 1px 2px $shadow-l1);
-      @include border-radius(2px);
+      box-shadow: 0 1px 2px $shadow-l1;
+      border-radius: 2px;
      width: 100%;
      border: 1px solid $gray-l2;
      padding: $baseline ($baseline*1.5);
@@ -70,7 +70,7 @@ body.signup, body.signin {
        .action-primary {
          @include blue-button;
          @extend .t-action2;
-          @include transition(all .15s);
+          @include transition(all $tmg-f3 linear 0s);
          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 $tmg-f3 ease-in-out 0s);
            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 $tmg-f3 ease-in-out 0s);
            display: block;
            margin-top: ($baseline/4);
            color: $gray-l3;
--- a/cms/static/sass/views/_assets.scss
+++ b/cms/static/sass/views/_assets.scss
@@ -81,7 +81,7 @@ body.course.uploads {
      }

      .embeddable-xml-input {
-        @include box-shadow(none);
+        box-shadow: none;
        width: 100%;
      }

@@ -194,7 +194,7 @@ body.course.uploads {
  }

  .embeddable-xml-input {
-    @include box-shadow(none);
+    box-shadow: none;
    width: 400px;
  }

--- 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 $tmg-s2 ease-in-out .25s);
        position: absolute;
        top: 0;
        left: 0;
@@ -49,19 +49,19 @@ body.course.checklists {
    // header/title
    header {
      @include clearfix();
-      @include box-shadow(inset 0 -1px 1px $shadow-l1);
+      box-shadow: inset 0 -1px 1px $shadow-l1;
      margin-bottom: 0;
      border-bottom: 1px solid $gray-l3;
      padding: $baseline ($baseline*1.5);

      .checklist-title {
-        @include transition(color .15s .25s ease-in-out);
+        @include transition(color $tmg-f2 ease-in-out 0s);
        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 $tmg-f2 ease-in-out 0s);
          @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 box-shadow(inset 0 1px 1px $shadow-l1);
-      @include transition(border .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);
      background: $gray-l4;
@@ -155,7 +155,7 @@ body.course.checklists {
    &.is-collapsed {

      header {
-        @include box-shadow(none);
+        box-shadow: none;

        .checklist-title {

@@ -208,8 +208,7 @@ 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 $tmg-f2 ease-in-out 0s, border $tmg-f3 ease-in-out 0s);
      @include clearfix();
      position: relative;
      border-top: 1px solid $white;
@@ -239,7 +238,7 @@ body.course.checklists {
        font-weight: 500;

        .task-name {
-          @include transition(color .15s .25s ease-in-out);
+          @include transition(color $tmg-f2 ease-in-out 0s);
          vertical-align: baseline;
          cursor: pointer;
          margin-bottom: 0;
@@ -247,20 +246,20 @@ body.course.checklists {

        .task-description {
          @extend .t-copy-sub1;
-          @include transition(color .15s .25s ease-in-out);
+          @include transition(color $tmg-f2 ease-in-out 0s);
          color: $gray-l2;
        }

        .task-support {
          @extend .t-copy-sub2;
-          @include transition(opacity .15s .25s ease-in-out);
+          @include transition(opacity $tmg-f2 ease-in-out 0s);
          opacity: 0.0;
          pointer-events: none;
        }
      }

      .task-actions {
-        @include transition(opacity .15s .25s ease-in-out);
+        @include transition(opacity $tmg-f2 ease-in-out 0.25s);
        @include clearfix();
        display: inline-block;
        vertical-align: middle;
@@ -274,7 +273,6 @@ body.course.checklists {
        .action-primary {
          @include blue-button;
          @extend .t-action4;
-          @include transition(all .15s);
          font-weight: 600;
          text-align: center;
        }
--- a/cms/static/sass/views/_dashboard.scss
+++ b/cms/static/sass/views/_dashboard.scss
@@ -10,9 +10,9 @@ body.dashboard {
 	.class-list {
 		margin-top: 20px;
 		border-radius: 3px;
-		border: 1px solid $darkGrey;	
+		border: 1px solid $darkGrey;
 		background: #fff;
-		@include box-shadow(0 1px 2px rgba(0, 0, 0, .1));
+		box-shadow: 0 1px 2px rgba(0, 0, 0, .1);

 		li {
 			position: relative;
@@ -27,7 +27,7 @@ body.dashboard {
 				display: block;
 				padding: 20px 25px;
 				line-height: 1.3;
-				
+
 				&:hover {
 					background: $paleYellow;

@@ -57,7 +57,7 @@ body.dashboard {
 			z-index: 10000;
 			position: absolute;
 			top: 15px;
-			right: $baseline;		
+			right: $baseline;
 			padding: ($baseline/4) ($baseline/2);
 			opacity: 0.0;
 			pointer-events: none;
@@ -73,7 +73,7 @@ body.dashboard {
 		padding: 15px 25px;
 		margin-top: 20px;
 		border-radius: 3px;
-		border: 1px solid $darkGrey;	
+		border: 1px solid $darkGrey;
 		background: #fff;
 		box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
 		@include clearfix;
@@ -121,4 +121,4 @@ body.dashboard {
 			@include white-button;
 		}
 	}
-}
+}
--- a/cms/static/sass/views/_index.scss
+++ b/cms/static/sass/views/_index.scss
@@ -114,7 +114,7 @@ body.index {

    // feature content
    .wrapper-content-features {
-      @include box-shadow(0 -1px ($baseline/4) $shadow);
+      box-shadow: 0 -1px ($baseline/4) $shadow;
      padding-bottom: ($baseline*2);
      padding-top: ($baseline*3);
      background: $white;
@@ -141,7 +141,7 @@ body.index {

          a {
            @include box-sizing(border-box);
-            @include box-shadow(0 1px ($baseline/10) $shadow-l1);
+            box-shadow: 0 1px ($baseline/10) $shadow-l1;
            position: relative;
            top: 0;
            display: block;
@@ -151,7 +151,7 @@ body.index {
            background: $white;

            .action-zoom {
-              @include transition(bottom .50s ease-in-out);
+              @include transition(bottom $tmg-f2 ease-in-out 0s);
              position: absolute;
              bottom: -30px;
              right: ($baseline/2);
@@ -214,8 +214,8 @@ body.index {

            .proofpoint {
              @include box-sizing(border-box);
-              @include border-radius(($baseline/4));
-              @include transition(color .50s ease-in-out);
+              @include transition(all $tmg-f2 ease-in-out 0s);
+              border-radius: ($baseline/4);
              position: relative;
              top: 0;
              float: left;
@@ -233,7 +233,8 @@ body.index {
              }

              &:hover {
-                @include box-shadow(0 1px ($baseline/10) $shadow-l1);
+                @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;
--- a/cms/static/sass/views/_outline.scss
+++ b/cms/static/sass/views/_outline.scss
@@ -36,7 +36,7 @@ body.course.outline {
            display: none;
            width: 110px;
            padding: 5px 40px 5px 10px;
-            @include border-radius(3px);
+            border-radius: 3px;
            color: $lightGrey;
            text-align: right;
            font-weight: bold;
@@ -64,9 +64,9 @@ body.course.outline {

              .menu {
                @include font-size(12);
-                @include border-radius(4px);
-                @include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
-                @include transition(opacity .15s);
+                @include transition(opacity $tmg-f2 linear 0s);
+                border-radius: 4px;
+                box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
                z-index: 1;
                display: none;
                opacity: 0.0;
@@ -143,7 +143,7 @@ body.course.outline {
      border: 1px solid $mediumGrey;
      margin-top: 15px;
      padding-bottom: 12px;
-      @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
+      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);

      &:first-child {
          margin-top: 0;
@@ -199,7 +199,7 @@ body.course.outline {
      .datepair .date,
      .datepair .time {
          @include font-size(13);
-          @include box-shadow(none);
+          box-shadow: none;
          padding-left: 0;
          padding-right: 0;
          border: none;
@@ -246,8 +246,8 @@ body.course.outline {
              }

              .section-name-span {
+                @include transition(color $tmg-f2 linear 0s);
                cursor: pointer;
-                @include transition(color .15s);

                &:hover {
                  color: $orange;
@@ -277,7 +277,7 @@ body.course.outline {

          .section-published-date {
            float: right;
-            @include border-radius(3px);
+            border-radius: 3px;
            background: $lightGrey;

            .published-status {
@@ -312,7 +312,7 @@ body.course.outline {

              .status-label {
                @include font-size(12);
-                @include border-radius(3px);
+                border-radius: 3px;
                position: absolute;
                top: 0;
                right: 2px;
@@ -342,10 +342,9 @@ body.course.outline {

              .menu {
                @include font-size(12);
-                @include border-radius(4px);
-                @include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
-                @include transition(opacity .15s);
-                @include transition(display .15s);
+                @include transition(opacity $tmg-f2 linear 0s, display $tmg-f2 linear 0s);
+                border-radius: 4px;
+                box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
                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 $tmg-f2 linear 0s);
          cursor: pointer;
-          @include transition(color .15s);

          &:hover {
              color: $orange;
@@ -542,7 +541,7 @@ body.course.outline {

      [class^="icon-"] {
          @include font-size(11);
-          @include border-radius(20px);
+          border-radius: 20px;
          position: relative;
          top: -1px;
          display: inline-block;
@@ -582,7 +581,7 @@ body.course.outline {
      left: 110px;
      z-index: 9999;
      border: 1px solid #3C3C3C;
-      @include box-shadow(0 1px 15px rgba(0, 0, 0, .2));
+      box-shadow: 0 1px 15px rgba(0, 0, 0, .2);
  }

  .preview {
@@ -688,7 +687,7 @@ body.course.outline {
  }

  .ui-draggable-dragging {
-      @include box-shadow(0 1px 2px rgba(0, 0, 0, .3));
+      box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
      border: 1px solid $darkGrey;
      opacity : 0.2;
      &:hover {
--- 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 $tmg-f2 ease-in-out 0s);
      display: block;
      margin-top: ($baseline/4);
      color: $gray-l3;
@@ -115,12 +115,12 @@ body.course.settings {
    // buttons
    .remove-item {
      @include white-button;
-      @extend .t-action-3;
+      @extend .t-action3;
      font-weight: 400;
    }

    .new-button {
-      // @extend .t-action-3; - bad buttons won't render this properly
+      // @extend .t-action3; - bad buttons won't render this properly
      @include font-size(14);
    }

@@ -155,7 +155,7 @@ body.course.settings {

        label {
          @extend .t-copy-sub1;
-          @include transition(color, 0.15s, ease-in-out);
+          @include transition(color $tmg-f2 ease-in-out 0s);
          margin: 0 0 ($baseline/4) 0;
          font-weight: 400;

@@ -214,7 +214,7 @@ body.course.settings {

        .field-group {
          @include box-sizing(border-box);
-          @include border-radius(3px);
+          border-radius: 3px;
          background: $gray-l5;
          padding: $baseline;

@@ -266,7 +266,7 @@ body.course.settings {

        input, textarea {
          @extend .t-copy-lead1;
-          @include box-shadow(none);
+          box-shadow: none;
          border: none;
          background: none;
          padding: 0;
@@ -294,8 +294,8 @@ body.course.settings {

      // course link note
      .note-promotion-courseURL {
-        @include box-shadow(0 2px 1px $shadow-l1);
-        @include border-radius(($baseline/5));
+        box-shadow: 0 2px 1px $shadow-l1;
+        border-radius: ($baseline/5);
        margin-top: ($baseline*1.5);
        border: 1px solid $gray-l2;
        padding: ($baseline/2) 0 0 0;
@@ -330,19 +330,18 @@ body.course.settings {
        }

        .list-actions {
-          @include box-shadow(inset 0 1px 1px $shadow-l1);
+          box-shadow: inset 0 1px 1px $shadow-l1;
          border-top: 1px solid $gray-l2;
          padding:  ($baseline/2);
          background: $gray-l5;

          .action-primary {
            @include blue-button();
-            @extend .t-action-3;
+            @extend .t-action3;
            font-weight: 600;

            [class^="icon-"] {
-              @extend .t-icon;
-              @include font-size(16);
+              @extend .t-icon5;
              display: inline-block;
              vertical-align: middle;
              margin-top: -3px;
@@ -410,7 +409,7 @@ body.course.settings {

      .input-existing {
        @include box-sizing(border-box);
-        @include border-radius(3px);
+        border-radius: 3px;
        background: $gray-l5;
        padding: ($baseline/2);

@@ -453,7 +452,7 @@ body.course.settings {
      .new-grade-button {
        @include box-sizing(border-box);
        @include linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
-        @include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
+        box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
        width: flex-grid(1,9);
        height: ($baseline*2);
        position: relative;
@@ -555,7 +554,7 @@ body.course.settings {
              top: 0;
              height: 50px;
              text-align: right;
-              @include border-radius(2px);
+              border-radius: 2px;

              &:hover,
              &.is-dragging {
@@ -620,7 +619,7 @@ body.course.settings {
                height: 50px;
                width: 2px;
                background-color: #fff;
-                @include box-shadow(-1px 0 3px rgba(0,0,0,0.1));
+                box-shadow: -1px 0 3px rgba(0,0,0,0.1);

                cursor: ew-resize;
                @include transition(none);
@@ -714,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);
@@ -768,7 +767,7 @@ body.course.settings {
      .CodeMirror {
        @extend .t-copy-base;
        @include box-sizing(border-box);
-        @include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset);
+        box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset;
        @include linear-gradient($lightGrey, tint($lightGrey, 90%));
        padding: 5px 8px;
        border: 1px solid $mediumGrey;
--- a/cms/static/sass/views/_static-pages.scss
+++ b/cms/static/sass/views/_static-pages.scss
@@ -39,7 +39,7 @@ body.course.static-pages {

    .component-editor {
      @include edit-box;
-      @include box-shadow(none);
+      box-shadow: none;
      display: none;
      padding: 0;
      border-radius: 2px 2px 0 0;
@@ -51,7 +51,7 @@ body.course.static-pages {

      // This duplicates the styling from Unit page editing
      .module-actions {
-        @include box-shadow(inset 0 1px 1px $shadow);
+        box-shadow: inset 0 1px 1px $shadow;
        padding: 0px 0 10px 10px;
        background-color: $gray-l6;

@@ -74,7 +74,7 @@ body.course.static-pages {
    &.new-component-item {
      background: transparent;
      border: none;
-      @include box-shadow(none);
+      box-shadow: none;
    }
  }

@@ -137,11 +137,11 @@ body.course.static-pages {
  }

  .xmodule_display {
+    @include transition(background-color $tmg-s3 linear 0s);
    padding: 20px 20px 22px;
    font-size: 24px;
    font-weight: 300;
    background: #fff;
-    @include transition(background-color 3s);
  }

  .static-page-item {
@@ -151,7 +151,7 @@ body.course.static-pages {
    border: 1px solid $darkGrey;
    border-radius: 3px;
    background: #fff;
-    @include box-shadow(0 1px 2px rgba(0, 0, 0, .1));
+    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);

    .page-name {
      font-size: 19px;
@@ -186,14 +186,14 @@ 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;
-    @include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset;
    font-family: Monaco, monospace;
    font-size: 13px;
    color: #3c3c3c;
--- a/cms/static/sass/views/_subsection.scss
+++ b/cms/static/sass/views/_subsection.scss
@@ -144,7 +144,7 @@ body.course.subsection {
    .url {
      width: 100%;
      margin-bottom: 10px;
-      @include box-shadow(none);
+      box-shadow: none;
    }

    .draft-tag,
@@ -335,6 +335,7 @@ body.course.subsection {
      }

      .menu {
+        @include transition(opacity $tmg-f2 linear 0s);
        z-index: 1;
        position: absolute;
        top: -12px;
@@ -347,9 +348,8 @@ body.course.subsection {
        background: $white;
        border: 1px solid $mediumGrey;
        font-size: 12px;
-        @include border-radius(4px);
-        @include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
-        @include transition(opacity .15s);
+        border-radius: 4px;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, .2);


        li {
--- a/cms/static/sass/views/_textbooks.scss
+++ b/cms/static/sass/views/_textbooks.scss
@@ -129,7 +129,7 @@ body.course.textbooks {

    .edit-textbook {
        @include box-sizing(border-box);
-        @include border-radius(2px);
+        border-radius: 2px;
        width: 100%;
        background: $white;

@@ -143,7 +143,7 @@ body.course.textbooks {
      }

      .actions {
-        @include box-shadow(inset 0 1px 2px $shadow);
+        box-shadow: inset 0 1px 2px $shadow;
        border-top: 1px solid $gray-l1;
        padding: ($baseline*0.75) $baseline;
        background: $gray-l6;
@@ -383,9 +383,9 @@ body.course.textbooks {
  }

  .dialog  {
-    @include box-shadow(0px 0px 7px $shadow-d1);
    @include box-sizing(border-box);
-    @include border-radius(($baseline/5));
+    box-shadow: 0px 0px 7px $shadow-d1;
+    border-radius: ($baseline/5);
    background-color: $gray-l4;
    display: inline-block;
    vertical-align: middle;
@@ -413,7 +413,7 @@ body.course.textbooks {
      padding: 0;

      .form-content {
-        @include box-shadow(0 0 3px $shadow-d1);
+        box-shadow: 0 0 3px $shadow-d1;
        padding: ($baseline*1.5);
        background-color: $white;
      }
@@ -427,7 +427,7 @@ body.course.textbooks {
        margin-top: $baseline;

        .wrapper-progress {
-          @include box-shadow(inset 0 0 3px $shadow-d1);
+          box-shadow: inset 0 0 3px $shadow-d1;
          display: block;
          border-radius: ($baseline*0.75);
          background-color: $gray-l5;
--- a/cms/static/sass/views/_unit.scss
+++ b/cms/static/sass/views/_unit.scss
@@ -49,7 +49,7 @@ body.course.unit {
      border-bottom: 1px solid #cbd1db;
      @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%);
      background-color: #edf1f5;
-      @include box-shadow(0 1px 0 rgba(255, 255, 255, .7) inset);
+      box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset;
      @include clearfix;

      li {
@@ -140,7 +140,7 @@ body.course.unit {
              font-size: 15px;
              line-height: 14px;
              text-align: center;
-              @include box-shadow(0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .4) inset);
+              box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .4) inset;

              .name {
                position: absolute;
@@ -160,7 +160,7 @@ body.course.unit {
            border-radius: 3px;
            border: 1px solid $mediumGrey;
            background-color: #fff;
-            @include box-shadow(0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .4) inset);
+            box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .4) inset;
            @include clearfix;

            .cancel-button {
@@ -208,7 +208,7 @@ body.course.unit {
            width: 100%;
            @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
            background-color: $lightBluishGrey;
-            @include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset);
+            box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset;

            li:first-child {
              margin-left: $baseline;
@@ -221,7 +221,7 @@ body.course.unit {
              width: auto;
              @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
              background-color: tint($lightBluishGrey, 10%);
-              @include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset);
+              box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset;
              opacity: 0.8;

              &:hover {
@@ -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 $tmg-f2 linear 0s);
                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 $tmg-f2 linear 0s);
                  display: inline-block;
                  top: 1px;
                  margin-right: 5px;
@@ -303,7 +303,7 @@ body.course.unit {
              }

              .editor-indicator {
-                @include transition(opacity .15s);
+                @include transition(opacity $tmg-f2 linear 0s);
                float: right;
                position: relative;
                top: 3px;
@@ -426,7 +426,7 @@ body.course.unit {

    .component-editor {
      @include edit-box;
-      @include box-shadow(none);
+      box-shadow: none;
      display: none;
      padding: 0;
      border-radius: 2px 2px 0 0;
@@ -449,7 +449,7 @@ body.course.unit {

      // Module Actions, also used for Static Pages
      .module-actions {
-        @include box-shadow(inset 0 1px 1px $shadow);
+        box-shadow: inset 0 1px 1px $shadow;
        padding: 0 0 $baseline $baseline;
        background-color: $gray-l6;

@@ -507,7 +507,6 @@ body.course.unit {
        @include blue-button;

        &.is-set {
-          @include transition(box-shadow 0.5 ease-in-out);
          @include linear-gradient($blue, $blue);
          color: $blue-d1;
          box-shadow: inset 0 1px 2px 1px $shadow-l1;
@@ -587,7 +586,7 @@ body.course.unit {
      }

      &:hover {
-        @include transition(opacity 0.25s ease-in-out);
+        @include transition(opacity $tmg-f2 ease-in-out 0s);
        opacity: 1.0;
      }

@@ -612,7 +611,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;
@@ -657,7 +656,7 @@ body.course.unit {
      input[type="number"] {

        width: 38.5%;
-        @include box-shadow(0 1px 2px $shadow-l1 inset);
+        box-shadow: 0 1px 2px $shadow-l1 inset;
        //For webkit browsers which render number fields differently, make input wider.
        -moz-column-width: {
          width: 32%;
@@ -669,11 +668,11 @@ body.course.unit {
      }

      select {
-        //@include box-shadow(0 1px 2px $shadow-l1 inset);
+        //box-shadow: 0 1px 2px $shadow-l1 inset;

        &:focus {
-          @include box-shadow(0 0 1px $shadow);
-          @include transition(opacity 0.25s ease-in-out);
+          box-shadow: 0 0 1px $shadow;
+          @include transition(opacity $tmg-f2 ease-in-out 0s);
          background-color: $yellow;
        }

@@ -697,8 +696,8 @@ body.course.unit {
        background-color: $gray-l4;

        &:hover {
-          @include box-shadow(0 1px 1px $shadow);
-          @include transition(opacity 0.15s ease-in-out);
+          box-shadow: 0 1px 1px $shadow;
+          @include transition(opacity $tmg-f2 ease-in-out 0s);
          background-color: $blue-s3;
          border: 1px solid $blue-s3;
          color: $white;
@@ -856,7 +855,7 @@ body.unit {

 .unit-location {
  .url {
-    @include box-shadow(none);
+    box-shadow: none;
    width: 100%;
    margin-bottom: $baseline/2;
  }
@@ -956,7 +955,7 @@ body.unit {


  &:hover {
-    @include transition(opacity 0.25s ease-in-out);
+    @include transition(opacity $tmg-f2 ease-in-out 0s);
    opacity: 1.0s;
  }
 }
				`@@ -0,0 +1 @@`
				`../../../common/static/sass/_mixins-inherited.scss`