From 1388684194fdadc72973af7eb417e9fb70ff7676 Mon Sep 17 00:00:00 2001
From: David Baumgold <david@davidbaumgold.com>
Date: Mon, 8 Jul 2013 11:00:30 -0400
Subject: [PATCH 01/20] Sass 3.2.9, Bourbon 3.1.8

---
 Gemfile                                       |   4 +-
 .../bourbon/_bourbon-deprecated-upcoming.scss |  13 ++
 common/static/sass/bourbon/_bourbon.scss      |  32 +++-
 .../static/sass/bourbon/addons/_button.scss   |  60 ++++---
 .../static/sass/bourbon/addons/_clearfix.scss |   4 +-
 .../sass/bourbon/addons/_hide-text.scss       |   5 +
 .../bourbon/addons/_html5-input-types.scss    |  22 ++-
 .../static/sass/bourbon/addons/_position.scss |  20 ++-
 .../static/sass/bourbon/addons/_prefixer.scss |  49 ++++++
 .../sass/bourbon/addons/_retina-image.scss    |  32 ++++
 common/static/sass/bourbon/addons/_size.scss  |  44 +++++
 .../static/sass/bourbon/addons/_triangle.scss |  45 +++++
 .../static/sass/bourbon/css3/_animation.scss  | 165 +++---------------
 .../static/sass/bourbon/css3/_appearance.scss |   6 +-
 .../bourbon/css3/_backface-visibility.scss    |   6 +
 .../sass/bourbon/css3/_background-image.scss  |  49 +++---
 .../sass/bourbon/css3/_background-size.scss   |  15 --
 .../static/sass/bourbon/css3/_background.scss | 103 +++++++++++
 .../sass/bourbon/css3/_border-image.scss      |  45 +++--
 .../sass/bourbon/css3/_border-radius.scss     |  69 ++------
 .../static/sass/bourbon/css3/_box-shadow.scss |  14 --
 .../static/sass/bourbon/css3/_box-sizing.scss |   4 +-
 common/static/sass/bourbon/css3/_columns.scss |  40 ++---
 .../static/sass/bourbon/css3/_flex-box.scss   |  37 ++--
 .../static/sass/bourbon/css3/_font-face.scss  |  23 +++
 .../sass/bourbon/css3/_hidpi-media-query.scss |  10 ++
 .../sass/bourbon/css3/_image-rendering.scss   |  13 ++
 .../sass/bourbon/css3/_inline-block.scss      |   2 -
 .../static/sass/bourbon/css3/_keyframes.scss  |  43 +++++
 .../sass/bourbon/css3/_linear-gradient.scss   |  28 +--
 .../sass/bourbon/css3/_perspective.scss       |   8 +
 .../sass/bourbon/css3/_placeholder.scss       |  29 +++
 .../sass/bourbon/css3/_radial-gradient.scss   |  41 +++--
 .../static/sass/bourbon/css3/_transform.scss  |  16 +-
 .../static/sass/bourbon/css3/_transition.scss | 100 ++---------
 .../sass/bourbon/css3/_user-select.scss       |   5 +-
 .../sass/bourbon/functions/_compact.scss      |  11 ++
 .../sass/bourbon/functions/_flex-grid.scss    |  10 +-
 .../bourbon/functions/_linear-gradient.scss   |  22 +--
 .../sass/bourbon/functions/_px-to-em.scss     |   8 +
 .../bourbon/functions/_radial-gradient.scss   |  18 +-
 .../bourbon/functions/_render-gradients.scss  |  14 --
 .../functions/_transition-property-name.scss  |  22 +++
 .../_deprecated-webkit-gradient.scss          |  11 +-
 .../helpers/_gradient-positions-parser.scss   |  13 ++
 .../helpers/_linear-positions-parser.scss     |  61 +++++++
 .../bourbon/helpers/_radial-arg-parser.scss   |  69 ++++++++
 .../helpers/_radial-positions-parser.scss     |  18 ++
 .../bourbon/helpers/_render-gradients.scss    |  26 +++
 .../bourbon/helpers/_shape-size-stripper.scss |  10 ++
 common/static/sass/bourbon/lib/bourbon.rb     |  19 --
 .../bourbon/lib/bourbon/sass_extensions.rb    |   6 -
 .../lib/bourbon/sass_extensions/functions.rb  |  13 --
 .../sass_extensions/functions/compact.rb      |  13 --
 rakelib/assets.rake                           |   1 -
 55 files changed, 961 insertions(+), 605 deletions(-)
 create mode 100644 common/static/sass/bourbon/_bourbon-deprecated-upcoming.scss
 create mode 100644 common/static/sass/bourbon/addons/_hide-text.scss
 create mode 100644 common/static/sass/bourbon/addons/_prefixer.scss
 create mode 100644 common/static/sass/bourbon/addons/_retina-image.scss
 create mode 100644 common/static/sass/bourbon/addons/_size.scss
 create mode 100644 common/static/sass/bourbon/addons/_triangle.scss
 create mode 100644 common/static/sass/bourbon/css3/_backface-visibility.scss
 delete mode 100644 common/static/sass/bourbon/css3/_background-size.scss
 create mode 100644 common/static/sass/bourbon/css3/_background.scss
 delete mode 100644 common/static/sass/bourbon/css3/_box-shadow.scss
 create mode 100644 common/static/sass/bourbon/css3/_font-face.scss
 create mode 100644 common/static/sass/bourbon/css3/_hidpi-media-query.scss
 create mode 100644 common/static/sass/bourbon/css3/_image-rendering.scss
 create mode 100644 common/static/sass/bourbon/css3/_keyframes.scss
 create mode 100644 common/static/sass/bourbon/css3/_perspective.scss
 create mode 100644 common/static/sass/bourbon/css3/_placeholder.scss
 create mode 100644 common/static/sass/bourbon/functions/_compact.scss
 create mode 100644 common/static/sass/bourbon/functions/_px-to-em.scss
 delete mode 100644 common/static/sass/bourbon/functions/_render-gradients.scss
 create mode 100644 common/static/sass/bourbon/functions/_transition-property-name.scss
 rename common/static/sass/bourbon/{functions => helpers}/_deprecated-webkit-gradient.scss (62%)
 create mode 100644 common/static/sass/bourbon/helpers/_gradient-positions-parser.scss
 create mode 100644 common/static/sass/bourbon/helpers/_linear-positions-parser.scss
 create mode 100644 common/static/sass/bourbon/helpers/_radial-arg-parser.scss
 create mode 100644 common/static/sass/bourbon/helpers/_radial-positions-parser.scss
 create mode 100644 common/static/sass/bourbon/helpers/_render-gradients.scss
 create mode 100644 common/static/sass/bourbon/helpers/_shape-size-stripper.scss
 delete mode 100644 common/static/sass/bourbon/lib/bourbon.rb
 delete mode 100644 common/static/sass/bourbon/lib/bourbon/sass_extensions.rb
 delete mode 100644 common/static/sass/bourbon/lib/bourbon/sass_extensions/functions.rb
 delete mode 100644 common/static/sass/bourbon/lib/bourbon/sass_extensions/functions/compact.rb

diff --git a/Gemfile b/Gemfile
index 1ad685c34d86..fcbe49181f92 100644
--- a/Gemfile
+++ b/Gemfile
@@ -1,7 +1,7 @@
 source 'https://rubygems.org'
 gem 'rake', '~> 10.0.3'
-gem 'sass', '3.1.15'
-gem 'bourbon', '~> 1.3.6'
+gem 'sass', '3.2.9'
+gem 'bourbon', '~> 3.1.8'
 gem 'colorize', '~> 0.5.8'
 gem 'launchy', '~> 2.1.2'
 gem 'sys-proctable', '~> 0.9.3'
diff --git a/common/static/sass/bourbon/_bourbon-deprecated-upcoming.scss b/common/static/sass/bourbon/_bourbon-deprecated-upcoming.scss
new file mode 100644
index 000000000000..5332496d82ef
--- /dev/null
+++ b/common/static/sass/bourbon/_bourbon-deprecated-upcoming.scss
@@ -0,0 +1,13 @@
+//************************************************************************//
+// These mixins/functions are deprecated
+// They will be removed in the next MAJOR version release
+//************************************************************************//
+@mixin box-shadow ($shadows...) {
+  @include prefixer(box-shadow, $shadows, spec);
+  @warn "box-shadow is deprecated and will be removed in the next major version release";
+}
+
+@mixin background-size ($lengths...) {
+  @include prefixer(background-size, $lengths, spec);
+  @warn "background-size is deprecated and will be removed in the next major version release";
+}
diff --git a/common/static/sass/bourbon/_bourbon.scss b/common/static/sass/bourbon/_bourbon.scss
index 27b056e303e1..53fbca877f04 100644
--- a/common/static/sass/bourbon/_bourbon.scss
+++ b/common/static/sass/bourbon/_bourbon.scss
@@ -1,35 +1,59 @@
+// Custom Helpers
+@import "helpers/deprecated-webkit-gradient";
+@import "helpers/gradient-positions-parser";
+@import "helpers/linear-positions-parser";
+@import "helpers/radial-arg-parser";
+@import "helpers/radial-positions-parser";
+@import "helpers/render-gradients";
+@import "helpers/shape-size-stripper";
+
 // Custom Functions
-@import "functions/deprecated-webkit-gradient";
+@import "functions/compact";
 @import "functions/flex-grid";
 @import "functions/grid-width";
 @import "functions/linear-gradient";
 @import "functions/modular-scale";
+@import "functions/px-to-em";
 @import "functions/radial-gradient";
-@import "functions/render-gradients";
 @import "functions/tint-shade";
+@import "functions/transition-property-name";
 
 // CSS3 Mixins
 @import "css3/animation";
 @import "css3/appearance";
+@import "css3/backface-visibility";
+@import "css3/background";
 @import "css3/background-image";
-@import "css3/background-size";
 @import "css3/border-image";
 @import "css3/border-radius";
-@import "css3/box-shadow";
 @import "css3/box-sizing";
 @import "css3/columns";
 @import "css3/flex-box";
+@import "css3/font-face";
+@import "css3/hidpi-media-query";
+@import "css3/image-rendering";
 @import "css3/inline-block";
+@import "css3/keyframes";
 @import "css3/linear-gradient";
+@import "css3/perspective";
 @import "css3/radial-gradient";
 @import "css3/transform";
 @import "css3/transition";
 @import "css3/user-select";
+@import "css3/placeholder";
 
 // Addons & other mixins
 @import "addons/button";
 @import "addons/clearfix";
 @import "addons/font-family";
+@import "addons/hide-text";
 @import "addons/html5-input-types";
 @import "addons/position";
+@import "addons/prefixer";
+@import "addons/retina-image";
+@import "addons/size";
 @import "addons/timing-functions";
+@import "addons/triangle";
+
+// Soon to be deprecated Mixins
+@import "bourbon-deprecated-upcoming";
diff --git a/common/static/sass/bourbon/addons/_button.scss b/common/static/sass/bourbon/addons/_button.scss
index 1d321251403b..3ae393c090f9 100644
--- a/common/static/sass/bourbon/addons/_button.scss
+++ b/common/static/sass/bourbon/addons/_button.scss
@@ -34,6 +34,11 @@
       @include pill($base-color);
     }
   }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
 }
 
 
@@ -59,18 +64,19 @@
   }
 
   border: 1px solid $border;
-  @include border-radius (3px);
-  @include box-shadow (inset 0 1px 0 0 $inset-shadow);
+  border-radius: 3px;
+  box-shadow: inset 0 1px 0 0 $inset-shadow;
   color: $color;
-  display: inline;
+  display: inline-block;
   font-size: 11px;
   font-weight: bold;
   @include linear-gradient ($base-color, $stop-gradient);
-  padding: 6px 18px 7px;
+  padding: 7px 18px;
+  text-decoration: none;
   text-shadow: 0 1px 0 $text-shadow;
-  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
 
-  &:hover {
+  &:hover:not(:disabled) {
     $base-color-hover:    adjust-color($base-color, $saturation: -4%, $lightness: -5%);
     $inset-shadow-hover:  adjust-color($base-color, $saturation: -7%, $lightness:  5%);
     $stop-gradient-hover: adjust-color($base-color, $saturation:  8%, $lightness: -14%);
@@ -81,12 +87,12 @@
       $stop-gradient-hover: grayscale($stop-gradient-hover);
     }
 
-    @include box-shadow (inset 0 1px 0 0 $inset-shadow-hover);
+    box-shadow: inset 0 1px 0 0 $inset-shadow-hover;
     cursor: pointer;
     @include linear-gradient ($base-color-hover, $stop-gradient-hover);
   }
 
-  &:active {
+  &:active:not(:disabled) {
     $border-active:       adjust-color($base-color, $saturation: 9%, $lightness: -14%);
     $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
 
@@ -96,7 +102,7 @@
     }
 
     border: 1px solid $border-active;
-    @include box-shadow (inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 #eee);
+    box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 #eee;
   }
 }
 
@@ -130,19 +136,19 @@
 
   border: 1px solid $border;
   border-bottom: 1px solid $border-bottom;
-  @include border-radius(5px);
-  @include box-shadow(inset 0 1px 0 0 $inset-shadow);
+  border-radius: 5px;
+  box-shadow: inset 0 1px 0 0 $inset-shadow;
   color: $color;
-  display: inline;
+  display: inline-block;
   font-size: 14px;
   font-weight: bold;
   @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
-  padding: 7px 20px 8px;
+  padding: 8px 20px;
   text-align: center;
   text-decoration: none;
   text-shadow: 0 -1px 1px $text-shadow;
 
-  &:hover {
+  &:hover:not(:disabled) {
     $first-stop-hover:  adjust-color($base-color, $red: -13, $green: -15, $blue: -18);
     $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51);
     $third-stop-hover:  adjust-color($base-color, $red: -93, $green: -85, $blue: -66);
@@ -162,14 +168,14 @@
                                   $fourth-stop-hover 100%);
   }
 
-  &:active {
+  &:active:not(:disabled) {
     $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
 
     @if $grayscale == true {
       $inset-shadow-active: grayscale($inset-shadow-active);
     }
 
-    @include box-shadow(inset 0 0 20px 0 $inset-shadow-active, 0 1px 0 #fff);
+    box-shadow: inset 0 0 20px 0 $inset-shadow-active, 0 1px 0 #fff;
   }
 }
 
@@ -201,20 +207,21 @@
 
   border: 1px solid $border-top;
   border-color: $border-top $border-sides $border-bottom;
-  @include border-radius(16px);
-  @include box-shadow(inset 0 1px 0 0 $inset-shadow, 0 1px 2px 0 #b3b3b3);
+  border-radius: 16px;
+  box-shadow: inset 0 1px 0 0 $inset-shadow, 0 1px 2px 0 #b3b3b3;
   color: $color;
-  display: inline;
+  display: inline-block;
   font-size: 11px;
   font-weight: normal;
   line-height: 1;
   @include linear-gradient ($base-color, $stop-gradient);
-  padding: 3px 16px 5px;
+  padding: 5px 16px;
   text-align: center;
+  text-decoration: none;
   text-shadow: 0 -1px 1px $text-shadow;
-  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
 
-  &:hover {
+  &:hover:not(:disabled) {
     $base-color-hover:    adjust-color($base-color,                                $lightness: -4.5%);
     $border-bottom:       adjust-color($base-color, $hue:  8, $saturation:  13.5%, $lightness: -32%);
     $border-sides:        adjust-color($base-color, $hue:  4, $saturation: -2%,    $lightness: -27%);
@@ -235,14 +242,14 @@
 
     border: 1px solid $border-top;
     border-color: $border-top $border-sides $border-bottom;
-    @include box-shadow(inset 0 1px 0 0 $inset-shadow-hover);
+    box-shadow: inset 0 1px 0 0 $inset-shadow-hover;
     cursor: pointer;
     @include linear-gradient ($base-color-hover, $stop-gradient-hover);
     text-shadow: 0 -1px 1px $text-shadow-hover;
-    -webkit-background-clip: padding-box;
+    background-clip: padding-box;
   }
 
-  &:active {
+  &:active:not(:disabled) {
     $active-color:         adjust-color($base-color, $hue: 4,  $saturation: -12%,  $lightness: -10%);
     $border-active:        adjust-color($base-color, $hue: 6,  $saturation: -2.5%, $lightness: -30%);
     $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation:  6%,   $lightness: -31%);
@@ -260,8 +267,7 @@
     background: $active-color;
     border: 1px solid $border-active;
     border-bottom: 1px solid $border-bottom-active;
-    @include box-shadow(inset 0 0 6px 3px $inset-shadow-active, 0 1px 0 0 #fff);
+    box-shadow: inset 0 0 6px 3px $inset-shadow-active, 0 1px 0 0 #fff;
     text-shadow: 0 -1px 1px $text-shadow-active;
   }
 }
-
diff --git a/common/static/sass/bourbon/addons/_clearfix.scss b/common/static/sass/bourbon/addons/_clearfix.scss
index a9f6a795c571..ca9903cf02e2 100644
--- a/common/static/sass/bourbon/addons/_clearfix.scss
+++ b/common/static/sass/bourbon/addons/_clearfix.scss
@@ -12,11 +12,11 @@
 //    }
 
 @mixin clearfix {
-  zoom: 1;
+  *zoom: 1;
 
   &:before,
   &:after {
-    content: "";
+    content: " ";
     display: table;
   }
 
diff --git a/common/static/sass/bourbon/addons/_hide-text.scss b/common/static/sass/bourbon/addons/_hide-text.scss
new file mode 100644
index 000000000000..68d4bf86cb2d
--- /dev/null
+++ b/common/static/sass/bourbon/addons/_hide-text.scss
@@ -0,0 +1,5 @@
+@mixin hide-text {
+  color:            transparent;
+  font:             0/0 a;
+  text-shadow:      none;
+}
diff --git a/common/static/sass/bourbon/addons/_html5-input-types.scss b/common/static/sass/bourbon/addons/_html5-input-types.scss
index 9d86fbb4d49b..b184382d910c 100644
--- a/common/static/sass/bourbon/addons/_html5-input-types.scss
+++ b/common/static/sass/bourbon/addons/_html5-input-types.scss
@@ -21,15 +21,35 @@ $inputs-list: 'input[type="email"]',
               'input[type="week"]';
 
 $unquoted-inputs-list: ();
-
 @each $input-type in $inputs-list {
   $unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma);
 }
 
 $all-text-inputs: $unquoted-inputs-list;
 
+
+// Hover Pseudo-class
+//************************************************************************//
+$all-text-inputs-hover: ();
+@each $input-type in $unquoted-inputs-list {
+      $input-type-hover: $input-type + ":hover";
+      $all-text-inputs-hover: append($all-text-inputs-hover, $input-type-hover, comma);
+}
+
+// Focus Pseudo-class
+//************************************************************************//
+$all-text-inputs-focus: ();
+@each $input-type in $unquoted-inputs-list {
+      $input-type-focus: $input-type + ":focus";
+      $all-text-inputs-focus: append($all-text-inputs-focus, $input-type-focus, comma);
+}
+
 // You must use interpolation on the variable:
 // #{$all-text-inputs}
+// #{$all-text-inputs-hover}
+// #{$all-text-inputs-focus}
+
+// Example
 //************************************************************************//
 //   #{$all-text-inputs}, textarea {
 //     border: 1px solid red;
diff --git a/common/static/sass/bourbon/addons/_position.scss b/common/static/sass/bourbon/addons/_position.scss
index 6ad330f1dfe1..faad1cae50ad 100644
--- a/common/static/sass/bourbon/addons/_position.scss
+++ b/common/static/sass/bourbon/addons/_position.scss
@@ -12,19 +12,31 @@
 
   position: $position;
 
-  @if not(unitless($top)) {
+  @if $top == auto {
+    top: $top;
+  }
+  @else if not(unitless($top)) {
     top: $top;
   }
 
-  @if not(unitless($right)) {
+  @if $right == auto {
+    right: $right;
+  }
+  @else if not(unitless($right)) {
     right: $right;
   }
 
-  @if not(unitless($bottom)) {
+  @if $bottom == auto {
+    bottom: $bottom;
+  }
+  @else if not(unitless($bottom)) {
     bottom: $bottom;
   }
 
-  @if not(unitless($left)) {
+  @if $left == auto {
+    left: $left;
+  }
+  @else if not(unitless($left)) {
     left: $left;
   }
 }
diff --git a/common/static/sass/bourbon/addons/_prefixer.scss b/common/static/sass/bourbon/addons/_prefixer.scss
new file mode 100644
index 000000000000..6bfd23a1dd53
--- /dev/null
+++ b/common/static/sass/bourbon/addons/_prefixer.scss
@@ -0,0 +1,49 @@
+//************************************************************************//
+// Example: @include prefixer(border-radius, $radii, webkit ms spec);
+//************************************************************************//
+$prefix-for-webkit:    true !default;
+$prefix-for-mozilla:   true !default;
+$prefix-for-microsoft: true !default;
+$prefix-for-opera:     true !default;
+$prefix-for-spec:      true !default; // required for keyframe mixin
+
+@mixin prefixer ($property, $value, $prefixes) {
+  @each $prefix in $prefixes {
+    @if $prefix == webkit {
+      @if $prefix-for-webkit {
+        -webkit-#{$property}: $value;
+      }
+    }
+    @else if $prefix == moz {
+      @if $prefix-for-mozilla {
+        -moz-#{$property}: $value;
+      }
+    }
+    @else if $prefix == ms {
+      @if $prefix-for-microsoft {
+        -ms-#{$property}: $value;
+      }
+    }
+    @else if $prefix == o {
+      @if $prefix-for-opera {
+        -o-#{$property}: $value;
+      }
+    }
+    @else if $prefix == spec {
+      @if $prefix-for-spec {
+        #{$property}: $value;
+      }
+    }
+    @else  {
+      @warn "Unrecognized prefix: #{$prefix}";
+    }
+  }
+}
+
+@mixin disable-prefix-for-all() {
+  $prefix-for-webkit:    false;
+  $prefix-for-mozilla:   false;
+  $prefix-for-microsoft: false;
+  $prefix-for-opera:     false;
+  $prefix-for-spec:      false;
+}
diff --git a/common/static/sass/bourbon/addons/_retina-image.scss b/common/static/sass/bourbon/addons/_retina-image.scss
new file mode 100644
index 000000000000..a84b6faebc1b
--- /dev/null
+++ b/common/static/sass/bourbon/addons/_retina-image.scss
@@ -0,0 +1,32 @@
+@mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $asset-pipeline: false) {
+  @if $asset-pipeline {
+    background-image: image-url("#{$filename}.#{$extension}");
+  }
+  @else {
+    background-image: url("#{$filename}.#{$extension}");
+  }
+
+  @include hidpi {
+
+    @if $asset-pipeline {
+      @if $retina-filename {
+        background-image: image-url("#{$retina-filename}.#{$extension}");
+      }
+      @else {
+        background-image: image-url("#{$filename}@2x.#{$extension}");
+      }
+    }
+
+    @else {
+      @if $retina-filename {
+        background-image: url("#{$retina-filename}.#{$extension}");
+      }
+      @else {
+        background-image: url("#{$filename}@2x.#{$extension}");
+      }
+    }
+
+    background-size: $background-size;
+
+  }
+}
diff --git a/common/static/sass/bourbon/addons/_size.scss b/common/static/sass/bourbon/addons/_size.scss
new file mode 100644
index 000000000000..342e41b79f11
--- /dev/null
+++ b/common/static/sass/bourbon/addons/_size.scss
@@ -0,0 +1,44 @@
+@mixin size($size) {
+  @if length($size) == 1 {
+    @if $size == auto {
+      width:  $size;
+      height: $size;
+    }
+
+    @else if unitless($size) {
+      width:  $size + px;
+      height: $size + px;
+    }
+
+    @else if not(unitless($size)) {
+      width:  $size;
+      height: $size;
+    }
+  }
+
+  // Width x Height
+  @if length($size) == 2 {
+    $width:  nth($size, 1);
+    $height: nth($size, 2);
+
+    @if $width == auto {
+      width: $width;
+    }
+    @else if not(unitless($width)) {
+      width: $width;
+    }
+    @else if unitless($width) {
+      width: $width + px;
+    }
+
+    @if $height == auto {
+      height: $height;
+    }
+    @else if not(unitless($height)) {
+      height: $height;
+    }
+    @else if unitless($height) {
+      height: $height + px;
+    }
+  }
+}
diff --git a/common/static/sass/bourbon/addons/_triangle.scss b/common/static/sass/bourbon/addons/_triangle.scss
new file mode 100644
index 000000000000..0e02aca2ca59
--- /dev/null
+++ b/common/static/sass/bourbon/addons/_triangle.scss
@@ -0,0 +1,45 @@
+@mixin triangle ($size, $color, $direction) {
+  height: 0;
+  width: 0;
+
+  @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
+    border-color: transparent;
+    border-style: solid;
+    border-width: $size / 2;
+
+    @if $direction == up {
+      border-bottom-color: $color;
+
+    } @else if $direction == right {
+      border-left-color:   $color;
+
+    } @else if $direction == down {
+      border-top-color:    $color;
+
+    } @else if $direction == left {
+      border-right-color:  $color;
+    }
+  }
+
+  @else if ($direction == up-right) or ($direction == up-left) {
+    border-top: $size solid $color;
+
+    @if $direction == up-right {
+      border-left:  $size solid transparent;
+
+    } @else if $direction == up-left {
+      border-right: $size solid transparent;
+    }
+  }
+
+  @else if ($direction == down-right) or ($direction == down-left) {
+    border-bottom: $size solid $color;
+
+    @if $direction == down-right {
+      border-left:  $size solid transparent;
+
+    } @else if $direction == down-left {
+      border-right: $size solid transparent;
+    }
+  }
+}
diff --git a/common/static/sass/bourbon/css3/_animation.scss b/common/static/sass/bourbon/css3/_animation.scss
index f99e06eb6ff6..08c3dbf157c1 100644
--- a/common/static/sass/bourbon/css3/_animation.scss
+++ b/common/static/sass/bourbon/css3/_animation.scss
@@ -2,170 +2,51 @@
 // Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.
 
 // Official animation shorthand property.
-@mixin animation ($animation-1,
-  $animation-2: false, $animation-3: false,
-  $animation-4: false, $animation-5: false,
-  $animation-6: false, $animation-7: false,
-  $animation-8: false, $animation-9: false)
-  {
-    $full: compact($animation-1, $animation-2, $animation-3, $animation-4,
-                   $animation-5, $animation-6, $animation-7, $animation-8, $animation-9);
-
-  -webkit-animation: $full;
-     -moz-animation: $full;
-          animation: $full;
+@mixin animation ($animations...) {
+  @include prefixer(animation, $animations, webkit moz spec);
 }
 
 // Individual Animation Properties
-@mixin animation-name ($name-1,
-  $name-2: false, $name-3: false,
-  $name-4: false, $name-5: false,
-  $name-6: false, $name-7: false,
-  $name-8: false, $name-9: false)
-  {
-    $full:  compact($name-1, $name-2, $name-3, $name-4,
-                    $name-5, $name-6, $name-7, $name-8, $name-9);
-
-  -webkit-animation-name: $full;
-     -moz-animation-name: $full;
-          animation-name: $full;
+@mixin animation-name ($names...) {
+  @include prefixer(animation-name, $names, webkit moz spec);
 }
 
 
-@mixin animation-duration ($time-1: 0,
-  $time-2: false, $time-3: false,
-  $time-4: false, $time-5: false,
-  $time-6: false, $time-7: false,
-  $time-8: false, $time-9: false)
-  {
-    $full:  compact($time-1, $time-2, $time-3, $time-4,
-                    $time-5, $time-6, $time-7, $time-8, $time-9);
-
-  -webkit-animation-duration: $full;
-     -moz-animation-duration: $full;
-          animation-duration: $full;
-}
-
-
-@mixin animation-timing-function ($motion-1: ease,
-//  ease | linear | ease-in | ease-out | ease-in-out
-  $motion-2: false, $motion-3: false,
-  $motion-4: false, $motion-5: false,
-  $motion-6: false, $motion-7: false,
-  $motion-8: false, $motion-9: false)
-  {
-    $full:  compact($motion-1, $motion-2, $motion-3, $motion-4,
-                    $motion-5, $motion-6, $motion-7, $motion-8, $motion-9);
-
-  -webkit-animation-timing-function: $full;
-     -moz-animation-timing-function: $full;
-          animation-timing-function: $full;
+@mixin animation-duration ($times...) {
+  @include prefixer(animation-duration, $times, webkit moz spec);
 }
 
 
-@mixin animation-iteration-count ($value-1: 1,
-//  infinite | <number>
-  $value-2: false, $value-3: false,
-  $value-4: false, $value-5: false,
-  $value-6: false, $value-7: false,
-  $value-8: false, $value-9: false)
-  {
-    $full:  compact($value-1, $value-2, $value-3, $value-4,
-                    $value-5, $value-6, $value-7, $value-8, $value-9);
-
-  -webkit-animation-iteration-count: $full;
-     -moz-animation-iteration-count: $full;
-          animation-iteration-count: $full;
+@mixin animation-timing-function ($motions...) {
+// ease | linear | ease-in | ease-out | ease-in-out
+  @include prefixer(animation-timing-function, $motions, webkit moz spec);
 }
 
 
-@mixin animation-direction ($direction-1: normal,
-//  normal | alternate
-  $direction-2: false, $direction-3: false,
-  $direction-4: false, $direction-5: false,
-  $direction-6: false, $direction-7: false,
-  $direction-8: false, $direction-9: false)
-  {
-    $full:  compact($direction-1, $direction-2, $direction-3, $direction-4,
-                    $direction-5, $direction-6, $direction-7, $direction-8, $direction-9);
-
-  -webkit-animation-direction: $full;
-     -moz-animation-direction: $full;
-          animation-direction: $full;
+@mixin animation-iteration-count ($values...) {
+// infinite | <number>
+  @include prefixer(animation-iteration-count, $values, webkit moz spec);
 }
 
 
-@mixin animation-play-state ($state-1: running,
-//  running | paused
-  $state-2: false, $state-3: false,
-  $state-4: false, $state-5: false,
-  $state-6: false, $state-7: false,
-  $state-8: false, $state-9: false)
-  {
-    $full:  compact($state-1, $state-2, $state-3, $state-4,
-                    $state-5, $state-6, $state-7, $state-8, $state-9);
-
-  -webkit-animation-play-state: $full;
-     -moz-animation-play-state: $full;
-          animation-play-state: $full;
+@mixin animation-direction ($directions...) {
+// normal | alternate
+  @include prefixer(animation-direction, $directions, webkit moz spec);
 }
 
 
-@mixin animation-delay ($time-1: 0,
-  $time-2: false, $time-3: false,
-  $time-4: false, $time-5: false,
-  $time-6: false, $time-7: false,
-  $time-8: false, $time-9: false)
-  {
-    $full:  compact($time-1, $time-2, $time-3, $time-4,
-                    $time-5, $time-6, $time-7, $time-8, $time-9);
-
-  -webkit-animation-delay: $full;
-     -moz-animation-delay: $full;
-          animation-delay: $full;
+@mixin animation-play-state ($states...) {
+// running | paused
+  @include prefixer(animation-play-state, $states, webkit moz spec);
 }
 
 
-@mixin animation-fill-mode ($mode-1: none,
-//  http://goo.gl/l6ckm
-//  none | forwards | backwards | both
-  $mode-2: false, $mode-3: false,
-  $mode-4: false, $mode-5: false,
-  $mode-6: false, $mode-7: false,
-  $mode-8: false, $mode-9: false)
-  {
-    $full:  compact($mode-1, $mode-2, $mode-3, $mode-4,
-                    $mode-5, $mode-6, $mode-7, $mode-8, $mode-9);
-
-  -webkit-animation-fill-mode: $full;
-     -moz-animation-fill-mode: $full;
-          animation-fill-mode: $full;
+@mixin animation-delay ($times...) {
+  @include prefixer(animation-delay, $times, webkit moz spec);
 }
 
 
-// Deprecated
-@mixin animation-basic ($name, $time: 0, $motion: ease) {
-    $length-of-name: length($name);
-    $length-of-time: length($time);
-  $length-of-motion: length($motion);
-
-  @if $length-of-name > 1 {
-    @include animation-name(zip($name));
-  } @else {
-    @include animation-name(    $name);
-  }
-
-  @if $length-of-time > 1 {
-    @include animation-duration(zip($time));
-  } @else {
-    @include animation-duration(    $time);
-  }
-
-  @if $length-of-motion > 1 {
-    @include animation-timing-function(zip($motion));
-  } @else {
-    @include animation-timing-function(    $motion);
-  }
-  @warn "The animation-basic mixin is deprecated. Use the animation mixin instead.";
+@mixin animation-fill-mode ($modes...) {
+// none | forwards | backwards | both
+  @include prefixer(animation-fill-mode, $modes, webkit moz spec);
 }
-
diff --git a/common/static/sass/bourbon/css3/_appearance.scss b/common/static/sass/bourbon/css3/_appearance.scss
index 548767e16621..3eb16e45de7e 100644
--- a/common/static/sass/bourbon/css3/_appearance.scss
+++ b/common/static/sass/bourbon/css3/_appearance.scss
@@ -1,7 +1,3 @@
 @mixin appearance ($value) {
-  -webkit-appearance: $value;
-     -moz-appearance: $value;
-      -ms-appearance: $value;
-       -o-appearance: $value;
-          appearance: $value;
+  @include prefixer(appearance, $value, webkit moz ms o spec);
 }
diff --git a/common/static/sass/bourbon/css3/_backface-visibility.scss b/common/static/sass/bourbon/css3/_backface-visibility.scss
new file mode 100644
index 000000000000..1161fe60dd1e
--- /dev/null
+++ b/common/static/sass/bourbon/css3/_backface-visibility.scss
@@ -0,0 +1,6 @@
+//************************************************************************//
+// Backface-visibility mixin
+//************************************************************************//
+@mixin backface-visibility($visibility) {
+  @include prefixer(backface-visibility, $visibility, webkit spec);
+}
diff --git a/common/static/sass/bourbon/css3/_background-image.scss b/common/static/sass/bourbon/css3/_background-image.scss
index c23cef7c310f..17016b91b9ce 100644
--- a/common/static/sass/bourbon/css3/_background-image.scss
+++ b/common/static/sass/bourbon/css3/_background-image.scss
@@ -3,42 +3,35 @@
 // gradients, or for stringing multiple gradients together.
 //************************************************************************//
 
-@mixin background-image(
-  $image-1       , $image-2: false,
-  $image-3: false, $image-4: false,
-  $image-5: false, $image-6: false,
-  $image-7: false, $image-8: false,
-  $image-9: false, $image-10: false
-) {
-  $images: compact($image-1, $image-2,
-           $image-3, $image-4,
-           $image-5, $image-6,
-           $image-7, $image-8,
-           $image-9, $image-10);
-
-  background-image: add-prefix($images, webkit);
-  background-image: add-prefix($images, moz);
-  background-image: add-prefix($images, ms);
-  background-image: add-prefix($images, o);
-  background-image: add-prefix($images);
+@mixin background-image($images...) {
+  background-image: _add-prefix($images, webkit);
+  background-image: _add-prefix($images);
 }
 
-
-@function add-prefix($images, $vendor: false) {
+@function _add-prefix($images, $vendor: false) {
   $images-prefixed: ();
-
+  $gradient-positions: false;
   @for $i from 1 through length($images) {
     $type: type-of(nth($images, $i)); // Get type of variable - List or String
 
     // If variable is a list - Gradient
     @if $type == list {
-      $gradient-type: nth(nth($images, $i), 1); // Get type of gradient (linear || radial)
-      $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue)
-
-      $gradient: render-gradients($gradient-args, $gradient-type, $vendor);
+      $gradient-type: nth(nth($images, $i), 1); // linear or radial
+      $gradient-pos: null;
+      $gradient-args: null;
+
+      @if ($gradient-type == linear) or ($gradient-type == radial) {
+        $gradient-pos:  nth(nth($images, $i), 2); // Get gradient position
+        $gradient-args: nth(nth($images, $i), 3); // Get actual gradient (red, blue)
+      }
+      @else {
+        $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue)
+      }
+
+      $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos);
+      $gradient: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
       $images-prefixed: append($images-prefixed, $gradient, comma);
     }
-
     // If variable is a string - Image
     @else if $type == string {
       $images-prefixed: join($images-prefixed, nth($images, $i), comma);
@@ -47,11 +40,9 @@
   @return $images-prefixed;
 }
 
-
-
 //Examples:
   //@include background-image(linear-gradient(top, orange, red));
   //@include background-image(radial-gradient(50% 50%, cover circle, orange, red));
   //@include background-image(url("/images/a.png"), linear-gradient(orange, red));
   //@include background-image(url("image.png"), linear-gradient(orange, red), url("image.png"));
-  //@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(orange, red);
+  //@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(orange, red));
diff --git a/common/static/sass/bourbon/css3/_background-size.scss b/common/static/sass/bourbon/css3/_background-size.scss
deleted file mode 100644
index 4bba11027da2..000000000000
--- a/common/static/sass/bourbon/css3/_background-size.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-@mixin background-size ($length-1,
-  $length-2: false, $length-3: false,
-  $length-4: false, $length-5: false,
-  $length-6: false, $length-7: false,
-  $length-8: false, $length-9: false)
-  {
-    $full: compact($length-1, $length-2, $length-3, $length-4,
-                   $length-5, $length-6, $length-7, $length-8, $length-9);
-
-  -webkit-background-size: $full;
-     -moz-background-size: $full;
-      -ms-background-size: $full;
-       -o-background-size: $full;
-          background-size: $full;
-}
diff --git a/common/static/sass/bourbon/css3/_background.scss b/common/static/sass/bourbon/css3/_background.scss
new file mode 100644
index 000000000000..766d5d32247f
--- /dev/null
+++ b/common/static/sass/bourbon/css3/_background.scss
@@ -0,0 +1,103 @@
+//************************************************************************//
+// Background property for adding multiple backgrounds using shorthand
+// notation.
+//************************************************************************//
+
+@mixin background(
+  $background-1       , $background-2: false,
+  $background-3: false, $background-4: false,
+  $background-5: false, $background-6: false,
+  $background-7: false, $background-8: false,
+  $background-9: false, $background-10: false,
+  $fallback: false
+) {
+  $backgrounds: compact($background-1, $background-2,
+                $background-3, $background-4,
+                $background-5, $background-6,
+                $background-7, $background-8,
+                $background-9, $background-10);
+
+  $fallback-color: false;
+  @if (type-of($fallback) == color) or ($fallback == "transparent") {
+    $fallback-color: $fallback;
+  }
+  @else {
+    $fallback-color: _extract-background-color($backgrounds);
+  }
+
+  @if $fallback-color {
+    background-color: $fallback-color;
+  }
+  background: _background-add-prefix($backgrounds, webkit);
+  background: _background-add-prefix($backgrounds);
+}
+
+@function _extract-background-color($backgrounds) {
+  $final-bg-layer: nth($backgrounds, length($backgrounds));
+  @if type-of($final-bg-layer) == list {
+    @for $i from 1 through length($final-bg-layer) {
+      $value: nth($final-bg-layer, $i);
+      @if type-of($value) == color {
+        @return $value;
+      }
+    }
+  }
+  @return false;
+}
+
+@function _background-add-prefix($backgrounds, $vendor: false) {
+  $backgrounds-prefixed: ();
+
+  @for $i from 1 through length($backgrounds) {
+    $shorthand: nth($backgrounds, $i); // Get member for current index
+    $type: type-of($shorthand); // Get type of variable - List (gradient) or String (image)
+
+    // If shorthand is a list (gradient)
+    @if $type == list {
+      $first-member: nth($shorthand, 1); // Get first member of shorthand
+
+      // Linear Gradient
+      @if index(linear radial, nth($first-member, 1)) {
+        $gradient-type: nth($first-member, 1); // linear || radial
+        $gradient-args:      false;
+        $gradient-positions: false;
+        $shorthand-start:    false;
+        @if type-of($first-member) == list { // Linear gradient plus additional shorthand values - lg(red,orange)repeat,...
+          $gradient-positions: nth($first-member, 2);
+          $gradient-args:      nth($first-member, 3);
+          $shorthand-start: 2;
+        }
+        @else { // Linear gradient only - lg(red,orange),...
+          $gradient-positions: nth($shorthand, 2);
+          $gradient-args:      nth($shorthand, 3); // Get gradient (red, blue)
+        }
+
+        $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-positions);
+        $gradient: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
+
+        // Append any additional shorthand args to gradient
+        @if $shorthand-start {
+          @for $j from $shorthand-start through length($shorthand) {
+            $gradient: join($gradient, nth($shorthand, $j), space);
+          }
+        }
+        $backgrounds-prefixed: append($backgrounds-prefixed, $gradient, comma);
+      }
+      // Image with additional properties
+      @else {
+        $backgrounds-prefixed: append($backgrounds-prefixed, $shorthand, comma);
+      }
+    }
+    // If shorthand is a simple string (color or image)
+    @else if $type == string {
+      $backgrounds-prefixed: join($backgrounds-prefixed, $shorthand, comma);
+    }
+  }
+  @return $backgrounds-prefixed;
+}
+
+//Examples:
+  //@include background(linear-gradient(top, orange, red));
+  //@include background(radial-gradient(circle at 40% 40%, orange, red));
+  //@include background(url("/images/a.png") no-repeat, linear-gradient(orange, red));
+  //@include background(url("image.png") center center, linear-gradient(orange, red), url("image.png"));
diff --git a/common/static/sass/bourbon/css3/_border-image.scss b/common/static/sass/bourbon/css3/_border-image.scss
index da4f20ba492c..1fff212df8aa 100644
--- a/common/static/sass/bourbon/css3/_border-image.scss
+++ b/common/static/sass/bourbon/css3/_border-image.scss
@@ -1,45 +1,43 @@
 @mixin border-image($images) {
-  -webkit-border-image: border-add-prefix($images, webkit);
-     -moz-border-image: border-add-prefix($images, moz);
-       -o-border-image: border-add-prefix($images, o);
-          border-image: border-add-prefix($images);
+  -webkit-border-image: _border-add-prefix($images, webkit);
+     -moz-border-image: _border-add-prefix($images, moz);
+       -o-border-image: _border-add-prefix($images, o);
+          border-image: _border-add-prefix($images);
 }
 
-@function border-add-prefix($images, $vendor: false) {
-  $border-image: ();
+@function _border-add-prefix($images, $vendor: false) {
+  $border-image: null;
   $images-type:  type-of(nth($images, 1));
   $first-var:    nth(nth($images, 1), 1);          // Get type of Gradient (Linear || radial)
 
   // If input is a gradient
   @if $images-type == string {
     @if ($first-var == "linear") or ($first-var == "radial") {
-      @for $i from 2 through length($images) {
-        $gradient-type: nth($images, 1);           // Get type of gradient (linear || radial)
-        $gradient-args: nth($images, $i);          // Get actual gradient (red, blue)
-        $border-image:  render-gradients($gradient-args, $gradient-type, $vendor);
-      }
+      $gradient-type: nth($images, 1);           // Get type of gradient (linear || radial)
+      $gradient-pos:  nth($images, 2);           // Get gradient position
+      $gradient-args: nth($images, 3);           // Get actual gradient (red, blue)
+      $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos);
+      $border-image:  _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
     }
-
     // If input is a URL
     @else {
       $border-image: $images;
     }
   }
-
   // If input is gradient or url + additional args
   @else if $images-type == list {
-    @for $i from 1 through length($images) {
-      $type: type-of(nth($images, $i));           // Get type of variable - List or String
+    $type: type-of(nth($images, 1));           // Get type of variable - List or String
 
-      // If variable is a list - Gradient
-      @if $type == list {
-        $gradient-type: nth(nth($images, $i), 1); // Get type of gradient (linear || radial)
-        $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue)
-        $border-image:  render-gradients($gradient-args, $gradient-type, $vendor);
-      }
+    // If variable is a list - Gradient
+    @if $type == list {
+      $gradient: nth($images, 1);
+      $gradient-type: nth($gradient, 1);           // Get type of gradient (linear || radial)
+      $gradient-pos:  nth($gradient, 2);           // Get gradient position
+      $gradient-args: nth($gradient, 3);           // Get actual gradient (red, blue)
+      $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos);
+      $border-image:  _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
 
-      // If variable is a string - Image or number
-      @else if ($type == string) or ($type == number) {
+      @for $i from 2 through length($images) {
         $border-image: append($border-image, nth($images, $i));
       }
     }
@@ -54,3 +52,4 @@
 // @include border-image(linear-gradient(45deg, orange, yellow) stretch);
 // @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round);
 // @include border-image(radial-gradient(top, cover, orange, yellow, orange));
+
diff --git a/common/static/sass/bourbon/css3/_border-radius.scss b/common/static/sass/bourbon/css3/_border-radius.scss
index f24389ebbe5d..7c1719010907 100644
--- a/common/static/sass/bourbon/css3/_border-radius.scss
+++ b/common/static/sass/bourbon/css3/_border-radius.scss
@@ -1,63 +1,22 @@
-@mixin border-radius ($radii) {
-  -webkit-border-radius: $radii;
-     -moz-border-radius: $radii;
-      -ms-border-radius: $radii;
-       -o-border-radius: $radii;
-          border-radius: $radii;
-}
-
-@mixin border-top-left-radius($radii) {
-  -webkit-border-top-left-radius: $radii;
-     -moz-border-top-left-radius: $radii;
-      -moz-border-radius-topleft: $radii;
-      -ms-border-top-left-radius: $radii;
-       -o-border-top-left-radius: $radii;
-          border-top-left-radius: $radii;
-}
-
-@mixin border-top-right-radius($radii) {
-  -webkit-border-top-right-radius: $radii;
-     -moz-border-top-right-radius: $radii;
-      -moz-border-radius-topright: $radii;
-      -ms-border-top-right-radius: $radii;
-       -o-border-top-right-radius: $radii;
-          border-top-right-radius: $radii;
-}
-
-@mixin border-bottom-left-radius($radii) {
-  -webkit-border-bottom-left-radius: $radii;
-     -moz-border-bottom-left-radius: $radii;
-      -moz-border-radius-bottomleft: $radii;
-      -ms-border-bottom-left-radius: $radii;
-       -o-border-bottom-left-radius: $radii;
-          border-bottom-left-radius: $radii;
-}
-
-@mixin border-bottom-right-radius($radii) {
-  -webkit-border-bottom-right-radius: $radii;
-     -moz-border-bottom-right-radius: $radii;
-      -moz-border-radius-bottomright: $radii;
-      -ms-border-bottom-right-radius: $radii;
-       -o-border-bottom-right-radius: $radii;
-          border-bottom-right-radius: $radii;
-}
-
+//************************************************************************//
+// Shorthand Border-radius mixins
+//************************************************************************//
 @mixin border-top-radius($radii) {
-  @include border-top-left-radius($radii);
-  @include border-top-right-radius($radii);
-}
-
-@mixin border-right-radius($radii) {
-  @include border-top-right-radius($radii);
-  @include border-bottom-right-radius($radii);
+  @include prefixer(border-top-left-radius, $radii, spec);
+  @include prefixer(border-top-right-radius, $radii, spec);
 }
 
 @mixin border-bottom-radius($radii) {
-  @include border-bottom-left-radius($radii);
-  @include border-bottom-right-radius($radii);
+  @include prefixer(border-bottom-left-radius, $radii, spec);
+  @include prefixer(border-bottom-right-radius, $radii, spec);
 }
 
 @mixin border-left-radius($radii) {
-  @include border-top-left-radius($radii);
-  @include border-bottom-left-radius($radii);
+  @include prefixer(border-top-left-radius, $radii, spec);
+  @include prefixer(border-bottom-left-radius, $radii, spec);
+}
+
+@mixin border-right-radius($radii) {
+  @include prefixer(border-top-right-radius, $radii, spec);
+  @include prefixer(border-bottom-right-radius, $radii, spec);
 }
diff --git a/common/static/sass/bourbon/css3/_box-shadow.scss b/common/static/sass/bourbon/css3/_box-shadow.scss
deleted file mode 100644
index 327b66d251eb..000000000000
--- a/common/static/sass/bourbon/css3/_box-shadow.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-// Box-Shadow Mixin Requires Sass v3.1.1+
-@mixin box-shadow ($shadow-1,
-  $shadow-2: false, $shadow-3: false,
-  $shadow-4: false, $shadow-5: false,
-  $shadow-6: false, $shadow-7: false,
-  $shadow-8: false, $shadow-9: false)
-  {
-    $full: compact($shadow-1, $shadow-2, $shadow-3, $shadow-4,
-                   $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9);
-
-  -webkit-box-shadow: $full;
-     -moz-box-shadow: $full;
-          box-shadow: $full;
-}
diff --git a/common/static/sass/bourbon/css3/_box-sizing.scss b/common/static/sass/bourbon/css3/_box-sizing.scss
index d61523b5f1ec..f07e1d412e32 100644
--- a/common/static/sass/bourbon/css3/_box-sizing.scss
+++ b/common/static/sass/bourbon/css3/_box-sizing.scss
@@ -1,6 +1,4 @@
 @mixin box-sizing ($box) {
 //  content-box | border-box | inherit
-  -webkit-box-sizing: $box;
-     -moz-box-sizing: $box;
-          box-sizing: $box; *behavior: url(/static/scripts/boxsizing.htc);
+  @include prefixer(box-sizing, $box, webkit moz spec);
 }
diff --git a/common/static/sass/bourbon/css3/_columns.scss b/common/static/sass/bourbon/css3/_columns.scss
index 2896c91d7f25..42274a4eebbb 100644
--- a/common/static/sass/bourbon/css3/_columns.scss
+++ b/common/static/sass/bourbon/css3/_columns.scss
@@ -1,67 +1,47 @@
 @mixin columns($arg: auto) {
 // <column-count> || <column-width>
-  -webkit-columns: $arg;
-     -moz-columns: $arg;
-          columns: $arg;
+  @include prefixer(columns, $arg, webkit moz spec);
 }
 
 @mixin column-count($int: auto) {
 // auto || integer
-  -webkit-column-count: $int;
-     -moz-column-count: $int;
-          column-count: $int;
+  @include prefixer(column-count, $int, webkit moz spec);
 }
 
 @mixin column-gap($length: normal) {
 // normal || length
-  -webkit-column-gap: $length;
-     -moz-column-gap: $length;
-          column-gap: $length;
+  @include prefixer(column-gap, $length, webkit moz spec);
 }
 
 @mixin column-fill($arg: auto) {
 // auto || length
-  -webkit-columns-fill: $arg;
-     -moz-columns-fill: $arg;
-          columns-fill: $arg;
+  @include prefixer(columns-fill, $arg, webkit moz spec);
 }
 
 @mixin column-rule($arg) {
 // <border-width> || <border-style> || <color>
-  -webkit-column-rule: $arg;
-     -moz-column-rule: $arg;
-          column-rule: $arg;
+  @include prefixer(column-rule, $arg, webkit moz spec);
 }
 
 @mixin column-rule-color($color) {
-  -webkit-column-rule-color: $color;
-     -moz-column-rule-color: $color;
-          column-rule-color: $color;
+  @include prefixer(column-rule-color, $color, webkit moz spec);
 }
 
 @mixin column-rule-style($style: none) {
 // none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid
-  -webkit-column-rule-style: $style;
-     -moz-column-rule-style: $style;
-          column-rule-style: $style;
+  @include prefixer(column-rule-style, $style, webkit moz spec);
 }
 
 @mixin column-rule-width ($width: none) {
-  -webkit-column-rule-width: $width;
-     -moz-column-rule-width: $width;
-          column-rule-width: $width;
+  @include prefixer(column-rule-width, $width, webkit moz spec);
 }
 
 @mixin column-span($arg: none) {
 // none || all
-  -webkit-column-span: $arg;
-     -moz-column-span: $arg;
-          column-span: $arg;
+  @include prefixer(column-span, $arg, webkit moz spec);
 }
 
 @mixin column-width($length: auto) {
 // auto || length
-  -webkit-column-width: $length;
-     -moz-column-width: $length;
-          column-width: $length;
+  @include prefixer(column-width, $length, webkit moz spec);
 }
diff --git a/common/static/sass/bourbon/css3/_flex-box.scss b/common/static/sass/bourbon/css3/_flex-box.scss
index 44c1dfd78996..3e741e669661 100644
--- a/common/static/sass/bourbon/css3/_flex-box.scss
+++ b/common/static/sass/bourbon/css3/_flex-box.scss
@@ -16,52 +16,37 @@
 
 @mixin box-orient($orient: inline-axis) {
 // horizontal|vertical|inline-axis|block-axis|inherit
-  -webkit-box-orient: $orient;
-     -moz-box-orient: $orient;
-          box-orient: $orient;
+  @include prefixer(box-orient, $orient, webkit moz spec);
 }
 
 @mixin box-pack($pack: start) {
 // start|end|center|justify
-  -webkit-box-pack: $pack;
-     -moz-box-pack: $pack;
-          box-pack: $pack;
+  @include prefixer(box-pack, $pack, webkit moz spec);
 }
 
 @mixin box-align($align: stretch) {
 // start|end|center|baseline|stretch
-  -webkit-box-align: $align;
-     -moz-box-align: $align;
-          box-align: $align;
+  @include prefixer(box-align, $align, webkit moz spec);
 }
 
 @mixin box-direction($direction: normal) {
 // normal|reverse|inherit
-  -webkit-box-direction: $direction;
-     -moz-box-direction: $direction;
-          box-direction: $direction;
+  @include prefixer(box-direction, $direction, webkit moz spec);
 }
+
 @mixin box-lines($lines: single) {
 // single|multiple
-  -webkit-box-lines: $lines;
-     -moz-box-lines: $lines;
-          box-lines: $lines;
+  @include prefixer(box-lines, $lines, webkit moz spec);
 }
 
-@mixin box-ordinal-group($integer: 1) {
-  -webkit-box-ordinal-group: $integer;
-     -moz-box-ordinal-group: $integer;
-          box-ordinal-group: $integer;
+@mixin box-ordinal-group($int: 1) {
+  @include prefixer(box-ordinal-group, $int, webkit moz spec);
 }
 
 @mixin box-flex($value: 0.0) {
-  -webkit-box-flex: $value;
-     -moz-box-flex: $value;
-          box-flex: $value;
+  @include prefixer(box-flex, $value, webkit moz spec);
 }
 
-@mixin box-flex-group($integer: 1) {
-  -webkit-box-flex-group: $integer;
-     -moz-box-flex-group: $integer;
-          box-flex-group: $integer;
+@mixin box-flex-group($int: 1) {
+  @include prefixer(box-flex-group, $int, webkit moz spec);
 }
diff --git a/common/static/sass/bourbon/css3/_font-face.scss b/common/static/sass/bourbon/css3/_font-face.scss
new file mode 100644
index 000000000000..029ee8fe88c8
--- /dev/null
+++ b/common/static/sass/bourbon/css3/_font-face.scss
@@ -0,0 +1,23 @@
+// Order of the includes matters, and it is: normal, bold, italic, bold+italic.
+
+@mixin font-face($font-family, $file-path, $weight: normal, $style: normal, $asset-pipeline: false ) {
+  @font-face {
+    font-family: $font-family;
+    font-weight: $weight;
+    font-style: $style;
+
+    @if $asset-pipeline == true {
+      src: font-url('#{$file-path}.eot');
+      src: font-url('#{$file-path}.eot?#iefix')          format('embedded-opentype'),
+           font-url('#{$file-path}.woff')                format('woff'),
+           font-url('#{$file-path}.ttf')                 format('truetype'),
+           font-url('#{$file-path}.svg##{$font-family}') format('svg');
+    } @else {
+      src: url('#{$file-path}.eot');
+      src: url('#{$file-path}.eot?#iefix')               format('embedded-opentype'),
+           url('#{$file-path}.woff')                     format('woff'),
+           url('#{$file-path}.ttf')                      format('truetype'),
+           url('#{$file-path}.svg##{$font-family}')      format('svg');
+    }
+  }
+}
diff --git a/common/static/sass/bourbon/css3/_hidpi-media-query.scss b/common/static/sass/bourbon/css3/_hidpi-media-query.scss
new file mode 100644
index 000000000000..111e4009b5a7
--- /dev/null
+++ b/common/static/sass/bourbon/css3/_hidpi-media-query.scss
@@ -0,0 +1,10 @@
+// HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)
+@mixin hidpi($ratio: 1.3) {
+  @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
+  only screen and (min--moz-device-pixel-ratio: $ratio),
+  only screen and (-o-min-device-pixel-ratio: #{$ratio}/1),
+  only screen and (min-resolution: #{round($ratio*96)}dpi),
+  only screen and (min-resolution: #{$ratio}dppx) {
+    @content;
+  }
+}
diff --git a/common/static/sass/bourbon/css3/_image-rendering.scss b/common/static/sass/bourbon/css3/_image-rendering.scss
new file mode 100644
index 000000000000..abc7ee1aa47c
--- /dev/null
+++ b/common/static/sass/bourbon/css3/_image-rendering.scss
@@ -0,0 +1,13 @@
+@mixin image-rendering ($mode:optimizeQuality) {
+
+  @if ($mode == optimize-contrast) {
+      image-rendering: -moz-crisp-edges;
+      image-rendering: -o-crisp-edges;
+      image-rendering: -webkit-optimize-contrast;
+      image-rendering: optimize-contrast;
+  }
+
+  @else {
+      image-rendering: $mode;
+  }
+}
diff --git a/common/static/sass/bourbon/css3/_inline-block.scss b/common/static/sass/bourbon/css3/_inline-block.scss
index d79a13c851bf..3272a0010b31 100644
--- a/common/static/sass/bourbon/css3/_inline-block.scss
+++ b/common/static/sass/bourbon/css3/_inline-block.scss
@@ -1,7 +1,5 @@
 // Legacy support for inline-block in IE7 (maybe IE6)
 @mixin inline-block {
-  display: -moz-inline-box;
-  -moz-box-orient: vertical;
   display: inline-block;
   vertical-align: baseline;
   zoom: 1;
diff --git a/common/static/sass/bourbon/css3/_keyframes.scss b/common/static/sass/bourbon/css3/_keyframes.scss
new file mode 100644
index 000000000000..dca61f2a0748
--- /dev/null
+++ b/common/static/sass/bourbon/css3/_keyframes.scss
@@ -0,0 +1,43 @@
+// Adds keyframes blocks for supported prefixes, removing redundant prefixes in the block's content
+@mixin keyframes($name) {
+  $original-prefix-for-webkit:    $prefix-for-webkit;
+  $original-prefix-for-mozilla:   $prefix-for-mozilla;
+  $original-prefix-for-microsoft: $prefix-for-microsoft;
+  $original-prefix-for-opera:     $prefix-for-opera;
+  $original-prefix-for-spec:      $prefix-for-spec;
+
+  @if $original-prefix-for-webkit {
+    @include disable-prefix-for-all();
+    $prefix-for-webkit: true;
+    @-webkit-keyframes #{$name} {
+      @content;
+    }
+  }
+  @if $original-prefix-for-mozilla {
+    @include disable-prefix-for-all();
+    $prefix-for-mozilla: true;
+    @-moz-keyframes #{$name} {
+      @content;
+    }
+  }
+  @if $original-prefix-for-opera {
+    @include disable-prefix-for-all();
+    $prefix-for-opera: true;
+    @-o-keyframes #{$name} {
+      @content;
+    }
+  }
+  @if $original-prefix-for-spec {
+    @include disable-prefix-for-all();
+    $prefix-for-spec: true;
+    @keyframes #{$name} {
+      @content;
+    }
+  }
+
+  $prefix-for-webkit:    $original-prefix-for-webkit;
+  $prefix-for-mozilla:   $original-prefix-for-mozilla;
+  $prefix-for-microsoft: $original-prefix-for-microsoft;
+  $prefix-for-opera:     $original-prefix-for-opera;
+  $prefix-for-spec:      $original-prefix-for-spec;
+}
diff --git a/common/static/sass/bourbon/css3/_linear-gradient.scss b/common/static/sass/bourbon/css3/_linear-gradient.scss
index e366a299a942..d5b687b00cb3 100644
--- a/common/static/sass/bourbon/css3/_linear-gradient.scss
+++ b/common/static/sass/bourbon/css3/_linear-gradient.scss
@@ -3,15 +3,25 @@
                        $G5: false, $G6: false,
                        $G7: false, $G8: false,
                        $G9: false, $G10: false,
+                       $deprecated-pos1: left top,
+                       $deprecated-pos2: left bottom,
                        $fallback: false) {
   // Detect what type of value exists in $pos
   $pos-type: type-of(nth($pos, 1));
+  $pos-spec: null;
+  $pos-degree: null;
 
   // If $pos is missing from mixin, reassign vars and add default position
   @if ($pos-type == color) or (nth($pos, 1) == "transparent")  {
     $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
      $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
-    $pos: top; // Default position
+     $pos: null;
+  }
+
+  @if $pos {
+    $positions: _linear-positions-parser($pos);
+    $pos-degree: nth($positions, 1);
+    $pos-spec:   nth($positions, 2);
   }
 
   $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
@@ -25,17 +35,7 @@
   }
 
   background-color: $fallback-color;
-  background-image: deprecated-webkit-gradient(linear, $full); // Safari <= 5.0
-  background-image:  -webkit-linear-gradient($pos, $full); // Safari 5.1+, Chrome
-  background-image:     -moz-linear-gradient($pos, $full);
-  background-image:      -ms-linear-gradient($pos, $full);
-  background-image:       -o-linear-gradient($pos, $full);
-  background-image: unquote("linear-gradient(#{$pos}, #{$full})");
+  background-image: _deprecated-webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $full); // Safari <= 5.0
+  background-image: -webkit-linear-gradient($pos-degree $full); // Safari 5.1+, Chrome
+  background-image: unquote("linear-gradient(#{$pos-spec}#{$full})");
 }
-
-
-// Usage: Gradient position is optional, default is top. Position can be a degree. Color stops are optional as well.
-// @include linear-gradient(#1e5799, #2989d8);
-// @include linear-gradient(#1e5799, #2989d8, $fallback:#2989d8);
-// @include linear-gradient(top, #1e5799 0%, #2989d8 50%);
-// @include linear-gradient(50deg, rgba(10, 10, 10, 0.5) 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
diff --git a/common/static/sass/bourbon/css3/_perspective.scss b/common/static/sass/bourbon/css3/_perspective.scss
new file mode 100644
index 000000000000..0e4deb80f3c2
--- /dev/null
+++ b/common/static/sass/bourbon/css3/_perspective.scss
@@ -0,0 +1,8 @@
+@mixin perspective($depth: none) {
+  // none | <length>
+  @include prefixer(perspective, $depth, webkit moz spec);
+}
+
+@mixin perspective-origin($value: 50% 50%) {
+  @include prefixer(perspective-origin, $value, webkit moz spec);
+}
diff --git a/common/static/sass/bourbon/css3/_placeholder.scss b/common/static/sass/bourbon/css3/_placeholder.scss
new file mode 100644
index 000000000000..22fd92b4f234
--- /dev/null
+++ b/common/static/sass/bourbon/css3/_placeholder.scss
@@ -0,0 +1,29 @@
+$placeholders: '-webkit-input-placeholder',
+               '-moz-placeholder',
+               '-ms-input-placeholder';
+
+@mixin placeholder {
+  @each $placeholder in $placeholders {
+    @if $placeholder == "-webkit-input-placeholder" {
+      &::#{$placeholder} {
+        @content;
+      }
+    }
+    @else if $placeholder == "-moz-placeholder" {
+      // FF 18-
+      &:#{$placeholder} {
+        @content;
+      }
+
+      // FF 19+
+      &::#{$placeholder} {
+        @content;
+      }
+    }
+    @else {
+      &:#{$placeholder} {
+        @content;
+      }
+    }
+  }
+}
diff --git a/common/static/sass/bourbon/css3/_radial-gradient.scss b/common/static/sass/bourbon/css3/_radial-gradient.scss
index e83cab523424..e87b45a5a1a1 100644
--- a/common/static/sass/bourbon/css3/_radial-gradient.scss
+++ b/common/static/sass/bourbon/css3/_radial-gradient.scss
@@ -1,31 +1,44 @@
 // Requires Sass 3.1+
-@mixin radial-gradient($pos, $shape-size,
-                       $G1,        $G2,
+@mixin radial-gradient($G1,        $G2,
                        $G3: false, $G4: false,
                        $G5: false, $G6: false,
                        $G7: false, $G8: false,
                        $G9: false, $G10: false,
+                       $pos: null,
+                       $shape-size: null,
+                       $deprecated-pos1: center center,
+                       $deprecated-pos2: center center,
+                       $deprecated-radius1: 0,
+                       $deprecated-radius2: 460,
                        $fallback: false) {
 
+  $data: _radial-arg-parser($G1, $G2, $pos, $shape-size);
+  $G1:  nth($data, 1);
+  $G2:  nth($data, 2);
+  $pos: nth($data, 3);
+  $shape-size: nth($data, 4);
+
   $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
 
+  // Strip deprecated cover/contain for spec
+  $shape-size-spec: _shape-size-stripper($shape-size);
+
   // Set $G1 as the default fallback color
-  $fallback-color: nth($G1, 1);
+  $first-color: nth($full, 1);
+  $fallback-color: nth($first-color, 1);
 
-  // If $fallback is a color use that color as the fallback color
   @if (type-of($fallback) == color) or ($fallback == "transparent") {
     $fallback-color: $fallback;
   }
 
+  // Add Commas and spaces
+  $shape-size: if($shape-size, '#{$shape-size}, ', null);
+  $pos:        if($pos, '#{$pos}, ', null);
+  $pos-spec:   if($pos, 'at #{$pos}', null);
+  $shape-size-spec: if(($shape-size-spec != ' ') and ($pos == null), '#{$shape-size-spec}, ', '#{$shape-size-spec} ');
+
   background-color:  $fallback-color;
-  background-image:          deprecated-webkit-gradient(radial, $full); // Safari <= 5.0
-  background-image:  -webkit-radial-gradient($pos, $shape-size, $full);
-  background-image:     -moz-radial-gradient($pos, $shape-size, $full);
-  background-image:      -ms-radial-gradient($pos, $shape-size, $full);
-  background-image:       -o-radial-gradient($pos, $shape-size, $full);
-  background-image: unquote("radial-gradient(#{$pos}, #{$shape-size}, #{$full})");
+  background-image: _deprecated-webkit-gradient(radial, $deprecated-pos1, $deprecated-pos2, $full, $deprecated-radius1, $deprecated-radius2); // Safari <= 5.0 && IOS 4
+  background-image: -webkit-radial-gradient(unquote(#{$pos}#{$shape-size}#{$full}));
+  background-image: unquote("radial-gradient(#{$shape-size-spec}#{$pos-spec}#{$full})");
 }
-
-//  Usage: Gradient position and shape-size are required. Color stops are optional.
-//  @include radial-gradient(50% 50%, circle cover, #1e5799, #efefef);
-//  @include radial-gradient(50% 50%, circle cover, #eee 10%, #1e5799 30%, #efefef);
diff --git a/common/static/sass/bourbon/css3/_transform.scss b/common/static/sass/bourbon/css3/_transform.scss
index 8d19e8b88de4..8cc35963d555 100644
--- a/common/static/sass/bourbon/css3/_transform.scss
+++ b/common/static/sass/bourbon/css3/_transform.scss
@@ -1,19 +1,15 @@
 @mixin transform($property: none) {
 //  none | <transform-function>
-  -webkit-transform: $property;
-     -moz-transform: $property;
-      -ms-transform: $property;
-       -o-transform: $property;
-          transform: $property;
+  @include prefixer(transform, $property, webkit moz ms o spec);
 }
 
 @mixin transform-origin($axes: 50%) {
 // x-axis - left | center | right  | length | %
 // y-axis - top  | center | bottom | length | %
 // z-axis -                          length
-  -webkit-transform-origin: $axes;
-     -moz-transform-origin: $axes;
-      -ms-transform-origin: $axes;
-       -o-transform-origin: $axes;
-          transform-origin: $axes;
+  @include prefixer(transform-origin, $axes, webkit moz ms o spec);
+}
+
+@mixin transform-style ($style: flat) {
+  @include prefixer(transform-style, $style, webkit moz ms o spec);
 }
diff --git a/common/static/sass/bourbon/css3/_transition.scss b/common/static/sass/bourbon/css3/_transition.scss
index 058dbe0e33ea..180cde6c8a44 100644
--- a/common/static/sass/bourbon/css3/_transition.scss
+++ b/common/static/sass/bourbon/css3/_transition.scss
@@ -3,102 +3,32 @@
 //          @include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s));
 //          @include transition ($property:(opacity, width), $delay: (1.5s, 2.5s));
 
-@mixin transition ($property: all, $duration: 0.15s, $timing-function: ease-out, $delay: 0) {
-
-  // Detect # of args passed into each variable
-  $length-of-property:        length($property);
-  $length-of-duration:        length($duration);
-  $length-of-timing-function: length($timing-function);
-  $length-of-delay:           length($delay);
-
-  @if $length-of-property > 1 {
-    @include transition-property(zip($property)); }
-  @else {
-    @include transition-property(    $property);
-  }
-
-  @if $length-of-duration > 1 {
-    @include transition-duration(zip($duration)); }
-  @else {
-    @include transition-duration(    $duration);
+@mixin transition ($properties...) {
+  @if length($properties) >= 1 {
+    @include prefixer(transition, $properties, webkit moz spec);
   }
 
-  @if $length-of-timing-function > 1 {
-    @include transition-timing-function(zip($timing-function)); }
   @else {
-    @include transition-timing-function(    $timing-function);
-  }
-
-  @if $length-of-delay > 1 {
-    @include transition-delay(zip($delay)); }
-  @else {
-    @include transition-delay(    $delay);
+    $properties: all 0.15s ease-out 0;
+    @include prefixer(transition, $properties, webkit moz spec);
   }
 }
 
-
-@mixin transition-property ($prop-1: all,
-  $prop-2: false, $prop-3: false,
-  $prop-4: false, $prop-5: false,
-  $prop-6: false, $prop-7: false,
-  $prop-8: false, $prop-9: false)
-  {
-    $full: compact($prop-1, $prop-2, $prop-3, $prop-4, $prop-5,
-                   $prop-6, $prop-7, $prop-8, $prop-9);
-
-  -webkit-transition-property: $full;
-     -moz-transition-property: $full;
-      -ms-transition-property: $full;
-       -o-transition-property: $full;
-          transition-property: $full;
+@mixin transition-property ($properties...) {
+   -webkit-transition-property: transition-property-names($properties, 'webkit');
+      -moz-transition-property: transition-property-names($properties, 'moz');
+           transition-property: transition-property-names($properties, false);
 }
 
-@mixin transition-duration ($time-1: 0,
-  $time-2: false, $time-3: false,
-  $time-4: false, $time-5: false,
-  $time-6: false, $time-7: false,
-  $time-8: false, $time-9: false)
-  {
-    $full: compact($time-1, $time-2, $time-3, $time-4, $time-5,
-                   $time-6, $time-7, $time-8, $time-9);
-
-  -webkit-transition-duration: $full;
-     -moz-transition-duration: $full;
-      -ms-transition-duration: $full;
-       -o-transition-duration: $full;
-          transition-duration: $full;
+@mixin transition-duration ($times...) {
+  @include prefixer(transition-duration, $times, webkit moz spec);
 }
 
-@mixin transition-timing-function ($motion-1: ease,
-  $motion-2: false, $motion-3: false,
-  $motion-4: false, $motion-5: false,
-  $motion-6: false, $motion-7: false,
-  $motion-8: false, $motion-9: false)
-  {
-    $full: compact($motion-1, $motion-2, $motion-3, $motion-4, $motion-5,
-                   $motion-6, $motion-7, $motion-8, $motion-9);
-
+@mixin transition-timing-function ($motions...) {
 // ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
-  -webkit-transition-timing-function: $full;
-     -moz-transition-timing-function: $full;
-      -ms-transition-timing-function: $full;
-       -o-transition-timing-function: $full;
-          transition-timing-function: $full;
+  @include prefixer(transition-timing-function, $motions, webkit moz spec);
 }
 
-@mixin transition-delay ($time-1: 0,
-  $time-2: false, $time-3: false,
-  $time-4: false, $time-5: false,
-  $time-6: false, $time-7: false,
-  $time-8: false, $time-9: false)
-  {
-    $full: compact($time-1, $time-2, $time-3, $time-4, $time-5,
-                   $time-6, $time-7, $time-8, $time-9);
-
-  -webkit-transition-delay: $full;
-     -moz-transition-delay: $full;
-      -ms-transition-delay: $full;
-       -o-transition-delay: $full;
-          transition-delay: $full;
+@mixin transition-delay ($times...) {
+  @include prefixer(transition-delay, $times, webkit moz spec);
 }
-
diff --git a/common/static/sass/bourbon/css3/_user-select.scss b/common/static/sass/bourbon/css3/_user-select.scss
index d5f5749431b0..1380aa8baa9f 100644
--- a/common/static/sass/bourbon/css3/_user-select.scss
+++ b/common/static/sass/bourbon/css3/_user-select.scss
@@ -1,6 +1,3 @@
 @mixin user-select($arg: none) {
-  -webkit-user-select: $arg;
-     -moz-user-select: $arg;
-      -ms-user-select: $arg;
-          user-select: $arg;
+  @include prefixer(user-select, $arg, webkit moz ms spec);
 }
diff --git a/common/static/sass/bourbon/functions/_compact.scss b/common/static/sass/bourbon/functions/_compact.scss
new file mode 100644
index 000000000000..871500e33946
--- /dev/null
+++ b/common/static/sass/bourbon/functions/_compact.scss
@@ -0,0 +1,11 @@
+// Remove `false` values from a list
+
+@function compact($vars...) {
+  $list: ();
+  @each $var in $vars {
+    @if $var {
+      $list: append($list, $var, comma);
+    }
+  }
+  @return $list;
+}
diff --git a/common/static/sass/bourbon/functions/_flex-grid.scss b/common/static/sass/bourbon/functions/_flex-grid.scss
index 707f994e1544..3bbd8665732d 100644
--- a/common/static/sass/bourbon/functions/_flex-grid.scss
+++ b/common/static/sass/bourbon/functions/_flex-grid.scss
@@ -14,13 +14,17 @@
 // The $fg-column, $fg-gutter and $fg-max-columns variables must be defined in your base stylesheet to properly use the flex-grid function.
 // This function takes the fluid grid equation (target / context = result) and uses columns to help define each.
 //
+// The calculation presumes that your column structure will be missing the last gutter:
+//
+//   -- column -- gutter -- column -- gutter -- column
+//
 //  $fg-column: 60px;             // Column Width
 //  $fg-gutter: 25px;             // Gutter Width
 //  $fg-max-columns: 12;          // Total Columns For Main Container
 //
 //  div {
-//    width: flex-grid(4);        // returns (315px / 1020px) = 30.882353%;
-//    margin-left: flex-gutter(); // returns (25px / 1020px) = 2.45098%;
+//    width: flex-grid(4);        // returns (315px / 995px) = 31.65829%;
+//    margin-left: flex-gutter(); // returns (25px / 995px) = 2.51256%;
 //
 //    p {
 //      width: flex-grid(2, 4);  // returns (145px / 315px) = 46.031746%;
@@ -32,4 +36,4 @@
 //      float: left;
 //      width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
 //    }
-//  }
+//  }
\ No newline at end of file
diff --git a/common/static/sass/bourbon/functions/_linear-gradient.scss b/common/static/sass/bourbon/functions/_linear-gradient.scss
index 3b10ca82a6ea..c8454d83f087 100644
--- a/common/static/sass/bourbon/functions/_linear-gradient.scss
+++ b/common/static/sass/bourbon/functions/_linear-gradient.scss
@@ -1,23 +1,13 @@
-@function linear-gradient($pos: top, $G1: false, $G2: false,
-                       $G3: false, $G4: false,
-                       $G5: false, $G6: false,
-                       $G7: false, $G8: false,
-                       $G9: false, $G10: false) {
-
-  // Detect what type of value exists in $pos
+@function linear-gradient($pos, $gradients...) {
+  $type: linear;
   $pos-type: type-of(nth($pos, 1));
 
-  // If $pos is missing from mixin, reassign vars and add default position
+  // if $pos doesn't exist, fix $gradient
   @if ($pos-type == color) or (nth($pos, 1) == "transparent")  {
-    $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
-     $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
-    $pos: top; // Default position
+    $gradients: zip($pos $gradients);
+    $pos: false;
   }
 
-  $type: linear;
-  $gradient: compact($pos, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
-  $type-gradient: append($type, $gradient, comma);
-
+  $type-gradient: $type, $pos, $gradients;
   @return $type-gradient;
 }
-
diff --git a/common/static/sass/bourbon/functions/_px-to-em.scss b/common/static/sass/bourbon/functions/_px-to-em.scss
new file mode 100644
index 000000000000..2eb1031c60e9
--- /dev/null
+++ b/common/static/sass/bourbon/functions/_px-to-em.scss
@@ -0,0 +1,8 @@
+// Convert pixels to ems
+// eg. for a relational value of 12px write em(12) when the parent is 16px
+// if the parent is another value say 24px write em(12, 24)
+
+@function em($pxval, $base: 16) {
+  @return ($pxval / $base) * 1em;
+}
+
diff --git a/common/static/sass/bourbon/functions/_radial-gradient.scss b/common/static/sass/bourbon/functions/_radial-gradient.scss
index 3d5461ad6e68..75584060d2af 100644
--- a/common/static/sass/bourbon/functions/_radial-gradient.scss
+++ b/common/static/sass/bourbon/functions/_radial-gradient.scss
@@ -1,15 +1,23 @@
 // This function is required and used by the background-image mixin.
-@function radial-gradient($pos, $shape-size,
-                       $G1,        $G2,
+@function radial-gradient($G1,        $G2,
                        $G3: false, $G4: false,
                        $G5: false, $G6: false,
                        $G7: false, $G8: false,
-                       $G9: false, $G10: false) {
+                       $G9: false, $G10: false,
+                       $pos: null,
+                       $shape-size: null) {
+
+  $data: _radial-arg-parser($G1, $G2, $pos, $shape-size);
+  $G1:  nth($data, 1);
+  $G2:  nth($data, 2);
+  $pos: nth($data, 3);
+  $shape-size: nth($data, 4);
 
   $type: radial;
-  $gradient: compact($pos, $shape-size, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
-  $type-gradient: append($type, $gradient, comma);
+  $gradient: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
 
+  $type-gradient: $type, $shape-size $pos, $gradient;
   @return $type-gradient;
 }
 
+
diff --git a/common/static/sass/bourbon/functions/_render-gradients.scss b/common/static/sass/bourbon/functions/_render-gradients.scss
deleted file mode 100644
index fe7c799ebe18..000000000000
--- a/common/static/sass/bourbon/functions/_render-gradients.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-// User for linear and radial gradients within background-image or border-image properties
-
-@function render-gradients($gradients, $gradient-type, $vendor: false) {
-  $vendor-gradients: false;
-  @if $vendor {
-    $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient($gradients);
-  }
-
-  @else if $vendor == false {
-    $vendor-gradients: "#{$gradient-type}-gradient(#{$gradients})";
-    $vendor-gradients: unquote($vendor-gradients);
-  }
-  @return $vendor-gradients;
-}
diff --git a/common/static/sass/bourbon/functions/_transition-property-name.scss b/common/static/sass/bourbon/functions/_transition-property-name.scss
new file mode 100644
index 000000000000..54cd42281121
--- /dev/null
+++ b/common/static/sass/bourbon/functions/_transition-property-name.scss
@@ -0,0 +1,22 @@
+// Return vendor-prefixed property names if appropriate
+// Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background
+//************************************************************************//
+@function transition-property-names($props, $vendor: false) {
+	$new-props: ();
+	
+	@each $prop in $props {
+		$new-props: append($new-props, transition-property-name($prop, $vendor), comma);
+	}
+
+	@return $new-props;
+}
+
+@function transition-property-name($prop, $vendor: false) {
+	// put other properties that need to be prefixed here aswell
+	@if $vendor and $prop == transform {
+		@return unquote('-'+$vendor+'-'+$prop);
+	}
+	@else {
+		@return $prop;
+	}
+}
\ No newline at end of file
diff --git a/common/static/sass/bourbon/functions/_deprecated-webkit-gradient.scss b/common/static/sass/bourbon/helpers/_deprecated-webkit-gradient.scss
similarity index 62%
rename from common/static/sass/bourbon/functions/_deprecated-webkit-gradient.scss
rename to common/static/sass/bourbon/helpers/_deprecated-webkit-gradient.scss
index 1322f6f60e92..cd17e2832daa 100644
--- a/common/static/sass/bourbon/functions/_deprecated-webkit-gradient.scss
+++ b/common/static/sass/bourbon/helpers/_deprecated-webkit-gradient.scss
@@ -1,6 +1,9 @@
 // Render Deprecated Webkit Gradient - Linear || Radial
 //************************************************************************//
-@function deprecated-webkit-gradient($type, $full) {
+@function _deprecated-webkit-gradient($type,
+                                     $deprecated-pos1, $deprecated-pos2,
+                                     $full,
+                                     $deprecated-radius1: false, $deprecated-radius2: false) {
   $gradient-list: ();
   $gradient: false;
   $full-length: length($full);
@@ -14,7 +17,7 @@
       $color-stop: color-stop(nth($gradient, 2), nth($gradient, 1));
       $gradient-list: join($gradient-list, $color-stop, comma);
     }
-    @else {
+    @else if $gradient != null {
       @if $i == $full-length {
         $percentage: 100%;
       }
@@ -27,10 +30,10 @@
   }
 
   @if $type == radial {
-    $gradient: -webkit-gradient(radial, center center, 0, center center, 460, $gradient-list);
+    $gradient: -webkit-gradient(radial, $deprecated-pos1, $deprecated-radius1, $deprecated-pos2, $deprecated-radius2, $gradient-list);
   }
   @else if $type == linear {
-    $gradient: -webkit-gradient(linear, left top, left bottom, $gradient-list);
+    $gradient: -webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $gradient-list);
   }
   @return $gradient;
 }
diff --git a/common/static/sass/bourbon/helpers/_gradient-positions-parser.scss b/common/static/sass/bourbon/helpers/_gradient-positions-parser.scss
new file mode 100644
index 000000000000..07d30b6cf956
--- /dev/null
+++ b/common/static/sass/bourbon/helpers/_gradient-positions-parser.scss
@@ -0,0 +1,13 @@
+@function _gradient-positions-parser($gradient-type, $gradient-positions) {
+  @if $gradient-positions
+  and ($gradient-type == linear)
+  and (type-of($gradient-positions) != color) {
+    $gradient-positions: _linear-positions-parser($gradient-positions);
+  }
+  @else if $gradient-positions
+  and ($gradient-type == radial)
+  and (type-of($gradient-positions) != color) {
+    $gradient-positions: _radial-positions-parser($gradient-positions);
+  }
+  @return $gradient-positions;
+}
diff --git a/common/static/sass/bourbon/helpers/_linear-positions-parser.scss b/common/static/sass/bourbon/helpers/_linear-positions-parser.scss
new file mode 100644
index 000000000000..d26383edce15
--- /dev/null
+++ b/common/static/sass/bourbon/helpers/_linear-positions-parser.scss
@@ -0,0 +1,61 @@
+@function _linear-positions-parser($pos) {
+  $type: type-of(nth($pos, 1));
+  $spec: null;
+  $degree: null;
+  $side: null;
+  $corner: null;
+  $length: length($pos);
+  // Parse Side and corner positions
+  @if ($length > 1) {
+    @if nth($pos, 1) == "to" { // Newer syntax
+      $side: nth($pos, 2);
+
+      @if $length == 2 { // eg. to top
+        // Swap for backwards compatability
+        $degree: _position-flipper(nth($pos, 2));
+      }
+      @else if $length == 3 { // eg. to top left
+        $corner: nth($pos, 3);
+      }
+    }
+    @else if $length == 2 { // Older syntax ("top left")
+      $side: _position-flipper(nth($pos, 1));
+      $corner: _position-flipper(nth($pos, 2));
+    }
+
+    @if ("#{$side} #{$corner}" == "left top") or ("#{$side} #{$corner}" == "top left") {
+      $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
+    }
+    @else if ("#{$side} #{$corner}" == "right top") or ("#{$side} #{$corner}" == "top right") {
+      $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
+    }
+    @else if ("#{$side} #{$corner}" == "right bottom") or ("#{$side} #{$corner}" == "bottom right") {
+      $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
+    }
+    @else if ("#{$side} #{$corner}" == "left bottom") or ("#{$side} #{$corner}" == "bottom left") {
+      $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
+    }
+    $spec: to $side $corner;
+  }
+  @else if $length == 1 {
+    // Swap for backwards compatability
+    @if $type == string {
+      $degree: $pos;
+      $spec: to _position-flipper($pos);
+    }
+    @else {
+      $degree: -270 - $pos; //rotate the gradient opposite from spec
+      $spec: $pos;
+    }
+  }
+  $degree: unquote($degree + ",");
+  $spec:   unquote($spec + ",");
+  @return $degree $spec;
+}
+
+@function _position-flipper($pos) {
+ @return if($pos == left, right, null)
+         if($pos == right, left, null)
+         if($pos == top, bottom, null)
+         if($pos == bottom, top, null);
+}
diff --git a/common/static/sass/bourbon/helpers/_radial-arg-parser.scss b/common/static/sass/bourbon/helpers/_radial-arg-parser.scss
new file mode 100644
index 000000000000..3466695bdfb1
--- /dev/null
+++ b/common/static/sass/bourbon/helpers/_radial-arg-parser.scss
@@ -0,0 +1,69 @@
+@function _radial-arg-parser($G1, $G2, $pos, $shape-size) {
+  @each $value in $G1, $G2 {
+    $first-val: nth($value, 1);
+    $pos-type:  type-of($first-val);
+    $spec-at-index: null;
+
+    // Determine if spec was passed to mixin
+    @if type-of($value) == list {
+      $spec-at-index: if(index($value, at), index($value, at), false);
+    }
+    @if $spec-at-index {
+      @if $spec-at-index > 1 {
+        @for $i from 1 through ($spec-at-index - 1) {
+          $shape-size: $shape-size nth($value, $i);
+        }
+        @for $i from ($spec-at-index + 1) through length($value) {
+          $pos: $pos nth($value, $i);
+        }
+      }
+      @else if $spec-at-index == 1 {
+        @for $i from ($spec-at-index + 1) through length($value) {
+          $pos: $pos nth($value, $i);
+        }
+      }
+      $G1: false;
+    }
+
+    // If not spec calculate correct values
+    @else {
+      @if ($pos-type != color) or ($first-val != "transparent") {
+        @if ($pos-type == number)
+        or ($first-val == "center")
+        or ($first-val == "top")
+        or ($first-val == "right")
+        or ($first-val == "bottom")
+        or ($first-val == "left") {
+
+          $pos: $value;
+
+          @if $pos == $G1 {
+            $G1: false;
+          }
+        }
+
+        @else if
+           ($first-val == "ellipse")
+        or ($first-val == "circle")
+        or ($first-val == "closest-side")
+        or ($first-val == "closest-corner")
+        or ($first-val == "farthest-side")
+        or ($first-val == "farthest-corner")
+        or ($first-val == "contain")
+        or ($first-val == "cover") {
+
+          $shape-size: $value;
+
+          @if $value == $G1 {
+            $G1: false;
+          }
+
+          @else if $value == $G2 {
+            $G2: false;
+          }
+        }
+      }
+    }
+  }
+  @return $G1, $G2, $pos, $shape-size;
+}
diff --git a/common/static/sass/bourbon/helpers/_radial-positions-parser.scss b/common/static/sass/bourbon/helpers/_radial-positions-parser.scss
new file mode 100644
index 000000000000..6a5b47777815
--- /dev/null
+++ b/common/static/sass/bourbon/helpers/_radial-positions-parser.scss
@@ -0,0 +1,18 @@
+@function _radial-positions-parser($gradient-pos) {
+  $shape-size: nth($gradient-pos, 1);
+  $pos:        nth($gradient-pos, 2);
+  $shape-size-spec: _shape-size-stripper($shape-size);
+
+  $pre-spec: unquote(if($pos, "#{$pos}, ", null))
+             unquote(if($shape-size, "#{$shape-size},", null));
+  $pos-spec: if($pos, "at #{$pos}", null);
+
+  $spec: "#{$shape-size-spec} #{$pos-spec}";
+
+  // Add comma
+  @if ($spec != '  ') {
+    $spec: "#{$spec},"
+  }
+
+  @return $pre-spec $spec;
+}
diff --git a/common/static/sass/bourbon/helpers/_render-gradients.scss b/common/static/sass/bourbon/helpers/_render-gradients.scss
new file mode 100644
index 000000000000..5765676838de
--- /dev/null
+++ b/common/static/sass/bourbon/helpers/_render-gradients.scss
@@ -0,0 +1,26 @@
+// User for linear and radial gradients within background-image or border-image properties
+
+@function _render-gradients($gradient-positions, $gradients, $gradient-type, $vendor: false) {
+  $pre-spec: null;
+  $spec: null;
+  $vendor-gradients: null;
+  @if $gradient-type == linear {
+    @if $gradient-positions {
+      $pre-spec: nth($gradient-positions, 1);
+      $spec:     nth($gradient-positions, 2);
+    }
+  }
+  @else if $gradient-type == radial {
+    $pre-spec: nth($gradient-positions, 1);
+    $spec:     nth($gradient-positions, 2);
+  }
+
+  @if $vendor {
+    $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient(#{$pre-spec} $gradients);
+  }
+  @else if $vendor == false {
+    $vendor-gradients: "#{$gradient-type}-gradient(#{$spec} #{$gradients})";
+    $vendor-gradients: unquote($vendor-gradients);
+  }
+  @return $vendor-gradients;
+}
diff --git a/common/static/sass/bourbon/helpers/_shape-size-stripper.scss b/common/static/sass/bourbon/helpers/_shape-size-stripper.scss
new file mode 100644
index 000000000000..ee5eda422050
--- /dev/null
+++ b/common/static/sass/bourbon/helpers/_shape-size-stripper.scss
@@ -0,0 +1,10 @@
+@function _shape-size-stripper($shape-size) {
+  $shape-size-spec: null;
+  @each $value in $shape-size {
+    @if ($value == "cover") or ($value == "contain") {
+      $value: null;
+    }
+    $shape-size-spec: "#{$shape-size-spec} #{$value}";
+  }
+  @return $shape-size-spec;
+}
diff --git a/common/static/sass/bourbon/lib/bourbon.rb b/common/static/sass/bourbon/lib/bourbon.rb
deleted file mode 100644
index 1635be836de5..000000000000
--- a/common/static/sass/bourbon/lib/bourbon.rb
+++ /dev/null
@@ -1,19 +0,0 @@
-require "bourbon/generator"
-
-module Bourbon
-  if defined?(Rails)
-    class Engine < ::Rails::Engine
-      require 'bourbon/engine'
-    end
-
-    module Rails
-      class Railtie < ::Rails::Railtie
-        rake_tasks do
-          load "tasks/install.rake"
-        end
-      end
-    end
-  end
-end
-
-require File.join(File.dirname(__FILE__), "/bourbon/sass_extensions")
diff --git a/common/static/sass/bourbon/lib/bourbon/sass_extensions.rb b/common/static/sass/bourbon/lib/bourbon/sass_extensions.rb
deleted file mode 100644
index ad567200e3eb..000000000000
--- a/common/static/sass/bourbon/lib/bourbon/sass_extensions.rb
+++ /dev/null
@@ -1,6 +0,0 @@
-module Bourbon::SassExtensions
-end
-
-require "sass"
-
-require File.join(File.dirname(__FILE__), "/sass_extensions/functions")
diff --git a/common/static/sass/bourbon/lib/bourbon/sass_extensions/functions.rb b/common/static/sass/bourbon/lib/bourbon/sass_extensions/functions.rb
deleted file mode 100644
index daa877650e59..000000000000
--- a/common/static/sass/bourbon/lib/bourbon/sass_extensions/functions.rb
+++ /dev/null
@@ -1,13 +0,0 @@
-module Bourbon::SassExtensions::Functions
-end
-
-require File.join(File.dirname(__FILE__), "/functions/compact")
-
-module Sass::Script::Functions
-  include Bourbon::SassExtensions::Functions::Compact
-end
-
-# Wierd that this has to be re-included to pick up sub-modules. Ruby bug?
-class Sass::Script::Functions::EvaluationContext
-  include Sass::Script::Functions
-end
diff --git a/common/static/sass/bourbon/lib/bourbon/sass_extensions/functions/compact.rb b/common/static/sass/bourbon/lib/bourbon/sass_extensions/functions/compact.rb
deleted file mode 100644
index 5192e921e794..000000000000
--- a/common/static/sass/bourbon/lib/bourbon/sass_extensions/functions/compact.rb
+++ /dev/null
@@ -1,13 +0,0 @@
-# Compact function pulled from compass
-module Bourbon::SassExtensions::Functions::Compact
-
-  def compact(*args)
-    sep = :comma
-    if args.size == 1 && args.first.is_a?(Sass::Script::List)
-      args = args.first.value
-      sep = args.first.separator
-    end
-    Sass::Script::List.new(args.reject{|a| !a.to_bool}, sep)
-  end
-
-end
diff --git a/rakelib/assets.rake b/rakelib/assets.rake
index 5c8abc1fb0bb..ccf91216954a 100644
--- a/rakelib/assets.rake
+++ b/rakelib/assets.rake
@@ -43,7 +43,6 @@ def sass_cmd(watch=false, debug=false)
 
     "sass #{debug ? '--debug-info' : '--style compressed'} " +
           "--load-path #{sass_load_paths.join(' ')} " +
-          "--require ./common/static/sass/bourbon/lib/bourbon.rb " +
           "#{watch ? '--watch' : '--update'} -E utf-8 #{sass_watch_paths.join(' ')}"
 end
 

From 41374838cbc80a9772603ab6e9b5e1b7193ee309 Mon Sep 17 00:00:00 2001
From: David Baumgold <david@davidbaumgold.com>
Date: Mon, 8 Jul 2013 11:01:43 -0400
Subject: [PATCH 02/20] Changed `@include border-radius()` to `border-radius`

The official border-radius mixins were deprecated and removed in Bourbon 3.0.
https://github.com/thoughtbot/bourbon/pull/95
---
 cms/static/sass/_base.scss                    |  2 +-
 cms/static/sass/_mixins-inherited.scss        |  2 +-
 cms/static/sass/elements/_footer.scss         |  2 +-
 cms/static/sass/elements/_navigation.scss     |  2 +-
 .../sass/elements/_system-feedback.scss       |  2 +-
 cms/static/sass/elements/_system-help.scss    |  2 +-
 cms/static/sass/elements/_tender-widget.scss  |  2 +-
 cms/static/sass/views/_account.scss           |  2 +-
 cms/static/sass/views/_index.scss             |  2 +-
 cms/static/sass/views/_outline.scss           | 12 +--
 cms/static/sass/views/_settings.scss          |  8 +-
 cms/static/sass/views/_subsection.scss        |  2 +-
 .../lib/xmodule/xmodule/css/capa/display.scss | 14 ++--
 .../css/combinedopenended/display.scss        |  4 +-
 .../css/crowdsource_hinter/display.scss       |  2 +-
 .../xmodule/xmodule/css/video/display.scss    |  8 +-
 .../xmodule/css/videoalpha/display.scss       |  8 +-
 common/static/sass/_mixins.scss               |  4 +-
 lms/static/sass/_discussion.scss              | 74 +++++++++----------
 lms/static/sass/base/_base.scss               |  8 +-
 lms/static/sass/course/_info.scss             |  4 +-
 lms/static/sass/course/_profile.scss          |  2 +-
 lms/static/sass/course/base/_base.scss        |  2 +-
 lms/static/sass/course/base/_extends.scss     |  2 +-
 .../sass/course/courseware/_amplifier.scss    |  8 +-
 .../sass/course/courseware/_courseware.scss   |  6 +-
 .../sass/course/courseware/_sidebar.scss      | 12 +--
 .../sass/course/layout/_calculator.scss       |  6 +-
 .../course/layout/_courseware_header.scss     |  2 +-
 lms/static/sass/course/wiki/_wiki.scss        | 36 ++++-----
 lms/static/sass/multicourse/_account.scss     | 10 +--
 .../sass/multicourse/_course_about.scss       |  8 +-
 lms/static/sass/multicourse/_dashboard.scss   | 14 ++--
 lms/static/sass/multicourse/_home.scss        |  4 +-
 lms/static/sass/multicourse/_media-kit.scss   | 14 ++--
 .../sass/multicourse/_password_reset.scss     |  2 +-
 .../sass/multicourse/_press_release.scss      |  2 +-
 .../multicourse/_testcenter-register.scss     | 26 +++----
 .../sass/shared/_activation_messages.scss     |  2 +-
 lms/static/sass/shared/_course_filter.scss    | 10 +--
 lms/static/sass/shared/_course_object.scss    |  4 +-
 lms/static/sass/shared/_forms.scss            |  4 +-
 lms/static/sass/shared/_header.scss           | 10 +--
 lms/static/sass/shared/_modal.scss            |  8 +-
 44 files changed, 180 insertions(+), 180 deletions(-)

diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss
index a26d2a9ef5cd..b24470536367 100644
--- a/cms/static/sass/_base.scss
+++ b/cms/static/sass/_base.scss
@@ -591,7 +591,7 @@ hr.divide {
 }
 
 .window {
-  // @include border-radius(3px);
+  // border-radius: 3px;
   // @include box-shadow(0 1px 1px $shadow-l1);
   // margin-bottom: $baseline;
   // border: 1px solid $gray-l2;
diff --git a/cms/static/sass/_mixins-inherited.scss b/cms/static/sass/_mixins-inherited.scss
index c0d9df77ce5c..5ab35517f063 100644
--- a/cms/static/sass/_mixins-inherited.scss
+++ b/cms/static/sass/_mixins-inherited.scss
@@ -108,8 +108,8 @@
 // inherited - ui
 .window {
   @include clearfix();
-  @include border-radius(3px);
   @include box-shadow(0 1px 1px $shadow-l1);
+  border-radius: 3px;
   margin-bottom: $baseline;
   border: 1px solid $gray-l2;
   background: $white;
diff --git a/cms/static/sass/elements/_footer.scss b/cms/static/sass/elements/_footer.scss
index a357b2f6cabf..b9e2619c7687 100644
--- a/cms/static/sass/elements/_footer.scss
+++ b/cms/static/sass/elements/_footer.scss
@@ -44,7 +44,7 @@
         }
 
         a {
-          @include border-radius(2px);
+          border-radius: 2px;
           padding: ($baseline/2) ($baseline*0.75);
           background: transparent;
 
diff --git a/cms/static/sass/elements/_navigation.scss b/cms/static/sass/elements/_navigation.scss
index 4a6aacc5292c..4a363f7f4237 100644
--- a/cms/static/sass/elements/_navigation.scss
+++ b/cms/static/sass/elements/_navigation.scss
@@ -74,7 +74,7 @@ nav {
   }
 
   .nav-sub {
-    @include border-radius(2px);
+    border-radius: 2px;
     @include box-sizing(border-box);
     @include box-shadow(0 1px 1px $shadow-l1);
     position: relative;
diff --git a/cms/static/sass/elements/_system-feedback.scss b/cms/static/sass/elements/_system-feedback.scss
index 69eccf4f3423..56204470b339 100644
--- a/cms/static/sass/elements/_system-feedback.scss
+++ b/cms/static/sass/elements/_system-feedback.scss
@@ -162,7 +162,7 @@
   }
 
   .prompt {
-    @include border-radius(($baseline/5));
+    border-radius: ($baseline/5);
     @include box-shadow(0 0 3px $shadow-d1);
     display: inline-block;
     vertical-align: middle;
diff --git a/cms/static/sass/elements/_system-help.scss b/cms/static/sass/elements/_system-help.scss
index a9a3e16128a1..0a7b068e93b5 100644
--- 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;
diff --git a/cms/static/sass/elements/_tender-widget.scss b/cms/static/sass/elements/_tender-widget.scss
index b00d38f1ce92..e7be0cd48787 100644
--- a/cms/static/sass/elements/_tender-widget.scss
+++ b/cms/static/sass/elements/_tender-widget.scss
@@ -7,7 +7,7 @@
 }
 
 #tender_window {
-  @include border-radius(3px);
+  border-radius: 3px;
   @include box-shadow(0 2px 3px $shadow);
   height: ($baseline*35) !important;
   background: $white !important;
diff --git a/cms/static/sass/views/_account.scss b/cms/static/sass/views/_account.scss
index f1fd2bbcc467..d462405926ac 100644
--- a/cms/static/sass/views/_account.scss
+++ b/cms/static/sass/views/_account.scss
@@ -58,7 +58,7 @@ body.signup, body.signin {
     form {
       @include box-sizing(border-box);
       @include box-shadow(0 1px 2px $shadow-l1);
-      @include border-radius(2px);
+      border-radius: 2px;
       width: 100%;
       border: 1px solid $gray-l2;
       padding: $baseline ($baseline*1.5);
diff --git a/cms/static/sass/views/_index.scss b/cms/static/sass/views/_index.scss
index fdd2eec6bf56..69dec7694779 100644
--- a/cms/static/sass/views/_index.scss
+++ b/cms/static/sass/views/_index.scss
@@ -214,8 +214,8 @@ body.index {
 
             .proofpoint {
               @include box-sizing(border-box);
-              @include border-radius(($baseline/4));
               @include transition(color .50s ease-in-out);
+              border-radius: ($baseline/4);
               position: relative;
               top: 0;
               float: left;
diff --git a/cms/static/sass/views/_outline.scss b/cms/static/sass/views/_outline.scss
index f829bf8c0ccc..151dcc6e1f2f 100644
--- 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,7 +64,7 @@ body.course.outline {
 
               .menu {
                 @include font-size(12);
-                @include border-radius(4px);
+                border-radius: 4px;
                 @include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
                 @include transition(opacity .15s);
                 z-index: 1;
@@ -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,7 +342,7 @@ body.course.outline {
 
               .menu {
                 @include font-size(12);
-                @include border-radius(4px);
+                border-radius: 4px;
                 @include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
                 @include transition(opacity .15s);
                 @include transition(display .15s);
@@ -542,7 +542,7 @@ body.course.outline {
 
       [class^="icon-"] {
           @include font-size(11);
-          @include border-radius(20px);
+          border-radius: 20px;
           position: relative;
           top: -1px;
           display: inline-block;
diff --git a/cms/static/sass/views/_settings.scss b/cms/static/sass/views/_settings.scss
index d815663d76aa..52e16af63a16 100644
--- a/cms/static/sass/views/_settings.scss
+++ b/cms/static/sass/views/_settings.scss
@@ -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;
 
@@ -295,7 +295,7 @@ body.course.settings {
       // course link note
       .note-promotion-courseURL {
         @include box-shadow(0 2px 1px $shadow-l1);
-        @include border-radius(($baseline/5));
+        border-radius: ($baseline/5);
         margin-top: ($baseline*1.5);
         border: 1px solid $gray-l2;
         padding: ($baseline/2) 0 0 0;
@@ -410,7 +410,7 @@ body.course.settings {
 
       .input-existing {
         @include box-sizing(border-box);
-        @include border-radius(3px);
+        border-radius: 3px;
         background: $gray-l5;
         padding: ($baseline/2);
 
@@ -555,7 +555,7 @@ body.course.settings {
               top: 0;
               height: 50px;
               text-align: right;
-              @include border-radius(2px);
+              border-radius: 2px;
 
               &:hover,
               &.is-dragging {
diff --git a/cms/static/sass/views/_subsection.scss b/cms/static/sass/views/_subsection.scss
index 68e3548ea163..715386a5a1e3 100644
--- a/cms/static/sass/views/_subsection.scss
+++ b/cms/static/sass/views/_subsection.scss
@@ -347,7 +347,7 @@ body.course.subsection {
         background: $white;
         border: 1px solid $mediumGrey;
         font-size: 12px;
-        @include border-radius(4px);
+        border-radius: 4px;
         @include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
         @include transition(opacity .15s);
 
diff --git a/common/lib/xmodule/xmodule/css/capa/display.scss b/common/lib/xmodule/xmodule/css/capa/display.scss
index ff40a5f7ca4e..15d40aa63dde 100644
--- a/common/lib/xmodule/xmodule/css/capa/display.scss
+++ b/common/lib/xmodule/xmodule/css/capa/display.scss
@@ -111,7 +111,7 @@ section.problem {
       background: #FFF;
       position: relative;
       @include box-shadow(inset 0 0 0 1px #eee);
-      @include border-radius(3px);
+      border-radius: 3px;
 
       &:empty {
         display: none;
@@ -214,7 +214,7 @@ section.problem {
           background: #f1f1f1;
           border: 1px solid #e3e3e3;
           @include inline-block;
-          @include border-radius(4px);
+          border-radius: 4px;
           min-width: 30px;
         }
       }
@@ -464,7 +464,7 @@ section.problem {
     white-space: nowrap;
     border: 1px solid #EAEAEA;
     background-color: #F8F8F8;
-    @include border-radius(3px);
+    border-radius: 3px;
     font-size: .9em;
   }
 
@@ -475,7 +475,7 @@ section.problem {
     line-height: 1.4;
     overflow: auto;
     padding: 6px 10px;
-    @include border-radius(3px);
+    border-radius: 3px;
 
     > code {
       margin: 0;
@@ -499,7 +499,7 @@ section.problem {
     }
 
     pre {
-      @include border-radius(0);
+      border-radius: 0;
       border-radius: 0;
       border-width: 0;
       margin: 0;
@@ -580,7 +580,7 @@ section.problem {
     .submission_feedback {
       // background: #F3F3F3;
       // border: 1px solid #ddd;
-      // @include border-radius(3px);
+      // border-radius: 3px;
       // padding: 8px 12px;
       // margin-top: 10px;
       @include inline-block;
@@ -690,7 +690,7 @@ section.problem {
       background: #FFF;
       position: relative;
       @include box-shadow(inset 0 0 0 1px #eee);
-      @include border-radius(3px);
+      border-radius: 3px;
 
       p:last-of-type {
         margin-bottom: 0;
diff --git a/common/lib/xmodule/xmodule/css/combinedopenended/display.scss b/common/lib/xmodule/xmodule/css/combinedopenended/display.scss
index 8378f6002337..34ea27a40b0d 100644
--- a/common/lib/xmodule/xmodule/css/combinedopenended/display.scss
+++ b/common/lib/xmodule/xmodule/css/combinedopenended/display.scss
@@ -293,7 +293,7 @@ section.open-ended-child {
       background: #FFF;
       position: relative;
       @include box-shadow(inset 0 0 0 1px #eee);
-      @include border-radius(3px);
+      border-radius: 3px;
 
       &:empty {
         display: none;
@@ -649,7 +649,7 @@ section.open-ended-child {
 
           input[type=radio]:checked + label {
               background: #666;
-              color: white; 
+              color: white;
           }
           input[class='grade-selection'] {
               display: none;
diff --git a/common/lib/xmodule/xmodule/css/crowdsource_hinter/display.scss b/common/lib/xmodule/xmodule/css/crowdsource_hinter/display.scss
index fac808cfcb68..b13f0b30184c 100644
--- a/common/lib/xmodule/xmodule/css/crowdsource_hinter/display.scss
+++ b/common/lib/xmodule/xmodule/css/crowdsource_hinter/display.scss
@@ -1,6 +1,6 @@
 .crowdsource-wrapper {
   @include box-shadow(inset 0 1px 2px 1px rgba(0,0,0,0.1));
-  @include border-radius(2px);
+  border-radius: 2px;
   display: none;
   margin-top: 20px;
   padding: (15px);
diff --git a/common/lib/xmodule/xmodule/css/video/display.scss b/common/lib/xmodule/xmodule/css/video/display.scss
index f3f76dc0d675..eae35e260432 100644
--- a/common/lib/xmodule/xmodule/css/video/display.scss
+++ b/common/lib/xmodule/xmodule/css/video/display.scss
@@ -49,7 +49,7 @@ div.video {
         @include clearfix();
         background: #c2c2c2;
         border: 1px solid #000;
-        @include border-radius(0);
+        border-radius: 0;
         border-top: 1px solid #000;
         @include box-shadow(inset 0 1px 0 #eee, 0 1px 0 #555);
         height: 7px;
@@ -66,7 +66,7 @@ div.video {
           background: $pink url(../images/slider-handle.png) center center no-repeat;
           @include background-size(50%);
           border: 1px solid darken($pink, 20%);
-          @include border-radius(15px);
+          border-radius: 15px;
           @include box-shadow(inset 0 1px 0 lighten($pink, 10%));
           cursor: pointer;
           height: 15px;
@@ -322,7 +322,7 @@ div.video {
                 background: $pink url(../images/slider-handle.png) center center no-repeat;
                 @include background-size(50%);
                 border: 1px solid darken($pink, 20%);
-                @include border-radius(15px);
+                border-radius: 15px;
                 @include box-shadow(inset 0 1px 0 lighten($pink, 10%));
                 cursor: pointer;
                 height: 15px;
@@ -426,7 +426,7 @@ div.video {
         margin-top: -7px;
 
         a.ui-slider-handle {
-          @include border-radius(20px);
+          border-radius: 20px;
           height: 20px;
           margin-left: -10px;
           top: -4px;
diff --git a/common/lib/xmodule/xmodule/css/videoalpha/display.scss b/common/lib/xmodule/xmodule/css/videoalpha/display.scss
index f3f76dc0d675..eae35e260432 100644
--- a/common/lib/xmodule/xmodule/css/videoalpha/display.scss
+++ b/common/lib/xmodule/xmodule/css/videoalpha/display.scss
@@ -49,7 +49,7 @@ div.video {
         @include clearfix();
         background: #c2c2c2;
         border: 1px solid #000;
-        @include border-radius(0);
+        border-radius: 0;
         border-top: 1px solid #000;
         @include box-shadow(inset 0 1px 0 #eee, 0 1px 0 #555);
         height: 7px;
@@ -66,7 +66,7 @@ div.video {
           background: $pink url(../images/slider-handle.png) center center no-repeat;
           @include background-size(50%);
           border: 1px solid darken($pink, 20%);
-          @include border-radius(15px);
+          border-radius: 15px;
           @include box-shadow(inset 0 1px 0 lighten($pink, 10%));
           cursor: pointer;
           height: 15px;
@@ -322,7 +322,7 @@ div.video {
                 background: $pink url(../images/slider-handle.png) center center no-repeat;
                 @include background-size(50%);
                 border: 1px solid darken($pink, 20%);
-                @include border-radius(15px);
+                border-radius: 15px;
                 @include box-shadow(inset 0 1px 0 lighten($pink, 10%));
                 cursor: pointer;
                 height: 15px;
@@ -426,7 +426,7 @@ div.video {
         margin-top: -7px;
 
         a.ui-slider-handle {
-          @include border-radius(20px);
+          border-radius: 20px;
           height: 20px;
           margin-left: -10px;
           top: -4px;
diff --git a/common/static/sass/_mixins.scss b/common/static/sass/_mixins.scss
index 6e65f380c3ed..531f1442072c 100644
--- a/common/static/sass/_mixins.scss
+++ b/common/static/sass/_mixins.scss
@@ -140,11 +140,11 @@
 
 // pill button
 .btn-pill {
-  @include border-radius($baseline/5);
+  border-radius: ($baseline/5);
 }
 
 .btn-rounded {
-  @include border-radius($baseline/2);
+  border-radius: ($baseline/2);
 }
 
 // primary button
diff --git a/lms/static/sass/_discussion.scss b/lms/static/sass/_discussion.scss
index 068af0e24a80..000c38abe0e7 100644
--- a/lms/static/sass/_discussion.scss
+++ b/lms/static/sass/_discussion.scss
@@ -95,7 +95,7 @@
 
 
 body.discussion {
-  
+
   .new-post-form-errors {
     display: none;
     background: $error-red;
@@ -490,7 +490,7 @@ body.discussion {
   section.user-profile {
     @extend .sidebar;
     display: table-cell;
-    @include border-radius(3px 0 0 3px);
+    border-radius: 3px 0 0 3px;
     border-right: 1px solid #ddd;
     @include box-shadow(none);
     background-color: $sidebar-color;
@@ -548,7 +548,7 @@ body.discussion {
     font-style: normal;
     font-size: 0.8em;
     line-height: 1.6em;
-    @include border-radius(3px 3px 0 0);
+    border-radius: 3px 3px 0 0;
 
     &::-webkit-input-placeholder {
       color: #888;
@@ -563,7 +563,7 @@ body.discussion {
     @include box-sizing(border-box);
     border: 1px solid #c8c8c8;
     border-top-width: 0;
-    @include border-radius(0 0 3px 3px);
+    border-radius: 0 0 3px 3px;
     overflow: hidden;
     @include transition(all, .2s, easeOut);
 
@@ -1071,7 +1071,7 @@ body.discussion {
 
     a {
       display: block;
-      position: relative;      
+      position: relative;
       float: left;
       clear: both;
       width: 100%;
@@ -1278,8 +1278,8 @@ body.discussion {
   .discussion-article {
     position: relative;
     padding: 40px;
-    min-height: 468px;         
-    
+    min-height: 468px;
+
     a {
       word-wrap: break-word;
     }
@@ -1332,9 +1332,9 @@ body.discussion {
         background-position: 0 0;
       }
     }
-    
-    
-    
+
+
+
   }
 
   .discussion-post {
@@ -1379,7 +1379,7 @@ body.discussion {
     margin-bottom: 20px;
   }
 
-  
+
 
   .responses {
     list-style: none;
@@ -1609,8 +1609,8 @@ body.discussion {
     background: #449944;
     font-size: 9px;
     font-weight: 700;
-    font-style: normal;   
-    color: white;   
+    font-style: normal;
+    color: white;
     text-transform: uppercase;
   }
 
@@ -2206,7 +2206,7 @@ body.discussion {
       font-style: normal;
       font-size: 0.8em;
       line-height: 1.6em;
-      @include border-radius(3px 3px 0 0);
+      border-radius: 3px 3px 0 0;
 
       &::-webkit-input-placeholder {
         color: #888;
@@ -2221,7 +2221,7 @@ body.discussion {
       @include box-sizing(border-box);
       border: 1px solid #c8c8c8;
       border-top-width: 0;
-      @include border-radius(0 0 3px 3px);
+      border-radius: 0 0 3px 3px;
       overflow: hidden;
       @include transition(all, .2s, easeOut);
 
@@ -2448,7 +2448,7 @@ body.discussion {
       float:right;
       padding-right: 5px;
       font-style: italic;
-      cursor:pointer; 
+      cursor:pointer;
       margin-right: 10px;
       opacity: 0.8;
 
@@ -2460,7 +2460,7 @@ body.discussion {
         @include transition(opacity .2s);
         opacity: 1.0;
       }
-    }  
+    }
 
 .discussion-pin-inline {
       font-size: 12px;
@@ -2472,39 +2472,39 @@ body.discussion {
       margin-right:35px;
       margin-top:13px;
       opacity: 1.0;
-    }  
+    }
 
 .notpinned .icon {
-  display: block; 
+  display: block;
   float: left;
   margin: 3px;
-  width: 10px; 
+  width: 10px;
   height: 14px;
   padding-right: 3px;
-  background: transparent url('../images/unpinned.png') no-repeat 0 0; 
+  background: transparent url('../images/unpinned.png') no-repeat 0 0;
 }
 
 .pinned .icon {
-  display: block; 
+  display: block;
   float: left;
   margin: 3px;
-  width: 10px; 
-  height: 14px; 
+  width: 10px;
+  height: 14px;
   padding-right: 3px;
-  background: transparent url('../images/pinned.png') no-repeat 0 0; 
+  background: transparent url('../images/pinned.png') no-repeat 0 0;
 }
 
 .pinned span {
   color: #B82066;
   font-style: italic;
-  //cursor change is here since pins are read-only for inline discussions. 
+  //cursor change is here since pins are read-only for inline discussions.
   cursor: default;
 }
 
 .notpinned span {
   color: #888;
   font-style: italic;
-  //cursor change is here since pins are read-only for inline discussions. 
+  //cursor change is here since pins are read-only for inline discussions.
   cursor: default;
 }
 
@@ -2526,28 +2526,28 @@ display:none;
         opacity: 1.0;
       }
 
-    }  
-    
+    }
+
 .notflagged .icon
 {
-  display: block; 
+  display: block;
   float: left;
   margin: 3px;
-  width: 10px; 
+  width: 10px;
   height: 14px;
   padding-right: 3px;
-  background: transparent url('../images/notflagged.png') no-repeat 0 0; 
+  background: transparent url('../images/notflagged.png') no-repeat 0 0;
 }
 
 .flagged .icon
 {
-  display: block; 
+  display: block;
   float: left;
   margin: 3px;
-  width: 10px; 
-  height: 14px; 
+  width: 10px;
+  height: 14px;
   padding-right: 3px;
-  background: transparent url('../images/flagged.png') no-repeat 0 0; 
+  background: transparent url('../images/flagged.png') no-repeat 0 0;
 }
 
 .flagged span {
@@ -2558,4 +2558,4 @@ display:none;
 .notflagged span {
   color: #888;
   font-style: italic;
-}
\ No newline at end of file
+}
diff --git a/lms/static/sass/base/_base.scss b/lms/static/sass/base/_base.scss
index 2ac5b0a1dac0..547607760148 100644
--- a/lms/static/sass/base/_base.scss
+++ b/lms/static/sass/base/_base.scss
@@ -204,7 +204,7 @@ mark {
   max-width: 1140px;
   min-width: 720px;
   margin: auto;
-  @include border-radius(0 0 3px 3px);
+  border-radius: 0 0 3px 3px;
   background: #f4f4e0;
   color: #3c3c3c;
   padding: 5px 20px 8px;
@@ -232,7 +232,7 @@ mark {
     cursor: pointer;
     border: 1px solid #ccc;
     border-top-style: none;
-    @include border-radius(0px 0px 10px 10px);
+    border-radius: 0px 0px 10px 10px;
     background: transparentize(#fff, 0.25);
     color: transparentize(#333, 0.25);
     font-weight: bold;
@@ -261,12 +261,12 @@ mark {
 
     &#feedback_link_problem {
       border-bottom-style: none;
-      @include border-radius(10px 10px 0px 0px);
+      border-radius: 10px 10px 0px 0px;
     }
 
     &#feedback_link_question {
       border-top-style: none;
-      @include border-radius(0px 0px 10px 10px);
+      border-radius: 0px 0px 10px 10px;
     }
 
     &:hover {
diff --git a/lms/static/sass/course/_info.scss b/lms/static/sass/course/_info.scss
index 741a7f9a2236..e33d4b20fc28 100644
--- a/lms/static/sass/course/_info.scss
+++ b/lms/static/sass/course/_info.scss
@@ -67,7 +67,7 @@ div.info-wrapper {
 
           > ol {
             list-style: decimal outside none;
-            padding: 0 0 0 1em; 
+            padding: 0 0 0 1em;
           }
 
           li {
@@ -80,7 +80,7 @@ div.info-wrapper {
 
   section.handouts {
     @extend .sidebar;
-    @include border-radius(0 4px 4px 0);
+    border-radius: 0 4px 4px 0;
     border-left: 1px solid #ddd;
     @include box-shadow(none);
     font-size: 14px;
diff --git a/lms/static/sass/course/_profile.scss b/lms/static/sass/course/_profile.scss
index 0683781e4487..f4ce3f4bf3d3 100644
--- a/lms/static/sass/course/_profile.scss
+++ b/lms/static/sass/course/_profile.scss
@@ -5,7 +5,7 @@ div.profile-wrapper {
   section.user-info {
     @extend .sidebar;
     border-left: 1px solid #d3d3d3;
-    @include border-radius(0px 4px 4px 0);
+    border-radius: 0px 4px 4px 0;
     border-right: 0;
 
     &:after {
diff --git a/lms/static/sass/course/base/_base.scss b/lms/static/sass/course/base/_base.scss
index a750029001d8..a8bdf1502fe0 100644
--- a/lms/static/sass/course/base/_base.scss
+++ b/lms/static/sass/course/base/_base.scss
@@ -59,7 +59,7 @@ input[type="email"],
 input[type="password"] {
   background: $white;
   border: 1px solid $border-color-2;
-  @include border-radius(0);
+  border-radius: 0;
   @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6), inset 0 0 3px 0 rgba(0,0,0, 0.1));
   @include box-sizing(border-box);
   font: normal 1em $sans-serif;
diff --git a/lms/static/sass/course/base/_extends.scss b/lms/static/sass/course/base/_extends.scss
index a94a9511fe61..7557895896a1 100644
--- a/lms/static/sass/course/base/_extends.scss
+++ b/lms/static/sass/course/base/_extends.scss
@@ -143,7 +143,7 @@ h1.top-header {
     a {
       background: #f6f6f6 url('../images/slide-left-icon.png') center center no-repeat;
       border: 1px solid #D3D3D3;
-      @include border-radius(3px 0 0 3px);
+      border-radius: 3px 0 0 3px;
       height: 16px;
       padding: 6px;
       position: absolute;
diff --git a/lms/static/sass/course/courseware/_amplifier.scss b/lms/static/sass/course/courseware/_amplifier.scss
index 18a02f489d7d..9f469b682118 100644
--- a/lms/static/sass/course/courseware/_amplifier.scss
+++ b/lms/static/sass/course/courseware/_amplifier.scss
@@ -20,7 +20,7 @@ section.tool-wrapper {
     .ui-widget-content {
       background: none;
       border: none;
-      @include border-radius(0);
+      border-radius: 0;
     }
 
     canvas {
@@ -30,7 +30,7 @@ section.tool-wrapper {
     ul.ui-tabs-nav {
       background: darken(#073642, 2%);
       border-bottom: 1px solid darken(#073642, 8%);
-      @include border-radius(0);
+      border-radius: 0;
       margin: (-(lh())) (-(lh())) 0;
       padding: 0;
       position: relative;
@@ -39,7 +39,7 @@ section.tool-wrapper {
       li {
         background: none;
         border: none;
-        @include border-radius(0);
+        border-radius: 0;
         color: #fff;
         margin-bottom: 0;
 
@@ -159,7 +159,7 @@ section.tool-wrapper {
     }
 
     label {
-      @include border-radius(2px);
+      border-radius: 2px;
       color: #fff;
       font-weight: bold;
       padding: 3px;
diff --git a/lms/static/sass/course/courseware/_courseware.scss b/lms/static/sass/course/courseware/_courseware.scss
index ab285392caf5..af80b1347d2d 100644
--- a/lms/static/sass/course/courseware/_courseware.scss
+++ b/lms/static/sass/course/courseware/_courseware.scss
@@ -62,7 +62,7 @@ div.course-wrapper {
 
         header {
           @extend h1.top-header;
-          @include border-radius(0 4px 0 0);
+          border-radius: 0 4px 0 0;
           margin-bottom: -16px;
           border-bottom: 0;
 
@@ -169,7 +169,7 @@ div.course-wrapper {
 
     div.ui-tabs {
       border: 0;
-      @include border-radius(0);
+      border-radius: 0;
       margin: 0;
       padding: 0;
 
@@ -180,7 +180,7 @@ div.course-wrapper {
       }
 
       .ui-tabs-panel {
-        @include border-radius(0);
+        border-radius: 0;
         padding: 0;
       }
     }
diff --git a/lms/static/sass/course/courseware/_sidebar.scss b/lms/static/sass/course/courseware/_sidebar.scss
index 09a89e4d9530..d1d5645fcd8b 100644
--- a/lms/static/sass/course/courseware/_sidebar.scss
+++ b/lms/static/sass/course/courseware/_sidebar.scss
@@ -1,7 +1,7 @@
 section.course-index {
   @extend .sidebar;
   @extend .tran;
-  @include border-radius(3px 0 0 3px);
+  border-radius: 3px 0 0 3px;
   border-right: 1px solid $border-color-2;
 
   #open_close_accordion {
@@ -21,7 +21,7 @@ section.course-index {
     font-size: 14px;
 
     h3 {
-      @include border-radius(0);
+      border-radius: 0;
       margin: 0;
       overflow: visible;
 
@@ -44,7 +44,7 @@ section.course-index {
         color: #000;
 
         a {
-          @include border-radius(0);
+          border-radius: 0;
           @include box-shadow(none);
           padding-left: 19px;
         }
@@ -96,7 +96,7 @@ section.course-index {
     ul.ui-accordion-content {
       background: transparent;
       border: none;
-      @include border-radius(0);
+      border-radius: 0;
       margin: 0;
       padding: 9px 0 9px 9px;
       overflow: auto;
@@ -104,12 +104,12 @@ section.course-index {
 
       li {
         border-bottom: 0;
-        @include border-radius(0);
+        border-radius: 0;
         margin-bottom: 4px;
 
         a {
           background: transparent;
-          @include border-radius(4px);
+          border-radius: 4px;
           display: block;
           padding: 5px 36px 5px 10px;
           position: relative;
diff --git a/lms/static/sass/course/layout/_calculator.scss b/lms/static/sass/course/layout/_calculator.scss
index c0a8764a8c34..2645845d0b16 100644
--- a/lms/static/sass/course/layout/_calculator.scss
+++ b/lms/static/sass/course/layout/_calculator.scss
@@ -14,7 +14,7 @@ div.calc-main {
   a.calc {
     background: url("../images/calc-icon.png") rgba(#111, .9) no-repeat center;
     border-bottom: 0;
-    @include border-radius(3px 3px 0 0);
+    border-radius: 3px 3px 0 0;
     color: #fff;
     float: right;
     height: 20px;
@@ -51,7 +51,7 @@ div.calc-main {
       input#calculator_button {
         background: #111;
         border: 1px solid #000;
-        @include border-radius(0);
+        border-radius: 0;
         @include box-shadow(none);
         @include box-sizing(border-box);
         color: #fff;
@@ -121,7 +121,7 @@ div.calc-main {
 
           dl {
             background: #fff;
-            @include border-radius(3px);
+            border-radius: 3px;
             @include box-shadow(0 0 3px #999);
             color: #333;
             display: none;
diff --git a/lms/static/sass/course/layout/_courseware_header.scss b/lms/static/sass/course/layout/_courseware_header.scss
index 2670e55ba444..7e4b108795b5 100644
--- a/lms/static/sass/course/layout/_courseware_header.scss
+++ b/lms/static/sass/course/layout/_courseware_header.scss
@@ -79,7 +79,7 @@ header.global.slim {
       @include background-image(linear-gradient(-90deg, lighten($link-color, 8%), lighten($link-color, 5%) 50%, $link-color 50%, darken($link-color, 10%) 100%));
       border: 1px solid transparent;
       border-color: darken($link-color, 10%);
-      @include border-radius(3px);
+      border-radius: 3px;
       @include box-sizing(border-box);
       @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
       color: #fff;
diff --git a/lms/static/sass/course/wiki/_wiki.scss b/lms/static/sass/course/wiki/_wiki.scss
index d064b6d345e5..63a559184c2f 100644
--- a/lms/static/sass/course/wiki/_wiki.scss
+++ b/lms/static/sass/course/wiki/_wiki.scss
@@ -41,10 +41,10 @@ section.wiki {
 
       a {
         float: left;
-        display: block;        
+        display: block;
         overflow: hidden;
-        height: 30px;        
-        line-height: 31px;    
+        height: 30px;
+        line-height: 31px;
         max-width: 200px;
         height: 100%;
         text-overflow: ellipsis;
@@ -56,7 +56,7 @@ section.wiki {
         display: inline;
         margin-left: 10px;
         color: $base-font-color;
-        height: 30px;        
+        height: 30px;
         line-height: 31px;
       }
     }
@@ -208,7 +208,7 @@ section.wiki {
       background-color: $sidebar-color;
       padding: 9px;
       margin: 10px 0;
-      @include border-radius(5px);
+      border-radius: 5px;
 
       ul {
         margin: 0;
@@ -234,7 +234,7 @@ section.wiki {
     .timestamp{
       margin-top: 15px;
       padding: 15px 0 0 10px;
-      border-top: 1px solid $light-gray;      
+      border-top: 1px solid $light-gray;
 
       .label {
         font-size: 0.7em;
@@ -536,13 +536,13 @@ section.wiki {
 
     .modal-header {
       h1, p {
-        color: #fff;  
+        color: #fff;
       }
 
       h1 {
         margin: 3px 12px 8px;
         font-size: 1.1em;
-      }      
+      }
 
       p {
         font-size: 0.9em;
@@ -610,7 +610,7 @@ section.wiki {
       border: 1px solid #ccc;
       @include linear-gradient(top, #eee, #d2d2d2);
       font-size: 22px;
-      line-height: 28px;    
+      line-height: 28px;
       color: #333;
       text-align: center;
       @include box-shadow(0 1px 0 #fff inset, 0 1px 2px rgba(0, 0, 0, .2));
@@ -688,7 +688,7 @@ section.wiki {
     overflow-x: scroll;
 
     table {
-      min-width: 100%;      
+      min-width: 100%;
     }
 
     th {
@@ -798,7 +798,7 @@ section.wiki {
     background-color: $sidebar-color;
     padding: 9px;
     margin: 0 -9px 20px;
-    @include border-radius(5px);
+    border-radius: 5px;
 
     .well-small {
       @include clearfix;
@@ -837,7 +837,7 @@ section.wiki {
       padding: 8px;
       overflow: hidden;
     }
-    
+
     a.list-children {
       margin-left: 3px;
     }
@@ -858,7 +858,7 @@ section.wiki {
 
   .attachment-options {
     height: 40px;
-    margin: 40px 0 30px; 
+    margin: 40px 0 30px;
   }
 
   .attachment-list {
@@ -871,7 +871,7 @@ section.wiki {
       margin-bottom: 15px;
       border: 1px solid #DDD;
       background: #F9F9F9;
-      @include border-radius(5px);
+      border-radius: 5px;
     }
 
     header,
@@ -881,7 +881,7 @@ section.wiki {
 
     .attachment-details {
       background: #eee;
-      @include border-radius(0 0 5px 5px);
+      border-radius: 0 0 5px 5px;
     }
 
     h3 {
@@ -1046,13 +1046,13 @@ section.wiki {
 
   .modal-header {
     h1, p {
-      color: #fff;  
+      color: #fff;
     }
 
     h1 {
       margin: 3px 12px 8px;
       font-size: 1.1em;
-    }      
+    }
 
     p {
       font-size: 0.9em;
@@ -1086,7 +1086,7 @@ section.wiki {
       @include button;
       font-size: 0.8em;
     }
-    
+
     margin-right: 10px;
   }
 }
diff --git a/lms/static/sass/multicourse/_account.scss b/lms/static/sass/multicourse/_account.scss
index ab625a71eeda..e8a38a983e96 100644
--- a/lms/static/sass/multicourse/_account.scss
+++ b/lms/static/sass/multicourse/_account.scss
@@ -62,7 +62,7 @@
 
   // specific examples - buttons
   .button-primary {
-    @include border-radius(0);
+    border-radius: 0;
     @include linear-gradient(saturate($link-color-d1,15%) 5%, shade($link-color-d1,15%) 95%);
     display: inline-block;
     padding: $baseline/2 $baseline*2.5;
@@ -249,7 +249,7 @@
 
       // elements
       label, input, textarea {
-        @include border-radius(0);
+        border-radius: 0;
         display: block;
         height: auto;
         font-family: $sans-serif;
@@ -539,11 +539,11 @@
 
 // modal password reset form
 #forgot-password-modal {
-  @include border-radius(2px);
+  border-radius: 2px;
 
 
   .inner-wrapper {
-    @include border-radius(2px);
+    border-radius: 2px;
     background: $body-bg;
     padding-bottom: 0 !important;
   }
@@ -579,7 +579,7 @@
     }
 
     form {
-      @include border-radius(0);
+      border-radius: 0;
       @include box-shadow(none);
       margin: 0;
       border: none;
diff --git a/lms/static/sass/multicourse/_course_about.scss b/lms/static/sass/multicourse/_course_about.scss
index 096ecd6db296..1057781684e8 100644
--- a/lms/static/sass/multicourse/_course_about.scss
+++ b/lms/static/sass/multicourse/_course_about.scss
@@ -101,7 +101,7 @@
           > a.find-courses, a.register {
             @include button(shiny, $button-color);
             @include box-sizing(border-box);
-            @include border-radius(3px);
+            border-radius: 3px;
             display: block;
             font: normal 1.2rem/1.6rem $sans-serif;
             letter-spacing: 1px;
@@ -124,7 +124,7 @@
           strong {
             @include button(shiny, $button-color);
             @include box-sizing(border-box);
-            @include border-radius(3px);
+            border-radius: 3px;
             display: block;
             float: left;
             font: normal 1.2rem/1.6rem $sans-serif;
@@ -183,7 +183,7 @@
 
           .play-intro {
             @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.65), rgba(0,0,0, 0.75)));
-            @include border-radius(4px);
+            border-radius: 4px;
             @include box-shadow(0 1px 12px 0 rgba(0,0,0, 0.4));
             border: 2px solid rgba(255,255,255, 0.8);
             height: 80px;
@@ -438,7 +438,7 @@
           @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.9) 0%,
                                                             rgba(0,0,0, 0.7) 100%));
           border: 1px solid rgba(0,0,0, 0.5);
-          @include border-radius(4px);
+          border-radius: 4px;
           @include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5));
           @include box-sizing(border-box);
           color: rgb(255,255,255);
diff --git a/lms/static/sass/multicourse/_dashboard.scss b/lms/static/sass/multicourse/_dashboard.scss
index 62bf0d583a70..b0ea7ad5f1cb 100644
--- a/lms/static/sass/multicourse/_dashboard.scss
+++ b/lms/static/sass/multicourse/_dashboard.scss
@@ -33,7 +33,7 @@
       @include background-image($dashboard-profile-header-image);
       background-color: $dashboard-profile-header-color;
       border: 1px solid $border-color-2;
-      @include border-radius(4px);
+      border-radius: 4px;
       @include box-sizing(border-box);
       width: flex-grid(12);
 
@@ -250,7 +250,7 @@
         @include background-image($button-bg-image);
         background-color: $button-bg-color;
         border: 1px solid $border-color-2;
-        @include border-radius(4px);
+        border-radius: 4px;
         @include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.1));
         @include box-sizing(border-box);
         color: $base-font-color;
@@ -284,7 +284,7 @@
         margin-bottom: none;
       }
 
-      .cover {        
+      .cover {
         @include box-sizing(border-box);
         float: left;
         height: 100%;
@@ -378,7 +378,7 @@
         .enter-course {
           @include button(simple, $button-color);
           @include box-sizing(border-box);
-          @include border-radius(3px);
+          border-radius: 3px;
           display: block;
           float: left;
           font: normal 15px/1.6rem $sans-serif;
@@ -406,7 +406,7 @@
 
     .message-status {
       @include clearfix;
-      @include border-radius(3px);
+      border-radius: 3px;
       display: none;
       z-index: 10;
       margin: 20px 0 10px;
@@ -431,7 +431,7 @@
 
         strong {
           font-weight: 700;
-        
+
           a {
             font-weight: 700;
           }
@@ -454,7 +454,7 @@
 
           .btn {
             @include box-sizing(border-box);
-            @include border-radius(3px);
+            border-radius: 3px;
             float: left;
             font: normal 0.8rem/1.2rem $sans-serif;
             letter-spacing: 1px;
diff --git a/lms/static/sass/multicourse/_home.scss b/lms/static/sass/multicourse/_home.scss
index 05285262f539..d8ae6106e2df 100644
--- a/lms/static/sass/multicourse/_home.scss
+++ b/lms/static/sass/multicourse/_home.scss
@@ -106,7 +106,7 @@
 
         .play-intro {
           @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.65), rgba(0,0,0, 0.75)));
-          @include border-radius(4px);
+          border-radius: 4px;
           @include box-shadow(0 1px 12px 0 rgba(0,0,0, 0.4));
           @include box-sizing(border-box);
           border: 2px solid rgba(255,255,255, 0.8);
@@ -165,7 +165,7 @@
     > h2 {
       @include background-image(linear-gradient(-90deg, rgb(250,250,250), rgb(230,230,230)));
       border: 1px solid $border-color-2;
-      @include border-radius(4px);
+      border-radius: 4px;
       border-top-color: $border-color-1;
       @include box-shadow(inset 0 0 0 1px rgba(255,255,255, 0.4), 0 0px 12px 0 rgba(0,0,0, 0.2));
       color: $lighter-base-font-color;
diff --git a/lms/static/sass/multicourse/_media-kit.scss b/lms/static/sass/multicourse/_media-kit.scss
index db73029fd39c..900ac30cf92b 100644
--- a/lms/static/sass/multicourse/_media-kit.scss
+++ b/lms/static/sass/multicourse/_media-kit.scss
@@ -9,7 +9,7 @@ $white: rgb(255,255,255);
   width: 980px;
 
   .wrapper-mediakit {
-    @include border-radius(4px);
+    border-radius: 4px;
     @include box-sizing(border-box);
     @include box-shadow(0 1px 10px 0 rgba(0,0,0, 0.1));
     margin: ($baseline*3) 0 0 0;
@@ -24,7 +24,7 @@ $white: rgb(255,255,255);
       }
 
       header {
-        
+
       }
     }
   }
@@ -113,7 +113,7 @@ $white: rgb(255,255,255);
     }
 
     aside {
-      @include border-radius(2px);
+      border-radius: 2px;
       @include box-sizing(border-box);
       @include box-shadow(0 1px 4px 0 rgba(0,0,0, 0.2));
       width: 330px;
@@ -142,7 +142,7 @@ $white: rgb(255,255,255);
         .note {
           width: 100%;
           display: inline-block;
-          text-align: center;        
+          text-align: center;
         }
       }
 
@@ -171,7 +171,7 @@ $white: rgb(255,255,255);
 
   // library section
   .library {
-    @include border-radius(2px);
+    border-radius: 2px;
     @include box-sizing(border-box);
     @include box-shadow(0 1px 4px 0 rgba(0,0,0, 0.2));
     border: 3px solid tint($light-gray,50%);
@@ -220,7 +220,7 @@ $white: rgb(255,255,255);
       figure {
 
         a {
-          @include border-radius(2px);
+          border-radius: 2px;
           @include box-sizing(border-box);
           @include box-shadow(0 1px 2px 0 rgba(0,0,0, 0.1));
           display: block;
@@ -257,4 +257,4 @@ $white: rgb(255,255,255);
   .share {
 
   }
-}
\ No newline at end of file
+}
diff --git a/lms/static/sass/multicourse/_password_reset.scss b/lms/static/sass/multicourse/_password_reset.scss
index 9f145351d18e..ebfa5fb86133 100644
--- a/lms/static/sass/multicourse/_password_reset.scss
+++ b/lms/static/sass/multicourse/_password_reset.scss
@@ -1,7 +1,7 @@
 .password-reset {
   background: rgb(245,245,245);
   border: 1px solid rgb(200,200,200);
-  @include border-radius(4px);
+  border-radius: 4px;
   @include box-sizing(border-box);
   @include box-shadow(0 5px 50px 0 rgba(0,0,0, 0.3));
   margin: 120px auto 0;
diff --git a/lms/static/sass/multicourse/_press_release.scss b/lms/static/sass/multicourse/_press_release.scss
index 7ee362617dee..0cbe787787f1 100644
--- a/lms/static/sass/multicourse/_press_release.scss
+++ b/lms/static/sass/multicourse/_press_release.scss
@@ -35,7 +35,7 @@
 
     > article {
       border: 1px solid rgb(220,220,220);
-      @include border-radius(10px);
+      border-radius: 10px;
       @include box-sizing(border-box);
       @include box-shadow(0 2px 16px 0 rgba(0,0,0, 0.1));
       margin: 0 auto;
diff --git a/lms/static/sass/multicourse/_testcenter-register.scss b/lms/static/sass/multicourse/_testcenter-register.scss
index 01405d7fc1c8..2bf22e4bacd0 100644
--- a/lms/static/sass/multicourse/_testcenter-register.scss
+++ b/lms/static/sass/multicourse/_testcenter-register.scss
@@ -39,7 +39,7 @@
 	.introduction {
 
 		header {
-			
+
 			h2 {
 				margin: 0;
 				font-family: $sans-serif;
@@ -51,7 +51,7 @@
 				font-family: $sans-serif;
 				font-size: 34px;
 				text-align: left;
-			}			
+			}
 		}
 	}
 
@@ -68,7 +68,7 @@
 
 	form {
 		border: 1px solid rgb(216, 223, 230);
-		@include border-radius(3px);
+		border-radius: 3px;
 		@include box-shadow(0 1px 2px 0 rgba(0,0,0, 0.2));
 
 		.instructions, .note {
@@ -100,7 +100,7 @@
 				display: block;
 				@include button(simple, $blue);
 				@include box-sizing(border-box);
-				@include border-radius(3px);
+				border-radius: 3px;
 				font: bold 15px/1.6rem $sans-serif;
 				letter-spacing: 0;
 				padding: ($baseline*0.75) $baseline;
@@ -181,7 +181,7 @@
 					}
 
 					.value {
-						@include border-radius(3px);
+						border-radius: 3px;
 						border: 1px solid #C8C8C8;
 						padding: $baseline ($baseline*0.75);
 						background: #FAFAFA;
@@ -229,7 +229,7 @@
 				input, textarea {
 					height: 100%;
 					width: 100%;
-					padding: ($baseline/2);					
+					padding: ($baseline/2);
 
 					&.long {
 						width: 100%;
@@ -336,7 +336,7 @@
 		padding-left: $baseline;
 
 		.message-status {
-			@include border-radius(3px);
+			border-radius: 3px;
 			margin: 0 0 ($baseline*2) 0;
 			border: 1px solid #ccc;
 			padding: 0;
@@ -412,7 +412,7 @@
 					}
 
 					&:before {
-						@include border-radius($baseline);
+						border-radius: $baseline;
 						position: relative;
 						top: 3px;
 						display: block;
@@ -523,7 +523,7 @@
 				}
 
 				.label, .value {
-					display: inline-block;					
+					display: inline-block;
 				}
 
 				.label {
@@ -559,7 +559,7 @@
 					letter-spacing: 0;
 				}
 
-				
+
 			}
 
 			.registration-processed {
@@ -627,7 +627,7 @@
 
 	// status messages
 	.message {
-		@include border-radius(3px);
+		border-radius: 3px;
 		display: none;
 		margin: $baseline 0;
 		padding: ($baseline/2) $baseline;
@@ -642,7 +642,7 @@
 
 		// registration status
 		&.message-flash {
-			@include border-radius(3px);
+			border-radius: 3px;
 			position: relative;
 			margin: 0 0 ($baseline*2) 0;
 			border: 1px solid #ccc;
@@ -787,4 +787,4 @@
 	.is-hidden {
 		display: none;
 	}
-}
\ No newline at end of file
+}
diff --git a/lms/static/sass/shared/_activation_messages.scss b/lms/static/sass/shared/_activation_messages.scss
index bfcc1d278c2f..47d2c5132196 100644
--- a/lms/static/sass/shared/_activation_messages.scss
+++ b/lms/static/sass/shared/_activation_messages.scss
@@ -22,7 +22,7 @@
     background: rgb(252,252,252);
     border: 1px solid rgb(200,200,200);
     @include box-shadow(0 3px 20px 0 rgba(0,0,0, 0.2));
-    @include border-radius(4px);
+    border-radius: 4px;
     margin: 0 auto;
     padding: 40px;
     width: flex-grid(6);
diff --git a/lms/static/sass/shared/_course_filter.scss b/lms/static/sass/shared/_course_filter.scss
index ff283b1e86da..f6723e01f47b 100644
--- a/lms/static/sass/shared/_course_filter.scss
+++ b/lms/static/sass/shared/_course_filter.scss
@@ -30,7 +30,7 @@
 
       .filter-heading {
         @include background-image(linear-gradient(-90deg, rgb(250,250,250) 0%, rgb(245,245,245) 50%, rgb(235,235,235) 50%, rgb(230,230,230) 100%));
-        @include border-radius(4px);
+        border-radius: 4px;
         @include box-sizing(border-box);
         @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.4), inset 0 1px 0 0 rgba(255,255,255, 0.6));
         border: 1px solid rgb(200,200,200);
@@ -47,7 +47,7 @@
 
       ul {
         background: rgb(255,255,255);
-        @include border-radius(0px 4px 4px 4px);
+        border-radius: 0px 4px 4px 4px;
         border: 1px solid rgb(200,200,200);
         @include box-shadow(0 2px 15px 0 rgba(0,0,0, 0.2));
         padding: 20px 0px 5px 20px;
@@ -66,7 +66,7 @@
         .filter-heading {
           background: rgb(255,255,255);
           @include background-image(linear-gradient(-90deg, rgb(250,250,250), rgb(255,255,255)));
-          @include border-radius(4px 4px 0px 0px);
+          border-radius: 4px 4px 0px 0px;
           border-bottom: 1px dotted rgb(200,200,200);
           @include box-shadow(0 2px 0 -1px rgb(255,255,255));
           color: $base-font-color;
@@ -83,14 +83,14 @@
       float: right;
 
       input[type="text"] {
-        @include border-radius(3px 0px 0px 3px);
+        border-radius: 3px 0px 0px 3px;
         float: left;
         height: 36px;
         width: 200px;
       }
 
       input[type="submit"] {
-        @include border-radius(0px 3px 3px 0px);
+        border-radius: 0px 3px 3px 0px;
         float: left;
         height: 36px;
         padding: 2px 20px;
diff --git a/lms/static/sass/shared/_course_object.scss b/lms/static/sass/shared/_course_object.scss
index 9ca2e60511af..5c14407459bb 100644
--- a/lms/static/sass/shared/_course_object.scss
+++ b/lms/static/sass/shared/_course_object.scss
@@ -33,7 +33,7 @@
     .course {
       background: $body-bg;
       border: 1px solid $border-color-1;
-      @include border-radius(2px);
+      border-radius: 2px;
       @include box-sizing(border-box);
       @include box-shadow(0 1px 10px 0 rgba(0,0,0, 0.15), inset 0 0 0 1px rgba(255,255,255, 0.9));
       margin-bottom: 30px;
@@ -47,7 +47,7 @@
         font-size: 10px;
         left: 10px;
         padding: 2px 10px;
-        @include border-radius(2px);
+        border-radius: 2px;
         position: absolute;
         text-transform: uppercase;
         top: -6px;
diff --git a/lms/static/sass/shared/_forms.scss b/lms/static/sass/shared/_forms.scss
index 33500818506b..d26aae84402c 100644
--- a/lms/static/sass/shared/_forms.scss
+++ b/lms/static/sass/shared/_forms.scss
@@ -17,7 +17,7 @@ input[type="password"],
 input[type="tel"] {
   background: $form-bg-color;
   border: 1px solid $border-color-2;
-  @include border-radius(3px);
+  border-radius: 3px;
   @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6), inset 0 0 3px 0 rgba(0,0,0, 0.1));
   @include box-sizing(border-box);
   font: italic 300 1rem/1.6rem $serif;
@@ -45,7 +45,7 @@ input[type="submit"],
 input[type="button"],
 button,
 .button {
-  @include border-radius(3px);
+  border-radius: 3px;
   @include button(shiny, $button-color);
   font: normal 1.2rem/1.6rem $sans-serif;
   letter-spacing: 1px;
diff --git a/lms/static/sass/shared/_header.scss b/lms/static/sass/shared/_header.scss
index 0e161b6327e7..f1c54dfce1cf 100644
--- a/lms/static/sass/shared/_header.scss
+++ b/lms/static/sass/shared/_header.scss
@@ -79,7 +79,7 @@ header.global {
         @include background-image($button-bg-image);
         background-color: $button-bg-color;
         border: 1px solid $border-color-2;
-        @include border-radius(3px);
+        border-radius: 3px;
         @include box-sizing(border-box);
         @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
         color: $base-font-color;
@@ -120,7 +120,7 @@ header.global {
 
         &:last-child {
           > a {
-            @include border-radius(0 4px 4px 0);
+            border-radius: 0 4px 4px 0;
             border-left: none;
             padding: 5px 8px 7px 8px;
           }
@@ -158,7 +158,7 @@ header.global {
 
       ul.dropdown-menu {
         background: $border-color-4;
-        @include border-radius(4px);
+        border-radius: 4px;
         @include box-shadow(0 2px 24px 0 rgba(0,0,0, 0.3));
         border: 1px solid $border-color-3;
         display: none;
@@ -204,7 +204,7 @@ header.global {
 
           > a {
             border: 1px solid transparent;
-            @include border-radius(3px);
+            border-radius: 3px;
             @include box-sizing(border-box);
             color: $link-color;
             cursor: pointer;
@@ -279,7 +279,7 @@ header.global {
       display: inline-block;
 
       a {
-        @include border-radius(0);
+        border-radius: 0;
         @include linear-gradient(saturate($link-color-d1,15%) 5%, shade($link-color-d1,15%) 95%);
         display: inline-block;
         padding: $baseline/2 $baseline*2.5;
diff --git a/lms/static/sass/shared/_modal.scss b/lms/static/sass/shared/_modal.scss
index 9777c582dac7..9ec57a191eaa 100644
--- a/lms/static/sass/shared/_modal.scss
+++ b/lms/static/sass/shared/_modal.scss
@@ -13,7 +13,7 @@
 .modal {
   background: rgba(0,0,0, 0.6);
   border: 1px solid rgba(0, 0, 0, 0.9);
-  @include border-radius(0px);
+  border-radius: 0px;
   @include box-shadow(0 15px 80px 15px rgba(0,0,0, 0.5));
   color: #fff;
   display: none;
@@ -53,7 +53,7 @@
 
   .inner-wrapper {
     background: $modal-bg-color;
-    @include border-radius(0px);
+    border-radius: 0px;
     border: 1px solid rgba(0, 0, 0, 0.9);
     @include box-shadow(inset 0 1px 0 0 rgba(255, 255, 255, 0.7));
     overflow: hidden;
@@ -189,7 +189,7 @@
       label.honor-code {
         background: rgb(233,233,233);
         border: 1px solid rgb(200,200,200);
-        @include border-radius(3px);
+        border-radius: 3px;
         @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
         display: block;
         margin-bottom: 20px;
@@ -274,7 +274,7 @@
     }
 
     .close-modal {
-      @include border-radius(2px);
+      border-radius: 2px;
       cursor: pointer;
       @include inline-block;
       padding: 10px;

From 5bd79a86691c97d689f79c24b784292317362406 Mon Sep 17 00:00:00 2001
From: David Baumgold <david@davidbaumgold.com>
Date: Mon, 8 Jul 2013 11:08:14 -0400
Subject: [PATCH 03/20] Changed `@include box-shadow()` to `box-shadow`

Bourbon's box-shadow mixin has been deprecated, and they recommend to use the
official spec.
---
 cms/static/sass/_base.scss                    |  8 ++---
 cms/static/sass/_mixins-inherited.scss        | 30 +++++++++----------
 cms/static/sass/_reset.scss                   |  2 +-
 cms/static/sass/elements/_controls.scss       |  2 +-
 cms/static/sass/elements/_forms.scss          |  4 +--
 cms/static/sass/elements/_header.scss         |  2 +-
 cms/static/sass/elements/_navigation.scss     |  2 +-
 .../sass/elements/_system-feedback.scss       | 26 ++++++++--------
 cms/static/sass/elements/_tender-widget.scss  |  2 +-
 cms/static/sass/elements/_vendor.scss         |  2 +-
 cms/static/sass/views/_account.scss           |  2 +-
 cms/static/sass/views/_assets.scss            |  4 +--
 cms/static/sass/views/_checklists.scss        |  6 ++--
 cms/static/sass/views/_dashboard.scss         | 12 ++++----
 cms/static/sass/views/_index.scss             |  6 ++--
 cms/static/sass/views/_outline.scss           | 12 ++++----
 cms/static/sass/views/_settings.scss          | 12 ++++----
 cms/static/sass/views/_static-pages.scss      | 10 +++----
 cms/static/sass/views/_subsection.scss        |  4 +--
 cms/static/sass/views/_unit.scss              | 24 +++++++--------
 .../lib/xmodule/xmodule/css/capa/display.scss |  6 ++--
 .../css/combinedopenended/display.scss        |  2 +-
 .../css/crowdsource_hinter/display.scss       |  2 +-
 .../xmodule/xmodule/css/sequence/display.scss |  6 ++--
 .../xmodule/xmodule/css/video/display.scss    | 28 ++++++++---------
 .../xmodule/css/videoalpha/display.scss       | 28 ++++++++---------
 common/static/sass/_mixins.scss               |  8 ++---
 lms/static/sass/_discussion.scss              |  6 ++--
 lms/static/sass/course/_gradebook.scss        |  2 +-
 lms/static/sass/course/_info.scss             |  6 ++--
 lms/static/sass/course/_profile.scss          |  6 ++--
 lms/static/sass/course/base/_base.scss        |  6 ++--
 lms/static/sass/course/base/_extends.scss     |  2 +-
 .../sass/course/courseware/_amplifier.scss    | 18 +++++------
 .../sass/course/courseware/_sidebar.scss      | 10 +++----
 .../sass/course/layout/_calculator.scss       |  8 ++---
 .../course/layout/_courseware_header.scss     |  6 ++--
 lms/static/sass/course/wiki/_create.scss      |  2 +-
 lms/static/sass/course/wiki/_wiki.scss        |  8 ++---
 lms/static/sass/ie.scss                       |  4 +--
 lms/static/sass/multicourse/_account.scss     |  6 ++--
 .../sass/multicourse/_course_about.scss       | 16 +++++-----
 lms/static/sass/multicourse/_courses.scss     |  4 +--
 lms/static/sass/multicourse/_dashboard.scss   | 10 +++----
 lms/static/sass/multicourse/_edge.scss        | 12 ++++----
 lms/static/sass/multicourse/_home.scss        | 16 +++++-----
 lms/static/sass/multicourse/_media-kit.scss   |  8 ++---
 .../sass/multicourse/_password_reset.scss     |  2 +-
 .../sass/multicourse/_press_release.scss      |  2 +-
 .../multicourse/_testcenter-register.scss     |  6 ++--
 .../sass/shared/_activation_messages.scss     |  2 +-
 lms/static/sass/shared/_course_filter.scss    | 10 +++----
 lms/static/sass/shared/_course_object.scss    |  8 ++---
 lms/static/sass/shared/_footer.scss           |  2 +-
 lms/static/sass/shared/_forms.scss            |  4 +--
 lms/static/sass/shared/_header.scss           | 12 ++++----
 lms/static/sass/shared/_modal.scss            | 12 ++++----
 57 files changed, 234 insertions(+), 234 deletions(-)

diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss
index b24470536367..d8cfb87baa15 100644
--- a/cms/static/sass/_base.scss
+++ b/cms/static/sass/_base.scss
@@ -592,7 +592,7 @@ hr.divide {
 
 .window {
   // border-radius: 3px;
-  // @include box-shadow(0 1px 1px $shadow-l1);
+  // 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);
   }
@@ -653,7 +653,7 @@ 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;
@@ -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;
diff --git a/cms/static/sass/_mixins-inherited.scss b/cms/static/sass/_mixins-inherited.scss
index 5ab35517f063..2b3224e6d424 100644
--- a/cms/static/sass/_mixins-inherited.scss
+++ b/cms/static/sass/_mixins-inherited.scss
@@ -108,7 +108,7 @@
 // inherited - ui
 .window {
   @include clearfix();
-  @include box-shadow(0 1px 1px $shadow-l1);
+  box-shadow: 0 1px 1px $shadow-l1;
   border-radius: 3px;
   margin-bottom: $baseline;
   border: 1px solid $gray-l2;
@@ -120,7 +120,7 @@
 // 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));
+  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);
@@ -139,14 +139,14 @@
   }
 
   &:hover, &.active {
-    @include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset, 0 1px 1px rgba(0, 0, 0, .15));
+    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);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
   border: 1px solid $green-d1;
   border-radius: 3px;
   background-color: $green;
@@ -161,7 +161,7 @@
     border: 1px solid $green-l3 !important;
     background: $green-l3 !important;
     color: $white !important;
-    @include box-shadow(none);
+    box-shadow: none;
   }
 }
 
@@ -179,7 +179,7 @@
   }
 
   &.disabled {
-    @include box-shadow(none);
+    box-shadow: none;
     border: 1px solid $blue-l3 !important;
     background: $blue-l3 !important;
     color: $white !important;
@@ -200,7 +200,7 @@
   }
 
   &.disabled {
-    @include box-shadow(none);
+    box-shadow: none;
     border: 1px solid $red-l3 !important;
     background: $red-l3 !important;
     color: $white !important;
@@ -221,7 +221,7 @@
   }
 
   &.disabled {
-    @include box-shadow(none);
+    box-shadow: none;
     border: 1px solid $pink-l3 !important;
     background: $pink-l3 !important;
     color: $white !important;
@@ -231,7 +231,7 @@
 @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);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
   border: 1px solid $orange-d1;
   border-radius: 3px;
   background-color: $orange;
@@ -246,14 +246,14 @@
     border: 1px solid $orange-l3 !important;
     background: $orange-l2 !important;
     color: $gray-l1 !important;
-    @include box-shadow(none);
+    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);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
   border: 1px solid $mediumGrey;
   border-radius: 3px;
   background-color: #dfe5eb;
@@ -269,7 +269,7 @@
 @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);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
   border: 1px solid $gray-d2;
   border-radius: 3px;
   background-color: #d1dae3;
@@ -284,7 +284,7 @@
 @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);
+  box-shadow: 0 1px 0 $white-t1 inset;
   border: 1px solid $gray-d1;
   border-radius: 3px;
   background-color: $gray-d2;
@@ -311,7 +311,7 @@
 }
 
 @mixin edit-box {
-  @include box-shadow(0 1px 0 rgba(255, 255, 255, .2) inset);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset;
   padding: 15px 20px;
   border-radius: 3px;
   background-color: $lightBluishGrey2;
@@ -448,7 +448,7 @@
 // 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);
+  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);
 }
diff --git a/cms/static/sass/_reset.scss b/cms/static/sass/_reset.scss
index a4ac2b7f8c1a..6225a4ed89c7 100644
--- 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;
diff --git a/cms/static/sass/elements/_controls.scss b/cms/static/sass/elements/_controls.scss
index 9571192e19c2..685956036106 100644
--- 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;
   }
 }
diff --git a/cms/static/sass/elements/_forms.scss b/cms/static/sass/elements/_forms.scss
index 70d959fdea83..9907b0599525 100644
--- 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;
 }
diff --git a/cms/static/sass/elements/_header.scss b/cms/static/sass/elements/_header.scss
index 7f6c207eb884..a828e05252e8 100644
--- 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;
diff --git a/cms/static/sass/elements/_navigation.scss b/cms/static/sass/elements/_navigation.scss
index 4a363f7f4237..e97c31b8aeef 100644
--- a/cms/static/sass/elements/_navigation.scss
+++ b/cms/static/sass/elements/_navigation.scss
@@ -76,7 +76,7 @@ nav {
   .nav-sub {
     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;
diff --git a/cms/static/sass/elements/_system-feedback.scss b/cms/static/sass/elements/_system-feedback.scss
index 56204470b339..543f7ca5591e 100644
--- a/cms/static/sass/elements/_system-feedback.scss
+++ b/cms/static/sass/elements/_system-feedback.scss
@@ -163,7 +163,7 @@
 
   .prompt {
     border-radius: ($baseline/5);
-    @include box-shadow(0 0 3px $shadow-d1);
+    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
@@ -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;
diff --git a/cms/static/sass/elements/_tender-widget.scss b/cms/static/sass/elements/_tender-widget.scss
index e7be0cd48787..6b8104423242 100644
--- a/cms/static/sass/elements/_tender-widget.scss
+++ b/cms/static/sass/elements/_tender-widget.scss
@@ -8,7 +8,7 @@
 
 #tender_window {
   border-radius: 3px;
-  @include box-shadow(0 2px 3px $shadow);
+  box-shadow: 0 2px 3px $shadow;
   height: ($baseline*35) !important;
   background: $white !important;
   border: 2px solid $blue;
diff --git a/cms/static/sass/elements/_vendor.scss b/cms/static/sass/elements/_vendor.scss
index 388c14df1d54..0e47c9c48e40 100644
--- 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 {
diff --git a/cms/static/sass/views/_account.scss b/cms/static/sass/views/_account.scss
index d462405926ac..7f79fc5fc6c8 100644
--- a/cms/static/sass/views/_account.scss
+++ b/cms/static/sass/views/_account.scss
@@ -57,7 +57,7 @@ body.signup, body.signin {
 
     form {
       @include box-sizing(border-box);
-      @include box-shadow(0 1px 2px $shadow-l1);
+      box-shadow: 0 1px 2px $shadow-l1;
       border-radius: 2px;
       width: 100%;
       border: 1px solid $gray-l2;
diff --git a/cms/static/sass/views/_assets.scss b/cms/static/sass/views/_assets.scss
index d4cff42ee9d1..a293b1846bb4 100644
--- 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;
   }
 
diff --git a/cms/static/sass/views/_checklists.scss b/cms/static/sass/views/_checklists.scss
index 91f573dd4604..ddc6c80c993f 100644
--- a/cms/static/sass/views/_checklists.scss
+++ b/cms/static/sass/views/_checklists.scss
@@ -49,7 +49,7 @@ 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);
@@ -118,7 +118,7 @@ body.course.checklists {
     // checklist actions
     .course-checklist-actions {
       @include clearfix();
-      @include box-shadow(inset 0 1px 1px $shadow-l1);
+      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);
@@ -155,7 +155,7 @@ body.course.checklists {
     &.is-collapsed {
 
       header {
-        @include box-shadow(none);
+        box-shadow: none;
 
         .checklist-title {
 
diff --git a/cms/static/sass/views/_dashboard.scss b/cms/static/sass/views/_dashboard.scss
index fa9f385b8318..8d1b06825615 100644
--- 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;
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/cms/static/sass/views/_index.scss b/cms/static/sass/views/_index.scss
index 69dec7694779..c79401feddc4 100644
--- 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;
@@ -233,7 +233,7 @@ body.index {
               }
 
               &:hover {
-                @include box-shadow(0 1px ($baseline/10) $shadow-l1);
+                box-shadow: 0 1px ($baseline/10) $shadow-l1;
                 background: $blue-l5;
                 top: -($baseline/5);
 
diff --git a/cms/static/sass/views/_outline.scss b/cms/static/sass/views/_outline.scss
index 151dcc6e1f2f..0cc15b90320c 100644
--- a/cms/static/sass/views/_outline.scss
+++ b/cms/static/sass/views/_outline.scss
@@ -65,7 +65,7 @@ body.course.outline {
               .menu {
                 @include font-size(12);
                 border-radius: 4px;
-                @include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
+                box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
                 @include transition(opacity .15s);
                 z-index: 1;
                 display: none;
@@ -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;
@@ -343,7 +343,7 @@ body.course.outline {
               .menu {
                 @include font-size(12);
                 border-radius: 4px;
-                @include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
+                box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
                 @include transition(opacity .15s);
                 @include transition(display .15s);
                 z-index: 1;
@@ -582,7 +582,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 +688,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 {
diff --git a/cms/static/sass/views/_settings.scss b/cms/static/sass/views/_settings.scss
index 52e16af63a16..e1b6fc6ac6fb 100644
--- a/cms/static/sass/views/_settings.scss
+++ b/cms/static/sass/views/_settings.scss
@@ -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,7 +294,7 @@ body.course.settings {
 
       // course link note
       .note-promotion-courseURL {
-        @include box-shadow(0 2px 1px $shadow-l1);
+        box-shadow: 0 2px 1px $shadow-l1;
         border-radius: ($baseline/5);
         margin-top: ($baseline*1.5);
         border: 1px solid $gray-l2;
@@ -330,7 +330,7 @@ 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;
@@ -453,7 +453,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;
@@ -620,7 +620,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);
@@ -768,7 +768,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;
diff --git a/cms/static/sass/views/_static-pages.scss b/cms/static/sass/views/_static-pages.scss
index 5a586bc3affe..de03b238cce4 100644
--- 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;
     }
   }
 
@@ -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;
@@ -193,7 +193,7 @@ body.course.static-pages {
     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;
diff --git a/cms/static/sass/views/_subsection.scss b/cms/static/sass/views/_subsection.scss
index 715386a5a1e3..5c54ec3a18fb 100644
--- 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,
@@ -348,7 +348,7 @@ body.course.subsection {
         border: 1px solid $mediumGrey;
         font-size: 12px;
         border-radius: 4px;
-        @include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
+        box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
         @include transition(opacity .15s);
 
 
diff --git a/cms/static/sass/views/_unit.scss b/cms/static/sass/views/_unit.scss
index 26278cd0b1a7..471bdc4848db 100644
--- 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 {
@@ -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;
 
@@ -657,7 +657,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,10 +669,10 @@ 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);
+          box-shadow: 0 0 1px $shadow;
           @include transition(opacity 0.25s ease-in-out);
           background-color: $yellow;
         }
@@ -697,7 +697,7 @@ body.course.unit {
         background-color: $gray-l4;
 
         &:hover {
-          @include box-shadow(0 1px 1px $shadow);
+          box-shadow: 0 1px 1px $shadow;
           @include transition(opacity 0.15s ease-in-out);
           background-color: $blue-s3;
           border: 1px solid $blue-s3;
@@ -856,7 +856,7 @@ body.unit {
 
 .unit-location {
   .url {
-    @include box-shadow(none);
+    box-shadow: none;
     width: 100%;
     margin-bottom: $baseline/2;
   }
diff --git a/common/lib/xmodule/xmodule/css/capa/display.scss b/common/lib/xmodule/xmodule/css/capa/display.scss
index 15d40aa63dde..86e971dd09a5 100644
--- a/common/lib/xmodule/xmodule/css/capa/display.scss
+++ b/common/lib/xmodule/xmodule/css/capa/display.scss
@@ -110,7 +110,7 @@ section.problem {
       padding: 9px 15px 20px;
       background: #FFF;
       position: relative;
-      @include box-shadow(inset 0 0 0 1px #eee);
+      box-shadow: inset 0 0 0 1px #eee;
       border-radius: 3px;
 
       &:empty {
@@ -658,7 +658,7 @@ section.problem {
           display: block;
           padding: 9px;
           background: #F6F6F6;
-          @include box-shadow(inset 0 0 0 1px #fff);
+          box-shadow: inset 0 0 0 1px #fff;
         }
       }
 
@@ -689,7 +689,7 @@ section.problem {
       margin-bottom: 10px;
       background: #FFF;
       position: relative;
-      @include box-shadow(inset 0 0 0 1px #eee);
+      box-shadow: inset 0 0 0 1px #eee;
       border-radius: 3px;
 
       p:last-of-type {
diff --git a/common/lib/xmodule/xmodule/css/combinedopenended/display.scss b/common/lib/xmodule/xmodule/css/combinedopenended/display.scss
index 34ea27a40b0d..127ae7775cfd 100644
--- a/common/lib/xmodule/xmodule/css/combinedopenended/display.scss
+++ b/common/lib/xmodule/xmodule/css/combinedopenended/display.scss
@@ -292,7 +292,7 @@ section.open-ended-child {
       padding: 9px 15px 20px;
       background: #FFF;
       position: relative;
-      @include box-shadow(inset 0 0 0 1px #eee);
+      box-shadow: inset 0 0 0 1px #eee;
       border-radius: 3px;
 
       &:empty {
diff --git a/common/lib/xmodule/xmodule/css/crowdsource_hinter/display.scss b/common/lib/xmodule/xmodule/css/crowdsource_hinter/display.scss
index b13f0b30184c..c1d7b1f04895 100644
--- a/common/lib/xmodule/xmodule/css/crowdsource_hinter/display.scss
+++ b/common/lib/xmodule/xmodule/css/crowdsource_hinter/display.scss
@@ -1,5 +1,5 @@
 .crowdsource-wrapper {
-  @include box-shadow(inset 0 1px 2px 1px rgba(0,0,0,0.1));
+  box-shadow: inset 0 1px 2px 1px rgba(0,0,0,0.1);
   border-radius: 2px;
   display: none;
   margin-top: 20px;
diff --git a/common/lib/xmodule/xmodule/css/sequence/display.scss b/common/lib/xmodule/xmodule/css/sequence/display.scss
index 5fa7e0196b2c..ed601e050656 100644
--- a/common/lib/xmodule/xmodule/css/sequence/display.scss
+++ b/common/lib/xmodule/xmodule/css/sequence/display.scss
@@ -37,7 +37,7 @@ nav.sequence-nav {
     height: 44px;
     margin: 0 30px;
     @include linear-gradient(top, #ddd, #eee);
-    @include box-shadow(0 1px 3px rgba(0, 0, 0, .1) inset);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, .1) inset;
   }
 
   ol {
@@ -228,7 +228,7 @@ nav.sequence-nav {
       width: 70px;
       border: 1px solid #ccc;
       @include linear-gradient(top, #eee, #ddd);
-      @include box-shadow(0 1px 0 rgba(255, 255, 255, .7) inset);
+      box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset;
 
       &.prev, &.next {
 
@@ -303,7 +303,7 @@ nav.sequence-bottom {
       height: 44px;
       border: 1px solid #ccc;
       @include linear-gradient(top, #eee, #ddd);
-      @include box-shadow(0 1px 0 rgba(255, 255, 255, .7) inset);
+      box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset;
 
       &.prev, &.next {
         margin-bottom: 0;
diff --git a/common/lib/xmodule/xmodule/css/video/display.scss b/common/lib/xmodule/xmodule/css/video/display.scss
index eae35e260432..9d4c86c0f177 100644
--- a/common/lib/xmodule/xmodule/css/video/display.scss
+++ b/common/lib/xmodule/xmodule/css/video/display.scss
@@ -51,7 +51,7 @@ div.video {
         border: 1px solid #000;
         border-radius: 0;
         border-top: 1px solid #000;
-        @include box-shadow(inset 0 1px 0 #eee, 0 1px 0 #555);
+        box-shadow: inset 0 1px 0 #eee, 0 1px 0 #555;
         height: 7px;
         margin-left: -1px;
         margin-right: -1px;
@@ -59,7 +59,7 @@ div.video {
 
         div.ui-widget-header {
           background: #777;
-          @include box-shadow(inset 0 1px 0 #999);
+          box-shadow: inset 0 1px 0 #999;
         }
 
         a.ui-slider-handle {
@@ -67,7 +67,7 @@ div.video {
           @include background-size(50%);
           border: 1px solid darken($pink, 20%);
           border-radius: 15px;
-          @include box-shadow(inset 0 1px 0 lighten($pink, 10%));
+          box-shadow: inset 0 1px 0 lighten($pink, 10%);
           cursor: pointer;
           height: 15px;
           margin-left: -7px;
@@ -96,7 +96,7 @@ div.video {
           a {
             border-bottom: none;
             border-right: 1px solid #000;
-            @include box-shadow(1px 0 0 #555);
+            box-shadow: 1px 0 0 #555;
             cursor: pointer;
             display: block;
             line-height: 46px;
@@ -169,7 +169,7 @@ div.video {
             background: url('../images/closed-arrow.png') 10px center no-repeat;
             border-left: 1px solid #000;
             border-right: 1px solid #000;
-            @include box-shadow(1px 0 0 #555, inset 1px 0 0 #555);
+            box-shadow: 1px 0 0 #555, inset 1px 0 0 #555;
             @include clearfix();
             color: #fff;
             cursor: pointer;
@@ -215,7 +215,7 @@ div.video {
 
           // fix for now
           ol.video_speeds {
-            @include box-shadow(inset 1px 0 0 #555, 0 3px 0 #444);
+            box-shadow: inset 1px 0 0 #555, 0 3px 0 #444;
             @include transition();
             background-color: #444;
             border: 1px solid #000;
@@ -227,7 +227,7 @@ div.video {
             z-index: 10;
 
             li {
-              @include box-shadow( 0 1px 0 #555);
+              box-shadow:  0 1px 0 #555;
               border-bottom: 1px solid #000;
               color: #fff;
               cursor: pointer;
@@ -249,7 +249,7 @@ div.video {
               }
 
               &:last-child {
-                @include box-shadow(none);
+                box-shadow: none;
                 border-bottom: 0;
                 margin-top: 0;
               }
@@ -277,7 +277,7 @@ div.video {
           > a {
             background: url('../images/volume.png') 10px center no-repeat;
             border-right: 1px solid #000;
-            @include box-shadow(1px 0 0 #555, inset 1px 0 0 #555);
+            box-shadow: 1px 0 0 #555, inset 1px 0 0 #555;
             @include clearfix();
             color: #fff;
             cursor: pointer;
@@ -296,7 +296,7 @@ div.video {
           }
 
           .volume-slider-container {
-            @include box-shadow(inset 1px 0 0 #555, 0 3px 0 #444);
+            box-shadow: inset 1px 0 0 #555, 0 3px 0 #444;
             @include transition();
             background-color: #444;
             border: 1px solid #000;
@@ -316,14 +316,14 @@ div.video {
               margin: 14px auto;
               background: #666;
               border: 1px solid #000;
-              @include box-shadow(0 1px 0 #333);
+              box-shadow: 0 1px 0 #333;
 
               a.ui-slider-handle {
                 background: $pink url(../images/slider-handle.png) center center no-repeat;
                 @include background-size(50%);
                 border: 1px solid darken($pink, 20%);
                 border-radius: 15px;
-                @include box-shadow(inset 0 1px 0 lighten($pink, 10%));
+                box-shadow: inset 0 1px 0 lighten($pink, 10%);
                 cursor: pointer;
                 height: 15px;
                 left: -6px;
@@ -341,7 +341,7 @@ div.video {
         a.add-fullscreen {
           background: url(../images/fullscreen.png) center no-repeat;
           border-right: 1px solid #000;
-          @include box-shadow(1px 0 0 #555, inset 1px 0 0 #555);
+          box-shadow: 1px 0 0 #555, inset 1px 0 0 #555;
           color: #797979;
           display: block;
           float: left;
@@ -362,7 +362,7 @@ div.video {
         a.quality_control {
           background: url(../images/hd.png) center no-repeat;
           border-right: 1px solid #000;
-          @include box-shadow(1px 0 0 #555, inset 1px 0 0 #555);
+          box-shadow: 1px 0 0 #555, inset 1px 0 0 #555;
           color: #797979;
           display: block;
           float: left;
diff --git a/common/lib/xmodule/xmodule/css/videoalpha/display.scss b/common/lib/xmodule/xmodule/css/videoalpha/display.scss
index eae35e260432..9d4c86c0f177 100644
--- a/common/lib/xmodule/xmodule/css/videoalpha/display.scss
+++ b/common/lib/xmodule/xmodule/css/videoalpha/display.scss
@@ -51,7 +51,7 @@ div.video {
         border: 1px solid #000;
         border-radius: 0;
         border-top: 1px solid #000;
-        @include box-shadow(inset 0 1px 0 #eee, 0 1px 0 #555);
+        box-shadow: inset 0 1px 0 #eee, 0 1px 0 #555;
         height: 7px;
         margin-left: -1px;
         margin-right: -1px;
@@ -59,7 +59,7 @@ div.video {
 
         div.ui-widget-header {
           background: #777;
-          @include box-shadow(inset 0 1px 0 #999);
+          box-shadow: inset 0 1px 0 #999;
         }
 
         a.ui-slider-handle {
@@ -67,7 +67,7 @@ div.video {
           @include background-size(50%);
           border: 1px solid darken($pink, 20%);
           border-radius: 15px;
-          @include box-shadow(inset 0 1px 0 lighten($pink, 10%));
+          box-shadow: inset 0 1px 0 lighten($pink, 10%);
           cursor: pointer;
           height: 15px;
           margin-left: -7px;
@@ -96,7 +96,7 @@ div.video {
           a {
             border-bottom: none;
             border-right: 1px solid #000;
-            @include box-shadow(1px 0 0 #555);
+            box-shadow: 1px 0 0 #555;
             cursor: pointer;
             display: block;
             line-height: 46px;
@@ -169,7 +169,7 @@ div.video {
             background: url('../images/closed-arrow.png') 10px center no-repeat;
             border-left: 1px solid #000;
             border-right: 1px solid #000;
-            @include box-shadow(1px 0 0 #555, inset 1px 0 0 #555);
+            box-shadow: 1px 0 0 #555, inset 1px 0 0 #555;
             @include clearfix();
             color: #fff;
             cursor: pointer;
@@ -215,7 +215,7 @@ div.video {
 
           // fix for now
           ol.video_speeds {
-            @include box-shadow(inset 1px 0 0 #555, 0 3px 0 #444);
+            box-shadow: inset 1px 0 0 #555, 0 3px 0 #444;
             @include transition();
             background-color: #444;
             border: 1px solid #000;
@@ -227,7 +227,7 @@ div.video {
             z-index: 10;
 
             li {
-              @include box-shadow( 0 1px 0 #555);
+              box-shadow:  0 1px 0 #555;
               border-bottom: 1px solid #000;
               color: #fff;
               cursor: pointer;
@@ -249,7 +249,7 @@ div.video {
               }
 
               &:last-child {
-                @include box-shadow(none);
+                box-shadow: none;
                 border-bottom: 0;
                 margin-top: 0;
               }
@@ -277,7 +277,7 @@ div.video {
           > a {
             background: url('../images/volume.png') 10px center no-repeat;
             border-right: 1px solid #000;
-            @include box-shadow(1px 0 0 #555, inset 1px 0 0 #555);
+            box-shadow: 1px 0 0 #555, inset 1px 0 0 #555;
             @include clearfix();
             color: #fff;
             cursor: pointer;
@@ -296,7 +296,7 @@ div.video {
           }
 
           .volume-slider-container {
-            @include box-shadow(inset 1px 0 0 #555, 0 3px 0 #444);
+            box-shadow: inset 1px 0 0 #555, 0 3px 0 #444;
             @include transition();
             background-color: #444;
             border: 1px solid #000;
@@ -316,14 +316,14 @@ div.video {
               margin: 14px auto;
               background: #666;
               border: 1px solid #000;
-              @include box-shadow(0 1px 0 #333);
+              box-shadow: 0 1px 0 #333;
 
               a.ui-slider-handle {
                 background: $pink url(../images/slider-handle.png) center center no-repeat;
                 @include background-size(50%);
                 border: 1px solid darken($pink, 20%);
                 border-radius: 15px;
-                @include box-shadow(inset 0 1px 0 lighten($pink, 10%));
+                box-shadow: inset 0 1px 0 lighten($pink, 10%);
                 cursor: pointer;
                 height: 15px;
                 left: -6px;
@@ -341,7 +341,7 @@ div.video {
         a.add-fullscreen {
           background: url(../images/fullscreen.png) center no-repeat;
           border-right: 1px solid #000;
-          @include box-shadow(1px 0 0 #555, inset 1px 0 0 #555);
+          box-shadow: 1px 0 0 #555, inset 1px 0 0 #555;
           color: #797979;
           display: block;
           float: left;
@@ -362,7 +362,7 @@ div.video {
         a.quality_control {
           background: url(../images/hd.png) center no-repeat;
           border-right: 1px solid #000;
-          @include box-shadow(1px 0 0 #555, inset 1px 0 0 #555);
+          box-shadow: 1px 0 0 #555, inset 1px 0 0 #555;
           color: #797979;
           display: block;
           float: left;
diff --git a/common/static/sass/_mixins.scss b/common/static/sass/_mixins.scss
index 531f1442072c..c37664423745 100644
--- a/common/static/sass/_mixins.scss
+++ b/common/static/sass/_mixins.scss
@@ -158,14 +158,14 @@
   text-align: center;
 
   &:hover, &:active {
-    @include box-shadow(0 2px 1px $shadow-l1);
+    box-shadow: 0 2px 1px $shadow-l1;
   }
 
   &.current, &.active {
-    @include box-shadow(inset 1px 1px 2px $shadow-d1);
+    box-shadow: inset 1px 1px 2px $shadow-d1;
 
     &:hover, &:active {
-      @include box-shadow(inset 1px 1px 1px $shadow-d1);
+      box-shadow: inset 1px 1px 1px $shadow-d1;
     }
   }
 }
@@ -238,6 +238,6 @@
 
 // UI archetypes - well
 .ui-well {
-  @include box-shadow(inset 0 1px 2px 1px $shadow);
+  box-shadow: inset 0 1px 2px 1px $shadow;
   padding: ($baseline*0.75);
 }
diff --git a/lms/static/sass/_discussion.scss b/lms/static/sass/_discussion.scss
index 000c38abe0e7..ac2cc0bda93b 100644
--- a/lms/static/sass/_discussion.scss
+++ b/lms/static/sass/_discussion.scss
@@ -105,7 +105,7 @@ body.discussion {
     color: #fff;
     line-height: 1.6;
     border-radius: 3px;
-    @include box-shadow(0 1px 2px rgba(0, 0, 0, 0.3) inset, 0 1px 0 rgba(255, 255, 255, .2));
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset, 0 1px 0 rgba(255, 255, 255, .2);
 
     li {
       padding: 10px 20px 12px 45px;
@@ -492,7 +492,7 @@ body.discussion {
     display: table-cell;
     border-radius: 3px 0 0 3px;
     border-right: 1px solid #ddd;
-    @include box-shadow(none);
+    box-shadow: none;
     background-color: $sidebar-color;
 
     .user-profile {
@@ -847,7 +847,7 @@ body.discussion {
       border: 1px solid #4b4b4b;
       border-left: none;
       border-radius: 0 0 3px 3px;
-      @include box-shadow(1px 0 0 #4b4b4b inset);
+      box-shadow: 1px 0 0 #4b4b4b inset;
 
       .browse-topic-drop-menu {
         max-height: 400px;
diff --git a/lms/static/sass/course/_gradebook.scss b/lms/static/sass/course/_gradebook.scss
index 9817188d349b..6a93b9254e65 100644
--- a/lms/static/sass/course/_gradebook.scss
+++ b/lms/static/sass/course/_gradebook.scss
@@ -24,7 +24,7 @@ div.gradebook-wrapper {
     	background: url(../images/search-icon.png) no-repeat 9px center #f6f6f6;
     	font-family: $sans-serif;
     	font-size: 11px;
-    	@include box-shadow(0 1px 4px rgba(0, 0, 0, .12) inset);
+    	box-shadow: 0 1px 4px rgba(0, 0, 0, .12) inset;
     	outline: none;
     	@include transition(border-color .15s);
 
diff --git a/lms/static/sass/course/_info.scss b/lms/static/sass/course/_info.scss
index e33d4b20fc28..8bda507eab9a 100644
--- a/lms/static/sass/course/_info.scss
+++ b/lms/static/sass/course/_info.scss
@@ -82,7 +82,7 @@ div.info-wrapper {
     @extend .sidebar;
     border-radius: 0 4px 4px 0;
     border-left: 1px solid #ddd;
-    @include box-shadow(none);
+    box-shadow: none;
     font-size: 14px;
 
     &:after {
@@ -128,7 +128,7 @@ div.info-wrapper {
           background: #fff;
           border-radius: 3px;
           padding: 14px 0;
-          @include box-shadow(0 0 1px 1px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .25));
+          box-shadow: 0 0 1px 1px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .25);
 
           h4 {
             margin-bottom: 16px;
@@ -199,7 +199,7 @@ div.info-wrapper {
 
         h3 {
           border-bottom: 0;
-          @include box-shadow(none);
+          box-shadow: none;
           color: #888;
           font-size: 1em;
           margin-bottom: 0;
diff --git a/lms/static/sass/course/_profile.scss b/lms/static/sass/course/_profile.scss
index f4ce3f4bf3d3..fec4db5be8a9 100644
--- a/lms/static/sass/course/_profile.scss
+++ b/lms/static/sass/course/_profile.scss
@@ -31,7 +31,7 @@ div.profile-wrapper {
 
       li {
         border-bottom: 1px solid #d3d3d3;
-        @include box-shadow(0 1px 0 #eee);
+        box-shadow: 0 1px 0 #eee;
         color: lighten($text-color, 10%);
         display: block;
         padding: lh(.5) 0 lh(.5) lh(.5);
@@ -100,7 +100,7 @@ div.profile-wrapper {
         input#pwd_reset_button {
           background: none;
           border: none;
-          @include box-shadow(none);
+          box-shadow: none;
           color: #999;
           font-size: 12px;
           font-weight: normal;
@@ -120,7 +120,7 @@ div.profile-wrapper {
 
     div#change_password_pop {
       border-bottom: 1px solid #d3d3d3;
-      @include box-shadow(0 1px 0 #eee);
+      box-shadow: 0 1px 0 #eee;
       color: #4D4D4D;
       padding: 7px lh();
 
diff --git a/lms/static/sass/course/base/_base.scss b/lms/static/sass/course/base/_base.scss
index a8bdf1502fe0..557af9f592cd 100644
--- a/lms/static/sass/course/base/_base.scss
+++ b/lms/static/sass/course/base/_base.scss
@@ -36,7 +36,7 @@ a {
     border-radius: 3px;
     border: 1px solid $outer-border-color;
     background: $container-bg;
-    @include box-shadow(0 1px 2px rgba(0, 0, 0, 0.05));
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
   }
 }
 
@@ -60,7 +60,7 @@ input[type="password"] {
   background: $white;
   border: 1px solid $border-color-2;
   border-radius: 0;
-  @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6), inset 0 0 3px 0 rgba(0,0,0, 0.1));
+  box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6), inset 0 0 3px 0 rgba(0,0,0, 0.1);
   @include box-sizing(border-box);
   font: normal 1em $sans-serif;
   height: 35px;
@@ -74,7 +74,7 @@ input[type="password"] {
 
   &:focus {
     border-color: lighten($link-color, 20%);
-    @include box-shadow(0 0 6px 0 rgba($blue, 0.4), inset 0 0 4px 0 rgba(0,0,0, 0.15));
+    box-shadow: 0 0 6px 0 rgba($blue, 0.4), inset 0 0 4px 0 rgba(0,0,0, 0.15);
     outline: none;
   }
 }
diff --git a/lms/static/sass/course/base/_extends.scss b/lms/static/sass/course/base/_extends.scss
index 7557895896a1..0ed49f8b682a 100644
--- a/lms/static/sass/course/base/_extends.scss
+++ b/lms/static/sass/course/base/_extends.scss
@@ -42,7 +42,7 @@ h1.top-header {
   width: flex-grid(9) + flex-gutter();
 
   @media print {
-    @include box-shadow(none);
+    box-shadow: none;
   }
 }
 
diff --git a/lms/static/sass/course/courseware/_amplifier.scss b/lms/static/sass/course/courseware/_amplifier.scss
index 9f469b682118..002035bbed52 100644
--- a/lms/static/sass/course/courseware/_amplifier.scss
+++ b/lms/static/sass/course/courseware/_amplifier.scss
@@ -4,7 +4,7 @@ section.tool-wrapper {
   background: #073642;
   border-bottom: 1px solid darken(#002b36, 10%);
   border-top: 1px solid darken(#002b36, 10%);
-  @include box-shadow(inset 0 0 0 4px darken(#094959, 2%));
+  box-shadow: inset 0 0 0 4px darken(#094959, 2%);
   color: #839496;
   display: table;
   margin: lh() (-(lh())) 0;
@@ -76,7 +76,7 @@ section.tool-wrapper {
     @extend .clearfix;
     background: darken(#073642, 2%);
     border-right: 1px solid darken(#002b36, 6%);
-    @include box-shadow(1px 0 0 lighten(#002b36, 6%), inset 0 0 0 4px darken(#094959, 6%));
+    box-shadow: 1px 0 0 lighten(#002b36, 6%), inset 0 0 0 4px darken(#094959, 6%);
     @include box-sizing(border-box);
     display: table-cell;
     padding: lh();
@@ -88,7 +88,7 @@ section.tool-wrapper {
       div.music-wrapper {
         @extend .clearfix;
         border-bottom: 1px solid darken(#073642, 10%);
-        @include box-shadow(0 1px 0 lighten(#073642, 2%));
+        box-shadow: 0 1px 0 lighten(#073642, 2%);
         margin-bottom: lh();
         padding: 0 0 lh();
 
@@ -101,7 +101,7 @@ section.tool-wrapper {
           margin-top: 19px;
 
           &:active {
-            @include box-shadow(none);
+            box-shadow: none;
           }
 
           &[value="Stop"] {
@@ -109,7 +109,7 @@ section.tool-wrapper {
             font: bold 14px $body-font-family;
 
             &:active {
-              @include box-shadow(none);
+              box-shadow: none;
             }
           }
         }
@@ -118,7 +118,7 @@ section.tool-wrapper {
       div.inputs-wrapper {
         @extend .clearfix;
         border-bottom: 1px solid darken(#073642, 10%);
-        @include box-shadow(0 1px 0 lighten(#073642, 2%));
+        box-shadow: 0 1px 0 lighten(#073642, 2%);
         @include clearfix;
         margin-bottom: lh();
         margin-bottom: lh();
@@ -193,7 +193,7 @@ section.tool-wrapper {
       div.top-sliders {
         @extend .clearfix;
         border-bottom: 1px solid darken(#073642, 10%);
-        @include box-shadow(0 1px 0 lighten(#073642, 2%));
+        box-shadow: 0 1px 0 lighten(#073642, 2%);
         margin-bottom: lh();
         padding: 0 0 lh();
 
@@ -226,14 +226,14 @@ section.tool-wrapper {
         &.ui-slider-horizontal {
           background: darken(#002b36, 2%);
           border: 1px solid darken(#002b36, 8%);
-          @include box-shadow(none);
+          box-shadow: none;
           height: 0.4em;
         }
 
         .ui-slider-handle {
           background: lighten( #586e75, 5% ) url('../images/amplifier-slider-handle.png') center no-repeat;
           border: 1px solid darken(#002b36, 8%);
-          @include box-shadow(inset 0 1px 0 lighten( #586e75, 20% ));
+          box-shadow: inset 0 1px 0 lighten( #586e75, 20% );
           margin-top: -.3em;
 
           &:hover, &:active {
diff --git a/lms/static/sass/course/courseware/_sidebar.scss b/lms/static/sass/course/courseware/_sidebar.scss
index d1d5645fcd8b..dce416af4ed0 100644
--- a/lms/static/sass/course/courseware/_sidebar.scss
+++ b/lms/static/sass/course/courseware/_sidebar.scss
@@ -45,7 +45,7 @@ section.course-index {
 
         a {
           border-radius: 0;
-          @include box-shadow(none);
+          box-shadow: none;
           padding-left: 19px;
         }
 
@@ -72,7 +72,7 @@ section.course-index {
       padding: 11px 14px;
       @include linear-gradient(top, $sidebar-chapter-bg-top, $sidebar-chapter-bg-bottom);
       background-color: $sidebar-chapter-bg;
-      @include box-shadow(0 1px 0 #fff inset, 0 -1px 0 rgba(0, 0, 0, .1) inset);
+      box-shadow: 0 1px 0 #fff inset, 0 -1px 0 rgba(0, 0, 0, .1) inset;
       @include transition(background-color .1s);
 
       &.is-open {
@@ -85,7 +85,7 @@ section.course-index {
 
       &:last-child {
         border-radius: 0 0 0 3px;
-        @include box-shadow(0 1px 0 #fff inset);
+        box-shadow: 0 1px 0 #fff inset;
       }
 
       &:hover {
@@ -143,7 +143,7 @@ section.course-index {
           }
 
           &:active {
-            @include box-shadow(inset 0 1px 14px 0 rgba(0,0,0, 0.1));
+            box-shadow: inset 0 1px 14px 0 rgba(0,0,0, 0.1);
 
             &:after {
               opacity: 1.0;
@@ -170,7 +170,7 @@ section.course-index {
 
           > a {
             border: 1px solid $border-color-1;
-            @include box-shadow(0 1px 0 rgba(255, 255, 255, .35) inset);
+            box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset;
             background: $sidebar-active-image;
 
             &:after {
diff --git a/lms/static/sass/course/layout/_calculator.scss b/lms/static/sass/course/layout/_calculator.scss
index 2645845d0b16..218d25496fa9 100644
--- a/lms/static/sass/course/layout/_calculator.scss
+++ b/lms/static/sass/course/layout/_calculator.scss
@@ -52,7 +52,7 @@ div.calc-main {
         background: #111;
         border: 1px solid #000;
         border-radius: 0;
-        @include box-shadow(none);
+        box-shadow: none;
         @include box-sizing(border-box);
         color: #fff;
         float: left;
@@ -73,7 +73,7 @@ div.calc-main {
       input#calculator_output {
         background: #111;
         border: 0;
-        @include box-shadow(none);
+        box-shadow: none;
         @include box-sizing(border-box);
         color: #fff;
         float: left;
@@ -94,7 +94,7 @@ div.calc-main {
 
         input#calculator_input {
           border: none;
-          @include box-shadow(none);
+          box-shadow: none;
           @include box-sizing(border-box);
           font-size: 16px;
           padding: 10px;
@@ -122,7 +122,7 @@ div.calc-main {
           dl {
             background: #fff;
             border-radius: 3px;
-            @include box-shadow(0 0 3px #999);
+            box-shadow: 0 0 3px #999;
             color: #333;
             display: none;
             line-height: lh();
diff --git a/lms/static/sass/course/layout/_courseware_header.scss b/lms/static/sass/course/layout/_courseware_header.scss
index 7e4b108795b5..8cdf0b0b21da 100644
--- a/lms/static/sass/course/layout/_courseware_header.scss
+++ b/lms/static/sass/course/layout/_courseware_header.scss
@@ -43,7 +43,7 @@ nav.course-material {
           // background: rgba(0, 0, 0, .2);
           @include linear-gradient(top, rgba(0, 0, 0, .4), rgba(0, 0, 0, .25));
           background-color: transparent;
-          @include box-shadow(0 1px 0 rgba(255, 255, 255, .5), 0 1px 1px rgba(0, 0, 0, .3) inset);
+          box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 1px 1px rgba(0, 0, 0, .3) inset;
           color: #fff;
           text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
         }
@@ -61,7 +61,7 @@ nav.course-material {
 }
 
 header.global.slim {
-  @include box-shadow(0 1px 2px rgba(0, 0, 0, .1));
+  box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
   height: auto;
   padding: 5px 0 10px 0;
   border-bottom: 1px solid $outer-border-color;
@@ -81,7 +81,7 @@ header.global.slim {
       border-color: darken($link-color, 10%);
       border-radius: 3px;
       @include box-sizing(border-box);
-      @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
+      box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6);
       color: #fff;
       display: inline-block;
       font-family: $sans-serif;
diff --git a/lms/static/sass/course/wiki/_create.scss b/lms/static/sass/course/wiki/_create.scss
index 35b07985011b..f1c0473858cf 100644
--- a/lms/static/sass/course/wiki/_create.scss
+++ b/lms/static/sass/course/wiki/_create.scss
@@ -35,7 +35,7 @@ form#wiki_revision {
   #submit_delete {
     background: none;
     border: none;
-    @include box-shadow(none);
+    box-shadow: none;
     color: #999;
     float: right;
     font-weight: normal;
diff --git a/lms/static/sass/course/wiki/_wiki.scss b/lms/static/sass/course/wiki/_wiki.scss
index 63a559184c2f..a9b012d82834 100644
--- a/lms/static/sass/course/wiki/_wiki.scss
+++ b/lms/static/sass/course/wiki/_wiki.scss
@@ -406,7 +406,7 @@ section.wiki {
   .CodeMirror {
     background: #fafafa;
     border: 1px solid #c8c8c8;
-    @include box-shadow(0 1px 0 0 rgba(255, 255, 255, 0.6), inset 0 0 3px 0 rgba(0, 0, 0, 0.1));
+    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6), inset 0 0 3px 0 rgba(0, 0, 0, 0.1);
   }
 
   .CodeMirror-scroll {
@@ -417,7 +417,7 @@ section.wiki {
     position: relative;
 
     canvas {
-      @include box-shadow(0 0 1px 1px rgba(0, 0, 0, .1), 0 1px 6px rgba(0, 0, 0, .2));
+      box-shadow: 0 0 1px 1px rgba(0, 0, 0, .1), 0 1px 6px rgba(0, 0, 0, .2);
     }
 
     &:before {
@@ -613,7 +613,7 @@ section.wiki {
       line-height: 28px;
       color: #333;
       text-align: center;
-      @include box-shadow(0 1px 0 #fff inset, 0 1px 2px rgba(0, 0, 0, .2));
+      box-shadow: 0 1px 0 #fff inset, 0 1px 2px rgba(0, 0, 0, .2);
     }
   }
 
@@ -987,7 +987,7 @@ section.wiki {
     overflow: hidden;
     background: $pink;
     padding: lh();
-    @include box-shadow(inset 0 0 0 1px lighten($pink, 10%));
+    box-shadow: inset 0 0 0 1px lighten($pink, 10%);
     border: 1px solid darken($pink, 15%);
 
     p {
diff --git a/lms/static/sass/ie.scss b/lms/static/sass/ie.scss
index e03b711bae76..87a8b07fe63c 100644
--- a/lms/static/sass/ie.scss
+++ b/lms/static/sass/ie.scss
@@ -65,7 +65,7 @@ header.global {
 
 }
 
-.home .university-partners .partners { 
+.home .university-partners .partners {
   width: 660px;
 
   li.partner {
@@ -118,7 +118,7 @@ header.global {
   &:hover {
     background: rgb(245,245,245);
     border-color: rgb(170,170,170);
-    @include box-shadow(0 1px 16px 0 rgba($blue, 0.4));
+    box-shadow: 0 1px 16px 0 rgba($blue, 0.4);
 
     .info {
       top: 0;
diff --git a/lms/static/sass/multicourse/_account.scss b/lms/static/sass/multicourse/_account.scss
index e8a38a983e96..6f2ec7fa8f96 100644
--- a/lms/static/sass/multicourse/_account.scss
+++ b/lms/static/sass/multicourse/_account.scss
@@ -447,7 +447,7 @@
   }
 
   .submission-error, .system-error {
-    @include box-shadow(inset 0 -1px 2px 0 tint($red, 85%));
+    box-shadow: inset 0 -1px 2px 0 tint($red, 85%);
     border-bottom: 3px solid shade($red, 10%);
     background: tint($red,95%);
 
@@ -580,7 +580,7 @@
 
     form {
       border-radius: 0;
-      @include box-shadow(none);
+      box-shadow: none;
       margin: 0;
       border: none;
       padding: 0;
@@ -610,7 +610,7 @@
 
   .modal-form-error {
     @extend .body-text;
-    @include box-shadow(inset 0 -1px 2px 0 tint($red, 85%));
+    box-shadow: inset 0 -1px 2px 0 tint($red, 85%);
     @include box-sizing(border-box);
     margin: $baseline 0 ($baseline/2) 0 !important;
     padding: $baseline;
diff --git a/lms/static/sass/multicourse/_course_about.scss b/lms/static/sass/multicourse/_course_about.scss
index 1057781684e8..6c087c7e7e51 100644
--- a/lms/static/sass/multicourse/_course_about.scss
+++ b/lms/static/sass/multicourse/_course_about.scss
@@ -7,9 +7,9 @@
     background: $course-profile-bg;
     @include background-image(url($homepage-bg-image));
     background-size: cover;
-    @include box-shadow(0 1px 80px 0 rgba(0,0,0, 0.5));
+    box-shadow: 0 1px 80px 0 rgba(0,0,0, 0.5);
     border-bottom: 1px solid $border-color-3;
-    @include box-shadow(inset 0 1px 5px 0 rgba(0,0,0, 0.1));
+    box-shadow: inset 0 1px 5px 0 rgba(0,0,0, 0.1);
     height: 280px;
     margin-top: $header_image_margin;
     padding-top: 150px;
@@ -20,7 +20,7 @@
     .intro-inner-wrapper {
       background: $course-header-bg;
       border: 1px solid $border-color-3;
-      @include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5));
+      box-shadow: 0 4px 25px 0 rgba(0,0,0, 0.5);
       @include box-sizing(border-box);
       @include clearfix;
       margin: 0 auto;
@@ -45,7 +45,7 @@
 
         > hgroup {
           border-bottom: 1px solid $border-color-2;
-          @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
+          box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6);
           margin-bottom: 20px;
           padding-bottom: 20px;
           width: 100%;
@@ -184,7 +184,7 @@
           .play-intro {
             @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.65), rgba(0,0,0, 0.75)));
             border-radius: 4px;
-            @include box-shadow(0 1px 12px 0 rgba(0,0,0, 0.4));
+            box-shadow: 0 1px 12px 0 rgba(0,0,0, 0.4);
             border: 2px solid rgba(255,255,255, 0.8);
             height: 80px;
             left: 50%;
@@ -219,7 +219,7 @@
 
           .play-intro {
             @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.75), rgba(0,0,0, 0.8)));
-            @include box-shadow(0 1px 12px 0 rgba(0,0,0, 0.5));
+            box-shadow: 0 1px 12px 0 rgba(0,0,0, 0.5);
             border-color: rgba(255,255,255, 0.9);
 
             &::after {
@@ -350,7 +350,7 @@
     width: flex-grid(4);
 
     > section {
-      @include box-shadow(inset 0 0 3px 0 rgba(0,0,0, 0.15));
+      box-shadow: inset 0 0 3px 0 rgba(0,0,0, 0.15);
       border: 1px solid $border-color-2;
 
       &.course-summary {
@@ -439,7 +439,7 @@
                                                             rgba(0,0,0, 0.7) 100%));
           border: 1px solid rgba(0,0,0, 0.5);
           border-radius: 4px;
-          @include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5));
+          box-shadow: 0 4px 25px 0 rgba(0,0,0, 0.5);
           @include box-sizing(border-box);
           color: rgb(255,255,255);
           float: right;
diff --git a/lms/static/sass/multicourse/_courses.scss b/lms/static/sass/multicourse/_courses.scss
index 83680c06a01b..3b349db95010 100644
--- a/lms/static/sass/multicourse/_courses.scss
+++ b/lms/static/sass/multicourse/_courses.scss
@@ -8,7 +8,7 @@
     @include background-image(url($homepage-bg-image));
     background-position: center top !important;
     border-bottom: 1px solid $border-color-3;
-    @include box-shadow(inset 0 -1px 8px 0 rgba(0,0,0, 0.2), inset 0 1px 12px 0 rgba(0,0,0, 0.3));
+    box-shadow: inset 0 -1px 8px 0 rgba(0,0,0, 0.2), inset 0 1px 12px 0 rgba(0,0,0, 0.3);
     height: 430px;
     margin-top: $header_image_margin;
     width: 100%;
@@ -27,7 +27,7 @@
         background: #FFF;
         background: $course-header-bg;
         border: 1px solid $border-color-3;
-        @include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5));
+        box-shadow: 0 4px 25px 0 rgba(0,0,0, 0.5);
         padding: 20px 30px;
         position: relative;
         z-index: 2;
diff --git a/lms/static/sass/multicourse/_dashboard.scss b/lms/static/sass/multicourse/_dashboard.scss
index b0ea7ad5f1cb..2dded26e2716 100644
--- a/lms/static/sass/multicourse/_dashboard.scss
+++ b/lms/static/sass/multicourse/_dashboard.scss
@@ -5,7 +5,7 @@
   .dashboard-banner {
     background: $yellow;
     border: 1px solid rgb(200,200,200);
-    @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
+    box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6);
     padding: 10px;
     margin-bottom: 30px;
 
@@ -59,7 +59,7 @@
         border-top: none;
         //@include border-bottom-radius(4px);
         @include box-sizing(border-box);
-        @include box-shadow(inset 0 0 3px 0 rgba(0,0,0, 0.15));
+        box-shadow: inset 0 0 3px 0 rgba(0,0,0, 0.15);
         @include clearfix;
         margin: 0px;
         padding: 20px 10px 10px;
@@ -131,7 +131,7 @@
       margin: 30px 10px 0;
       border: 1px solid $border-color-2;
       background: $dashboard-profile-color;
-      @include box-shadow(inset 0 0 3px 0 rgba(0,0,0, 0.15));
+      box-shadow: inset 0 0 3px 0 rgba(0,0,0, 0.15);
 
       * {
         font-family: $sans-serif;
@@ -251,7 +251,7 @@
         background-color: $button-bg-color;
         border: 1px solid $border-color-2;
         border-radius: 4px;
-        @include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.1));
+        box-shadow: 0 1px 8px 0 rgba(0,0,0, 0.1);
         @include box-sizing(border-box);
         color: $base-font-color;
         font-family: $sans-serif;
@@ -346,7 +346,7 @@
         .course-status {
           background: $yellow;
           border: 1px solid $border-color-2;
-          @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
+          box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6);
           margin-top: 17px;
           margin-right: flex-gutter();
           padding: 5px;
diff --git a/lms/static/sass/multicourse/_edge.scss b/lms/static/sass/multicourse/_edge.scss
index b0b745094003..a714ef17f916 100644
--- a/lms/static/sass/multicourse/_edge.scss
+++ b/lms/static/sass/multicourse/_edge.scss
@@ -13,7 +13,7 @@ $paleYellow: #fffcf1;
   font-weight: 700;
   text-transform: none;
   letter-spacing: 0;
-  @include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset, 0 0 0 rgba(0, 0, 0, 0));
+  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);
 
   &.disabled {
@@ -29,7 +29,7 @@ $paleYellow: #fffcf1;
   }
 
   &:hover {
-    @include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset, 0 1px 1px rgba(0, 0, 0, .15));
+    box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 1px 1px rgba(0, 0, 0, .15);
     text-decoration: none;
   }
 }
@@ -54,7 +54,7 @@ $paleYellow: #fffcf1;
   border-radius: 3px;
   @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
   background-color: #d1dae3;
-  @include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
   color: #6d788b;
 
   &:hover {
@@ -63,7 +63,7 @@ $paleYellow: #fffcf1;
   }
 }
 
-.edge-landing {  
+.edge-landing {
   border-top: 5px solid $blue;
 
   header {
@@ -85,7 +85,7 @@ $paleYellow: #fffcf1;
       background: #fff;
       border: 1px solid $darkGrey;
       border-radius: 3px;
-      @include box-shadow(0 1px 2px rgba(0, 0, 0, .1));
+      box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
       @include clearfix;
     }
 
@@ -257,4 +257,4 @@ $paleYellow: #fffcf1;
       color: #fff;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/lms/static/sass/multicourse/_home.scss b/lms/static/sass/multicourse/_home.scss
index d8ae6106e2df..167d5bb8c3de 100644
--- a/lms/static/sass/multicourse/_home.scss
+++ b/lms/static/sass/multicourse/_home.scss
@@ -11,7 +11,7 @@
     @include background-image(url($homepage-bg-image));
     background-size: cover;
     border-bottom: 1px solid $border-color-3;
-    @include box-shadow(0 1px 0 0 $course-header-bg, inset 0 -1px 5px 0 rgba(0,0,0, 0.1));
+    box-shadow: 0 1px 0 0 $course-header-bg, inset 0 -1px 5px 0 rgba(0,0,0, 0.1);
     @include clearfix;
     height: 460px;
     overflow: hidden;
@@ -33,7 +33,7 @@
       background: #FFF;
       background: $course-header-bg;
       border: 1px solid $border-color-3;
-      @include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5));
+      box-shadow: 0 4px 25px 0 rgba(0,0,0, 0.5);
       @include box-sizing(border-box);
       min-height: 120px;
       margin-left: grid-width(2) + $gw-gutter;
@@ -84,7 +84,7 @@
       border: 1px solid $border-color-3;
       border-left: 0;
       @include box-sizing(border-box);
-      // @include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5));
+      // box-shadow: 0 4px 25px 0 rgba(0,0,0, 0.5);
       height: 120px;
       float: left;
       padding: 4px;
@@ -107,7 +107,7 @@
         .play-intro {
           @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.65), rgba(0,0,0, 0.75)));
           border-radius: 4px;
-          @include box-shadow(0 1px 12px 0 rgba(0,0,0, 0.4));
+          box-shadow: 0 1px 12px 0 rgba(0,0,0, 0.4);
           @include box-sizing(border-box);
           border: 2px solid rgba(255,255,255, 0.8);
           height: 60px;
@@ -143,7 +143,7 @@
       &:hover {
         .play-intro {
           @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.75), rgba(0,0,0, 0.8)));
-          @include box-shadow(0 1px 12px 0 rgba(0,0,0, 0.5));
+          box-shadow: 0 1px 12px 0 rgba(0,0,0, 0.5);
           border-color: rgba(255,255,255, 0.9);
 
           &::after {
@@ -167,7 +167,7 @@
       border: 1px solid $border-color-2;
       border-radius: 4px;
       border-top-color: $border-color-1;
-      @include box-shadow(inset 0 0 0 1px rgba(255,255,255, 0.4), 0 0px 12px 0 rgba(0,0,0, 0.2));
+      box-shadow: inset 0 0 0 1px rgba(255,255,255, 0.4), 0 0px 12px 0 rgba(0,0,0, 0.2);
       color: $lighter-base-font-color;
       letter-spacing: 1px;
       margin-bottom: 0px;
@@ -410,7 +410,7 @@
 
     .news {
       @include box-sizing(border-box);
-      @include box-shadow(inset 0 0 3px 0 rgba(0,0,0, 0.15));
+      box-shadow: inset 0 0 3px 0 rgba(0,0,0, 0.15);
       padding: 20px;
       width: flex-grid(12);
 
@@ -434,7 +434,7 @@
           &:hover {
             background: $body-bg;
             border: 1px solid $border-color-2;
-            @include box-shadow(inset 0 0 3px 0 rgba(0,0,0, 0.1));
+            box-shadow: inset 0 0 3px 0 rgba(0,0,0, 0.1);
           }
 
           &:last-child {
diff --git a/lms/static/sass/multicourse/_media-kit.scss b/lms/static/sass/multicourse/_media-kit.scss
index 900ac30cf92b..a234f0ac208d 100644
--- a/lms/static/sass/multicourse/_media-kit.scss
+++ b/lms/static/sass/multicourse/_media-kit.scss
@@ -11,7 +11,7 @@ $white: rgb(255,255,255);
   .wrapper-mediakit {
     border-radius: 4px;
     @include box-sizing(border-box);
-    @include box-shadow(0 1px 10px 0 rgba(0,0,0, 0.1));
+    box-shadow: 0 1px 10px 0 rgba(0,0,0, 0.1);
     margin: ($baseline*3) 0 0 0;
     border: 1px solid $border-color;
     padding: ($baseline*2) ($baseline*3);
@@ -115,7 +115,7 @@ $white: rgb(255,255,255);
     aside {
       border-radius: 2px;
       @include box-sizing(border-box);
-      @include box-shadow(0 1px 4px 0 rgba(0,0,0, 0.2));
+      box-shadow: 0 1px 4px 0 rgba(0,0,0, 0.2);
       width: 330px;
       float: left;
       border: 3px solid tint(rgb(96, 155, 216), 35%);
@@ -173,7 +173,7 @@ $white: rgb(255,255,255);
   .library {
     border-radius: 2px;
     @include box-sizing(border-box);
-    @include box-shadow(0 1px 4px 0 rgba(0,0,0, 0.2));
+    box-shadow: 0 1px 4px 0 rgba(0,0,0, 0.2);
     border: 3px solid tint($light-gray,50%);
     padding: 0;
     background: tint($light-gray,50%);
@@ -222,7 +222,7 @@ $white: rgb(255,255,255);
         a {
           border-radius: 2px;
           @include box-sizing(border-box);
-          @include box-shadow(0 1px 2px 0 rgba(0,0,0, 0.1));
+          box-shadow: 0 1px 2px 0 rgba(0,0,0, 0.1);
           display: block;
           min-height: 380px;
           border: 2px solid tint($light-gray,75%);
diff --git a/lms/static/sass/multicourse/_password_reset.scss b/lms/static/sass/multicourse/_password_reset.scss
index ebfa5fb86133..0e3ea155730c 100644
--- a/lms/static/sass/multicourse/_password_reset.scss
+++ b/lms/static/sass/multicourse/_password_reset.scss
@@ -3,7 +3,7 @@
   border: 1px solid rgb(200,200,200);
   border-radius: 4px;
   @include box-sizing(border-box);
-  @include box-shadow(0 5px 50px 0 rgba(0,0,0, 0.3));
+  box-shadow: 0 5px 50px 0 rgba(0,0,0, 0.3);
   margin: 120px auto 0;
   padding: 0px 40px 40px;
   width: flex-grid(5);
diff --git a/lms/static/sass/multicourse/_press_release.scss b/lms/static/sass/multicourse/_press_release.scss
index 0cbe787787f1..6efa4d65c35b 100644
--- a/lms/static/sass/multicourse/_press_release.scss
+++ b/lms/static/sass/multicourse/_press_release.scss
@@ -37,7 +37,7 @@
       border: 1px solid rgb(220,220,220);
       border-radius: 10px;
       @include box-sizing(border-box);
-      @include box-shadow(0 2px 16px 0 rgba(0,0,0, 0.1));
+      box-shadow: 0 2px 16px 0 rgba(0,0,0, 0.1);
       margin: 0 auto;
       padding: 80px 80px 40px 80px;
       width: flex-grid(10);
diff --git a/lms/static/sass/multicourse/_testcenter-register.scss b/lms/static/sass/multicourse/_testcenter-register.scss
index 2bf22e4bacd0..3cf0e4d9c75c 100644
--- a/lms/static/sass/multicourse/_testcenter-register.scss
+++ b/lms/static/sass/multicourse/_testcenter-register.scss
@@ -63,13 +63,13 @@
 	// form
 	.form-fields-primary, .form-fields-secondary {
 		border-bottom: 1px solid rgba(0,0,0,0.25);
-		@include box-shadow(0 1px 2px 0 rgba(0,0,0, 0.1));
+		box-shadow: 0 1px 2px 0 rgba(0,0,0, 0.1);
 	}
 
 	form {
 		border: 1px solid rgb(216, 223, 230);
 		border-radius: 3px;
-		@include box-shadow(0 1px 2px 0 rgba(0,0,0, 0.2));
+		box-shadow: 0 1px 2px 0 rgba(0,0,0, 0.2);
 
 		.instructions, .note {
 			margin: 0;
@@ -512,7 +512,7 @@
 			}
 
 			.actions {
-				@include box-shadow(inset 0 1px 1px 0px rgba(0,0,0,0.2));
+				box-shadow: inset 0 1px 1px 0px rgba(0,0,0,0.2);
 				border-top: 1px solid tint(rgb(0,0,0), 90%);
 				padding-top: ($baseline*0.75);
 				background: tint($yellow,70%);
diff --git a/lms/static/sass/shared/_activation_messages.scss b/lms/static/sass/shared/_activation_messages.scss
index 47d2c5132196..c9f61f12fb1c 100644
--- a/lms/static/sass/shared/_activation_messages.scss
+++ b/lms/static/sass/shared/_activation_messages.scss
@@ -21,7 +21,7 @@
   .message {
     background: rgb(252,252,252);
     border: 1px solid rgb(200,200,200);
-    @include box-shadow(0 3px 20px 0 rgba(0,0,0, 0.2));
+    box-shadow: 0 3px 20px 0 rgba(0,0,0, 0.2);
     border-radius: 4px;
     margin: 0 auto;
     padding: 40px;
diff --git a/lms/static/sass/shared/_course_filter.scss b/lms/static/sass/shared/_course_filter.scss
index f6723e01f47b..a8bf7f9fdc7e 100644
--- a/lms/static/sass/shared/_course_filter.scss
+++ b/lms/static/sass/shared/_course_filter.scss
@@ -3,7 +3,7 @@
 
   nav {
     @include background-image(linear-gradient(-90deg, rgb(250,250,250), rgb(230,230,230)));
-    @include box-shadow(inset 0 0 0 1px rgba(255,255,255, 0.4), inset 0 0 0 -1px rgba(255,255,255, 0.4));
+    box-shadow: inset 0 0 0 1px rgba(255,255,255, 0.4), inset 0 0 0 -1px rgba(255,255,255, 0.4);
     @include box-sizing(border-box);
     border: 1px solid rgb(190,190,190);
     border-bottom-color: rgb(200,200,200);
@@ -16,7 +16,7 @@
     z-index: 9;
 
     &.fixed-top {
-      @include box-shadow(0 1px 15px 0 rgba(0,0,0, 0.2), inset 0 0 0 1px rgba(255,255,255, 0.4));
+      box-shadow: 0 1px 15px 0 rgba(0,0,0, 0.2), inset 0 0 0 1px rgba(255,255,255, 0.4);
       max-width: 1200px;
       position: fixed;
       top: 0px;
@@ -32,7 +32,7 @@
         @include background-image(linear-gradient(-90deg, rgb(250,250,250) 0%, rgb(245,245,245) 50%, rgb(235,235,235) 50%, rgb(230,230,230) 100%));
         border-radius: 4px;
         @include box-sizing(border-box);
-        @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.4), inset 0 1px 0 0 rgba(255,255,255, 0.6));
+        box-shadow: 0 1px 0 0 rgba(255,255,255, 0.4), inset 0 1px 0 0 rgba(255,255,255, 0.6);
         border: 1px solid rgb(200,200,200);
         color: $base-font-color;
         cursor: pointer;
@@ -49,7 +49,7 @@
         background: rgb(255,255,255);
         border-radius: 0px 4px 4px 4px;
         border: 1px solid rgb(200,200,200);
-        @include box-shadow(0 2px 15px 0 rgba(0,0,0, 0.2));
+        box-shadow: 0 2px 15px 0 rgba(0,0,0, 0.2);
         padding: 20px 0px 5px 20px;
         position: absolute;
         visibility: hidden;
@@ -68,7 +68,7 @@
           @include background-image(linear-gradient(-90deg, rgb(250,250,250), rgb(255,255,255)));
           border-radius: 4px 4px 0px 0px;
           border-bottom: 1px dotted rgb(200,200,200);
-          @include box-shadow(0 2px 0 -1px rgb(255,255,255));
+          box-shadow: 0 2px 0 -1px rgb(255,255,255);
           color: $base-font-color;
           height: 40px;
         }
diff --git a/lms/static/sass/shared/_course_object.scss b/lms/static/sass/shared/_course_object.scss
index 5c14407459bb..4c800f595684 100644
--- a/lms/static/sass/shared/_course_object.scss
+++ b/lms/static/sass/shared/_course_object.scss
@@ -35,7 +35,7 @@
       border: 1px solid $border-color-1;
       border-radius: 2px;
       @include box-sizing(border-box);
-      @include box-shadow(0 1px 10px 0 rgba(0,0,0, 0.15), inset 0 0 0 1px rgba(255,255,255, 0.9));
+      box-shadow: 0 1px 10px 0 rgba(0,0,0, 0.15), inset 0 0 0 1px rgba(255,255,255, 0.9);
       margin-bottom: 30px;
       position: relative;
       width: 100%;
@@ -80,7 +80,7 @@
         bottom: 6px;
         border: 1px solid rgba(0,0,0, 0.5);
         @include border-right-radius(2px);
-        @include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.15));
+        box-shadow: 0 1px 5px 0 rgba(0,0,0, 0.15);
         @include clearfix;
         position: absolute;
         right: -4px;
@@ -111,7 +111,7 @@
 
         // > a {
           @include background-image(linear-gradient(-90deg, rgba(255,255,255, 1), rgba(255,255,255, 0.85)));
-          @include box-shadow(inset 0 -1px 0 0 rgba(255,255,255, 0.2));
+          box-shadow: inset 0 -1px 0 0 rgba(255,255,255, 0.2);
           border-bottom: 1px solid rgba(150,150,150, 0.7);
           display: block;
           height: 50px;
@@ -247,7 +247,7 @@
       &:hover {
         background: $course-profile-bg;
         border-color: $border-color-1;
-        @include box-shadow(0 1px 16px 0 rgba($shadow-color, 0.4));
+        box-shadow: 0 1px 16px 0 rgba($shadow-color, 0.4);
 
         .info {
           top: -150px;
diff --git a/lms/static/sass/shared/_footer.scss b/lms/static/sass/shared/_footer.scss
index 3c89c54faf06..c6c4ff5cf8b6 100644
--- a/lms/static/sass/shared/_footer.scss
+++ b/lms/static/sass/shared/_footer.scss
@@ -1,5 +1,5 @@
 .wrapper-footer {
-  @include box-shadow(0 -1px 5px 0 rgba(0,0,0, 0.1));
+  box-shadow: 0 -1px 5px 0 rgba(0,0,0, 0.1);
   border-top: 1px solid tint($m-gray,50%);
   padding: 25px ($baseline/2) ($baseline*1.5) ($baseline/2);
   background: $footer-bg;
diff --git a/lms/static/sass/shared/_forms.scss b/lms/static/sass/shared/_forms.scss
index d26aae84402c..6a011b22efd4 100644
--- a/lms/static/sass/shared/_forms.scss
+++ b/lms/static/sass/shared/_forms.scss
@@ -18,7 +18,7 @@ input[type="tel"] {
   background: $form-bg-color;
   border: 1px solid $border-color-2;
   border-radius: 3px;
-  @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6), inset 0 0 3px 0 rgba(0,0,0, 0.1));
+  box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6), inset 0 0 3px 0 rgba(0,0,0, 0.1);
   @include box-sizing(border-box);
   font: italic 300 1rem/1.6rem $serif;
   height: 35px;
@@ -32,7 +32,7 @@ input[type="tel"] {
 
   &:focus {
     border-color: darken($button-archive-color, 50%);
-    @include box-shadow(0 0 6px 0 darken($button-archive-color, 50%), inset 0 0 4px 0 rgba(0,0,0, 0.15));
+    box-shadow: 0 0 6px 0 darken($button-archive-color, 50%), inset 0 0 4px 0 rgba(0,0,0, 0.15);
     outline: none;
   }
 }
diff --git a/lms/static/sass/shared/_header.scss b/lms/static/sass/shared/_header.scss
index f1c54dfce1cf..e7948f40b098 100644
--- a/lms/static/sass/shared/_header.scss
+++ b/lms/static/sass/shared/_header.scss
@@ -1,6 +1,6 @@
 header.global {
   border-bottom: 1px solid $m-gray;
-  @include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1));
+  box-shadow: 0 1px 5px 0 rgba(0,0,0, 0.1);
   background: $header-bg;
   height: 76px;
   position: relative;
@@ -81,7 +81,7 @@ header.global {
         border: 1px solid $border-color-2;
         border-radius: 3px;
         @include box-sizing(border-box);
-        @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
+        box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6);
         color: $base-font-color;
         display: inline-block;
         font-family: $sans-serif;
@@ -159,7 +159,7 @@ header.global {
       ul.dropdown-menu {
         background: $border-color-4;
         border-radius: 4px;
-        @include box-shadow(0 2px 24px 0 rgba(0,0,0, 0.3));
+        box-shadow: 0 2px 24px 0 rgba(0,0,0, 0.3);
         border: 1px solid $border-color-3;
         display: none;
         padding: 5px 10px;
@@ -181,7 +181,7 @@ header.global {
             bottom: 6px solid transparent;
             left: 6px solid transparent;
           }
-          @include box-shadow(1px 0 0 0 $border-color-3, 0 -1px 0 0 $border-color-3);
+          box-shadow: 1px 0 0 0 $border-color-3, 0 -1px 0 0 $border-color-3;
           content: "";
           display: block;
           height: 0px;
@@ -195,11 +195,11 @@ header.global {
         li {
           display: block;
           border-top: 1px dotted $border-color-2;
-          @include box-shadow(inset 0 1px 0 0 rgba(255,255,255, 0.05));
+          box-shadow: inset 0 1px 0 0 rgba(255,255,255, 0.05);
 
           &:first-child {
             border: none;
-            @include box-shadow(none);
+            box-shadow: none;
           }
 
           > a {
diff --git a/lms/static/sass/shared/_modal.scss b/lms/static/sass/shared/_modal.scss
index 9ec57a191eaa..395cd89c0e87 100644
--- a/lms/static/sass/shared/_modal.scss
+++ b/lms/static/sass/shared/_modal.scss
@@ -14,7 +14,7 @@
   background: rgba(0,0,0, 0.6);
   border: 1px solid rgba(0, 0, 0, 0.9);
   border-radius: 0px;
-  @include box-shadow(0 15px 80px 15px rgba(0,0,0, 0.5));
+  box-shadow: 0 15px 80px 15px rgba(0,0,0, 0.5);
   color: #fff;
   display: none;
   left: 50%;
@@ -30,7 +30,7 @@
 
     .inner-wrapper {
       background: #000;
-      @include box-shadow(none);
+      box-shadow: none;
       height: 315px;
       padding: 10px;
       width: 560px;
@@ -44,7 +44,7 @@
 
     .inner-wrapper {
       background: #000;
-      @include box-shadow(none);
+      box-shadow: none;
       height: 360px;
       padding: 10px;
       width: 640px;
@@ -55,7 +55,7 @@
     background: $modal-bg-color;
     border-radius: 0px;
     border: 1px solid rgba(0, 0, 0, 0.9);
-    @include box-shadow(inset 0 1px 0 0 rgba(255, 255, 255, 0.7));
+    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.7);
     overflow: hidden;
     padding-left: 10px;
     padding-right: 10px;
@@ -143,7 +143,7 @@
       .input-group {
         @include clearfix;
         border-bottom: 1px solid rgb(210,210,210);
-        @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
+        box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6);
         margin-bottom: 30px;
         padding-bottom: 10px;
       }
@@ -190,7 +190,7 @@
         background: rgb(233,233,233);
         border: 1px solid rgb(200,200,200);
         border-radius: 3px;
-        @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
+        box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6);
         display: block;
         margin-bottom: 20px;
         padding: 8px 10px;

From 27796219c734009eb05e90f275e8299d00b667ca Mon Sep 17 00:00:00 2001
From: David Baumgold <david@davidbaumgold.com>
Date: Mon, 8 Jul 2013 11:12:48 -0400
Subject: [PATCH 04/20] Changed `@include background-size()` to
 `background-size`

Bourbon's background-size mixin has been deprecated, and they recommend to use the
official spec.
---
 common/lib/xmodule/xmodule/css/video/display.scss      | 4 ++--
 common/lib/xmodule/xmodule/css/videoalpha/display.scss | 4 ++--
 lms/static/sass/multicourse/_home.scss                 | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/common/lib/xmodule/xmodule/css/video/display.scss b/common/lib/xmodule/xmodule/css/video/display.scss
index 9d4c86c0f177..e15cc21a4cf7 100644
--- a/common/lib/xmodule/xmodule/css/video/display.scss
+++ b/common/lib/xmodule/xmodule/css/video/display.scss
@@ -64,7 +64,7 @@ div.video {
 
         a.ui-slider-handle {
           background: $pink url(../images/slider-handle.png) center center no-repeat;
-          @include background-size(50%);
+          background-size: 50%;
           border: 1px solid darken($pink, 20%);
           border-radius: 15px;
           box-shadow: inset 0 1px 0 lighten($pink, 10%);
@@ -320,7 +320,7 @@ div.video {
 
               a.ui-slider-handle {
                 background: $pink url(../images/slider-handle.png) center center no-repeat;
-                @include background-size(50%);
+                background-size: 50%;
                 border: 1px solid darken($pink, 20%);
                 border-radius: 15px;
                 box-shadow: inset 0 1px 0 lighten($pink, 10%);
diff --git a/common/lib/xmodule/xmodule/css/videoalpha/display.scss b/common/lib/xmodule/xmodule/css/videoalpha/display.scss
index 9d4c86c0f177..e15cc21a4cf7 100644
--- a/common/lib/xmodule/xmodule/css/videoalpha/display.scss
+++ b/common/lib/xmodule/xmodule/css/videoalpha/display.scss
@@ -64,7 +64,7 @@ div.video {
 
         a.ui-slider-handle {
           background: $pink url(../images/slider-handle.png) center center no-repeat;
-          @include background-size(50%);
+          background-size: 50%;
           border: 1px solid darken($pink, 20%);
           border-radius: 15px;
           box-shadow: inset 0 1px 0 lighten($pink, 10%);
@@ -320,7 +320,7 @@ div.video {
 
               a.ui-slider-handle {
                 background: $pink url(../images/slider-handle.png) center center no-repeat;
-                @include background-size(50%);
+                background-size: 50%;
                 border: 1px solid darken($pink, 20%);
                 border-radius: 15px;
                 box-shadow: inset 0 1px 0 lighten($pink, 10%);
diff --git a/lms/static/sass/multicourse/_home.scss b/lms/static/sass/multicourse/_home.scss
index 167d5bb8c3de..e0fafcc40244 100644
--- a/lms/static/sass/multicourse/_home.scss
+++ b/lms/static/sass/multicourse/_home.scss
@@ -102,7 +102,7 @@
         overflow: hidden;
         position: relative;
         background: url($video-thumb-url) center no-repeat;
-        @include background-size(cover);
+        background-size: cover;
 
         .play-intro {
           @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.65), rgba(0,0,0, 0.75)));

From 40585b2bbbcdd97c8e8bab0b59ab4804723b25ef Mon Sep 17 00:00:00 2001
From: David Baumgold <david@davidbaumgold.com>
Date: Mon, 8 Jul 2013 11:32:08 -0400
Subject: [PATCH 05/20] Added neat grid framework

http://neat.bourbon.io/
---
 Gemfile                                       |   1 +
 common/static/sass/neat/_neat-helpers.scss    |   8 ++
 common/static/sass/neat/_neat.scss            |  21 ++++
 .../sass/neat/functions/_new-breakpoint.scss  |  16 +++
 .../static/sass/neat/functions/_private.scss  | 107 ++++++++++++++++++
 .../static/sass/neat/functions/_px-to-em.scss |   3 +
 .../static/sass/neat/grid/_fill-parent.scss   |   7 ++
 common/static/sass/neat/grid/_grid.scss       |   5 +
 common/static/sass/neat/grid/_media.scss      |  51 +++++++++
 common/static/sass/neat/grid/_omega.scss      |  79 +++++++++++++
 .../sass/neat/grid/_outer-container.scss      |   8 ++
 common/static/sass/neat/grid/_pad.scss        |   8 ++
 common/static/sass/neat/grid/_private.scss    |  21 ++++
 common/static/sass/neat/grid/_reset.scss      |  12 ++
 common/static/sass/neat/grid/_row.scss        |  17 +++
 common/static/sass/neat/grid/_shift.scss      |  10 ++
 .../static/sass/neat/grid/_span-columns.scss  |  45 ++++++++
 .../static/sass/neat/grid/_to-deprecate.scss  |  57 ++++++++++
 .../static/sass/neat/grid/_visual-grid.scss   |  41 +++++++
 common/static/sass/neat/settings/_grid.scss   |   7 ++
 .../sass/neat/settings/_visual-grid.scss      |   5 +
 21 files changed, 529 insertions(+)
 create mode 100644 common/static/sass/neat/_neat-helpers.scss
 create mode 100644 common/static/sass/neat/_neat.scss
 create mode 100644 common/static/sass/neat/functions/_new-breakpoint.scss
 create mode 100644 common/static/sass/neat/functions/_private.scss
 create mode 100644 common/static/sass/neat/functions/_px-to-em.scss
 create mode 100644 common/static/sass/neat/grid/_fill-parent.scss
 create mode 100644 common/static/sass/neat/grid/_grid.scss
 create mode 100644 common/static/sass/neat/grid/_media.scss
 create mode 100644 common/static/sass/neat/grid/_omega.scss
 create mode 100644 common/static/sass/neat/grid/_outer-container.scss
 create mode 100644 common/static/sass/neat/grid/_pad.scss
 create mode 100644 common/static/sass/neat/grid/_private.scss
 create mode 100644 common/static/sass/neat/grid/_reset.scss
 create mode 100644 common/static/sass/neat/grid/_row.scss
 create mode 100644 common/static/sass/neat/grid/_shift.scss
 create mode 100644 common/static/sass/neat/grid/_span-columns.scss
 create mode 100644 common/static/sass/neat/grid/_to-deprecate.scss
 create mode 100644 common/static/sass/neat/grid/_visual-grid.scss
 create mode 100644 common/static/sass/neat/settings/_grid.scss
 create mode 100644 common/static/sass/neat/settings/_visual-grid.scss

diff --git a/Gemfile b/Gemfile
index fcbe49181f92..8a6a2c8ccc85 100644
--- a/Gemfile
+++ b/Gemfile
@@ -2,6 +2,7 @@ source 'https://rubygems.org'
 gem 'rake', '~> 10.0.3'
 gem 'sass', '3.2.9'
 gem 'bourbon', '~> 3.1.8'
+gem 'neat', '~> 1.3.0'
 gem 'colorize', '~> 0.5.8'
 gem 'launchy', '~> 2.1.2'
 gem 'sys-proctable', '~> 0.9.3'
diff --git a/common/static/sass/neat/_neat-helpers.scss b/common/static/sass/neat/_neat-helpers.scss
new file mode 100644
index 000000000000..86021b1bffb9
--- /dev/null
+++ b/common/static/sass/neat/_neat-helpers.scss
@@ -0,0 +1,8 @@
+// Functions
+@import "functions/private";
+@import "functions/new-breakpoint";
+@import "functions/px-to-em";
+
+// Settings
+@import "settings/grid";
+@import "settings/visual-grid";
diff --git a/common/static/sass/neat/_neat.scss b/common/static/sass/neat/_neat.scss
new file mode 100644
index 000000000000..cb5876b82db0
--- /dev/null
+++ b/common/static/sass/neat/_neat.scss
@@ -0,0 +1,21 @@
+// Bourbon Neat
+// MIT Licensed
+// Copyright (c) 2012-2013 thoughtbot, inc.
+
+// Helpers
+@import "neat-helpers";
+
+// Grid
+@import "grid/private";
+@import "grid/reset";
+@import "grid/grid";
+@import "grid/omega";
+@import "grid/outer-container";
+@import "grid/span-columns";
+@import "grid/row";
+@import "grid/shift";
+@import "grid/pad";
+@import "grid/fill-parent";
+@import "grid/media";
+@import "grid/to-deprecate";
+@import "grid/visual-grid";
diff --git a/common/static/sass/neat/functions/_new-breakpoint.scss b/common/static/sass/neat/functions/_new-breakpoint.scss
new file mode 100644
index 000000000000..d89dcd101b29
--- /dev/null
+++ b/common/static/sass/neat/functions/_new-breakpoint.scss
@@ -0,0 +1,16 @@
+@function new-breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) {
+
+  @if length($query) == 1 {
+    $query: $default-feature nth($query, 1) $total-columns;
+  }
+
+  @else if length($query) == 2 or length($query) == 4 {
+    $query: append($query, $total-columns);
+  }
+
+  @if not belongs-to($query, $visual-grid-breakpoints) {
+    $visual-grid-breakpoints: append($visual-grid-breakpoints, $query, comma);
+  }
+
+  @return $query;
+}
diff --git a/common/static/sass/neat/functions/_private.scss b/common/static/sass/neat/functions/_private.scss
new file mode 100644
index 000000000000..136a6ff3a168
--- /dev/null
+++ b/common/static/sass/neat/functions/_private.scss
@@ -0,0 +1,107 @@
+// Checks if a number is even
+@function is-even($int) {
+  @if $int%2 == 0   {
+    @return true;
+  }
+
+  @return false;
+}
+
+// Checks if an element belongs to a list
+@function belongs-to($tested-item, $list) {
+  @each $item in $list {
+    @if $item == $tested-item {
+      @return true;
+    }
+  }
+
+  @return false;
+}
+
+// Contains display value
+@function contains-display-value($query) {
+  @if belongs-to(table, $query) or belongs-to(block, $query) or belongs-to(inline-block, $query) or belongs-to(inline, $query) {
+    @return true;
+  }
+
+  @return false;
+}
+
+// Parses the first argument of span-columns()
+@function container-span($span: $span) {
+  @if length($span) == 3 {
+    $container-columns: nth($span, 3);
+    @return $container-columns;
+  }
+
+  @else if length($span) == 2 {
+    $container-columns: nth($span, 2);
+    @return $container-columns;
+  }
+
+  @else {
+    @return $grid-columns;
+  }
+}
+
+// Generates a striped background
+@function gradient-stops($grid-columns, $color: $visual-grid-color) {
+  $transparent: rgba(0,0,0,0);
+
+  $column-width: flex-grid(1, $grid-columns);
+  $gutter-width: flex-gutter($grid-columns);
+  $column-offset: $column-width;
+
+  $values: ($transparent 0, $color 0);
+
+  @for $i from 1 to $grid-columns*2 {
+    @if is-even($i) {
+      $values: append($values, $transparent $column-offset);
+      $values: append($values, $color $column-offset);
+      $column-offset: $column-offset + $column-width;
+    }
+
+    @else {
+      $values: append($values, $color $column-offset);
+      $values: append($values, $transparent $column-offset);
+      $column-offset: $column-offset + $gutter-width;
+    }
+  }
+
+  @return $values;
+}
+
+// Layout direction
+@function get-direction($layout, $default) {
+  $direction: nil;
+  
+  @if $layout == LTR or $layout == RTL {
+    $direction: direction-from-layout($layout);
+  } @else {
+    $direction: direction-from-layout($default);
+  }
+
+  @return $direction;
+}
+
+@function direction-from-layout($layout) {
+  $direction: nil;
+
+  @if $layout == LTR {
+    $direction: right;
+  } @else {
+    $direction: left;
+  }
+
+  @return $direction;
+}
+
+@function get-opposite-direction($direction) {
+  $opposite-direction: left;
+
+  @if $direction == left {
+    $opposite-direction: right;
+  }
+
+  @return $opposite-direction;
+}
diff --git a/common/static/sass/neat/functions/_px-to-em.scss b/common/static/sass/neat/functions/_px-to-em.scss
new file mode 100644
index 000000000000..058e51e8b515
--- /dev/null
+++ b/common/static/sass/neat/functions/_px-to-em.scss
@@ -0,0 +1,3 @@
+@function em($pxval, $base: 16) {
+  @return ($pxval / $base) * 1em;
+}
diff --git a/common/static/sass/neat/grid/_fill-parent.scss b/common/static/sass/neat/grid/_fill-parent.scss
new file mode 100644
index 000000000000..859c97790bff
--- /dev/null
+++ b/common/static/sass/neat/grid/_fill-parent.scss
@@ -0,0 +1,7 @@
+@mixin fill-parent() {
+  width: 100%;
+
+  @if $border-box-sizing == false {
+    @include box-sizing(border-box);
+  }
+}
diff --git a/common/static/sass/neat/grid/_grid.scss b/common/static/sass/neat/grid/_grid.scss
new file mode 100644
index 000000000000..e074b6c536c8
--- /dev/null
+++ b/common/static/sass/neat/grid/_grid.scss
@@ -0,0 +1,5 @@
+@if $border-box-sizing == true {
+  * {
+    @include box-sizing(border-box);
+  }
+}
diff --git a/common/static/sass/neat/grid/_media.scss b/common/static/sass/neat/grid/_media.scss
new file mode 100644
index 000000000000..7c9872fb5218
--- /dev/null
+++ b/common/static/sass/neat/grid/_media.scss
@@ -0,0 +1,51 @@
+@mixin media($query:$feature $value $columns, $total-columns: $grid-columns) {
+
+  @if length($query) == 1 {
+    @media screen and ($default-feature: nth($query, 1)) {
+      $default-grid-columns: $grid-columns;
+      $grid-columns: $total-columns;
+      @content;
+      $grid-columns: $default-grid-columns;
+    }
+  }
+
+  @else if length($query) == 2 {
+    @media screen and (nth($query, 1): nth($query, 2)) {
+      $default-grid-columns: $grid-columns;
+      $grid-columns: $total-columns;
+      @content;
+      $grid-columns: $default-grid-columns;
+    }
+  }
+
+  @else if length($query) == 3 {
+    @media screen and (nth($query, 1): nth($query, 2)) {
+      $default-grid-columns: $grid-columns;
+      $grid-columns: nth($query, 3);
+      @content;
+      $grid-columns: $default-grid-columns;
+    }
+  }
+
+  @else if length($query) == 4 {
+    @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
+      $default-grid-columns: $grid-columns;
+      $grid-columns: $total-columns;
+      @content;
+      $grid-columns: $default-grid-columns;
+    }
+  }
+
+  @else if length($query) == 5 {
+    @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
+      $default-grid-columns: $grid-columns;
+      $grid-columns: nth($query, 5);
+      @content;
+      $grid-columns: $default-grid-columns;
+    }
+  }
+
+  @else {
+    @warn "Wrong number of arguments for breakpoint(). Read the documentation for more details.";
+  }
+}
diff --git a/common/static/sass/neat/grid/_omega.scss b/common/static/sass/neat/grid/_omega.scss
new file mode 100644
index 000000000000..902459bcbce4
--- /dev/null
+++ b/common/static/sass/neat/grid/_omega.scss
@@ -0,0 +1,79 @@
+// Remove last element gutter
+@mixin omega($query: block, $direction: default) {
+  $table: if(belongs-to(table, $query), true, false);
+  $auto: if(belongs-to(auto, $query), true, false);
+
+  @if $direction != default {
+    @warn "The omega mixin will no longer take a $direction argument. To change the layout direction, use row($direction) or set $default-layout-direction instead."
+  } @else {
+    $direction: get-direction($layout-direction, $default-layout-direction);
+  }
+
+  @if length($query) == 1 {
+    @if $auto {
+      &:last-child {
+        margin-#{$direction}: 0;
+      }
+    }
+
+    @else if contains-display-value($query) {
+      @if $table {
+        padding-#{$direction}: 0;
+      }
+
+      @else {
+        margin-#{$direction}: 0;
+      }
+    }
+
+    @else {
+      @include nth-child($query, $direction);
+    }
+  }
+
+  @else if length($query) == 2 {
+    @if $table {
+      @if $auto {
+        &:last-child {
+          padding-#{$direction}: 0;
+        }
+      }
+
+      @else {
+        &:nth-child(#{nth($query, 1)}) {
+          padding-#{$direction}: 0;
+        }
+      }
+    }
+
+    @else {
+      @if $auto {
+        &:last-child {
+          margin-#{$direction}: 0;
+        }
+      }
+
+      @else {
+        @include nth-child(nth($query, 1), $direction);
+      }
+    }
+  }
+
+  @else {
+    @warn "Too many arguments passed to the omega() mixin."
+  }
+}
+
+@mixin nth-child($query, $direction) {
+  $opposite-direction: get-opposite-direction($direction);
+
+  &:nth-child(#{$query}) {
+    margin-#{$direction}: 0;
+  }
+
+  @if type-of($query) == number {
+    &:nth-child(#{$query}+1) {
+      clear: $opposite-direction;
+    }
+  }
+}
diff --git a/common/static/sass/neat/grid/_outer-container.scss b/common/static/sass/neat/grid/_outer-container.scss
new file mode 100644
index 000000000000..22c541f4553e
--- /dev/null
+++ b/common/static/sass/neat/grid/_outer-container.scss
@@ -0,0 +1,8 @@
+@mixin outer-container {
+  @include clearfix;
+  max-width: $max-width;
+  margin: {
+    left: auto;
+    right: auto;
+  }
+}
diff --git a/common/static/sass/neat/grid/_pad.scss b/common/static/sass/neat/grid/_pad.scss
new file mode 100644
index 000000000000..3ef5d80e45b7
--- /dev/null
+++ b/common/static/sass/neat/grid/_pad.scss
@@ -0,0 +1,8 @@
+@mixin pad($padding: flex-gutter()) {
+  $padding-list: null;
+  @each $value in $padding {
+    $value: if($value == 'default', flex-gutter(), $value);
+    $padding-list: join($padding-list, $value);
+  }
+  padding: $padding-list;
+}
diff --git a/common/static/sass/neat/grid/_private.scss b/common/static/sass/neat/grid/_private.scss
new file mode 100644
index 000000000000..acd1b5b74d6f
--- /dev/null
+++ b/common/static/sass/neat/grid/_private.scss
@@ -0,0 +1,21 @@
+$parent-columns: $grid-columns !default;
+$fg-column: $column;
+$fg-gutter: $gutter;
+$fg-max-columns: $grid-columns;
+$container-display-table: false !default;
+$layout-direction: nil !default;
+
+@function flex-grid($columns, $container-columns: $fg-max-columns) {
+  $width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
+  $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
+  @return percentage($width / $container-width);
+}
+
+@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
+  $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
+  @return percentage($gutter / $container-width);
+}
+
+@function grid-width($n) {
+  @return $n * $gw-column + ($n - 1) * $gw-gutter;
+}
diff --git a/common/static/sass/neat/grid/_reset.scss b/common/static/sass/neat/grid/_reset.scss
new file mode 100644
index 000000000000..f670019e4b47
--- /dev/null
+++ b/common/static/sass/neat/grid/_reset.scss
@@ -0,0 +1,12 @@
+@mixin reset-display {
+  $container-display-table: false;
+}
+
+@mixin reset-layout-direction {
+  $layout-direction: $default-layout-direction;
+}
+
+@mixin reset-all {
+  @include reset-display;
+  @include reset-layout-direction;
+}
diff --git a/common/static/sass/neat/grid/_row.scss b/common/static/sass/neat/grid/_row.scss
new file mode 100644
index 000000000000..582603dd015b
--- /dev/null
+++ b/common/static/sass/neat/grid/_row.scss
@@ -0,0 +1,17 @@
+@mixin row($display: block, $direction: $default-layout-direction) {
+  @include clearfix;
+  $layout-direction: $direction;
+
+  @if $display == table {
+    display: table;
+    @include fill-parent;
+    table-layout: fixed;
+    $container-display-table: true;
+  }
+
+  @else {
+    display: block;
+    $container-display-table: false;
+  }
+}
+
diff --git a/common/static/sass/neat/grid/_shift.scss b/common/static/sass/neat/grid/_shift.scss
new file mode 100644
index 000000000000..e39208ef0de7
--- /dev/null
+++ b/common/static/sass/neat/grid/_shift.scss
@@ -0,0 +1,10 @@
+@mixin shift($n-columns: 1) {
+
+  $direction: get-direction($layout-direction, $default-layout-direction);
+  $opposite-direction: get-opposite-direction($direction);
+
+  margin-#{$opposite-direction}: $n-columns * flex-grid(1, $parent-columns) + $n-columns * flex-gutter($parent-columns);
+
+  // Reset nesting context
+  $parent-columns: $grid-columns;
+}
diff --git a/common/static/sass/neat/grid/_span-columns.scss b/common/static/sass/neat/grid/_span-columns.scss
new file mode 100644
index 000000000000..97902d62c44b
--- /dev/null
+++ b/common/static/sass/neat/grid/_span-columns.scss
@@ -0,0 +1,45 @@
+@mixin span-columns($span: $columns of $container-columns, $display: block) {
+
+  $columns: nth($span, 1);
+  $container-columns: container-span($span);
+  $display-table: false;
+
+  $direction: get-direction($layout-direction, $default-layout-direction);
+  $opposite-direction: get-opposite-direction($direction);
+
+  @if $container-columns != $grid-columns {
+    $parent-columns: $container-columns;
+  } @else {
+    $parent-columns: $grid-columns;
+  }
+
+  @if $container-display-table == true {
+    $display-table: true;
+  } @else if $display == table {
+    $display-table: true;
+  } @else {
+    $display-table: false;
+  }
+
+  @if $display-table  {
+    display: table-cell;
+    padding-#{$direction}: flex-gutter($container-columns);
+    width: flex-grid($columns, $container-columns) + flex-gutter($container-columns);
+
+    &:last-child {
+      width: flex-grid($columns, $container-columns);
+      padding-#{$direction}: 0;
+    }
+  }
+
+  @else {
+    display: block;
+    float: #{$opposite-direction};
+    margin-#{$direction}: flex-gutter($container-columns);
+    width: flex-grid($columns, $container-columns);
+
+    &:last-child {
+      margin-#{$direction}: 0;
+    }
+  }
+}
diff --git a/common/static/sass/neat/grid/_to-deprecate.scss b/common/static/sass/neat/grid/_to-deprecate.scss
new file mode 100644
index 000000000000..d0a681fd12e5
--- /dev/null
+++ b/common/static/sass/neat/grid/_to-deprecate.scss
@@ -0,0 +1,57 @@
+@mixin breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) {
+  @warn "The breakpoint() mixin was renamed to media() in Neat 1.0. Please update your project with the new syntax before the next version bump.";
+
+  @if length($query) == 1 {
+    @media screen and ($default-feature: nth($query, 1)) {
+      $default-grid-columns: $grid-columns;
+      $grid-columns: $total-columns;
+      @content;
+      $grid-columns: $default-grid-columns;
+    }
+  }
+
+  @else if length($query) == 2 {
+    @media screen and (nth($query, 1): nth($query, 2)) {
+      $default-grid-columns: $grid-columns;
+      $grid-columns: $total-columns;
+      @content;
+      $grid-columns: $default-grid-columns;
+    }
+  }
+
+  @else if length($query) == 3 {
+    @media screen and (nth($query, 1): nth($query, 2)) {
+      $default-grid-columns: $grid-columns;
+      $grid-columns: nth($query, 3);
+      @content;
+      $grid-columns: $default-grid-columns;
+    }
+  }
+
+  @else if length($query) == 4 {
+    @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
+      $default-grid-columns: $grid-columns;
+      $grid-columns: $total-columns;
+      @content;
+      $grid-columns: $default-grid-columns;
+    }
+  }
+
+  @else if length($query) == 5 {
+    @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
+      $default-grid-columns: $grid-columns;
+      $grid-columns: nth($query, 5);
+      @content;
+      $grid-columns: $default-grid-columns;
+    }
+  }
+
+  @else {
+    @warn "Wrong number of arguments for breakpoint(). Read the documentation for more details.";
+  }
+}
+
+@mixin nth-omega($nth, $display: block, $direction: default) {
+  @warn "The nth-omega() mixin is deprecated. Please use omega() instead.";
+  @include omega($nth $display, $direction);
+}
diff --git a/common/static/sass/neat/grid/_visual-grid.scss b/common/static/sass/neat/grid/_visual-grid.scss
new file mode 100644
index 000000000000..1c822fd32200
--- /dev/null
+++ b/common/static/sass/neat/grid/_visual-grid.scss
@@ -0,0 +1,41 @@
+@mixin grid-column-gradient($values...) {
+  background-image: deprecated-webkit-gradient(linear, left top, left bottom, $values);
+  background-image:  -webkit-linear-gradient(left, $values);
+  background-image:     -moz-linear-gradient(left, $values);
+  background-image:      -ms-linear-gradient(left, $values);
+  background-image:       -o-linear-gradient(left, $values);
+  background-image: unquote("linear-gradient(left, #{$values})");
+}
+
+@if $visual-grid == true or $visual-grid == yes {
+  body:before {
+    content: '';
+    display: inline-block;
+    @include grid-column-gradient(gradient-stops($grid-columns));
+    height: 100%;
+    left: 0;
+    margin: 0 auto;
+    max-width: $max-width;
+    opacity: $visual-grid-opacity;
+    position: fixed;
+    right: 0;
+    width: 100%;
+    pointer-events: none;
+
+    @if $visual-grid-index == back {
+      z-index: -1;
+    }
+
+    @else if $visual-grid-index == front {
+      z-index: 9999;
+    }
+
+    @each $breakpoint in $visual-grid-breakpoints {
+      @if $breakpoint != nil {
+        @include media($breakpoint) {
+          @include grid-column-gradient(gradient-stops($grid-columns));
+        }
+      }
+    }
+  }
+}
diff --git a/common/static/sass/neat/settings/_grid.scss b/common/static/sass/neat/settings/_grid.scss
new file mode 100644
index 000000000000..f1dcda478046
--- /dev/null
+++ b/common/static/sass/neat/settings/_grid.scss
@@ -0,0 +1,7 @@
+$column: golden-ratio(1em, 3) !default; // Column width
+$gutter: golden-ratio(1em, 1) !default; // Gutter between each two columns
+$grid-columns: 12 !default; // Total number of columns in the grid
+$max-width: em(1088) !default; // Max-width of the outer container
+$border-box-sizing: true !default; // Makes all elements have a border-box layout
+$default-feature: min-width; // Default @media feature for the breakpoint() mixin
+$default-layout-direction: LTR !default;
diff --git a/common/static/sass/neat/settings/_visual-grid.scss b/common/static/sass/neat/settings/_visual-grid.scss
new file mode 100644
index 000000000000..611c2b37274d
--- /dev/null
+++ b/common/static/sass/neat/settings/_visual-grid.scss
@@ -0,0 +1,5 @@
+$visual-grid: false !default; // Display the base grid
+$visual-grid-color: #EEE !default;
+$visual-grid-index: back !default; // Show grid behind content (back) or overlay it over the content (front)
+$visual-grid-opacity: 0.4 !default;
+$visual-grid-breakpoints: () !default;

From b42074716b3aede81e84d674501f310ab6a83fff Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Tue, 9 Jul 2013 10:39:11 -0400
Subject: [PATCH 06/20] Studio: updates keyframes/animations syntax for all
 animations

---
 cms/static/sass/assets/_anims.scss | 123 +++++++++--------------------
 1 file changed, 39 insertions(+), 84 deletions(-)

diff --git a/cms/static/sass/assets/_anims.scss b/cms/static/sass/assets/_anims.scss
index 41530ef721d1..6b214f03a1da 100644
--- a/cms/static/sass/assets/_anims.scss
+++ b/cms/static/sass/assets/_anims.scss
@@ -2,35 +2,51 @@
 // ====================
 
 // rotate clockwise
-@mixin rotateClockwise {
+@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();}
+// ====================
+
+// canned rotate clockwise animation - use if you want out of the box/non-customized anim
+.anim-rotateCW {
+  @include animation(rotateCW 1.0s linear inifinte);
+}
 
-@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);
+// rotate counter-clockwise
+@include keyframes(rotateCCW) {
+  0% {
+    @include transform(rotate(0deg));
+  }
 
+  50% {
+    @include transform(rotate(-180deg));
+  }
+
+  100% {
+    @include transform(rotate(-360deg));
+  }
+}
+
+// canned rotate counter-clockwise animation - use if you want out of the box/non-customized anim
+.anim-rotateCCW {
+  @include animation(rotateCCW 1.0s linear inifinte);
 }
 
 // ====================
 
 // notifications slide up
-@mixin notificationsSlideUp {
+@include keyframes(notificationSlideUp) {
   0% {
     @include transform(translateY(0));
   }
@@ -44,25 +60,10 @@
   }
 }
 
-@-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,24 +77,10 @@
   }
 }
 
-@-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 {
+@include keyframes(bounceIn) {
   0% {
     opacity: 0.0;
     @include transform(scale(0.3));
@@ -109,38 +96,15 @@
   }
 }
 
-@-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);
+// canned bounce in animation - use if you want out of the box/non-customized anim
+.anim-bounceIn {
+  @include animation(bounceIn 0.5s ease-in-out 1);
 }
 
 // ====================
 
-// bounce in
-@mixin bounceOut {
-  0% {
-    opacity: 0.0;
-    @include transform(scale(0.3));
-  }
-
-  50% {
-    opacity: 1.0;
-    @include transform(scale(1.05));
-  }
-
-  100% {
-    @include transform(scale(1));
-  }
-
+// bounce out
+@include keyframes(bounceOut) {
   0% {
     @include transform(scale(1));
   }
@@ -156,16 +120,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 bounce in animation - use if you want out of the box/non-customized anim
+.anim-bounceOut {
+  @include animation(bounceOut 0.5s ease-in-out 1);
 }

From 4a0a0673271349698d18ed616599dc221a41e48f Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Tue, 9 Jul 2013 10:39:44 -0400
Subject: [PATCH 07/20] Studio: revises syntax of calling preset animations for
 notifications

---
 .../sass/elements/_system-feedback.scss       | 33 ++++++++++++++-----
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/cms/static/sass/elements/_system-feedback.scss b/cms/static/sass/elements/_system-feedback.scss
index 543f7ca5591e..add4e11e8269 100644
--- a/cms/static/sass/elements/_system-feedback.scss
+++ b/cms/static/sass/elements/_system-feedback.scss
@@ -437,7 +437,7 @@
   &.saving {
 
     [class^="icon"] {
-      @include anim-rotateClockwise(3s, linear, infinite);
+      @include animation(rotateCW 3.0s linear infinite);
       width: 25px;
       margin: -4px 10px 0 0;
       @include transform-origin(52% 60%);
@@ -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 0.5s 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 0.5s ease-in-out 1);
       }
     }
   }
@@ -665,11 +680,11 @@
 
     // varying animations
     &.is-shown {
-      @include anim-notificationsSlideUp(1s);
+      @include animation(notificationSlideUp 1.0s ease-in-out 1);
     }
 
     &.is-hiding {
-      @include anim-notificationsSlideDown(0.25s);
+      @include animation(notificationSlideDown 0.25s ease-in-out 1);
     }
   }
 }

From f708c42ec630bcc403b8a9e8ca3275d858a5ac7b Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Tue, 9 Jul 2013 11:52:22 -0400
Subject: [PATCH 08/20] Studio: revises anim syntax, adds utility anims, and
 revises rotate transitions for nav

---
 cms/static/sass/assets/_anims.scss        | 109 +++++++++++++++++++---
 cms/static/sass/elements/_navigation.scss |   5 +-
 2 files changed, 100 insertions(+), 14 deletions(-)

diff --git a/cms/static/sass/assets/_anims.scss b/cms/static/sass/assets/_anims.scss
index 6b214f03a1da..772fa4b48e31 100644
--- a/cms/static/sass/assets/_anims.scss
+++ b/cms/static/sass/assets/_anims.scss
@@ -1,6 +1,93 @@
 // studio animations & keyframes
 // ====================
 
+// 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 0.25s 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 0.25s 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 0.25s 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 0.25s ease-in-out 1);
+}
+
+
 // rotate clockwise
 @include keyframes(rotateCW) {
   0% {
@@ -16,13 +103,12 @@
   }
 }
 
-// ====================
-
-// canned rotate clockwise animation - use if you want out of the box/non-customized anim
+// canned animation - use if you want out of the box/non-customized anim
 .anim-rotateCW {
-  @include animation(rotateCW 1.0s linear inifinte);
+  @include animation(rotateCW 1.0s linear infinite);
 }
 
+
 // rotate counter-clockwise
 @include keyframes(rotateCCW) {
   0% {
@@ -38,13 +124,15 @@
   }
 }
 
-// canned rotate counter-clockwise animation - use if you want out of the box/non-customized anim
+// canned  animation - use if you want out of the box/non-customized anim
 .anim-rotateCCW {
-  @include animation(rotateCCW 1.0s linear inifinte);
+  @include animation(rotateCCW 1.0s linear infinite);
 }
 
+
 // ====================
 
+
 // notifications slide up
 @include keyframes(notificationSlideUp) {
   0% {
@@ -60,8 +148,6 @@
   }
 }
 
-// ====================
-
 // notifications slide down
 @include keyframes(notificationSlideDown) {
   0% {
@@ -77,8 +163,10 @@
   }
 }
 
+
 // ====================
 
+
 // bounce in
 @include keyframes(bounceIn) {
   0% {
@@ -96,12 +184,11 @@
   }
 }
 
-// canned bounce in animation - use if you want out of the box/non-customized anim
+// canned animation - use if you want out of the box/non-customized anim
 .anim-bounceIn {
   @include animation(bounceIn 0.5s ease-in-out 1);
 }
 
-// ====================
 
 // bounce out
 @include keyframes(bounceOut) {
@@ -120,7 +207,7 @@
   }
 }
 
-// canned bounce in animation - use if you want out of the box/non-customized anim
+// canned animation - use if you want out of the box/non-customized anim
 .anim-bounceOut {
   @include animation(bounceOut 0.5s ease-in-out 1);
 }
diff --git a/cms/static/sass/elements/_navigation.scss b/cms/static/sass/elements/_navigation.scss
index e97c31b8aeef..354dfbb5a530 100644
--- 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 0.25s ease-in-out 0);
       margin-left: ($baseline/10);
       display: inline-block;
       vertical-align: middle;
@@ -44,7 +44,6 @@ nav {
 
       .ui-toggle-dd {
         @include transform(rotate(-180deg));
-        @include transform-origin(50% 50%);
       }
     }
   }
@@ -58,7 +57,7 @@ nav {
   }
 
   .wrapper-nav-sub {
-    @include transition (opacity 1.0s ease-in-out 0s);
+    @include transition (opacity 0.25s ease-in-out 0s);
     position: absolute;
     top: ($baseline*2.5);
     opacity: 0.0;

From ee481dfdb5654273ae133b49c07e7cf969f750fe Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Tue, 9 Jul 2013 12:47:45 -0400
Subject: [PATCH 09/20] Studio: resolves notification animation placement error

---
 cms/static/sass/elements/_system-feedback.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/cms/static/sass/elements/_system-feedback.scss b/cms/static/sass/elements/_system-feedback.scss
index add4e11e8269..e22e44487ce5 100644
--- a/cms/static/sass/elements/_system-feedback.scss
+++ b/cms/static/sass/elements/_system-feedback.scss
@@ -681,10 +681,12 @@
     // varying animations
     &.is-shown {
       @include animation(notificationSlideUp 1.0s ease-in-out 1);
+      @include animation-fill-mode(forwards);
     }
 
     &.is-hiding {
-      @include animation(notificationSlideDown 0.25s ease-in-out 1);
+      @include animation(notificationSlideDown 1.0s ease-in-out 1);
+      @include animation-fill-mode(forwards);
     }
   }
 }

From ed93fcb89a1d7c53edeced26cde240ecf84478f6 Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Tue, 9 Jul 2013 12:49:45 -0400
Subject: [PATCH 10/20] Studio: adds back in transform-origin prop to dropdown
 nav icons

---
 cms/static/sass/elements/_navigation.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/cms/static/sass/elements/_navigation.scss b/cms/static/sass/elements/_navigation.scss
index 354dfbb5a530..ebf8645d66b1 100644
--- a/cms/static/sass/elements/_navigation.scss
+++ b/cms/static/sass/elements/_navigation.scss
@@ -44,6 +44,7 @@ nav {
 
       .ui-toggle-dd {
         @include transform(rotate(-180deg));
+        @include transform-origin(50% 50%);
       }
     }
   }

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 11/20] 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 d8cfb87baa15..b50bd65e19cf 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 2b3224e6d424..82813153fa61 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 300cf3b6924e..be047d5215d1 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 b9e2619c7687..c767feee4e50 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 a828e05252e8..ff2861143e4c 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 e22e44487ce5..886f3bb0d182 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 7f79fc5fc6c8..4145c85f0dc0 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 ddc6c80c993f..d9c3513eeb8b 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 c79401feddc4..7f416cff0ed7 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 0cc15b90320c..2a768ffae7fa 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 e1b6fc6ac6fb..7e3249f4f766 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 de03b238cce4..7a0f83bfb4e6 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 5c54ec3a18fb..d08cc58114ee 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 471bdc4848db..c6e6ee0d4fe9 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 c37664423745..e3108a72bf58 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;
 

From 4187090dacfe857ee6b250566b6668f9a41193d0 Mon Sep 17 00:00:00 2001
From: Frances Botsford <frances@edx.org>
Date: Tue, 9 Jul 2013 11:39:59 -0400
Subject: [PATCH 12/20] removed non-existent sass extends from LMS:
 .table-wrapper, .dullify, .trans, .problem-set

---
 common/lib/xmodule/xmodule/css/video/display.scss     |  3 ---
 .../lib/xmodule/xmodule/css/videoalpha/display.scss   |  3 ---
 lms/static/sass/course/_gradebook.scss                |  1 -
 lms/static/sass/course/_info.scss                     |  1 -
 lms/static/sass/course/_profile.scss                  |  1 -
 lms/static/sass/course/_textbook.scss                 | 11 +++++------
 lms/static/sass/course/courseware/_courseware.scss    |  2 --
 lms/static/sass/course/instructor/_instructor.scss    |  1 -
 8 files changed, 5 insertions(+), 18 deletions(-)

diff --git a/common/lib/xmodule/xmodule/css/video/display.scss b/common/lib/xmodule/xmodule/css/video/display.scss
index e15cc21a4cf7..d1b4239aeccf 100644
--- a/common/lib/xmodule/xmodule/css/video/display.scss
+++ b/common/lib/xmodule/xmodule/css/video/display.scss
@@ -83,7 +83,6 @@ div.video {
       }
 
       ul.vcr {
-        @extend .dullify;
         float: left;
         list-style: none;
         margin: 0 lh() 0 0;
@@ -144,7 +143,6 @@ div.video {
       }
 
       div.secondary-controls {
-        @extend .dullify;
         float: right;
 
         div.speeds {
@@ -470,7 +468,6 @@ div.video {
   }
 
   &.closed {
-    @extend .trans;
 
     article.video-wrapper {
       width: flex-grid(9,9);
diff --git a/common/lib/xmodule/xmodule/css/videoalpha/display.scss b/common/lib/xmodule/xmodule/css/videoalpha/display.scss
index e15cc21a4cf7..d1b4239aeccf 100644
--- a/common/lib/xmodule/xmodule/css/videoalpha/display.scss
+++ b/common/lib/xmodule/xmodule/css/videoalpha/display.scss
@@ -83,7 +83,6 @@ div.video {
       }
 
       ul.vcr {
-        @extend .dullify;
         float: left;
         list-style: none;
         margin: 0 lh() 0 0;
@@ -144,7 +143,6 @@ div.video {
       }
 
       div.secondary-controls {
-        @extend .dullify;
         float: right;
 
         div.speeds {
@@ -470,7 +468,6 @@ div.video {
   }
 
   &.closed {
-    @extend .trans;
 
     article.video-wrapper {
       width: flex-grid(9,9);
diff --git a/lms/static/sass/course/_gradebook.scss b/lms/static/sass/course/_gradebook.scss
index 6a93b9254e65..a05023c157d1 100644
--- a/lms/static/sass/course/_gradebook.scss
+++ b/lms/static/sass/course/_gradebook.scss
@@ -2,7 +2,6 @@ $cell-border-color: #e1e1e1;
 $table-border-color: #c8c8c8;
 
 div.gradebook-wrapper {
-  @extend .table-wrapper;
 
   section.gradebook-content {
     @extend .content;
diff --git a/lms/static/sass/course/_info.scss b/lms/static/sass/course/_info.scss
index 8bda507eab9a..6c3dafb880bc 100644
--- a/lms/static/sass/course/_info.scss
+++ b/lms/static/sass/course/_info.scss
@@ -1,5 +1,4 @@
 div.info-wrapper {
-  @extend .table-wrapper;
 
   section.updates {
     @extend .content;
diff --git a/lms/static/sass/course/_profile.scss b/lms/static/sass/course/_profile.scss
index fec4db5be8a9..09a6996ba412 100644
--- a/lms/static/sass/course/_profile.scss
+++ b/lms/static/sass/course/_profile.scss
@@ -1,5 +1,4 @@
 div.profile-wrapper {
-  @extend .table-wrapper;
   color: #000;
 
   section.user-info {
diff --git a/lms/static/sass/course/_textbook.scss b/lms/static/sass/course/_textbook.scss
index 83aca09ab6de..563ee1c15c28 100644
--- a/lms/static/sass/course/_textbook.scss
+++ b/lms/static/sass/course/_textbook.scss
@@ -1,8 +1,7 @@
 div.book-wrapper {
-  @extend .table-wrapper;
   display: table;
   table-layout:  fixed;
-  padding: 1em 8em; 
+  padding: 1em 8em;
 
 
   #open_close_accordion {
@@ -45,7 +44,7 @@ div.book-wrapper {
       li {
         background: none;
         border-bottom: 0;
-        padding-left: lh();       
+        padding-left: lh();
 
         a {
           padding: 0;
@@ -62,7 +61,7 @@ div.book-wrapper {
 
         div.hitarea {
           background-image: url('../images/treeview-default.gif');
-          
+
           position: relative;
           top: 4px;
 
@@ -175,10 +174,10 @@ div.book-wrapper {
         text-align: left;
       	line-height: 1.6em;
       	margin: 5px;
-	
+
 	.Paragraph, h2 {
 	   margin-top: 10px;
-	}	   
+	}
       }
     }
   }
diff --git a/lms/static/sass/course/courseware/_courseware.scss b/lms/static/sass/course/courseware/_courseware.scss
index af80b1347d2d..200705e8b6ec 100644
--- a/lms/static/sass/course/courseware/_courseware.scss
+++ b/lms/static/sass/course/courseware/_courseware.scss
@@ -4,7 +4,6 @@ html {
 }
 
 div.course-wrapper {
-  @extend .table-wrapper;
 
   section.course-content {
     @extend .content;
@@ -47,7 +46,6 @@ div.course-wrapper {
 
       > li {
         @extend .clearfix;
-        @extend .problem-set;
         border-bottom: 1px solid #ddd;
         margin-bottom: 15px;
         padding: 0 0 15px;
diff --git a/lms/static/sass/course/instructor/_instructor.scss b/lms/static/sass/course/instructor/_instructor.scss
index 070f7bcc9cf4..ff5cc39a84c1 100644
--- a/lms/static/sass/course/instructor/_instructor.scss
+++ b/lms/static/sass/course/instructor/_instructor.scss
@@ -1,5 +1,4 @@
 .instructor-dashboard-wrapper {
-	@extend .table-wrapper;
 	display: table;
 
 	section.instructor-dashboard-content {

From b97c1bf5e369e544ed0e22df607d791d4944f247 Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Tue, 9 Jul 2013 13:52:31 -0400
Subject: [PATCH 13/20] Studio: corrects Sass @extend references

---
 cms/static/sass/views/_settings.scss | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/cms/static/sass/views/_settings.scss b/cms/static/sass/views/_settings.scss
index 7e3249f4f766..e1f89cb8a489 100644
--- a/cms/static/sass/views/_settings.scss
+++ b/cms/static/sass/views/_settings.scss
@@ -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);
     }
 
@@ -337,12 +337,11 @@ body.course.settings {
 
           .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;

From d046fdf7432dadfb3a3fde8f17450cf9d06297ab Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Tue, 9 Jul 2013 14:25:56 -0400
Subject: [PATCH 14/20] resolves local Sass warnings/errors around missing
 mixins referenced in xmodule styling

---
 cms/static/sass/_mixins-inherited.scss        | 455 +-----------------
 .../lib/xmodule/xmodule/css/capa/display.scss |   2 +-
 .../css/combinedopenended/display.scss        |   2 +-
 .../xmodule/xmodule/css/sequence/display.scss |  36 +-
 common/static/sass/_mixins-inherited.scss     | 454 +++++++++++++++++
 5 files changed, 492 insertions(+), 457 deletions(-)
 mode change 100644 => 120000 cms/static/sass/_mixins-inherited.scss
 create mode 100644 common/static/sass/_mixins-inherited.scss

diff --git a/cms/static/sass/_mixins-inherited.scss b/cms/static/sass/_mixins-inherited.scss
deleted file mode 100644
index 82813153fa61..000000000000
--- a/cms/static/sass/_mixins-inherited.scss
+++ /dev/null
@@ -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();
-  box-shadow: 0 1px 1px $shadow-l1;
-  border-radius: 3px;
-  margin-bottom: $baseline;
-  border: 1px solid $gray-l2;
-  background: $white;
-}
-
-// ====================
-
-// 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);
-  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 {
-    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));
-  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;
-    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 {
-    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 {
-    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 {
-    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%);
-  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;
-    box-shadow: none;
-  }
-}
-
-@mixin white-button {
-  @include button;
-  @include linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
-  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));
-  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));
-  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 {
-  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));
-  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);
-}
diff --git a/cms/static/sass/_mixins-inherited.scss b/cms/static/sass/_mixins-inherited.scss
new file mode 120000
index 000000000000..f64a7205612d
--- /dev/null
+++ b/cms/static/sass/_mixins-inherited.scss
@@ -0,0 +1 @@
+../../../common/static/sass/_mixins-inherited.scss
\ No newline at end of file
diff --git a/common/lib/xmodule/xmodule/css/capa/display.scss b/common/lib/xmodule/xmodule/css/capa/display.scss
index 86e971dd09a5..c326c79b7612 100644
--- a/common/lib/xmodule/xmodule/css/capa/display.scss
+++ b/common/lib/xmodule/xmodule/css/capa/display.scss
@@ -566,7 +566,7 @@ section.problem {
     }
 
     .save {
-      @extend .blue-button;
+      @extend .blue-button !optional;
     }
 
     .show {
diff --git a/common/lib/xmodule/xmodule/css/combinedopenended/display.scss b/common/lib/xmodule/xmodule/css/combinedopenended/display.scss
index 127ae7775cfd..78f0213c8d48 100644
--- a/common/lib/xmodule/xmodule/css/combinedopenended/display.scss
+++ b/common/lib/xmodule/xmodule/css/combinedopenended/display.scss
@@ -577,7 +577,7 @@ section.open-ended-child {
     margin-top: 20px;
 
     input.save {
-      @extend .blue-button;
+      @extend .blue-button !optional;
     }
 
     .submission_feedback {
diff --git a/common/lib/xmodule/xmodule/css/sequence/display.scss b/common/lib/xmodule/xmodule/css/sequence/display.scss
index ed601e050656..70beeae14cee 100644
--- a/common/lib/xmodule/xmodule/css/sequence/display.scss
+++ b/common/lib/xmodule/xmodule/css/sequence/display.scss
@@ -1,3 +1,37 @@
+$border-color: #C8C8C8;
+
+// repeated extends - needed since LMS styling was referenced
+.block-link {
+  border-left: 1px solid lighten($border-color, 10%);
+  display: block;
+
+  &:hover {
+    background: none;
+  }
+}
+
+.topbar {
+  @include clearfix();
+  border-bottom: 1px solid $border-color;
+
+  @media print {
+    display: none;
+  }
+
+  a {
+    &.block-link {
+      border-left: 1px solid lighten($border-color, 10%);
+      display: block;
+
+      &:hover {
+        background: none;
+      }
+    }
+  }
+}
+
+// ====================
+
 nav.sequence-nav {
   // TODO (cpennington): This doesn't work anymore. XModules aren't able to
   // import from external sources.
@@ -294,7 +328,7 @@ nav.sequence-bottom {
   text-align: center;
 
   ul {
-    @extend .clearfix;
+    @include clearfix();
     @include inline-block();
 
     li {
diff --git a/common/static/sass/_mixins-inherited.scss b/common/static/sass/_mixins-inherited.scss
new file mode 100644
index 000000000000..82813153fa61
--- /dev/null
+++ b/common/static/sass/_mixins-inherited.scss
@@ -0,0 +1,454 @@
+// 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();
+  box-shadow: 0 1px 1px $shadow-l1;
+  border-radius: 3px;
+  margin-bottom: $baseline;
+  border: 1px solid $gray-l2;
+  background: $white;
+}
+
+// ====================
+
+// 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);
+  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 {
+    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));
+  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;
+    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 {
+    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 {
+    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 {
+    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%);
+  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;
+    box-shadow: none;
+  }
+}
+
+@mixin white-button {
+  @include button;
+  @include linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
+  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));
+  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));
+  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 {
+  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));
+  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);
+}

From c10fc545099c78060a0bc8ad0e424f9cf9e7680d Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Tue, 9 Jul 2013 14:52:04 -0400
Subject: [PATCH 15/20] Studio: abstracts and formalizes set
 animation/transition Sass variables

---
 cms/static/sass/_base.scss                    |  8 ++++----
 cms/static/sass/_variables.scss               | 11 +++++++++++
 cms/static/sass/assets/_anims.scss            | 16 ++++++++--------
 cms/static/sass/elements/_footer.scss         |  2 +-
 cms/static/sass/elements/_header.scss         |  4 ++--
 cms/static/sass/elements/_navigation.scss     |  4 ++--
 .../sass/elements/_system-feedback.scss       | 12 ++++++------
 cms/static/sass/elements/_system-help.scss    |  2 +-
 cms/static/sass/views/_account.scss           |  6 +++---
 cms/static/sass/views/_checklists.scss        | 19 +++++++++----------
 cms/static/sass/views/_index.scss             |  4 ++--
 cms/static/sass/views/_outline.scss           |  8 ++++----
 cms/static/sass/views/_settings.scss          |  6 +++---
 cms/static/sass/views/_static-pages.scss      |  2 +-
 cms/static/sass/views/_subsection.scss        |  2 +-
 cms/static/sass/views/_unit.scss              | 18 +++++++++---------
 16 files changed, 67 insertions(+), 57 deletions(-)

diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss
index b50bd65e19cf..ca7735fe8e97 100644
--- a/cms/static/sass/_base.scss
+++ b/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;
diff --git a/cms/static/sass/_variables.scss b/cms/static/sass/_variables.scss
index 5994a8dbad03..05ac49a3eb86 100644
--- 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 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);
 
diff --git a/cms/static/sass/assets/_anims.scss b/cms/static/sass/assets/_anims.scss
index 772fa4b48e31..08fd487c139e 100644
--- a/cms/static/sass/assets/_anims.scss
+++ b/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);
 }
diff --git a/cms/static/sass/elements/_footer.scss b/cms/static/sass/elements/_footer.scss
index c767feee4e50..3233fdbdb7e4 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 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;
diff --git a/cms/static/sass/elements/_header.scss b/cms/static/sass/elements/_header.scss
index ff2861143e4c..f0aac9eb941a 100644
--- a/cms/static/sass/elements/_header.scss
+++ b/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;
 
diff --git a/cms/static/sass/elements/_navigation.scss b/cms/static/sass/elements/_navigation.scss
index ebf8645d66b1..430eae5504a6 100644
--- a/cms/static/sass/elements/_navigation.scss
+++ b/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;
diff --git a/cms/static/sass/elements/_system-feedback.scss b/cms/static/sass/elements/_system-feedback.scss
index 886f3bb0d182..889427483a34 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 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);
     }
   }
diff --git a/cms/static/sass/elements/_system-help.scss b/cms/static/sass/elements/_system-help.scss
index 0a7b068e93b5..223b5a6016bd 100644
--- a/cms/static/sass/elements/_system-help.scss
+++ b/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;
   }
 
diff --git a/cms/static/sass/views/_account.scss b/cms/static/sass/views/_account.scss
index 4145c85f0dc0..844816d8d8d8 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 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;
diff --git a/cms/static/sass/views/_checklists.scss b/cms/static/sass/views/_checklists.scss
index d9c3513eeb8b..0a70bb1cb112 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 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;
diff --git a/cms/static/sass/views/_index.scss b/cms/static/sass/views/_index.scss
index 7f416cff0ed7..93a1e449c244 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 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;
diff --git a/cms/static/sass/views/_outline.scss b/cms/static/sass/views/_outline.scss
index 2a768ffae7fa..c8aa9b48e403 100644
--- a/cms/static/sass/views/_outline.scss
+++ b/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 {
diff --git a/cms/static/sass/views/_settings.scss b/cms/static/sass/views/_settings.scss
index e1f89cb8a489..79cc2afa3094 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 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);
diff --git a/cms/static/sass/views/_static-pages.scss b/cms/static/sass/views/_static-pages.scss
index 7a0f83bfb4e6..b33223322ccc 100644
--- a/cms/static/sass/views/_static-pages.scss
+++ b/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;
diff --git a/cms/static/sass/views/_subsection.scss b/cms/static/sass/views/_subsection.scss
index d08cc58114ee..6d9db4f11aab 100644
--- a/cms/static/sass/views/_subsection.scss
+++ b/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;
diff --git a/cms/static/sass/views/_unit.scss b/cms/static/sass/views/_unit.scss
index c6e6ee0d4fe9..dbb6f9c0e4e0 100644
--- a/cms/static/sass/views/_unit.scss
+++ b/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;
   }
 }

From a09866a48fe8a039b579e8f03191f47cf056ba8a Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Tue, 9 Jul 2013 15:02:06 -0400
Subject: [PATCH 16/20] Studio: refining timing variable comment in Sass

---
 cms/static/sass/_variables.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cms/static/sass/_variables.scss b/cms/static/sass/_variables.scss
index 05ac49a3eb86..18ecdf7fefd2 100644
--- a/cms/static/sass/_variables.scss
+++ b/cms/static/sass/_variables.scss
@@ -161,7 +161,7 @@ $shadow-d2: rgba($black, 0.6);
 
 // ====================
 
-// timing - used for animation/transition syncing
+// timing - used for animation/transition mixin syncing
 $tmg-s3: 3.0s;
 $tmg-s2: 2.0s;
 $tmg-s1: 1.0s;

From 3748cae7b874deef1d89f56649a4bd38bd8e0b96 Mon Sep 17 00:00:00 2001
From: Frances Botsford <frances@edx.org>
Date: Tue, 9 Jul 2013 14:17:09 -0400
Subject: [PATCH 17/20] updated broken transition sass rule

---
 lms/static/sass/shared/_course_object.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lms/static/sass/shared/_course_object.scss b/lms/static/sass/shared/_course_object.scss
index 4c800f595684..316dc7e98040 100644
--- a/lms/static/sass/shared/_course_object.scss
+++ b/lms/static/sass/shared/_course_object.scss
@@ -186,7 +186,7 @@
         left: 0px;
         position: absolute;
         top: 0px;
-        @include transition(all, 0.15s, linear);
+        @include transition(all 0.15s linear 0s);
         width: 100%;
         overflow: hidden;
 

From a0962cc3b906c9c3700913af47722a5875e37b16 Mon Sep 17 00:00:00 2001
From: Frances Botsford <frances@edx.org>
Date: Tue, 9 Jul 2013 15:13:53 -0400
Subject: [PATCH 18/20] updated sass transitions to use newer bourbon syntax

---
 cms/static/sass/_base.scss                    |  8 ++---
 cms/static/sass/elements/_header.scss         |  4 +--
 cms/static/sass/elements/_navigation.scss     |  2 +-
 .../sass/elements/_system-feedback.scss       |  6 ++--
 cms/static/sass/elements/_system-help.scss    |  2 +-
 cms/static/sass/views/_account.scss           |  6 ++--
 cms/static/sass/views/_checklists.scss        | 12 +++----
 cms/static/sass/views/_index.scss             |  4 +--
 cms/static/sass/views/_outline.scss           |  8 ++---
 cms/static/sass/views/_settings.scss          |  4 +--
 cms/static/sass/views/_static-pages.scss      |  2 +-
 cms/static/sass/views/_subsection.scss        |  2 +-
 cms/static/sass/views/_unit.scss              | 15 ++++-----
 .../xmodule/css/combinedopenended/edit.scss   |  4 +--
 .../lib/xmodule/xmodule/css/problem/edit.scss |  2 +-
 .../xmodule/xmodule/css/sequence/display.scss |  8 ++---
 .../xmodule/xmodule/css/video/display.scss    | 24 +++++++-------
 .../xmodule/css/videoalpha/display.scss       | 24 +++++++-------
 common/static/sass/_mixins.scss               |  2 +-
 lms/static/sass/_discussion.scss              | 32 +++++++++----------
 lms/static/sass/base/_base.scss               |  4 +--
 lms/static/sass/course/_gradebook.scss        |  2 +-
 lms/static/sass/course/_info.scss             |  2 +-
 lms/static/sass/course/_profile.scss          |  2 +-
 lms/static/sass/course/_textbook.scss         |  4 +--
 lms/static/sass/course/base/_base.scss        |  2 +-
 lms/static/sass/course/base/_extends.scss     |  4 +--
 .../sass/course/courseware/_sidebar.scss      |  4 +--
 .../sass/course/layout/_calculator.scss       |  4 +--
 lms/static/sass/course/wiki/_wiki.scss        |  4 +--
 lms/static/sass/multicourse/_about_pages.scss |  2 +-
 lms/static/sass/multicourse/_account.scss     |  6 ++--
 .../sass/multicourse/_course_about.scss       | 10 +++---
 lms/static/sass/multicourse/_dashboard.scss   |  6 ++--
 lms/static/sass/multicourse/_edge.scss        |  2 +-
 lms/static/sass/multicourse/_home.scss        | 18 +++++------
 lms/static/sass/multicourse/_media-kit.scss   |  4 +--
 .../multicourse/_testcenter-register.scss     |  4 +--
 lms/static/sass/shared/_course_object.scss    |  4 +--
 lms/static/sass/shared/_footer.scss           |  2 +-
 lms/static/sass/shared/_header.scss           |  4 +--
 lms/static/sass/shared/_modal.scss            |  2 +-
 42 files changed, 133 insertions(+), 134 deletions(-)

diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss
index ca7735fe8e97..4a20a98eb356 100644
--- a/cms/static/sass/_base.scss
+++ b/cms/static/sass/_base.scss
@@ -19,7 +19,7 @@ body, input, button {
 }
 
 a {
-  @include transition(color $tmg-f2 ease-in-out 0);
+  @include transition(color $tmg-f2 ease-in-out 0s);
   text-decoration: none;
   color: $blue;
 
@@ -642,7 +642,7 @@ hr.divide {
 
 // system notifications
 .toast-notification {
-  @include transition(all $tmg-f2 linear 0);
+  @include transition(all $tmg-f2 linear 0s);
   display: none;
   position: fixed;
   top: 20px;
@@ -794,7 +794,7 @@ hr.divide {
 
 .tooltip {
   @include font-size(12);
-  @include transition(opacity $tmg-f3 ease-out 0);
+  @include transition(opacity $tmg-f3 ease-out 0s);
   position: absolute;
   top: 0;
   left: 0;
@@ -867,7 +867,7 @@ body.js {
     background: $white;
 
     .action-modal-close {
-      @include transition(top $tmg-f3 ease-in-out 0);
+      @include transition(top $tmg-f3 ease-in-out 0s);
       @include border-bottom-radius(3px);
       position: absolute;
       top: -3px;
diff --git a/cms/static/sass/elements/_header.scss b/cms/static/sass/elements/_header.scss
index f0aac9eb941a..fc430ed6a181 100644
--- a/cms/static/sass/elements/_header.scss
+++ b/cms/static/sass/elements/_header.scss
@@ -77,7 +77,7 @@
     .title {
       @extend .t-action2;
       @extend .btn-dd-nav-primary;
-      @include transition(all $tmg-f2 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 $tmg-f2 ease-in-out 0);
+      @include transition(color $tmg-f2 ease-in-out 0s);
       display: block;
       color: $gray-d1;
 
diff --git a/cms/static/sass/elements/_navigation.scss b/cms/static/sass/elements/_navigation.scss
index 430eae5504a6..e118d231efc7 100644
--- a/cms/static/sass/elements/_navigation.scss
+++ b/cms/static/sass/elements/_navigation.scss
@@ -33,7 +33,7 @@ nav {
     }
 
     .ui-toggle-dd {
-      @include transition(all $tmg-f2 ease-in-out 0);
+      @include transition(all $tmg-f2 ease-in-out 0s);
       margin-left: ($baseline/10);
       display: inline-block;
       vertical-align: middle;
diff --git a/cms/static/sass/elements/_system-feedback.scss b/cms/static/sass/elements/_system-feedback.scss
index 889427483a34..68e7ed6aeb9b 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 $tmg-f3 ease-in-out 0);
+  @include transition(all $tmg-f3 ease-in-out 0s);
   position: fixed;
   top: 0;
   background: $black-t0;
@@ -364,7 +364,7 @@
   }
 
   [class^="icon"] {
-    @include transition (color 0.50s ease-in-out 0);
+    @include transition (color 0.50s ease-in-out 0s);
     @include font-size(22);
     width: flex-grid(1, 12);
     height: ($baseline*1.25);
@@ -531,7 +531,7 @@
   }
 
   [class^="icon"] {
-    @include transition (color 0.50s ease-in-out 0);
+    @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;
diff --git a/cms/static/sass/elements/_system-help.scss b/cms/static/sass/elements/_system-help.scss
index 223b5a6016bd..d1b0584fc4c2 100644
--- a/cms/static/sass/elements/_system-help.scss
+++ b/cms/static/sass/elements/_system-help.scss
@@ -14,7 +14,7 @@
 
   .copy {
     @extend .t-copy-sub1;
-    @include transition(opacity $tmg-f2 ease-in-out 0);
+    @include transition(opacity $tmg-f2 ease-in-out 0s);
     opacity: 0.75;
   }
 
diff --git a/cms/static/sass/views/_account.scss b/cms/static/sass/views/_account.scss
index 844816d8d8d8..53f01eee6d4f 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 $tmg-f3 linear 0);
+          @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 $tmg-f3 ease-in-out 0);
+            @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 $tmg-f3 ease-in-out 0);
+            @include transition(color $tmg-f3 ease-in-out 0s);
             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 0a70bb1cb112..3f9876521616 100644
--- a/cms/static/sass/views/_checklists.scss
+++ b/cms/static/sass/views/_checklists.scss
@@ -55,13 +55,13 @@ body.course.checklists {
       padding: $baseline ($baseline*1.5);
 
       .checklist-title {
-        @include transition(color $tmg-f2 ease-in-out 0);
+        @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(all $tmg-f2 ease-in-out 0);
+          @include transition(all $tmg-f2 ease-in-out 0s);
           @include font-size(21);
           display: inline-block;
           vertical-align: middle;
@@ -208,7 +208,7 @@ body.course.checklists {
     overflow: hidden;
 
     .task {
-      @include transition(background $tmg-f2 ease-in-out 0, border $tmg-f3 ease-in-out 0);
+      @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;
@@ -238,7 +238,7 @@ body.course.checklists {
         font-weight: 500;
 
         .task-name {
-          @include transition(color $tmg-f2 ease-in-out 0);
+          @include transition(color $tmg-f2 ease-in-out 0s);
           vertical-align: baseline;
           cursor: pointer;
           margin-bottom: 0;
@@ -246,13 +246,13 @@ body.course.checklists {
 
         .task-description {
           @extend .t-copy-sub1;
-          @include transition(color $tmg-f2 ease-in-out 0);
+          @include transition(color $tmg-f2 ease-in-out 0s);
           color: $gray-l2;
         }
 
         .task-support {
           @extend .t-copy-sub2;
-          @include transition(opacity $tmg-f2 ease-in-out 0);
+          @include transition(opacity $tmg-f2 ease-in-out 0s);
           opacity: 0.0;
           pointer-events: none;
         }
diff --git a/cms/static/sass/views/_index.scss b/cms/static/sass/views/_index.scss
index 93a1e449c244..ddb2ecce89f7 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 $tmg-f2 ease-in-out 0);
+              @include transition(bottom $tmg-f2 ease-in-out 0s);
               position: absolute;
               bottom: -30px;
               right: ($baseline/2);
@@ -214,7 +214,7 @@ body.index {
 
             .proofpoint {
               @include box-sizing(border-box);
-              @include transition(all $tmg-f2 ease-in-out 0);
+              @include transition(all $tmg-f2 ease-in-out 0s);
               border-radius: ($baseline/4);
               position: relative;
               top: 0;
diff --git a/cms/static/sass/views/_outline.scss b/cms/static/sass/views/_outline.scss
index c8aa9b48e403..4cbf1235b819 100644
--- a/cms/static/sass/views/_outline.scss
+++ b/cms/static/sass/views/_outline.scss
@@ -64,7 +64,7 @@ body.course.outline {
 
               .menu {
                 @include font-size(12);
-                @include transition(opacity $tmg-f2 linear 0);
+                @include transition(opacity $tmg-f2 linear 0s);
                 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 $tmg-f2 linear 0);
+                @include transition(color $tmg-f2 linear 0s);
                 cursor: pointer;
 
                 &:hover {
@@ -342,7 +342,7 @@ body.course.outline {
 
               .menu {
                 @include font-size(12);
-                @include transition(opacity $tmg-f2 linear 0, display $tmg-f2 linear 0);
+                @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;
@@ -452,7 +452,7 @@ body.course.outline {
       }
 
       .section-name-span {
-          @include transition(color $tmg-f2 linear 0);
+          @include transition(color $tmg-f2 linear 0s);
           cursor: pointer;
 
           &:hover {
diff --git a/cms/static/sass/views/_settings.scss b/cms/static/sass/views/_settings.scss
index 79cc2afa3094..2fc06f9df924 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 $tmg-f2 ease-in-out 0);
+      @include transition(color $tmg-f2 ease-in-out 0s);
       display: block;
       margin-top: ($baseline/4);
       color: $gray-l3;
@@ -155,7 +155,7 @@ body.course.settings {
 
         label {
           @extend .t-copy-sub1;
-          @include transition(color $tmg-f2 ease-in-out 0);
+          @include transition(color $tmg-f2 ease-in-out 0s);
           margin: 0 0 ($baseline/4) 0;
           font-weight: 400;
 
diff --git a/cms/static/sass/views/_static-pages.scss b/cms/static/sass/views/_static-pages.scss
index b33223322ccc..c62979ebc81f 100644
--- a/cms/static/sass/views/_static-pages.scss
+++ b/cms/static/sass/views/_static-pages.scss
@@ -137,7 +137,7 @@ body.course.static-pages {
   }
 
   .xmodule_display {
-    @include transition(background-color $tmg-s3 linear 0);
+    @include transition(background-color $tmg-s3 linear 0s);
     padding: 20px 20px 22px;
     font-size: 24px;
     font-weight: 300;
diff --git a/cms/static/sass/views/_subsection.scss b/cms/static/sass/views/_subsection.scss
index 6d9db4f11aab..2b9aad628656 100644
--- a/cms/static/sass/views/_subsection.scss
+++ b/cms/static/sass/views/_subsection.scss
@@ -335,7 +335,7 @@ body.course.subsection {
       }
 
       .menu {
-        @include transition(opacity $tmg-f2 linear 0);
+        @include transition(opacity $tmg-f2 linear 0s);
         z-index: 1;
         position: absolute;
         top: -12px;
diff --git a/cms/static/sass/views/_unit.scss b/cms/static/sass/views/_unit.scss
index dbb6f9c0e4e0..45e9823c2e99 100644
--- a/cms/static/sass/views/_unit.scss
+++ b/cms/static/sass/views/_unit.scss
@@ -256,7 +256,7 @@ body.course.unit {
               color: #3c3c3c;
 
               &:hover {
-                @include transition(background-color $tmg-f2 linear 0);
+                @include transition(background-color $tmg-f2 linear 0s);
                 background: tint($green,30%);
                 color: #fff;
               }
@@ -291,7 +291,7 @@ body.course.unit {
                 float: left;
 
                 [class^="icon-"] {
-                  @include transition(opacity $tmg-f2 linear 0);
+                  @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 $tmg-f2 linear 0);
+                @include transition(opacity $tmg-f2 linear 0s);
                 float: right;
                 position: relative;
                 top: 3px;
@@ -507,7 +507,6 @@ body.course.unit {
         @include blue-button;
 
         &.is-set {
-          @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 +586,7 @@ body.course.unit {
       }
 
       &:hover {
-        @include transition(opacity $tmg-f2 ease-in-out);
+        @include transition(opacity $tmg-f2 ease-in-out 0s);
         opacity: 1.0;
       }
 
@@ -673,7 +672,7 @@ body.course.unit {
 
         &:focus {
           box-shadow: 0 0 1px $shadow;
-          @include transition(opacity $tmg-f2 ease-in-out 0);
+          @include transition(opacity $tmg-f2 ease-in-out 0s);
           background-color: $yellow;
         }
 
@@ -698,7 +697,7 @@ body.course.unit {
 
         &:hover {
           box-shadow: 0 1px 1px $shadow;
-          @include transition(opacity $tmg-f2 ease-in-out 0);
+          @include transition(opacity $tmg-f2 ease-in-out 0s);
           background-color: $blue-s3;
           border: 1px solid $blue-s3;
           color: $white;
@@ -956,7 +955,7 @@ body.unit {
 
 
   &:hover {
-    @include transition(opacity $tmg-f2 ease-in-out 0);
+    @include transition(opacity $tmg-f2 ease-in-out 0s);
     opacity: 1.0s;
   }
 }
diff --git a/common/lib/xmodule/xmodule/css/combinedopenended/edit.scss b/common/lib/xmodule/xmodule/css/combinedopenended/edit.scss
index 94515ff4b734..604d7e1a4ebd 100644
--- a/common/lib/xmodule/xmodule/css/combinedopenended/edit.scss
+++ b/common/lib/xmodule/xmodule/css/combinedopenended/edit.scss
@@ -16,7 +16,7 @@
         color: $darkGrey !important;
         pointer-events: none;
         cursor: none;
-        
+
         &:hover {
           box-shadow: 0 0 0 0 !important;
         }
@@ -48,7 +48,7 @@
   @include linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 4px);
   background-color: #fff;
   overflow: hidden;
-  @include transition(width .3s);
+  @include transition(width .3s linear 0s);
 
   &.shown {
     width: 300px;
diff --git a/common/lib/xmodule/xmodule/css/problem/edit.scss b/common/lib/xmodule/xmodule/css/problem/edit.scss
index 249b767e5ea2..707c8e8c0635 100644
--- a/common/lib/xmodule/xmodule/css/problem/edit.scss
+++ b/common/lib/xmodule/xmodule/css/problem/edit.scss
@@ -48,7 +48,7 @@
   @include linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 4px);
   background-color: #fff;
   overflow: hidden;
-  @include transition(width .3s);
+  @include transition(width .3s linear 0s);
 
   &.shown {
     width: 300px;
diff --git a/common/lib/xmodule/xmodule/css/sequence/display.scss b/common/lib/xmodule/xmodule/css/sequence/display.scss
index 70beeae14cee..4baf60a8fed4 100644
--- a/common/lib/xmodule/xmodule/css/sequence/display.scss
+++ b/common/lib/xmodule/xmodule/css/sequence/display.scss
@@ -104,7 +104,7 @@ nav.sequence-nav {
         display: block;
         padding: 0;
         position: relative;
-        @include transition();
+        @include transition(none);
         outline: 0;
 
         &:focus {
@@ -208,7 +208,7 @@ nav.sequence-nav {
           position: absolute;
           top: 48px;
           text-shadow: 0 -1px 0 #000;
-          @include transition(all, .1s, $ease-in-out-quart);
+          @include transition(all .1s $ease-in-out-quart 0s);
           white-space: pre;
           z-index: 99;
 
@@ -273,7 +273,7 @@ nav.sequence-nav {
           height: 34px;
           width: 40px;
           text-indent: -9999px;
-          @include transition(all, .2s, $ease-in-out-quad);
+          @include transition(all .2s $ease-in-out-quad 0s);
           outline: 0;
 
           &:focus {
@@ -349,7 +349,7 @@ nav.sequence-bottom {
           display: block;
           padding: lh(.5) 4px;
           text-indent: -9999px;
-          @include transition(all, .2s, $ease-in-out-quad);
+          @include transition(all .2s $ease-in-out-quad 0s);
           outline: 0;
 
           &:hover {
diff --git a/common/lib/xmodule/xmodule/css/video/display.scss b/common/lib/xmodule/xmodule/css/video/display.scss
index d1b4239aeccf..879aee3f724c 100644
--- a/common/lib/xmodule/xmodule/css/video/display.scss
+++ b/common/lib/xmodule/xmodule/css/video/display.scss
@@ -55,7 +55,7 @@ div.video {
         height: 7px;
         margin-left: -1px;
         margin-right: -1px;
-        @include transition(height 2.0s ease-in-out);
+        @include transition(height 2.0s ease-in-out 0s);
 
         div.ui-widget-header {
           background: #777;
@@ -72,7 +72,7 @@ div.video {
           height: 15px;
           margin-left: -7px;
           top: -4px;
-          @include transition(height 2.0s ease-in-out, width 2.0s ease-in-out);
+          @include transition(height 2.0s ease-in-out 0s, width 2.0s ease-in-out 0s);
           width: 15px;
 
           &:focus, &:hover {
@@ -101,7 +101,7 @@ div.video {
             line-height: 46px;
             padding: 0 lh(.75);
             text-indent: -9999px;
-            @include transition(background-color, opacity);
+            @include transition(background-color 0.75s linear 0s, opacity 0.75s linear 0s);
             width: 14px;
             background: url('../images/vcr.png') 15px 15px no-repeat;
             outline: 0;
@@ -176,7 +176,7 @@ div.video {
             margin-right: 0;
             padding-left: 15px;
             position: relative;
-            @include transition();
+            @include transition(none);
             -webkit-font-smoothing: antialiased;
             width: 116px;
             outline: 0;
@@ -214,7 +214,7 @@ div.video {
           // fix for now
           ol.video_speeds {
             box-shadow: inset 1px 0 0 #555, 0 3px 0 #444;
-            @include transition();
+            @include transition(none);
             background-color: #444;
             border: 1px solid #000;
             bottom: 46px;
@@ -284,7 +284,7 @@ div.video {
             margin-right: 0;
             padding-left: 15px;
             position: relative;
-            @include transition();
+            @include transition(none);
             -webkit-font-smoothing: antialiased;
             width: 30px;
 
@@ -295,7 +295,7 @@ div.video {
 
           .volume-slider-container {
             box-shadow: inset 1px 0 0 #555, 0 3px 0 #444;
-            @include transition();
+            @include transition(none);
             background-color: #444;
             border: 1px solid #000;
             bottom: 46px;
@@ -325,7 +325,7 @@ div.video {
                 cursor: pointer;
                 height: 15px;
                 left: -6px;
-                @include transition(height 2.0s ease-in-out, width 2.0s ease-in-out);
+                @include transition(height 2.0s ease-in-out 0s, width 2.0s ease-in-out 0s);
                 width: 15px;
               }
 
@@ -347,7 +347,7 @@ div.video {
           margin-left: 0;
           padding: 0 lh(.5);
           text-indent: -9999px;
-          @include transition();
+          @include transition(none);
           width: 30px;
 
           &:hover {
@@ -368,7 +368,7 @@ div.video {
           margin-left: 0;
           padding: 0 lh(.5);
           text-indent: -9999px;
-          @include transition();
+          @include transition(none);
           width: 30px;
 
           &:hover {
@@ -397,7 +397,7 @@ div.video {
           padding: 0 lh(.5);
           position: relative;
           text-indent: -9999px;
-          @include transition();
+          @include transition(none);
           -webkit-font-smoothing: antialiased;
           width: 30px;
 
@@ -542,7 +542,7 @@ div.video {
       position: fixed;
       right: 0;
       top: 0;
-      @include transition();
+      @include transition(none);
 
       li {
         color: #aaa;
diff --git a/common/lib/xmodule/xmodule/css/videoalpha/display.scss b/common/lib/xmodule/xmodule/css/videoalpha/display.scss
index d1b4239aeccf..879aee3f724c 100644
--- a/common/lib/xmodule/xmodule/css/videoalpha/display.scss
+++ b/common/lib/xmodule/xmodule/css/videoalpha/display.scss
@@ -55,7 +55,7 @@ div.video {
         height: 7px;
         margin-left: -1px;
         margin-right: -1px;
-        @include transition(height 2.0s ease-in-out);
+        @include transition(height 2.0s ease-in-out 0s);
 
         div.ui-widget-header {
           background: #777;
@@ -72,7 +72,7 @@ div.video {
           height: 15px;
           margin-left: -7px;
           top: -4px;
-          @include transition(height 2.0s ease-in-out, width 2.0s ease-in-out);
+          @include transition(height 2.0s ease-in-out 0s, width 2.0s ease-in-out 0s);
           width: 15px;
 
           &:focus, &:hover {
@@ -101,7 +101,7 @@ div.video {
             line-height: 46px;
             padding: 0 lh(.75);
             text-indent: -9999px;
-            @include transition(background-color, opacity);
+            @include transition(background-color 0.75s linear 0s, opacity 0.75s linear 0s);
             width: 14px;
             background: url('../images/vcr.png') 15px 15px no-repeat;
             outline: 0;
@@ -176,7 +176,7 @@ div.video {
             margin-right: 0;
             padding-left: 15px;
             position: relative;
-            @include transition();
+            @include transition(none);
             -webkit-font-smoothing: antialiased;
             width: 116px;
             outline: 0;
@@ -214,7 +214,7 @@ div.video {
           // fix for now
           ol.video_speeds {
             box-shadow: inset 1px 0 0 #555, 0 3px 0 #444;
-            @include transition();
+            @include transition(none);
             background-color: #444;
             border: 1px solid #000;
             bottom: 46px;
@@ -284,7 +284,7 @@ div.video {
             margin-right: 0;
             padding-left: 15px;
             position: relative;
-            @include transition();
+            @include transition(none);
             -webkit-font-smoothing: antialiased;
             width: 30px;
 
@@ -295,7 +295,7 @@ div.video {
 
           .volume-slider-container {
             box-shadow: inset 1px 0 0 #555, 0 3px 0 #444;
-            @include transition();
+            @include transition(none);
             background-color: #444;
             border: 1px solid #000;
             bottom: 46px;
@@ -325,7 +325,7 @@ div.video {
                 cursor: pointer;
                 height: 15px;
                 left: -6px;
-                @include transition(height 2.0s ease-in-out, width 2.0s ease-in-out);
+                @include transition(height 2.0s ease-in-out 0s, width 2.0s ease-in-out 0s);
                 width: 15px;
               }
 
@@ -347,7 +347,7 @@ div.video {
           margin-left: 0;
           padding: 0 lh(.5);
           text-indent: -9999px;
-          @include transition();
+          @include transition(none);
           width: 30px;
 
           &:hover {
@@ -368,7 +368,7 @@ div.video {
           margin-left: 0;
           padding: 0 lh(.5);
           text-indent: -9999px;
-          @include transition();
+          @include transition(none);
           width: 30px;
 
           &:hover {
@@ -397,7 +397,7 @@ div.video {
           padding: 0 lh(.5);
           position: relative;
           text-indent: -9999px;
-          @include transition();
+          @include transition(none);
           -webkit-font-smoothing: antialiased;
           width: 30px;
 
@@ -542,7 +542,7 @@ div.video {
       position: fixed;
       right: 0;
       top: 0;
-      @include transition();
+      @include transition(none);
 
       li {
         color: #aaa;
diff --git a/common/static/sass/_mixins.scss b/common/static/sass/_mixins.scss
index e3108a72bf58..64248734c304 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 0, border-color 0.25s ease-in-out 0, background 0.25s ease-in-out 0, box-shadow 0.25s ease-in-out 0);
+  @include transition(color 0.25s ease-in-out 0s, border-color 0.25s ease-in-out 0s, background 0.25s ease-in-out 0s, box-shadow 0.25s ease-in-out 0s);
   display: inline-block;
   cursor: pointer;
 
diff --git a/lms/static/sass/_discussion.scss b/lms/static/sass/_discussion.scss
index ac2cc0bda93b..80f469113d8b 100644
--- a/lms/static/sass/_discussion.scss
+++ b/lms/static/sass/_discussion.scss
@@ -565,7 +565,7 @@ body.discussion {
     border-top-width: 0;
     border-radius: 0 0 3px 3px;
     overflow: hidden;
-    @include transition(all, .2s, easeOut);
+    @include transition(all .2s ease-out 0s);
 
     &:before {
       content: 'PREVIEW';
@@ -591,7 +591,7 @@ body.discussion {
     padding: 0px;
     height: 20px;
     overflow: hidden;
-    @include transition(all, .2s, easeOut);
+    @include transition(all .2s ease-out 0s);
   }
 
   .wmd-spacer {
@@ -718,7 +718,7 @@ body.discussion {
       height: 100%;
       @include linear-gradient(top, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
       background-color: #dcdcdc;
-      @include transition(all .2s ease-out);
+      @include transition(all .2s ease-out 0s);
 
       &:hover {
         background-color: #e9e9e9;
@@ -818,7 +818,7 @@ body.discussion {
         color: #333;
         text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
         opacity: 0.0;
-        @include transition(opacity .2s);
+        @include transition(opacity .2s linear 0s);
       }
     }
 
@@ -938,7 +938,7 @@ body.discussion {
       max-width: 30px;
       margin: auto;
       @include box-sizing(border-box);
-      @include transition(all .2s);
+      @include transition(all .2s linear 0s);
     }
 
     .post-search-field {
@@ -959,13 +959,13 @@ body.discussion {
       color: #333;
       cursor: pointer;
       pointer-events: none;
-      @include transition(all .2s ease-out);
+      @include transition(all .2s ease-out 0s);
 
       &::-webkit-input-placeholder,
       &:-moz-placeholder,
       &:-ms-input-placeholder {
         opacity: 0.0;
-        @include transition(opacity .2s);
+        @include transition(opacity .2s linear 0s);
       }
 
       &:focus {
@@ -1618,7 +1618,7 @@ body.discussion {
     padding: 8px 20px;
 
     .wmd-input {
-      @include transition(all .2s);
+      @include transition(all .2s linear 0s);
     }
 
     .wmd-button {
@@ -1638,7 +1638,7 @@ body.discussion {
     border: 1px solid #b2b2b2;
     border-radius: 3px;
     box-shadow: 0 1px 3px rgba(0, 0, 0, .1) inset;
-    @include transition(border-color .1s);
+    @include transition(border-color .1s linear 0s);
 
     &:focus {
       border-color: #4697c1;
@@ -1726,7 +1726,7 @@ body.discussion {
   .discussion-reply-new {
     padding: 20px;
     @include clearfix;
-    @include transition(opacity .2s);
+    @include transition(opacity .2s linear 0s);
 
     h4 {
       font-size: 16px;
@@ -1837,7 +1837,7 @@ body.discussion {
     /* Course content p has a default margin-bottom of 1.416em, this is just to reset that */
     .discussion-thread {
       padding: 0;
-      @include transition(all .25s);
+      @include transition(all .25s linear 0s);
 
       .dogear {
         display: none;
@@ -1868,7 +1868,7 @@ body.discussion {
         min-height: 0;
         padding: 10px 10px 15px 10px;
         box-shadow: 0 1px 0 #ddd;
-        @include transition(all .2s);
+        @include transition(all .2s linear 0s);
 
         .discussion-post {
           padding: 12px 20px 0 20px;
@@ -2223,7 +2223,7 @@ body.discussion {
       border-top-width: 0;
       border-radius: 0 0 3px 3px;
       overflow: hidden;
-      @include transition(all, .2s, easeOut);
+      @include transition(all .2s ease-out 0s);
 
       &:before {
         content: 'PREVIEW';
@@ -2249,7 +2249,7 @@ body.discussion {
       padding: 0px;
       height: 20px;
       overflow: hidden;
-      @include transition(all, .2s, easeOut);
+      @include transition(all .2s ease-out 0s);
     }
 
     .wmd-spacer {
@@ -2457,7 +2457,7 @@ body.discussion {
       }
 
       &:hover {
-        @include transition(opacity .2s);
+        @include transition(opacity .2s linear 0s);
         opacity: 1.0;
       }
     }
@@ -2522,7 +2522,7 @@ display:none;
       opacity: 0.8;
 
       &:hover {
-        @include transition(opacity .2s);
+        @include transition(opacity .2s linear 0s);
         opacity: 1.0;
       }
 
diff --git a/lms/static/sass/base/_base.scss b/lms/static/sass/base/_base.scss
index 547607760148..59a81192f532 100644
--- a/lms/static/sass/base/_base.scss
+++ b/lms/static/sass/base/_base.scss
@@ -64,7 +64,7 @@ p {
     color: $link-color;
     font: normal 1em/1em $serif;
     text-decoration: none;
-    @include transition(all, 0.1s, linear);
+    @include transition(all 0.1s linear 0s);
 
     &:hover {
       color: $link-color;
@@ -77,7 +77,7 @@ a:link, a:visited {
   color: $link-color;
   font: normal 1em/1em $sans-serif;
   text-decoration: none;
-  @include transition(all, 0.1s, linear);
+  @include transition(all 0.1s linear 0s);
 
   &:hover {
     text-decoration: underline;
diff --git a/lms/static/sass/course/_gradebook.scss b/lms/static/sass/course/_gradebook.scss
index a05023c157d1..3355f96260ba 100644
--- a/lms/static/sass/course/_gradebook.scss
+++ b/lms/static/sass/course/_gradebook.scss
@@ -25,7 +25,7 @@ div.gradebook-wrapper {
     	font-size: 11px;
     	box-shadow: 0 1px 4px rgba(0, 0, 0, .12) inset;
     	outline: none;
-    	@include transition(border-color .15s);
+    	@include transition(border-color .15s linear 0s);
 
     	&::-webkit-input-placeholder,
     	&::-moz-input-placeholder {
diff --git a/lms/static/sass/course/_info.scss b/lms/static/sass/course/_info.scss
index 6c3dafb880bc..ce6358c33f84 100644
--- a/lms/static/sass/course/_info.scss
+++ b/lms/static/sass/course/_info.scss
@@ -113,7 +113,7 @@ div.info-wrapper {
         &.expandable,
         &.collapsable {
           margin: 0 16px 14px 16px;
-          @include transition(all .2s);
+          @include transition(all .2s linear 0s);
 
           h4 {
             color: $link-color;
diff --git a/lms/static/sass/course/_profile.scss b/lms/static/sass/course/_profile.scss
index 09a6996ba412..0f38cedff9a3 100644
--- a/lms/static/sass/course/_profile.scss
+++ b/lms/static/sass/course/_profile.scss
@@ -36,7 +36,7 @@ div.profile-wrapper {
         padding: lh(.5) 0 lh(.5) lh(.5);
         position: relative;
         text-decoration: none;
-        @include transition();
+        @include transition(none);
 
         div#location_sub, div#language_sub {
           font-weight: bold;
diff --git a/lms/static/sass/course/_textbook.scss b/lms/static/sass/course/_textbook.scss
index 563ee1c15c28..bc9da1f43fc0 100644
--- a/lms/static/sass/course/_textbook.scss
+++ b/lms/static/sass/course/_textbook.scss
@@ -38,7 +38,7 @@ div.book-wrapper {
         text-align: right;
         color: #9a9a9a;
         opacity: 0.0;
-        @include transition(opacity .15s);
+        @include transition(opacity .15s linear 0s);
       }
 
       li {
@@ -121,7 +121,7 @@ div.book-wrapper {
             opacity: 0.0;
             filter: alpha(opacity=0);
             text-indent: -9999px;
-            @include transition;
+            @include transition(none);
             vertical-align: middle;
             width: 100%;
 
diff --git a/lms/static/sass/course/base/_base.scss b/lms/static/sass/course/base/_base.scss
index 557af9f592cd..28665a3303db 100644
--- a/lms/static/sass/course/base/_base.scss
+++ b/lms/static/sass/course/base/_base.scss
@@ -115,7 +115,7 @@ img {
   color: #fff;
   pointer-events: none;
   opacity: 0;
-  @include transition(opacity .1s);
+  @include transition(opacity .1s linear 0s);
 
   &:after {
     content: '▾';
diff --git a/lms/static/sass/course/base/_extends.scss b/lms/static/sass/course/base/_extends.scss
index 0ed49f8b682a..dd02e71e54cd 100644
--- a/lms/static/sass/course/base/_extends.scss
+++ b/lms/static/sass/course/base/_extends.scss
@@ -96,7 +96,7 @@ h1.top-header {
     a {
       display: block;
       text-decoration: none;
-      @include transition();
+      @include transition(none);
     }
 
     &.active {
@@ -185,6 +185,6 @@ h1.top-header {
 }
 
 .tran {
-  @include transition( all, .2s, $ease-in-out-quad);
+  @include transition( all .2s $ease-in-out-quad 0s);
 }
 
diff --git a/lms/static/sass/course/courseware/_sidebar.scss b/lms/static/sass/course/courseware/_sidebar.scss
index dce416af4ed0..c8e9e233e791 100644
--- a/lms/static/sass/course/courseware/_sidebar.scss
+++ b/lms/static/sass/course/courseware/_sidebar.scss
@@ -73,7 +73,7 @@ section.course-index {
       @include linear-gradient(top, $sidebar-chapter-bg-top, $sidebar-chapter-bg-bottom);
       background-color: $sidebar-chapter-bg;
       box-shadow: 0 1px 0 #fff inset, 0 -1px 0 rgba(0, 0, 0, .1) inset;
-      @include transition(background-color .1s);
+      @include transition(background-color .1s linear 0s);
 
       &.is-open {
         background: #fff;
@@ -165,7 +165,7 @@ section.course-index {
             font-weight: normal;
             color: #333;
             opacity: 0;
-            @include transition();
+            @include transition(none);
           }
 
           > a {
diff --git a/lms/static/sass/course/layout/_calculator.scss b/lms/static/sass/course/layout/_calculator.scss
index 218d25496fa9..046afbbcf861 100644
--- a/lms/static/sass/course/layout/_calculator.scss
+++ b/lms/static/sass/course/layout/_calculator.scss
@@ -2,7 +2,7 @@ div.calc-main {
   bottom: -126px;
   left: 0;
   position: fixed;
-  @include transition(bottom);
+  @include transition(bottom 0.75s linear 0s);
   -webkit-appearance: none;
   width: 100%;
   z-index: 99;
@@ -131,7 +131,7 @@ div.calc-main {
             position: absolute;
             right: -40px;
             top: -122px;
-            @include transition();
+            @include transition(none);
             width: 600px;
 
             &.shown {
diff --git a/lms/static/sass/course/wiki/_wiki.scss b/lms/static/sass/course/wiki/_wiki.scss
index a9b012d82834..467a6a2c3e3e 100644
--- a/lms/static/sass/course/wiki/_wiki.scss
+++ b/lms/static/sass/course/wiki/_wiki.scss
@@ -106,7 +106,7 @@ section.wiki {
       font-family: $sans-serif;
       font-size: 12px;
       outline: none;
-      @include transition(border-color .1s);
+      @include transition(border-color .1s linear 0s);
 
       &:-webkit-input-placholder {
         font-style: italic;
@@ -1002,7 +1002,7 @@ section.wiki {
         color: #fff;
         font-weight: bold;
         font-size: em(18);
-        @include transition;
+        @include transition(none);
         text-align: center;
         -webkit-font-smoothing: antialiased;
 
diff --git a/lms/static/sass/multicourse/_about_pages.scss b/lms/static/sass/multicourse/_about_pages.scss
index a72a77c89fc5..6c6bcfb01b28 100644
--- a/lms/static/sass/multicourse/_about_pages.scss
+++ b/lms/static/sass/multicourse/_about_pages.scss
@@ -21,7 +21,7 @@
       letter-spacing: 1px;
       margin: 0px 15px;
       padding: 20px 10px;
-      @include transition(all, 0.15s, linear);
+      @include transition(all 0.15s linear 0s);
       text-transform: lowercase;
 
       &:hover, &.active {
diff --git a/lms/static/sass/multicourse/_account.scss b/lms/static/sass/multicourse/_account.scss
index 6f2ec7fa8f96..9de0a1fca8a6 100644
--- a/lms/static/sass/multicourse/_account.scss
+++ b/lms/static/sass/multicourse/_account.scss
@@ -139,7 +139,7 @@
   }
 
   a {
-    @include transition(color 0.15s ease-in-out, border 0.15s ease-in-out);
+    @include transition(color 0.15s ease-in-out 0s, border 0.15s ease-in-out 0s);
 
     &:link, &:visited, &:hover, &:active {
       color: $link-color-d1;
@@ -259,13 +259,13 @@
       }
 
       label {
-        @include transition(color 0.15s ease-in-out);
+        @include transition(color 0.15s ease-in-out 0s);
         margin: 0 0 ($baseline/4) 0;
         color: tint($black, 20%);
       }
 
       .tip {
-        @include transition(color 0.15s ease-in-out);
+        @include transition(color 0.15s ease-in-out 0s);
         display: block;
         margin-top: ($baseline/4);
         color: $lighter-base-font-color;
diff --git a/lms/static/sass/multicourse/_course_about.scss b/lms/static/sass/multicourse/_course_about.scss
index 6c087c7e7e51..bceaaa280a76 100644
--- a/lms/static/sass/multicourse/_course_about.scss
+++ b/lms/static/sass/multicourse/_course_about.scss
@@ -95,7 +95,7 @@
           @include clearfix;
           float: left;
           margin-right: flex-gutter();
-          @include transition(all, 0.15s, linear);
+          @include transition(all 0.15s linear 0s);
           width: flex-grid(12);
 
           > a.find-courses, a.register {
@@ -151,7 +151,7 @@
             text-align: center;
             float: left;
             margin: 1px flex-gutter(8) 0 0;
-            @include transition();
+            @include transition(none);
             width: flex-grid(5, 8);
           }
 
@@ -452,7 +452,7 @@
           padding: 6px 10px;
           position: absolute;
           text-align: center;
-          @include transition(all, 0.15s, ease-out);
+          @include transition(all 0.15s ease-out 0s);
           top: 65px;
           width: 220px;
 
@@ -466,7 +466,7 @@
           @include inline-block;
           margin-right: 10px;
           opacity: 0.5;
-          @include transition(all, 0.15s, linear);
+          @include transition(all 0.15s linear 0s);
           width: 44px;
 
           &:hover {
@@ -530,7 +530,7 @@
           height: 19px;
           margin: 2px 10px 0 0;
           opacity: 0.6;
-          @include transition(all, 0.15s, linear);
+          @include transition(all 0.15s linear 0s);
           width: 19px;
 
           &.start {
diff --git a/lms/static/sass/multicourse/_dashboard.scss b/lms/static/sass/multicourse/_dashboard.scss
index 2dded26e2716..cd58d4d8e4e2 100644
--- a/lms/static/sass/multicourse/_dashboard.scss
+++ b/lms/static/sass/multicourse/_dashboard.scss
@@ -93,7 +93,7 @@
               height: 19px;
               margin: 0 6px 0 0;
               opacity: 0.6;
-              @include transition(all, 0.15s, linear);
+              @include transition(all 0.15s linear 0s);
               width: 19px;
 
               &.email-icon {
@@ -278,7 +278,7 @@
       position: relative;
       width: flex-grid(12);
       z-index: 20;
-      @include transition(all, 0.15s, linear);
+      @include transition(all 0.15s linear 0s);
 
       &:last-child {
         margin-bottom: none;
@@ -292,7 +292,7 @@
         margin: 0px;
         overflow: hidden;
         position: relative;
-        @include transition(all, 0.15s, linear);
+        @include transition(all 0.15s linear 0s);
         width: 200px;
         height: 120px;
 
diff --git a/lms/static/sass/multicourse/_edge.scss b/lms/static/sass/multicourse/_edge.scss
index a714ef17f916..30d5c0815a75 100644
--- a/lms/static/sass/multicourse/_edge.scss
+++ b/lms/static/sass/multicourse/_edge.scss
@@ -14,7 +14,7 @@ $paleYellow: #fffcf1;
   text-transform: none;
   letter-spacing: 0;
   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);
+  @include transition(background-color .15s linear 0s, box-shadow .15s linear 0s);
 
   &.disabled {
     border: 1px solid $lightGrey !important;
diff --git a/lms/static/sass/multicourse/_home.scss b/lms/static/sass/multicourse/_home.scss
index e0fafcc40244..1d0c543fa478 100644
--- a/lms/static/sass/multicourse/_home.scss
+++ b/lms/static/sass/multicourse/_home.scss
@@ -40,7 +40,7 @@
       width: flex-grid(6);
       float: left;
       position: relative;
-      @include transition(all, 0.2s, linear);
+      @include transition(all 0.2s linear 0s);
       vertical-align: top;
 
       &:hover {
@@ -56,7 +56,7 @@
         opacity: 1.0;
         padding: 20px 30px;
         top: 0px;
-        @include transition(all, 0.2s, linear);
+        @include transition(all 0.2s linear 0s);
         text-align: left;
 
         h1 {
@@ -116,7 +116,7 @@
           margin-left: -30px;
           position: absolute;
           top: 50%;
-          @include transition(all, 0.15s, linear);
+          @include transition(all 0.15s linear 0s);
           width: 60px;
 
           &::after {
@@ -262,7 +262,7 @@
       }
 
       a {
-        @include transition(all, 0.25s, ease-in-out);
+        @include transition(all 0.25s ease-in-out 0s);
 
         &::before {
           @include background-image(radial-gradient(50% 50%, circle closest-side, rgba(255,255,255, 1) 0%, rgba(255,255,255, 0) 100%));
@@ -275,7 +275,7 @@
           opacity: 0;
           width: 200px;
           position: absolute;
-          @include transition(all, 0.25s, ease-in-out);
+          @include transition(all 0.25s ease-in-out 0s);
           top: 50%;
           z-index: 1;
         }
@@ -285,7 +285,7 @@
           left: 0px;
           position: absolute;
           text-align: center;
-          @include transition(all, 0.25s, ease-in-out);
+          @include transition(all 0.25s ease-in-out 0s);
           width: 100%;
           z-index: 2;
 
@@ -293,7 +293,7 @@
             color: $base-font-color;
             font: 800 italic 1.4em/1.4em $sans-serif;
             text-shadow: 0 1px rgba(255,255,255, 0.6);
-            @include transition(all, 0.15s, ease-in-out);
+            @include transition(all 0.15s ease-in-out 0s);
 
             &:hover {
               color: $lighter-base-font-color;
@@ -303,7 +303,7 @@
 
         img {
           position: relative;
-          @include transition(all, 0.25s, ease-in-out);
+          @include transition(all 0.25s ease-in-out 0s);
           vertical-align: middle;
           z-index: 2;
         }
@@ -428,7 +428,7 @@
           float: left;
           margin-right: flex-gutter();
           padding: 10px;
-          @include transition(all, 0.15s, linear);
+          @include transition(all 0.15s linear 0s);
           width: flex-grid(4);
 
           &:hover {
diff --git a/lms/static/sass/multicourse/_media-kit.scss b/lms/static/sass/multicourse/_media-kit.scss
index a234f0ac208d..ef6abc36961f 100644
--- a/lms/static/sass/multicourse/_media-kit.scss
+++ b/lms/static/sass/multicourse/_media-kit.scss
@@ -58,7 +58,7 @@ $white: rgb(255,255,255);
     color: $blue;
     font-family: $sans-serif;
     text-decoration: none;
-    @include transition(all, 0.1s, linear);
+    @include transition(all 0.1s linear 0s);
 
     .note {
       position: relative;
@@ -66,7 +66,7 @@ $white: rgb(255,255,255);
       font-family: $sans-serif;
       font-size: 13px;
       text-decoration: none;
-      @include transition(all, 0.1s, linear);
+      @include transition(all 0.1s linear 0s);
 
       &:before {
         position: relative;
diff --git a/lms/static/sass/multicourse/_testcenter-register.scss b/lms/static/sass/multicourse/_testcenter-register.scss
index 3cf0e4d9c75c..754b1428de56 100644
--- a/lms/static/sass/multicourse/_testcenter-register.scss
+++ b/lms/static/sass/multicourse/_testcenter-register.scss
@@ -219,7 +219,7 @@
 
 				label {
 					margin: 0 0 ($baseline/4) 0;
-					@include transition(color, 0.15s, ease-in-out);
+					@include transition(color 0.15s ease-in-out 0s);
 
 					&.is-focused {
 						color: $blue;
@@ -406,7 +406,7 @@
 					}
 
 					.details, .item, .instructions {
-						@include transition(opacity, 0.10s, ease-in-out);
+						@include transition(opacity 0.10s ease-in-out 0s);
 						font-size: 13px;
 						opacity: 0.65;
 					}
diff --git a/lms/static/sass/shared/_course_object.scss b/lms/static/sass/shared/_course_object.scss
index 316dc7e98040..3321afd92d1d 100644
--- a/lms/static/sass/shared/_course_object.scss
+++ b/lms/static/sass/shared/_course_object.scss
@@ -39,7 +39,7 @@
       margin-bottom: 30px;
       position: relative;
       width: 100%;
-      @include transition(all, 0.15s, linear);
+      @include transition(all 0.15s linear 0s);
 
       .status {
         background: $link-color;
@@ -84,7 +84,7 @@
         @include clearfix;
         position: absolute;
         right: -4px;
-        @include transition(all, 0.15s, linear);
+        @include transition(all 0.15s linear 0s);
 
         p {
           color: rgb(255,255,255);
diff --git a/lms/static/sass/shared/_footer.scss b/lms/static/sass/shared/_footer.scss
index c6c4ff5cf8b6..888f19ac880f 100644
--- a/lms/static/sass/shared/_footer.scss
+++ b/lms/static/sass/shared/_footer.scss
@@ -16,7 +16,7 @@
     }
 
     a {
-      @include transition(link-color 0.15s ease-in-out, border 0.15s ease-in-out);
+      @include transition(link-color 0.15s ease-in-out 0s, border 0.15s ease-in-out 0s);
 
       &:link, &:visited, &:hover, &:active {
         border-bottom: none;
diff --git a/lms/static/sass/shared/_header.scss b/lms/static/sass/shared/_header.scss
index e7948f40b098..7da89ccc1cfe 100644
--- a/lms/static/sass/shared/_header.scss
+++ b/lms/static/sass/shared/_header.scss
@@ -145,7 +145,7 @@ header.global {
           overflow: hidden;
           position: absolute;
           top: 4px;
-          @include transition(all, 0.15s, linear);
+          @include transition(all 0.15s linear 0s);
           width: 26px;
         }
 
@@ -213,7 +213,7 @@ header.global {
             overflow: hidden;
             padding: 3px 5px 4px;
             text-overflow: ellipsis;
-            @include transition(padding, 0.15s, linear);
+            @include transition(padding 0.15s linear 0s);
             white-space: nowrap;
             width: 100%;
 
diff --git a/lms/static/sass/shared/_modal.scss b/lms/static/sass/shared/_modal.scss
index 395cd89c0e87..f3233b6f002c 100644
--- a/lms/static/sass/shared/_modal.scss
+++ b/lms/static/sass/shared/_modal.scss
@@ -289,7 +289,7 @@
           font: normal 1.2rem/1.2rem $sans-serif;
           text-align: center;
           text-shadow: 0 1px rgba(255,255,255, 0.8);
-          @include transition(all, 0.15s, ease-out);
+          @include transition(all 0.15s ease-out 0s);
         }
       }
 

From 3a11ab266308e1319cbc5967859acbc601404254 Mon Sep 17 00:00:00 2001
From: David Baumgold <david@davidbaumgold.com>
Date: Tue, 9 Jul 2013 16:24:40 -0400
Subject: [PATCH 19/20] Changelog: Sass, Bourbon, Neat

---
 CHANGELOG.rst | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.rst b/CHANGELOG.rst
index 8e1177970474..6a602cf5d54d 100644
--- a/CHANGELOG.rst
+++ b/CHANGELOG.rst
@@ -25,6 +25,8 @@ Blades: User answer now preserved (and changeable) after clicking "show answer"
 
 LMS: Removed press releases
 
+Common: Updated Sass and Bourbon libraries, added Neat library
+
 LMS: Users are no longer auto-activated if they click "reset password"
 This is now done when they click on the link in the reset password
 email they receive (along with usual path through activation email).

From 18474986f3c98904eecc0325d50d9ac6f71ec089 Mon Sep 17 00:00:00 2001
From: David Baumgold <david@davidbaumgold.com>
Date: Wed, 10 Jul 2013 13:00:07 -0400
Subject: [PATCH 20/20] Removed deprecated mixins from _textbooks.scss

---
 cms/static/sass/views/_textbooks.scss | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/cms/static/sass/views/_textbooks.scss b/cms/static/sass/views/_textbooks.scss
index a0f5430d54c7..ab2599581f1f 100644
--- 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;