updated sass transitions to use newer bourbon syntax

a0962cc3 · Frances Botsford · David Baumgold · 3748cae7 · a0962cc3 · a0962cc3
Commit a0962cc3 authored Jul 09, 2013 by Frances Botsford Committed by David Baumgold Jul 10, 2013
42 changed files
--- 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;

--- 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;


--- 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;

--- 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;

--- 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;
  }


--- 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;

--- 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;
        }

--- 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;

--- 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 {

--- 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;


--- 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;

--- 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;

--- 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;
  }
 }

--- 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;

--- 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;

--- 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 {

--- 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;

--- 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;

--- 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;


--- 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;
      }


--- 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;

--- 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 {

--- 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;

--- 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;

--- 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%;


--- 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: '▾';

--- 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);
 }

--- 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 {

--- 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 {

--- 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;


--- 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 {

--- 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;

--- 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 {

--- 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;


--- 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;

--- 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 {

--- 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;

--- 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;
 					}

--- 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);

--- 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;

--- 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%;


--- 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);
        }
      }