Merge pull request #16002 from edx/andya/studio-sass-linting

Fix validation issues with Studio Sass files

cms/static/sass/_base.scss

@@ -27,12 +27,15 @@ html {
 
 body {
   @extend %t-copy-base;
+
   min-width: $fg-min-width;
   background: $uxpl-grayscale-x-back;
   color: $gray-d3;
 }
 
-body, input, button {
+body,
+input,
+button {
   font-family: 'Open Sans', sans-serif;
 }
 
@@ -43,6 +46,7 @@ body, input, button {
 
 a {
   @include transition(color $tmg-f2 ease-in-out 0s);
+
   text-decoration: none;
   color: $uxpl-blue-base;
 
@@ -67,6 +71,7 @@ h1 {
 .wrapper {
   @include clearfix();
   @include box-sizing(border-box);
+
   width: 100%;
 }
 
@@ -75,12 +80,15 @@ h1 {
 .page-header {
   @extend %t-title3;
   @extend %t-strong;
+
   display: block;
   color: $gray-d3;
 
-  .navigation, .subtitle {
+  .navigation,
+  .subtitle {
     @extend %t-title7;
     @extend %t-regular;
+
     position: relative;
     top: ($baseline/4);
     display: block;
@@ -118,7 +126,6 @@ h1 {
 // +Typography - Primary Content
 // ====================
 .content-primary {
-
   .section-header {
     color: $gray-d3;
 
@@ -155,7 +162,6 @@ h1 {
 // +Typography - Secondary Content
 // ====================
 .content-secondary {
-
   .section-header {
     color: $gray-d3;
 
@@ -183,34 +189,44 @@ h1 {
 
 // +Typography - Loose Headings  (BT: needs to be removed once html is clean)
 // ====================
-.title-1, .title-2, .title-3, .title-4, .title-5, .title-6 {
+.title-1,
+.title-2,
+.title-3,
+.title-4,
+.title-5,
+.title-6 {
   @extend %t-strong;
 }
 
 .title-1 {
   @extend %t-title3;
+
   margin-bottom: ($baseline*1.5);
 }
 
 .title-2 {
   @extend %t-title4;
+
   margin-bottom: $baseline;
 }
 
 .title-3 {
   @extend %t-title5;
+
   margin-bottom: ($baseline/2);
 }
 
 .title-4 {
   @extend %t-title7;
   @extend %t-regular;
+
   margin-bottom: $baseline;
 }
 
 .title-5 {
   @extend %t-title7;
   @extend %t-regular;
+
   color: $gray-l1;
   margin-bottom: $baseline;
 }
@@ -218,11 +234,15 @@ h1 {
 .title-6 {
   @extend %t-title7;
   @extend %t-regular;
+
   color: $gray-l2;
   margin-bottom: $baseline;
 }
 
-p, ul, ol, dl {
+p,
+ul,
+ol,
+dl {
   margin-bottom: ($baseline/2);
 
   &:last-child {
@@ -230,12 +250,6 @@ p, ul, ol, dl {
   }
 }
 
-// +Layout - Basic
-// ====================
-.wrapper-view {
-
-}
-
 // +Layout - Basic Page Header
 // ====================
 .wrapper-mast {
@@ -245,6 +259,7 @@ p, ul, ol, dl {
 
   .mast, .metadata {
     @include clearfix();
+
     position: relative;
     max-width: $fg-max-width;
     min-width: $fg-min-width;
@@ -269,19 +284,22 @@ p, ul, ol, dl {
       .page-header {
         @include float(left);
         @include margin-right(flex-gutter());
-        width: flex-grid(6,12);
+
+        width: flex-grid(6, 12);
       }
 
       .nav-actions {
         @include float(left);
         @include text-align(right);
+
         position: relative;
         bottom: -($baseline*0.75);
-        width: flex-grid(6,12);
+        width: flex-grid(6, 12);
 
         .nav-item {
           display: inline-block;
           vertical-align: top;
+
           @include margin-right($baseline/2);
 
           &:last-child {
@@ -298,7 +316,6 @@ p, ul, ol, dl {
 
     // layout with actions
     &.has-subtitle {
-
       .nav-actions {
         bottom: -($baseline*1.5);
       }
@@ -306,29 +323,30 @@ p, ul, ol, dl {
 
     // layout with navigation
     &.has-navigation {
-
       .nav-actions {
         bottom: -($baseline*1.5);
       }
 
       .navigation-link {
         @extend %cont-truncated;
+
         display: inline-block;
         vertical-align: bottom; // correct for extra padding in FF
         max-width: 250px;
 
         &.navigation-current {
           @extend %ui-disabled;
+
           color: $gray;
           max-width: 250px;
 
-          &:before {
+          &::before {
             color: $gray;
           }
         }
       }
 
-      .navigation-link:before {
+      .navigation-link::before {
         content: " / ";
         margin: ($baseline/4);
         color: $gray;
@@ -338,7 +356,7 @@ p, ul, ol, dl {
         }
       }
 
-      .navigation .navigation-link:first-child:before {
+      .navigation .navigation-link:first-child::before {
         content: "";
         margin: 0;
       }
@@ -347,17 +365,18 @@ p, ul, ol, dl {
 
   // CASE: wizard-based mast
   .mast-wizard {
-
     .page-header-sub {
       @extend %t-title4;
+
       color: $gray;
       font-weight: 300;
     }
 
     .page-header-super {
       @extend %t-title4;
+
       float: left;
-      width: flex-grid(12,12);
+      width: flex-grid(12, 12);
       margin-top: ($baseline/2);
       border-top: 1px solid $gray-l4;
       padding-top: ($baseline/2);
@@ -381,7 +400,9 @@ p, ul, ol, dl {
 
 .content {
   @include clearfix();
+
   @extend %t-copy-base;
+
   max-width: $fg-max-width;
   min-width: $fg-min-width;
   width: flex-grid(12);
@@ -396,6 +417,7 @@ p, ul, ol, dl {
 
     .title-sub {
       @extend %t-copy-sub1;
+
       display: block;
       margin: 0;
       color: $gray-l2;
@@ -403,6 +425,7 @@ p, ul, ol, dl {
 
     .title-1 {
       @extend %t-title3;
+
       margin: 0;
       padding: 0;
       font-weight: 600;
@@ -418,18 +441,19 @@ p, ul, ol, dl {
 // +Layout - Primary Content
 // ====================
 .content-primary {
-
   .title-1 {
     @extend %t-title3;
   }
 
   .title-2 {
     @extend %t-title4;
+
     margin: 0 0 ($baseline/2) 0;
   }
 
   .title-3 {
     @extend %t-title6;
+
     margin: 0 0 ($baseline/2) 0;
   }
 
@@ -444,8 +468,10 @@ p, ul, ol, dl {
 
     .tip {
       @extend %t-copy-sub2;
+
       @include text-align(right);
       @include float(right);
+
       width: flex-grid(7, 12);
       margin-top: ($baseline/2);
       color: $gray-d1;
@@ -456,7 +482,6 @@ p, ul, ol, dl {
 // +Layout - Supplemental Content
 // ====================
 .content-supplementary {
-
   > section {
     margin: 0 0 $baseline 0;
   }
@@ -471,6 +496,7 @@ p, ul, ol, dl {
 
 .inner-wrapper {
   @include clearfix();
+
   position: relative;
   max-width: 1280px;
   margin: auto;
@@ -482,12 +508,15 @@ p, ul, ol, dl {
 
 .main-column {
   clear: both;
+
   @include float(left);
+
   width: 70%;
 }
 
 .sidebar {
   @include float(right);
+
   width: 28%;
 }
 
@@ -505,7 +534,9 @@ p, ul, ol, dl {
 .new-subsection-item,
 .new-policy-item {
   @include grey-button();
+
   @extend %t-action5;
+
   margin: ($baseline/2);
   padding: 3px ($baseline/2) 4px ($baseline/2);
 
@@ -520,6 +551,7 @@ p, ul, ol, dl {
 .item-actions {
   position: absolute;
   top: 5px;
+
   @include right(5px);
 
   .edit-button,
@@ -544,19 +576,21 @@ hr.divide {
 
 .details {
   @extend %t-copy-sub1;
+
   display: none;
   margin-bottom: ($baseline*1.5);
 }
 
 .window {
-
   .window-contents {
     padding: 20px;
   }
 
   .header {
-    @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
+    @include linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
+
     @extend %t-title7;
+
     padding: 6px 14px;
     border-bottom: 1px solid $mediumGrey;
     border-radius: 2px 2px 0 0;
@@ -568,6 +602,7 @@ hr.divide {
   label {
     display: block;
     margin-bottom: 6px;
+
     @extend %t-strong;
 
     &.inline-label {
@@ -577,6 +612,7 @@ hr.divide {
     .description {
       @extend %t-copy-sub2;
       @extend %t-regular;
+
       display: block;
       font-style: italic;
       color: #999;
@@ -617,9 +653,10 @@ hr.divider {
 .nav-skip,
 .transcript-skip {
   @extend %t-action3;
+
   display: inline-block;
   position: absolute;
-  left: 0px;
+  left: 0;
   top: -($baseline*30);
   overflow: hidden;
   background: $white;
@@ -640,6 +677,7 @@ hr.divider {
 .content-modal {
   @include border-bottom-radius(2px);
   @include box-sizing(border-box);
+
   position: relative;
   display: none;
   width: 700px;
@@ -652,6 +690,7 @@ hr.divider {
   .action-modal-close {
     @include transition(top $tmg-f3 ease-in-out 0s);
     @include border-bottom-radius(3px);
+
     position: absolute;
     top: -3px;
     right: $baseline;
@@ -665,6 +704,7 @@ hr.divider {
 
     .icon {
       @extend %t-action1;
+
       color: $white;
     }
 
@@ -677,6 +717,7 @@ hr.divider {
 
   img {
     @include box-sizing(border-box);
+
     width: 100%;
     overflow-y: scroll;
     padding: ($baseline/10);
@@ -686,12 +727,14 @@ hr.divider {
   .title {
     @extend %t-title5;
     @extend %t-strong;
+
     margin: 0 0 ($baseline/2) 0;
     color: $gray-d3;
   }
 
   .description {
     @extend %t-copy-sub2;
+
     margin-top: ($baseline/2);
     color: $gray-l1;
   }

cms/static/sass/_build-v1.scss

@@ -60,7 +60,6 @@
 @import 'views/outline';
 @import 'views/settings';
 @import 'views/static-pages';
-@import 'views/unit';
 @import 'views/container';
 @import 'views/users';
 @import 'views/textbooks';
@@ -80,7 +79,6 @@
 @import 'xmodule/descriptors/css/module-styles.scss';
 @import 'xmodule/headings';
 @import 'elements/xmodules'; // styling for Studio-specific contexts
-
 @import 'developer'; // used for any developer-created scss that needs further polish/refactoring
 @import 'shame';     // used for any bad-form/orphaned scss
 
@@ -90,6 +88,5 @@
 
 // CAPA Problem Feedback
 @import 'edx-pattern-library-shims/buttons';
-
 @import 'edx-pattern-library-shims/base/variables';
 

cms/static/sass/_reset.scss

@@ -11,18 +11,83 @@
   text-rendering: optimizeLegibility;
 }
 
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, figcaption, figure,
-footer, header, menu, nav, section, summary,
-time, mark, audio, video {
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+figcaption,
+figure,
+footer,
+header,
+menu,
+nav,
+section,
+summary,
+time,
+mark,
+audio,
+video {
   margin: 0;
   padding: 0;
   border: 0;
@@ -32,25 +97,42 @@ time, mark, audio, video {
   vertical-align: baseline;
 }
 
-html,body {
+html,
+body {
   height: 100%;
 }
 
-article, aside, details, figcaption, figure,
-footer, header, menu, nav, section {
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+menu,
+nav,
+section {
   display: block;
 }
+
 body {
   line-height: 1;
 }
-ol, ul {
+
+ol,
+ul {
   list-style: none;
 }
-blockquote, q {
+
+blockquote,
+q {
   quotes: none;
 }
-blockquote:before, blockquote:after,
-q:before, q:after {
+
+blockquote::before,
+blockquote::after,
+q::before,
+q::after {
   content: '';
   content: none;
 }

cms/static/sass/_shame.scss

@@ -8,7 +8,6 @@
 
   // elements - authorship controls
   .wrapper-authorshiprights {
-
     .ui-toggle-control {
       // needed to override general a element transition properties - need to fix.
       transition-duration: $tmg-f2;
@@ -26,7 +25,8 @@
 // ====================
 
 // overriding outline styling for general drag and drop cases
-.outline-section, .outline-subsection {
+.outline-section,
+.outline-subsection {
 
   // STATE: is dragging
   &.is-dragging {
@@ -51,8 +51,7 @@ body b {
 
 // needed display property reinforcement since manual CSS abstraction happened
 #page-prompt {
-
-  .wrapper-prompt:before {
+  .wrapper-prompt::before {
     display: inline-block;
   }
 }
@@ -94,7 +93,7 @@ body b {
 }
 
 //  hides latex compiler button if settings mode is-active
-div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler{
+div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler {
   display: none;
 }
 
@@ -109,7 +108,6 @@ div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler{
 
 // JQuery UI tabs font-weight override
 .ui-tabs-nav {
-
   .ui-state-default {
     font-weight: normal;
   }

cms/static/sass/assets/_anims.scss

@@ -20,7 +20,7 @@
 // fade in keyframes
 @include keyframes(fadeIn) {
   0% {
-    opacity: 0.0;
+    opacity: 0;
   }
 
   50% {
@@ -28,7 +28,7 @@
   }
 
   100% {
-    opacity: 1.0;
+    opacity: 1;
   }
 }
 
@@ -42,7 +42,7 @@
 // fade out keyframes
 @include keyframes(fadeOut) {
   0% {
-    opacity: 1.0;
+    opacity: 1;
   }
 
   50% {
@@ -50,7 +50,7 @@
   }
 
   100% {
-    opacity: 0.0;
+    opacity: 0;
   }
 }
 
@@ -188,12 +188,14 @@
 // bounce in keyframes
 @include keyframes(bounceIn) {
   0% {
-    opacity: 0.0;
+    opacity: 0;
+
     @include transform(scale(0.3));
   }
 
   50% {
-    opacity: 1.0;
+    opacity: 1;
+
     @include transform(scale(1.05));
   }
 
@@ -216,12 +218,14 @@
   }
 
   50% {
-    opacity: 1.0;
+    opacity: 1;
+
     @include transform(scale(1.05));
   }
 
   100% {
-    opacity: 0.0;
+    opacity: 0;
+
     @include transform(scale(0.3));
   }
 }
@@ -235,12 +239,13 @@
 // ====================
 // flash keyframes
 @include keyframes(flash) {
-  0%, 100% {
-    opacity: 1.0;
+  0%,
+  100% {
+    opacity: 1;
   }
 
   50% {
-    opacity: 0.0;
+    opacity: 0;
   }
 }
 
@@ -253,12 +258,15 @@
 // ====================
 // flash double keyframes
 @include keyframes(flashDouble) {
-  0%, 50%, 100% {
-    opacity: 1.0;
+  0%,
+  50%,
+  100% {
+    opacity: 1;
   }
 
-  25%, 75% {
-      opacity: 0.0;
+  25%,
+  75% {
+    opacity: 0;
   }
 }
 
@@ -272,15 +280,15 @@
 // pulse keyframes
 @include keyframes(pulse) {
   0% {
-    opacity: 0.0;
+    opacity: 0;
   }
 
   50% {
-    opacity: 1.0;
+    opacity: 1;
   }
 
   100% {
-    opacity: 0.0;
+    opacity: 0;
   }
 }
 
@@ -294,7 +302,7 @@
 // was dropped keyframes
 @include keyframes(was-dropped) {
   0% {
-    opacity: 1.0;
+    opacity: 1;
   }
 
   50% {
@@ -302,7 +310,7 @@
   }
 
   100% {
-    opacity: 1.0;
+    opacity: 1;
   }
 }
 

cms/static/sass/bootstrap/_components.scss

@@ -45,6 +45,7 @@
 // Sock
 .wrapper-sock {
   @include clearfix();
+
   position: relative;
   margin: ($baseline*2) 0 0 0;
   border-top: 1px solid $gray-500;
@@ -60,6 +61,7 @@
   // sock - actions
   .list-cta {
     @extend %ui-depth1;
+
     position: absolute;
     top: -($baseline*0.75);
     width: 100%;
@@ -70,6 +72,7 @@
     .cta-show-sock {
       @extend %ui-btn-pill;
       @extend %t-action4;
+
       background: theme-color("light");
       padding: ($baseline/2) $baseline;
       color: theme-color("dark");
@@ -88,7 +91,9 @@
   // sock - additional help
   .sock {
     @include clearfix();
+
     @extend %t-copy-sub2;
+
     max-width: $studio-max-width;
     width: flex-grid(12);
     margin: 0 auto;
@@ -97,11 +102,9 @@
 
     // support body
     header {
-
       .title {
         @extend %t-title4;
       }
-
     }
 
     .list-actions {
@@ -109,15 +112,18 @@
     }
 
     // shared elements
-    .support, .feedback {
+    .support,
+    .feedback {
       .title {
         @extend %t-title6;
+
         color: $white;
         margin-bottom: ($baseline/2);
       }
 
       .copy {
         @extend %t-copy-sub2;
+
         margin: 0 0 $baseline 0;
       }
 
@@ -135,17 +141,15 @@
 
           .action {
             @extend %t-action4;
+
             display: block;
 
             .icon {
               @extend %t-icon4;
+
               vertical-align: middle;
               margin-right: $baseline/4;
             }
-
-            &:hover, &:active {
-
-            }
           }
 
           .tip {
@@ -162,22 +166,22 @@
 
     // studio support content
     .support {
-      width: flex-grid(8,12);
+      width: flex-grid(8, 12);
       float: left;
       margin-right: flex-gutter();
 
       .action-item {
-        width: flexgrid(4,8);
+        width: flexgrid(4, 8);
       }
     }
 
     // studio feedback content
     .feedback {
-      width: flex-grid(4,12);
+      width: flex-grid(4, 12);
       float: left;
 
       .action-item {
-        width: flexgrid(4,4);
+        width: flexgrid(4, 4);
       }
     }
   }

cms/static/sass/bootstrap/_footer.scss

@@ -14,7 +14,9 @@
 
   footer.primary {
     @extend %t-copy-sub2;
+
     @include clearfix();
+
     max-width: $studio-max-width;
     width: flex-grid(12);
     margin: 0 auto;
@@ -59,10 +61,12 @@
 
     .footer-content-secondary {
       @include clearfix();
+
       margin-top: $baseline;
     }
 
-    .footer-about-copyright, .footer-about-openedx {
+    .footer-about-copyright,
+    .footer-about-openedx {
       display: inline-block;
       vertical-align: middle;
     }

cms/static/sass/bootstrap/_header.scss

@@ -11,6 +11,7 @@
 
 .wrapper-header {
   @extend %ui-depth3;
+
   position: relative;
   width: 100%;
   box-shadow: 0 1px 2px 0 $shadow-l1;
@@ -20,6 +21,7 @@
 
   header.primary {
     @include clearfix();
+
     max-width: $studio-max-width;
     width: flex-grid(12);
     margin: 0 auto;
@@ -28,22 +30,27 @@
   // ====================
 
   // basic layout
-  .wrapper-l, .wrapper-r {
+  .wrapper-l,
+  .wrapper-r {
     background: $white;
   }
 
   .wrapper-l {
     float: left;
-    width: flex-grid(7,12);
+    width: flex-grid(7, 12);
   }
 
   .wrapper-r {
     float: right;
-    width: flex-grid(4,12);
+    width: flex-grid(4, 12);
     text-align: right;
   }
 
-  .branding, .info-course, .nav-course, .nav-account, .nav-pitch {
+  .branding,
+  .info-course,
+  .nav-course,
+  .nav-account,
+  .nav-pitch {
     display: inline-block;
     vertical-align: middle;
     margin-bottom: 0;
@@ -66,10 +73,10 @@
 
   // basic layout - nav items
   nav {
-
     > ol > .nav-item {
       @extend %t-action3;
       @extend %t-strong;
+
       display: inline-block;
       vertical-align: middle;
 
@@ -89,7 +96,6 @@
 
   // basic layout - dropdowns
   .nav-dd {
-
     .title {
       padding: $baseline/2 $baseline/2;
       font-size: $font-size-lg;
@@ -99,14 +105,12 @@
       }
 
       &:hover {
-
         .fa-caret-down {
-          opacity: 1.0;
+          opacity: 1;
         }
       }
 
       .nav-sub .nav-item {
-
         .icon {
           display: inline-block;
           vertical-align: middle;
@@ -140,7 +144,8 @@
     border-right: 1px solid $gray-300;
     padding: ($baseline*0.75) flex-gutter() ($baseline*0.75) 0;
 
-    .course-org, .course-number {
+    .course-org,
+    .course-number {
       font-size: $font-size-sm;
       line-height: 12px;
       display: inline-block;
@@ -149,7 +154,7 @@
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
-      opacity: 1.0;
+      opacity: 1;
       color: theme-color("primary");
     }
 
@@ -160,6 +165,7 @@
     .course-title {
       @extend %t-action2;
       @extend %t-strong;
+
       display: block;
       width: 100%;
       overflow: hidden;
@@ -197,14 +203,12 @@
     }
 
     .nav-account-help {
-
       .wrapper-nav-sub {
         width: ($baseline*10);
       }
     }
 
     .nav-account-user {
-
       .title {
         max-width: ($baseline*6.5);
 
@@ -220,6 +224,7 @@
 
     .settings-language-form {
       margin-top: 4px;
+
       .language-selector {
         width: 130px;
       }
@@ -243,13 +248,12 @@
 
 // CASE: user signed in
 .is-signedin {
-
   .wrapper-l {
-    width: flex-grid(8,12);
+    width: flex-grid(8, 12);
   }
 
   .wrapper-r {
-    width: flex-grid(4,12);
+    width: flex-grid(4, 12);
   }
 
   .branding {
@@ -265,15 +269,13 @@
 
 // CASE: in course {
 .is-signedin.course {
-
   .wrapper-header {
-
     .wrapper-l {
-      width: flex-grid(9,12);
+      width: flex-grid(9, 12);
     }
 
     .wrapper-r {
-      width: flex-grid(3,12);
+      width: flex-grid(3, 12);
     }
 
     .branding {
@@ -296,15 +298,13 @@
 // CASE: user not signed in
 .not-signedin,
 .view-util {
-
   .wrapper-header {
-
     .wrapper-l {
-      width: flex-grid(2,12);
+      width: flex-grid(2, 12);
     }
 
     .wrapper-r {
-      width: flex-grid(10,12);
+      width: flex-grid(10, 12);
     }
 
     .branding {
@@ -337,10 +337,9 @@
 
 // dropdown
 .nav-dd {
-
   .title {
-
-    .label, .fa-caret-down {
+    .label,
+    .fa-caret-down {
       display: inline-block;
       vertical-align: middle;
     }
@@ -353,7 +352,6 @@
 
     // dropped down state
     &.is-selected {
-
       .ui-toggle-dd {
         transform: rotate(-180deg);
         transform-origin: 50% 50%;
@@ -364,10 +362,6 @@
   .nav-item {
     position: relative;
 
-    &:hover {
-
-    }
-
     &.nav-course-settings {
       .wrapper-nav-sub {
         width: ($baseline*9);
@@ -378,7 +372,7 @@
   .wrapper-nav-sub {
     position: absolute;
     top: ($baseline*2.5);
-    opacity: 0.0;
+    opacity: 0;
     pointer-events: none;
     width: ($baseline*8);
     overflow: hidden;
@@ -387,7 +381,7 @@
 
     // dropped down state
     &.is-shown {
-      opacity: 1.0;
+      opacity: 1;
       pointer-events: auto;
       overflow: visible;
       height: auto;
@@ -403,7 +397,8 @@
     padding: ($baseline/2) ($baseline*0.75);
     background: $white;
 
-    &:after, &:before {
+    &::after,
+    &::before {
       bottom: 100%;
       border: solid transparent;
       content: " ";
@@ -414,13 +409,13 @@
     }
 
     // ui triangle/nub
-    &:after {
+    &::after {
       border-color: rgba(255, 255, 255, 0);
       border-bottom-color: $white;
       border-width: 10px;
     }
 
-    &:before {
+    &::before {
       border-color: rgba(178, 178, 178, 0);
       border-bottom-color: $gray-500;
       border-width: 11px;
@@ -429,6 +424,7 @@
     .nav-item {
       @extend %t-action3;
       @extend %t-regular;
+
       display: block;
       margin: 0 0 ($baseline/4) 0;
       border-bottom: 1px solid $gray-300;
@@ -450,7 +446,8 @@
         font-size: $font-size-lg;
         font-weight: 600;
 
-        &:hover, &:active {
+        &:hover,
+        &:active {
           color: theme-color("primary");
         }
       }
@@ -459,7 +456,6 @@
 
   // CASE: left-hand side arrow/dd
   &.ui-left {
-
     .wrapper-nav-sub {
       left: 0;
     }
@@ -468,12 +464,12 @@
       text-align: left;
 
       // ui triangle/nub
-      &:after {
+      &::after {
         left: $baseline;
         margin-left: -10px;
       }
 
-      &:before {
+      &::before {
         left: $baseline;
         margin-left: -11px;
       }
@@ -482,7 +478,6 @@
 
   // CASE: right-hand side arrow/dd
   &.ui-right {
-
     > ol {
       margin-bottom: 0;
     }
@@ -495,12 +490,12 @@
     .nav-sub {
 
       // ui triangle/nub
-      &:after {
+      &::after {
         right: $baseline;
         margin-right: -10px;
       }
 
-      &:before {
+      &::before {
         right: $baseline;
         margin-right: -11px;
       }

cms/static/sass/bootstrap/_layouts.scss

@@ -13,7 +13,8 @@
     padding-bottom: 0;
 
     .nav-item {
-      &.active, &:hover{
+      &.active,
+      &:hover {
         .nav-link {
           border-bottom-color: theme-color("primary");
           color: theme-color("primary");
@@ -57,14 +58,6 @@
 // studio - elements - layouts
 // ====================
 
-// layout - basic
-// the wrapper around the viewable page area, excluding modal and other extra-view content
-.wrapper-view {
-
-}
-
-// ====================
-
 // layout - basic page header
 .wrapper-mast {
   margin: ($baseline*1.5) 0 0 0;
@@ -74,6 +67,7 @@
   .mast,
   .metadata {
     @include clearfix();
+
     position: relative;
     max-width: $studio-max-width;
     width: flex-grid(12);
@@ -102,7 +96,7 @@
 
       .page-header {
         float: left;
-        width: flex-grid(6,12);
+        width: flex-grid(6, 12);
         margin-right: flex-gutter();
       }
 
@@ -110,7 +104,7 @@
         position: relative;
         bottom: -($baseline*0.75);
         float: right;
-        width: flex-grid(6,12);
+        width: flex-grid(6, 12);
         text-align: right;
 
         .nav-item {
@@ -150,7 +144,6 @@
 
     // layout with actions
     &.has-subtitle {
-
       .nav-actions {
         bottom: -($baseline*1.5);
       }
@@ -158,13 +151,13 @@
 
     // layout with breadcrumb navigation
     &.has-navigation {
-
       .nav-actions {
         bottom: -($baseline*1.5);
       }
 
       .navigation-item {
         @extend %cont-truncated;
+
         display: inline-block;
         vertical-align: bottom; // correct for extra padding in FF
         max-width: 250px;
@@ -172,10 +165,11 @@
 
         &.navigation-current {
           @extend %ui-disabled;
+
           color: color("gray");
           max-width: 250px;
 
-          &:before {
+          &::before {
             color: color("gray");
           }
         }
@@ -185,7 +179,7 @@
         color: theme-color("primary");
       }
 
-      .navigation-item:before {
+      .navigation-item::before {
         content: " / ";
         margin: ($baseline/4);
         color: color("gray");
@@ -195,7 +189,7 @@
         }
       }
 
-      .navigation .navigation-item:first-child:before {
+      .navigation .navigation-item:first-child::before {
         content: "";
         margin: 0;
       }
@@ -204,28 +198,24 @@
 
   // CASE: wizard-based mast
   .mast-wizard {
-
     .page-header-sub {
       @extend %t-title4;
+
       color: color("gray");
       font-weight: 300;
     }
 
     .page-header-super {
       @extend %t-title4;
+
       float: left;
-      width: flex-grid(12,12);
+      width: flex-grid(12, 12);
       margin-top: ($baseline/2);
       border-top: 1px solid $border-color;
       padding-top: ($baseline/2);
       font-weight: 600;
     }
   }
-
-  // page metadata/action bar
-  .metadata {
-
-  }
 }
 
 // layout - basic page content
@@ -258,6 +248,7 @@
 
     .title-sub {
       @extend %t-copy-sub1;
+
       display: block;
       margin: 0;
       color: $gray-500;
@@ -266,6 +257,7 @@
     .title-1 {
       @extend %t-title3;
       @extend %t-strong;
+
       margin: 0;
       padding: 0;
       color: theme-color("primary");
@@ -286,11 +278,13 @@
 
   .title-2 {
     @extend %t-title4;
+
     margin: 0 0 ($baseline/2) 0;
   }
 
   .title-3 {
     @extend %t-title6;
+
     margin: 0 0 ($baseline/2) 0;
   }
 
@@ -305,6 +299,7 @@
 
     .tip {
       @extend %t-copy-sub2;
+
       width: flex-grid(7, 12);
       float: right;
       margin-top: ($baseline/2);
@@ -316,7 +311,6 @@
 
 // layout - supplemental content
 .content-supplementary {
-
   > section {
     margin: 0 0 $baseline 0;
   }
@@ -332,6 +326,7 @@
 
 .inner-wrapper {
   @include clearfix();
+
   position: relative;
   max-width: 1280px;
   margin: auto;

cms/static/sass/bootstrap/_mixins.scss

@@ -34,14 +34,14 @@
 
 // +Font Sizing - Mixin
 // ====================
-@mixin font-size($sizeValue: 16){
+@mixin font-size($sizeValue: 16) {
   font-size: $sizeValue + px;
   font-size: ($sizeValue/10) + rem;
 }
 
 // +Line Height - Mixin
 // ====================
-@mixin line-height($fontSize: auto){
+@mixin line-height($fontSize: auto) {
   line-height: ($fontSize*1.48) + px;
   line-height: (($fontSize/10)*1.48) + rem;
 }
@@ -65,9 +65,11 @@
   :-moz-placeholder {
     color: $color;
   }
+
   ::-webkit-input-placeholder {
     color: $color;
   }
+
   :-ms-input-placeholder {
     color: $color;
   }
@@ -118,6 +120,7 @@
 // used for page/view-level wrappers (for centering/grids)
 %ui-wrapper {
   @include clearfix();
+
   width: 100%;
 }
 
@@ -135,7 +138,6 @@
 // ====================
 // extends - UI - utility - first child clearing
 %wipe-first-child {
-
   &:first-child {
     margin-top: 0;
     border-top: none;
@@ -145,7 +147,6 @@
 
 // extends - UI - utility - last child clearing
 %wipe-last-child {
-
   &:last-child {
     margin-bottom: 0;
     border-bottom: none;

cms/static/sass/bootstrap/_navigation.scss

@@ -49,7 +49,8 @@
       }
 
       @include media-breakpoint-down(md) {
-        &.nav-item-open-collapsed, &.nav-item-open-collapsed-only {
+        &.nav-item-open-collapsed,
+        &.nav-item-open-collapsed-only {
           display: initial;
           margin: $baseline/4 $baseline/2;
 
@@ -63,13 +64,14 @@
             }
           }
         }
+
         &.nav-item-hidden-collapsed {
           display: none;
         }
       }
     }
 
-    .btn-shopping-cart{
+    .btn-shopping-cart {
       padding-top: 0.7rem; // $btn-padding-y-lg once themed
     }
 

cms/static/sass/bootstrap/_variables.scss

@@ -39,14 +39,14 @@ $white-opacity-60: rgba(255, 255, 255, 0.6) !default;
 $white-opacity-70: rgba(255, 255, 255, 0.7) !default;
 $white-opacity-80: rgba(255, 255, 255, 0.8) !default;
 
-$black:     rgb(0,0,0) !default;
+$black:     rgb(0, 0, 0) !default;
 $black-t0:  rgba($black, 0.125) !default;
 $black-t1:  rgba($black, 0.25) !default;
 $black-t2:  rgba($black, 0.5) !default;
 $black-t3:  rgba($black, 0.75) !default;
 
-$light-grey-transparent: rgba(200,200,200, 0) !default;
-$light-grey-solid: rgba(200,200,200, 1) !default;
+$light-grey-transparent: rgba(200, 200, 200, 0) !default;
+$light-grey-solid: rgba(200, 200, 200, 1) !default;
 
 $header-bg: $white !default;
 $footer-bg: $white !default;
@@ -66,6 +66,6 @@ $font-bold: 700 !default;
 $studio-dark-icon-color: $white !default;
 $studio-dark-icon-background-color: palette(grayscale, black) !default;
 
-$site-status-color: rgb(182,37,103) !default;
+$site-status-color: rgb(182, 37, 103) !default;
 
-$shadow-l1: rgba(0,0,0,0.1) !default;
+$shadow-l1: rgba(0, 0, 0, 0.1) !default;

cms/static/sass/contexts/_ie.scss

@@ -6,7 +6,6 @@
 
   // CASE: IE9 doesn't support css animations and negative positioning
   .wrapper-notification {
-
     &.is-shown {
       bottom: 0;
     }

cms/static/sass/elements-v2/_controls.scss

@@ -3,6 +3,7 @@
 %ui-btn-dd {
   @extend %ui-btn;
   @extend %ui-btn-pill;
+
   padding:($baseline/4) ($baseline/2);
   border-width: 1px;
   border-style: solid;
@@ -11,6 +12,7 @@
 
   &:hover, &:active {
     @extend %ui-fake-link;
+
     border-color: $gray-l3;
   }
 
@@ -24,6 +26,7 @@
 // ====================
 %ui-btn-dd-nav-primary {
   @extend %ui-btn-dd;
+
   background: $white;
   border-color: $white;
   color: $gray-d1;

cms/static/sass/elements-v2/_header.scss

@@ -13,6 +13,7 @@
     @include clearfix();
     @include grid-container();
     @include float(none);
+
     box-sizing: border-box;
     max-width: $fg-max-width;
     min-width: $fg-min-width;
@@ -68,11 +69,14 @@
 
       .title{
         @extend %ui-btn-dd-nav-primary;
+
         @include transition(all $tmg-f2 ease-in-out 0s);
+
         line-height: 16px;
         margin-top: 6px;
         font-size: font-size(base);
         font-weight: font-weight(semi-bold);
+
         .nav-sub .nav-item {
           .icon {
             display: inline-block;
@@ -121,14 +125,12 @@
     }
 
     .nav-account-help {
-
       .wrapper-nav-sub {
         width: ($baseline*10);
       }
     }
 
     .nav-account-user {
-
       .title {
         max-width: ($baseline*6.5);
         display: inline-block;
@@ -141,6 +143,7 @@
 
     .settings-language-form {
       margin-top: 4px;
+
       .language-selector {
         width: 130px;
       }
@@ -151,13 +154,12 @@
 
 // CASE: user signed in
 .is-signedin {
-
   .wrapper-l {
-    width: flex-grid(8,12);
+    width: flex-grid(8, 12);
   }
 
   .wrapper-r {
-    width: flex-grid(4,12);
+    width: flex-grid(4, 12);
   }
 
   .branding {

cms/static/sass/elements-v2/_navigation.scss

@@ -2,6 +2,7 @@
 .nav-skip,
 .transcript-skip {
   @include left(0);
+
   font-size: font-size(small);
   display: inline-block;
   position: absolute;

cms/static/sass/elements-v2/_sock.scss

@@ -3,6 +3,7 @@
 
 .wrapper-sock {
   @include clearfix();
+
   position: relative;
   margin: ($baseline*2) 0 0 0;
   border-top: 1px solid $gray-l4;
@@ -10,6 +11,7 @@
 
   .wrapper-inner {
     @include linear-gradient($gray-d3 0%, $gray-d3 98%, $black 100%);
+
     display: none;
     width: 100% !important;
     border-bottom: 1px solid $white;
@@ -19,6 +21,7 @@
   // sock - actions
   .list-cta {
     @extend %ui-depth1;
+
     position: absolute;
     top: -($baseline*0.75);
     width: 100%;
@@ -27,6 +30,7 @@
 
     .cta-show-sock {
       @extend %ui-btn-pill;
+
       background: $uxpl-grayscale-x-back;
       font-size: font-size(x-small);
       padding: ($baseline/2) $baseline;
@@ -47,6 +51,7 @@
   .sock {
     @include clearfix();
     @include span(12);
+
     max-width: $fg-max-width;
     min-width: $fg-min-width;
     margin: 0 auto;
@@ -73,6 +78,7 @@
         .action-item {
           @include float(left);
           @include margin-right($baseline/2);
+
           margin-bottom: ($baseline/2);
 
           &:last-child {
@@ -84,6 +90,7 @@
 
             .icon {
               vertical-align: middle;
+
               @include margin-right($baseline/4);
             }
           }
@@ -104,10 +111,11 @@
     .support {
       @include float(left);
       @include span(8);
+
       margin-right: flex-gutter();
 
       .action-item {
-        width: flexgrid(4,8);
+        width: flexgrid(4, 8);
       }
     }
 
@@ -115,8 +123,9 @@
     .feedback {
       @include float(left);
       @include span(4);
+
       .action-item {
-        width: flexgrid(4,4);
+        width: flexgrid(4, 4);
       }
     }
   }

cms/static/sass/elements-v2/_tooltip.scss

 .tooltip {
   @include transition(opacity $tmg-f3 ease-out 0s);
+
   position: absolute;
   top: 0;
   left: 0;
@@ -12,7 +13,7 @@
   pointer-events: none;
   opacity: 0;
 
-  &:after {
+  &::after {
     font-size: font-size(x-large);
     content: '▾';
     display: block;

cms/static/sass/elements/_codemirror-overrides.scss

@@ -4,7 +4,6 @@
  */
 
 .CodeMirror {
-    
   .CodeMirror-linenumber.CodeMirror-gutter-elt {
     color: $gray-d3 !important;
   }

cms/static/sass/elements/_controls.scss

@@ -22,6 +22,7 @@
 
   &.is-disabled {
     @extend %ui-disabled;
+
     -webkit-filter: grayscale(65%);
     opacity: 0.65;
   }
@@ -31,6 +32,7 @@
 // ====================
 %sizing {
   @extend %t-action4;
+
   padding: ($baseline/4) ($baseline/2) ($baseline/3) ($baseline/2);
 }
 
@@ -40,20 +42,24 @@
 // gray primary button
 %btn-primary-gray {
   @extend %ui-btn-primary;
+
   background: $gray-l1;
   border-color: $gray-l2;
   color: $white;
 
-  &:hover, &:active {
+  &:hover,
+  &:active {
     border-color: $gray-l1;
     background: $gray;
   }
 
-  &.current, &.active {
+  &.current,
+  &.active {
     background: $gray-d1;
     color: $gray-l1;
 
-    &:hover, &:active {
+    &:hover,
+    &:active {
       background: $gray-d1;
     }
   }
@@ -62,21 +68,25 @@
 // blue primary button
 %btn-primary-blue {
   @extend %ui-btn-primary;
+
   background: $uxpl-blue-base;
   border-color: $uxpl-blue-base;
   color: $white;
 
-  &:hover, &:active {
+  &:hover,
+  &:active {
     background: $uxpl-blue-hover-active;
     border-color: $uxpl-blue-hover-active;
   }
 
-  &.current, &.active {
+  &.current,
+  &.active {
     background: $uxpl-blue-hover-active;
     border-color: $uxpl-blue-hover-active;
     color: $blue-l4;
 
-    &:hover, &:active {
+    &:hover,
+    &:active {
       background: $uxpl-blue-hover-active;
     }
   }
@@ -85,21 +95,25 @@
 // green primary button
 %btn-primary-green {
   @extend %ui-btn-primary;
+
   background: $uxpl-green-base;
   border-color: $uxpl-green-base;
   color: $white;
 
-  &:hover, &:active {
+  &:hover,
+  &:active {
     background: $uxpl-green-dark-hover-active;
     border-color: $uxpl-green-dark-hover-active;
   }
 
-  &.current, &.active {
+  &.current,
+  &.active {
     background: $uxpl-green-dark-hover-active;
     color: $white;
     border-color: $uxpl-green-dark-hover-active;
 
-    &:hover, &:active {
+    &:hover,
+    &:active {
       background: $uxpl-green-dark-hover-active;
     }
   }
@@ -110,19 +124,23 @@
 // gray secondary button
 %btn-secondary-gray {
   @extend %ui-btn-secondary;
+
   border-color: $gray-l3;
   color: $gray-d1;
 
-  &:hover, &:active {
+  &:hover,
+  &:active {
     background: $gray-l3;
     color: $gray-d2;
   }
 
-  &.current, &.active {
+  &.current,
+  &.active {
     background: $gray-d2;
     color: $gray-l5;
 
-    &:hover, &:active {
+    &:hover,
+    &:active {
       background: $gray-d2;
     }
   }
@@ -131,15 +149,18 @@
 // blue secondary button
 %btn-secondary-blue {
   @extend %ui-btn-secondary;
+
   border-color: $blue-l3;
   color: $uxpl-blue-base;
 
-  &:hover, &:active {
+  &:hover,
+  &:active {
     background: $blue-l4;
     color: $uxpl-blue-hover-active;
   }
 
-  &.current, &.active {
+  &.current,
+  &.active {
     border-color: $blue-l3;
     background: $blue-l3;
     color: $uxpl-blue-base;
@@ -149,19 +170,23 @@
 // white secondary button
 %btn-secondary-white {
   @extend %ui-btn-secondary;
+
   border-color: $white-t2;
   color: $white-t3;
 
-  &:hover, &:active {
+  &:hover,
+  &:active {
     border-color: $white;
     color: $white;
   }
 
-  &.current, &.active {
+  &.current,
+  &.active {
     background: $gray-d2;
     color: $gray-l5;
 
-    &:hover, &:active {
+    &:hover,
+    &:active {
       background: $gray-d2;
     }
   }
@@ -170,19 +195,23 @@
 // green secondary button
 %btn-secondary-green {
   @extend %ui-btn-secondary;
+
   border-color: $green-l4;
   color: $green-l2;
 
-  &:hover, &:active {
+  &:hover,
+  &:active {
     background: $green-l4;
     color: $green-s1;
   }
 
-  &.current, &.active {
+  &.current,
+  &.active {
     background: $green-s1;
     color: $green-l4;
 
-    &:hover, &:active {
+    &:hover,
+    &:active {
       background: $green-s1;
     }
   }
@@ -195,11 +224,10 @@
   box-shadow: inset 0 1px 0 0 $white;
   color: $gray-d3;
   display: inline-block;
-    font-size: inherit;
   font-weight: bold;
   background-color: $btn-lms-background;
-    background-image: -webkit-linear-gradient($btn-lms-background,$btn-lms-gradient);
-    background-image: linear-gradient($btn-lms-background,$btn-lms-gradient);
+  background-image: -webkit-linear-gradient($btn-lms-background, $btn-lms-gradient);
+  background-image: linear-gradient($btn-lms-background, $btn-lms-gradient);
   padding: 7px 18px;
   text-decoration: none;
   text-shadow: 0 1px 0 $btn-lms-shadow;
@@ -211,22 +239,22 @@
     box-shadow: inset 0 1px 0 0 $btn-lms-shadow-hover;
     cursor: pointer;
     background-color: $btn-lms-background-hover;
-        background-image: -webkit-linear-gradient($btn-lms-background-hover,$btn-lms-gradient-hover);
-        background-image: linear-gradient($btn-lms-background-hover,$btn-lms-gradient-hover);
+    background-image: -webkit-linear-gradient($btn-lms-background-hover, $btn-lms-gradient-hover);
+    background-image: linear-gradient($btn-lms-background-hover, $btn-lms-gradient-hover);
   }
 
   &:active {
     border: 1px solid $btn-lms-border;
-        box-shadow: inset 0 0 8px 4px $btn-lms-shadow-active,inset 0 0 8px 4px $btn-lms-shadow-active;
+    box-shadow: inset 0 0 8px 4px $btn-lms-shadow-active, inset 0 0 8px 4px $btn-lms-shadow-active;
   }
 }
 
 // +Button Element
 // ====================
 .button {
-
   .icon {
     @include margin-right($baseline/4);
+
     display: inline-block;
     vertical-align: middle;
   }
@@ -237,18 +265,23 @@
 %ui-btn-dd {
   @extend %ui-btn;
   @extend %ui-btn-pill;
-  padding:($baseline/4) ($baseline/2);
+
+  padding: ($baseline/4) ($baseline/2);
   border-width: 1px;
   border-style: solid;
   border-color: transparent;
   text-align: center;
 
-  &:hover, &:active {
+  &:hover,
+  &:active {
     @extend %ui-fake-link;
+
     border-color: $gray-l3;
   }
 
-  &.current, &.active, &.is-selected {
+  &.current,
+  &.active,
+  &.is-selected {
     box-shadow: inset 0 1px 2px 1px $shadow-l1;
     border-color: $gray-l3;
   }
@@ -258,20 +291,24 @@
 // ====================
 %ui-btn-dd-nav-primary {
   @extend %ui-btn-dd;
+
   background: $white;
   border-color: $white;
   color: $gray-d1;
 
-  &:hover, &:active {
+  &:hover,
+  &:active {
     background: $white;
     color: $uxpl-blue-hover-active;
   }
 
-  &.current, &.active {
+  &.current,
+  &.active {
     background: $white;
     color: $gray-d4;
 
-    &:hover, &:active {
+    &:hover,
+    &:active {
       color: $uxpl-blue-hover-active;
     }
   }
@@ -291,6 +328,7 @@
 
     .action-button {
       @include transition(all $tmg-f3 linear 0s);
+
       display: block;
       border-radius: 3px;
       padding: 3px ($baseline/2);
@@ -366,6 +404,7 @@
 // TODO: this should be transitioned away from in favor of %ui-expand-collapse
 %expand-collapse {
   @include transition(all $tmg-f2 linear 0s);
+
   display: inline-block;
   color: $gray-l2;
   vertical-align: top;
@@ -377,7 +416,9 @@
   .ui-toggle-expansion {
     @include transition(all $tmg-f2 ease-in-out 0s);
     @include margin-right($baseline/4);
+
     @extend %t-action1;
+
     display: inline-block;
     color: $gray-l3;
     vertical-align: middle;
@@ -399,6 +440,7 @@
   // CASE: default (is expanded)
   .ui-toggle-expansion {
     @include transition(all $tmg-f2 ease-in-out 0s);
+
     display: inline-block;
     vertical-align: middle;
 
@@ -407,17 +449,17 @@
     }
 
     // STATE: hover/active
-    &:hover, &:active {
+    &:hover,
+    &:active {
       @extend %ui-fake-link;
+
       color: $uxpl-blue-base;
     }
   }
 
   // CASE: is collapsed
   &.is-collapsed {
-
     .ui-toggle-expansion {
-
       .icon {
         @include transform(rotate(-90deg));
         @include transform-origin(50% 50%);
@@ -431,8 +473,8 @@
 
 // UI: drag handle
 .drag-handle {
-
-  &:hover, &:focus {
+  &:hover,
+  &:focus {
     cursor: move;
   }
 }
@@ -440,18 +482,22 @@
 // UI: is draggable
 .is-draggable {
   @include transition(border-color $tmg-f2 ease-in-out 0, box-shadow $tmg-f2 ease-in-out 0, margin $tmg-f2 ease-in-out 0);
+
   position: relative;
 
   .draggable-drop-indicator {
     @extend %ui-depth3;
+
     @include transition(opacity $tmg-f2 linear 0s);
     @include size(100%, auto);
+
     position: absolute;
     border-top: 1px solid $blue-l1;
-    opacity: 0.0;
+    opacity: 0;
 
     .fa-caret-right {
       @extend %t-icon5;
+
       position: absolute;
       top: -12px;
       left: -($baseline/4);
@@ -471,6 +517,7 @@
 // UI: is dragging - drag state
 .is-dragging {
   @extend %ui-depth4;
+
   left: -($baseline/4);
   box-shadow: 0 1px 2px 0 $shadow-d1;
   cursor: move;
@@ -480,7 +527,7 @@
   // UI: condition - valid drop
   &.valid-drop {
     border-color: $ui-action-primary-color-focus;
-    box-shadow: 0 1px 2px 0 rgba($ui-action-primary-color-focus, 0.50);
+    box-shadow: 0 1px 2px 0 rgba($ui-action-primary-color-focus, 0.5);
   }
 }
 
@@ -491,12 +538,11 @@
 
 // UI: drag target
 .drop-target {
-
   &.drop-target-before {
     margin-top: ($baseline*1.5);
 
     > .draggable-drop-indicator-before {
-      opacity: 1.0;
+      opacity: 1;
     }
   }
 
@@ -504,7 +550,7 @@
     margin-bottom: ($baseline*1.5);
 
     > .draggable-drop-indicator-after {
-      opacity: 1.0;
+      opacity: 1;
     }
   }
 }
@@ -512,6 +558,7 @@
 // UI: drop state - was dropped
 .was-dropped {
   @include animation(was-dropped $tmg-avg ease-in-out 1);
+
   border-color: $ui-action-primary-color-focus;
-  box-shadow: 0 1px 2px 0 rgba($ui-action-primary-color-focus, 0.50);
+  box-shadow: 0 1px 2px 0 rgba($ui-action-primary-color-focus, 0.5);
 }

cms/static/sass/elements/_creative-commons.scss

@@ -9,18 +9,19 @@
   font-style: normal;
 }
 
-[class^="icon-cc"]:before, [class*=" icon-cc"]:before {
+[class^="icon-cc"]::before,
+[class*=" icon-cc"]::before {
   font-family: "CreativeCommons";
 }
 
-.icon-cc:before { content: '\e800'; } /* '' */
-.icon-cc-by:before { content: '\e801'; } /* '' */
-.icon-cc-nc:before { content: '\e802'; } /* '' */
-.icon-cc-nc-eu:before { content: '\e803'; } /* '' */
-.icon-cc-nc-jp:before { content: '\e804'; } /* '' */
-.icon-cc-sa:before { content: '\e805'; } /* '' */
-.icon-cc-nd:before { content: '\e806'; } /* '' */
-.icon-cc-pd:before { content: '\e807'; } /* '' */
-.icon-cc-zero:before { content: '\e808'; } /* '' */
-.icon-cc-share:before { content: '\e809'; } /* '' */
-.icon-cc-remix:before { content: '\e80a'; } /* '' */
+.icon-cc::before { content: '\e800'; } /* '' */
+.icon-cc-by::before { content: '\e801'; } /* '' */
+.icon-cc-nc::before { content: '\e802'; } /* '' */
+.icon-cc-nc-eu::before { content: '\e803'; } /* '' */
+.icon-cc-nc-jp::before { content: '\e804'; } /* '' */
+.icon-cc-sa::before { content: '\e805'; } /* '' */
+.icon-cc-nd::before { content: '\e806'; } /* '' */
+.icon-cc-pd::before { content: '\e807'; } /* '' */
+.icon-cc-zero::before { content: '\e808'; } /* '' */
+.icon-cc-share::before { content: '\e809'; } /* '' */
+.icon-cc-remix::before { content: '\e80a'; } /* '' */

cms/static/sass/elements/_footer.scss

@@ -9,7 +9,9 @@
 
   footer.primary {
     @extend %t-copy-sub2;
+
     @include clearfix();
+
     max-width: $fg-max-width;
     min-width: $fg-min-width;
     width: flex-grid(12);
@@ -22,6 +24,7 @@
 
     .colophon {
       width: flex-grid(4, 12);
+
       @include float(left);
       @include margin-right(flex-gutter(2));
     }
@@ -29,18 +32,21 @@
     a {
       color: $uxpl-blue-base;
 
-      &:hover, &:active {
+      &:hover,
+      &:active {
         color: $uxpl-blue-hover-active;
       }
     }
 
     .nav-peripheral {
       width: flex-grid(6, 12);
+
       @include float(right);
       @include text-align(right);
 
       .nav-item {
         display: inline-block;
+
         @include margin-right($baseline/4);
 
         &:last-child {
@@ -54,9 +60,12 @@
 
           .icon {
             @include transition(top $tmg-f2 ease-in-out $tmg-f2);
+
             @extend %t-action3;
+
             display: inline-block;
             vertical-align: middle;
+
             @include margin-right($baseline/4);
           }
         }
@@ -65,10 +74,12 @@
 
     .footer-content-secondary {
       @include clearfix();
+
       margin-top: $baseline;
     }
 
-    .footer-about-copyright, .footer-about-openedx {
+    .footer-about-copyright,
+    .footer-about-openedx {
       display: inline-block;
       vertical-align: middle;
     }
@@ -76,6 +87,7 @@
     // platform trademarks
     .footer-about-copyright {
       width: flex-grid(4, 12);
+
       @include float(left);
       @include margin-right(flex-gutter(2));
     }

cms/static/sass/elements/_forms.scss

@@ -17,7 +17,6 @@
 // --------------------
 // UI: checkbox/radio inputs
 %input-tickable {
-
   ~ label {
     color: $color-copy-base;
   }
@@ -25,6 +24,7 @@
   // STATE: checked/selected
   &:checked ~ label {
     @extend %t-strong;
+
     color: $ui-action-primary-color-focus;
   }
 }
@@ -35,8 +35,10 @@ input[type="password"],
 textarea.text {
   @include box-sizing(border-box);
   @include linear-gradient($gray-l5, $white);
+
   @extend %t-copy-sub2;
   @extend %t-demi-strong;
+
   padding: 6px 8px 8px;
   border: 1px solid $gray-l2;
   border-radius: 2px;
@@ -54,6 +56,7 @@ textarea.text {
 
   &:focus {
     @include linear-gradient($paleYellow, tint($paleYellow, 90%));
+
     outline: 0;
   }
 }
@@ -61,12 +64,13 @@ textarea.text {
 // +Fields - Not Editable
 // ====================
 .field.is-not-editable {
-
   & label.is-focused {
     color: $gray-d2;
   }
 
-  label, input, textarea {
+  label,
+  input,
+  textarea {
     pointer-events: none;
   }
 }
@@ -74,8 +78,8 @@ textarea.text {
 // +Fields - With Error
 // ====================
 .field.error {
-
-  input, textarea {
+  input,
+  textarea {
     border-color: $red;
   }
 }
@@ -86,13 +90,15 @@ form {
 
   // CASE: cosmetic checkbox input
   .checkbox-cosmetic {
-
-    .input-checkbox-checked, .input-checkbox-unchecked, .label {
+    .input-checkbox-checked,
+    .input-checkbox-unchecked,
+    .label {
       display: inline-block;
       vertical-align: middle;
     }
 
-    .input-checkbox-checked, .input-checkbox-unchecked {
+    .input-checkbox-checked,
+    .input-checkbox-unchecked {
       width: ($baseline*0.75);
     }
 
@@ -110,7 +116,6 @@ form {
 
       // CASE: checked
       &:checked {
-
         ~ label .input-checkbox-checked {
           display: inline-block;
         }
@@ -119,7 +124,6 @@ form {
           display: none;
         }
       }
-
     }
   }
 
@@ -141,34 +145,10 @@ form {
   .note {
     @include box-sizing(border-box);
 
-    .title {
-
-    }
-
-    .copy {
-
-    }
-
     // note with actions
     &.has-actions {
       @include clearfix();
-
-      .title {
-
-      }
-
-      .copy {
-
-      }
-
-      .list-actions {
-
-      }
-    }
     }
-
-  .note-promotion {
-
   }
 }
 
@@ -182,6 +162,7 @@ form {
   .title {
     @extend %t-title4;
     @extend %t-strong;
+
     padding: $baseline ($baseline*1.5) 0 ($baseline*1.5);
   }
 
@@ -201,24 +182,27 @@ form {
       }
 
       &.required {
-
         label {
           @extend %t-strong;
         }
 
-        label:after {
+        label::after {
           margin-left: ($baseline/4);
           content: "*";
         }
       }
 
-      label, input, textarea {
+      label,
+      input,
+      textarea {
         display: block;
       }
 
       label {
         @extend %t-copy-sub1;
+
         @include transition(color $tmg-f3 ease-in-out 0s);
+
         margin: 0 0 ($baseline/4) 0;
 
         &.is-focused {
@@ -227,9 +211,12 @@ form {
       }
 
 
-      input, textarea {
+      input,
+      textarea {
         @extend %t-copy-base;
+
         @include transition(all $tmg-f2 ease-in-out 0s);
+
         height: 100%;
         width: 100%;
         padding: ($baseline/2);
@@ -242,12 +229,7 @@ form {
           width: 25%;
         }
 
-        /*@include placeholder {
-          color: $gray-l3;
-        }*/
-
         &:focus {
-
           + .tip {
             color: $gray-d1;
           }
@@ -271,6 +253,7 @@ form {
 
       .tip {
         @extend %t-copy-sub2;
+
         @include transition(color 0.15s ease-in-out);
 
 
@@ -314,8 +297,9 @@ form {
     }
 
     .field-inline {
-
-      input, textarea, select {
+      input,
+      textarea,
+      select {
         width: 62%;
         display: inline-block;
       }
@@ -326,16 +310,11 @@ form {
         width: 35%;
         margin-top: 0;
       }
-
-      &.error {
-        .tip-error {
-        }
-      }
-
     }
 
     .field-group {
       @include clearfix();
+
       margin: 0 0 ($baseline/2) 0;
 
       .field {
@@ -356,7 +335,8 @@ form {
           margin-right: 0;
         }
 
-        input, textarea {
+        input,
+        textarea {
           width: 100%;
         }
       }
@@ -372,7 +352,9 @@ form {
 
     .action {
       @include transition(all $tmg-f2 linear 0s);
+
       @extend %t-strong;
+
       display: inline-block;
       padding: ($baseline/5) $baseline;
       text-transform: uppercase;
@@ -380,11 +362,13 @@ form {
 
     .action-primary {
       @include blue-button;
+
       @extend %t-action2;
     }
 
     .action-secondary {
       @include grey-button;
+
       @extend %t-action2;
     }
   }
@@ -395,7 +379,6 @@ form {
 // form - inline xblock name edit on unit, container, outline
 // TODO: abstract this out into a Sass placeholder
 .incontext-editor.is-editable {
-
   .access-editor-action-wrapper {
     display: inline-block;
     vertical-align: middle;
@@ -405,17 +388,21 @@ form {
       vertical-align: baseline;
     }
   }
+
   .incontext-editor-value,
   .incontext-editor-action-wrapper {
     @extend %cont-truncated;
+
     display: inline-block;
     vertical-align: middle;
     max-width: 80%;
   }
 
-  .incontext-editor-open-action, .access-button {
+  .incontext-editor-open-action,
+  .access-button {
     @extend %ui-btn-non-blue;
     @extend %t-copy-base;
+
     padding-top: ($baseline/10);
 
     .icon.icon {
@@ -428,7 +415,6 @@ form {
   }
 
   &.is-editing {
-
     .incontext-editor-value,
     .incontext-editor-action-wrapper {
       display: none;
@@ -444,7 +430,7 @@ form {
 // ====================
 .wrapper-create-element {
   height: auto;
-  opacity: 1.0;
+  opacity: 1;
   pointer-events: auto;
   overflow: hidden;
   display: none;
@@ -462,7 +448,9 @@ form {
 // ====================
 input.search {
   padding: 6px 15px 8px 30px;
+
   @include box-sizing(border-box);
+
   border: 1px solid $darkGrey;
   border-radius: 20px;
   background: url('#{$static-path}/images/search-icon.png') no-repeat 8px 7px #edf1f5;
@@ -488,6 +476,7 @@ code {
 
 .CodeMirror {
   @extend %t-copy-sub1;
+
   background: $white;
   font-family: $f-monospace;
 }
@@ -496,9 +485,13 @@ code {
   width: 100%;
   min-height: 80px;
   padding: 10px;
+
   @include box-sizing(border-box);
+
   border: 1px solid $mediumGrey;
+
   @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3));
+
   background-color: #edf1f5;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
   font-family: Monaco, monospace;

cms/static/sass/elements/_header.scss

@@ -3,6 +3,7 @@
 
 .wrapper-header {
   @extend %ui-depth3;
+
   position: relative;
   width: 100%;
   box-shadow: 0 1px 2px 0 $shadow-l1;
@@ -13,6 +14,7 @@
   header.primary {
     @include box-sizing(border-box);
     @include clearfix();
+
     max-width: $fg-max-width;
     min-width: $fg-min-width;
     width: flex-grid(12);
@@ -22,23 +24,32 @@
   // ====================
 
   // basic layout
-  .wrapper-l, .wrapper-r {
+  .wrapper-l,
+  .wrapper-r {
     background: $white;
   }
 
   .wrapper-l {
     @include float(left);
-    width: flex-grid(7,12);
+
+    width: flex-grid(7, 12);
   }
 
   .wrapper-r {
     @include float(right);
-    width: flex-grid(4,12);
+
+    width: flex-grid(4, 12);
+
     @include text-align(right);
   }
 
-  .branding, .info-course, .nav-course, .nav-account, .nav-pitch {
+  .branding,
+  .info-course,
+  .nav-course,
+  .nav-account,
+  .nav-pitch {
     @include box-sizing(border-box);
+
     display: inline-block;
     vertical-align: middle;
   }
@@ -60,10 +71,10 @@
 
   // basic layout - nav items
   nav {
-
     > ol > .nav-item {
       @extend %t-action3;
       @extend %t-strong;
+
       display: inline-block;
       vertical-align: middle;
 
@@ -83,33 +94,23 @@
 
   // basic layout - dropdowns
   .nav-dd {
-
     .title {
       @extend %t-action2;
       @extend %ui-btn-dd-nav-primary;
-      @include transition(all $tmg-f2 ease-in-out 0s);
 
-      .label, .fa-caret-down {
-
-      }
-
-      .label {
-
-      }
+      @include transition(all $tmg-f2 ease-in-out 0s);
 
       .fa-caret-down {
         opacity: 0.25;
       }
 
       &:hover {
-
         .fa-caret-down {
-          opacity: 1.0;
+          opacity: 1;
         }
       }
 
       .nav-sub .nav-item {
-
         .icon {
           display: inline-block;
           vertical-align: middle;
@@ -141,17 +142,20 @@
   .info-course {
     @include margin-right(flex-gutter());
     @include border-right(1px solid $gray-l4);
+
     padding: ($baseline*0.75) flex-gutter() ($baseline*0.75) 0;
 
-    .course-org, .course-number {
+    .course-org,
+    .course-number {
       @extend %t-action4;
+
       display: inline-block;
       vertical-align: middle;
       max-width: 45%;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
-      opacity: 1.0;
+      opacity: 1;
       color: $gray-d3;
     }
 
@@ -162,6 +166,7 @@
     .course-title {
       @extend %t-action2;
       @extend %t-strong;
+
       display: block;
       width: 100%;
       overflow: hidden;
@@ -172,6 +177,7 @@
     // entire link
     .course-link {
       @include transition(color $tmg-f2 ease-in-out 0s);
+
       display: block;
       color: $gray-d3;
 
@@ -200,14 +206,12 @@
     }
 
     .nav-account-help {
-
       .wrapper-nav-sub {
         width: ($baseline*10);
       }
     }
 
     .nav-account-user {
-
       .title {
         max-width: ($baseline*6.5);
 
@@ -223,6 +227,7 @@
 
     .settings-language-form {
       margin-top: 4px;
+
       .language-selector {
         width: 130px;
       }
@@ -246,13 +251,12 @@
 
 // CASE: user signed in
 .is-signedin {
-
   .wrapper-l {
-    width: flex-grid(8,12);
+    width: flex-grid(8, 12);
   }
 
   .wrapper-r {
-    width: flex-grid(4,12);
+    width: flex-grid(4, 12);
   }
 
   .branding {
@@ -268,15 +272,13 @@
 
 // CASE: in course {
 .is-signedin.course {
-
   .wrapper-header {
-
     .wrapper-l {
-      width: flex-grid(9,12);
+      width: flex-grid(9, 12);
     }
 
     .wrapper-r {
-      width: flex-grid(3,12);
+      width: flex-grid(3, 12);
     }
 
     .branding {
@@ -299,15 +301,13 @@
 // CASE: user not signed in
 .not-signedin,
 .view-util {
-
   .wrapper-header {
-
     .wrapper-l {
-      width: flex-grid(2,12);
+      width: flex-grid(2, 12);
     }
 
     .wrapper-r {
-      width: flex-grid(10,12);
+      width: flex-grid(10, 12);
     }
 
     .branding {
@@ -327,16 +327,20 @@
 
       .action-signup {
         @include blue-button();
+
         @extend %t-action3;
         @extend %t-strong;
+
         padding: ($baseline/4) ($baseline/2);
         text-transform: uppercase;
       }
 
       .action-signin {
         @include white-button();
+
         @extend %t-action3;
         @extend %t-strong;
+
         padding: ($baseline/4) ($baseline/2);
         text-transform: uppercase;
       }
@@ -350,55 +354,39 @@
 
 .nav-item.is-current,
 body.howitworks .nav-not-signedin-hiw,
-
-// dashboard
 body.dashboard .nav-account-dashboard,
-
-// course content
 body.course.view-outline .nav-course-courseware .title,
 body.course.view-updates .nav-course-courseware .title,
 body.course.view-static-pages .nav-course-courseware .title,
 body.course.view-uploads .nav-course-courseware .title,
 body.course.view-textbooks .nav-course-courseware .title,
 body.course.view-video-uploads .nav-course-courseware .title,
-
 body.course.view-outline .nav-course-courseware-outline,
 body.course.view-updates .nav-course-courseware-updates,
 body.course.view-static-pages .nav-course-courseware-pages,
 body.course.view-uploads .nav-course-courseware-uploads,
 body.course.view-textbooks .nav-course-courseware-textbooks,
 body.course.view-video-uploads .nav-course-courseware-videos,
-
-// course settings
 body.course.schedule .nav-course-settings .title,
 body.course.grading .nav-course-settings .title,
 body.course.view-team .nav-course-settings .title,
 body.course.view-group-configurations .nav-course-settings .title,
 body.course.advanced .nav-course-settings .title,
 body.course.view-certificates .nav-course-settings .title,
-
 body.course.schedule .nav-course-settings-schedule,
 body.course.grading .nav-course-settings-grading,
 body.course.view-team .nav-course-settings-team,
 body.course.view-group-configurations .nav-course-settings-group-configurations,
 body.course.advanced .nav-course-settings-advanced,
 body.course.view-certificates .nav-course-settings-certificates,
-
-// course tools
 body.course.view-import .nav-course-tools .title,
 body.course.view-export .nav-course-tools .title,
 body.course.view-export-git .nav-course-tools .title,
-
 body.course.view-import .nav-course-tools-import,
 body.course.view-export .nav-course-tools-export,
 body.course.view-export-git .nav-course-tools-export-git,
-
-// content library settings
 body.course.view-team .nav-library-settings .title,
-
-body.course.view-team .nav-library-settings-team,
-
-{
+body.course.view-team .nav-library-settings-team {
   color: $uxpl-blue-base;
 
   a {

cms/static/sass/elements/_icons.scss

@@ -7,6 +7,7 @@
 .icon-inline {
   display: inline-block;
   vertical-align: middle;
+
   @include margin-right($baseline/4);
 }
 
@@ -14,13 +15,16 @@
 .wrapper-ui-badge {
   position: absolute;
   top: -1px;
+
   @include left($baseline*1.5);
+
   width: 100%;
 }
 
 %ui-badge {
   @extend %t-title9;
   @extend %t-strong;
+
   position: relative;
   border-bottom-right-radius: ($baseline/10);
   border-bottom-left-radius: ($baseline/10);
@@ -34,10 +38,12 @@
   // OPTION: add this class for a visual hanging display
   &.is-hanging {
     @include box-sizing(border-box);
+
     @extend %ui-depth2;
+
     top: -($baseline/4);
 
-    &:after {
+    &::after {
       position: absolute;
       top: 0;
       right: -($baseline/4);

cms/static/sass/elements/_layout.scss

 // studio - elements - layouts
 // ====================
 
-// layout - basic
-// the wrapper around the viewable page area, excluding modal and other extra-view content
-.wrapper-view {
-
-}
-
 // ====================
 
 // layout - basic page header
@@ -18,6 +12,7 @@
   .mast,
   .metadata {
     @include clearfix();
+
     position: relative;
     max-width: $fg-max-width;
     min-width: $fg-min-width;
@@ -41,20 +36,26 @@
 
       .page-header {
         @include float(left);
-        width: flex-grid(6,12);
+
+        width: flex-grid(6, 12);
+
         @include margin-right(flex-gutter());
       }
 
       .nav-actions {
         position: relative;
         bottom: -($baseline*0.75);
+
         @include float(right);
-        width: flex-grid(6,12);
+
+        width: flex-grid(6, 12);
+
         @include text-align(right);
 
         .nav-item {
           display: inline-block;
           vertical-align: top;
+
           @include margin-right(($baseline/2));
 
           &:last-child {
@@ -89,7 +90,6 @@
 
     // layout with actions
     &.has-subtitle {
-
       .nav-actions {
         bottom: -($baseline*1.5);
       }
@@ -97,13 +97,13 @@
 
     // layout with breadcrumb navigation
     &.has-navigation {
-
       .nav-actions {
         bottom: -($baseline*1.5);
       }
 
       .navigation-item {
         @extend %cont-truncated;
+
         display: inline-block;
         vertical-align: bottom; // correct for extra padding in FF
         max-width: 250px;
@@ -111,10 +111,11 @@
 
         &.navigation-current {
           @extend %ui-disabled;
+
           color: $gray;
           max-width: 250px;
 
-          &:before {
+          &::before {
             color: $gray;
           }
         }
@@ -124,7 +125,7 @@
         color: $blue;
       }
 
-      .navigation-item:before {
+      .navigation-item::before {
         content: " / ";
         margin: ($baseline/4);
         color: $gray;
@@ -134,7 +135,7 @@
         }
       }
 
-      .navigation .navigation-item:first-child:before {
+      .navigation .navigation-item:first-child::before {
         content: "";
         margin: 0;
       }
@@ -143,28 +144,24 @@
 
   // CASE: wizard-based mast
   .mast-wizard {
-
     .page-header-sub {
       @extend %t-title4;
+
       color: $gray;
       font-weight: 300;
     }
 
     .page-header-super {
       @extend %t-title4;
+
       float: left;
-      width: flex-grid(12,12);
+      width: flex-grid(12, 12);
       margin-top: ($baseline/2);
       border-top: 1px solid $gray-l4;
       padding-top: ($baseline/2);
       font-weight: 600;
     }
   }
-
-  // page metadata/action bar
-  .metadata {
-
-  }
 }
 
 // layout - basic page content
@@ -176,7 +173,9 @@
 
 .content {
   @include clearfix();
+
   @extend %t-copy-base;
+
   max-width: $fg-max-width;
   min-width: $fg-min-width;
   width: flex-grid(12);
@@ -191,6 +190,7 @@
 
     .title-sub {
       @extend %t-copy-sub1;
+
       display: block;
       margin: 0;
       color: $gray-l2;
@@ -199,6 +199,7 @@
     .title-1 {
       @extend %t-title3;
       @extend %t-strong;
+
       margin: 0;
       padding: 0;
       color: $gray-d3;
@@ -216,7 +217,8 @@
   .content-primary {
     @include float(left);
     @include margin-right(flex-gutter());
-    width: flex-grid(9,12);
+
+    width: flex-grid(9, 12);
     box-shadow: none;
     border: 0;
     background-color: $white;
@@ -224,25 +226,27 @@
 
   .content-supplementary {
     @include float(left);
-    width: flex-grid(3,12);
+
+    width: flex-grid(3, 12);
   }
 }
 
 
 // layout - primary content
 .content-primary {
-
   .title-1 {
     @extend %t-title3;
   }
 
   .title-2 {
     @extend %t-title4;
+
     margin: 0 0 ($baseline/2) 0;
   }
 
   .title-3 {
     @extend %t-title6;
+
     margin: 0 0 ($baseline/2) 0;
   }
 
@@ -257,6 +261,7 @@
 
     .tip {
       @extend %t-copy-sub2;
+
       width: flex-grid(7, 12);
       float: right;
       margin-top: ($baseline/2);
@@ -268,7 +273,6 @@
 
 // layout - supplemental content
 .content-supplementary {
-
   > section {
     margin: 0 0 $baseline 0;
   }
@@ -284,6 +288,7 @@
 
 .inner-wrapper {
   @include clearfix();
+
   position: relative;
   max-width: 1280px;
   margin: auto;

cms/static/sass/elements/_modal.scss

@@ -3,6 +3,7 @@
 
 .modal-cover {
   @extend %ui-depth3;
+
   display: none;
   position: fixed;
   top: 0;
@@ -14,6 +15,7 @@
 
 .modal {
   @extend %ui-depth4;
+
   display: none;
   position: fixed;
   top: 60px;
@@ -31,13 +33,16 @@
 
   .modal-actions {
     height: 60px;
+
     @include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
+
     background-color: #d1dae3;
   }
 
   h2 {
     @extend %t-title5;
     @extend %t-light;
+
     margin: 0 ($baseline/2) ($baseline*1.5);
     color: #646464;
     letter-spacing: 1px;
@@ -50,11 +55,13 @@
 
   .revert-button {
     @include blue-button;
+
     margin: 13px 6px 0 13px;
   }
 
   .close-button {
     @include white-button;
+
     margin-top: 13px;
   }
 }
@@ -62,9 +69,10 @@
 // lean modal alternative
 #lean_overlay {
   @extend %ui-depth4;
+
   position: fixed;
-	top: 0px;
-	left: 0px;
+  top: 0;
+  left: 0;
   display: none;
   height: 100%;
   width: 100%;

cms/static/sass/elements/_navigation.scss

@@ -3,17 +3,10 @@
 
 // common
 nav {
-
-  ol, ul {
+  ol,
+  ul {
     @extend %cont-no-list;
   }
-
-  .nav-item {
-
-    a {
-
-    }
-  }
 }
 
 // ====================
@@ -26,9 +19,10 @@ nav {
 .nav-skip,
 .transcript-skip {
   @include font-size(13);
+
   display: inline-block;
   position: absolute;
-  left: 0px;
+  left: 0;
   top: -($baseline*30);
   overflow: hidden;
   background: $white;
@@ -49,16 +43,16 @@ nav {
 
 // dropdown
 .nav-dd {
-
   .title {
-
-    .label, .fa-caret-down {
+    .label,
+    .fa-caret-down {
       display: inline-block;
       vertical-align: middle;
     }
 
     .ui-toggle-dd {
       @include transition(all $tmg-f2 ease-in-out 0s);
+
       margin: 0;
       display: inline-block;
       vertical-align: middle;
@@ -66,7 +60,6 @@ nav {
 
     // dropped down state
     &.is-selected {
-
       .ui-toggle-dd {
         @include transform(rotate(-180deg));
         @include transform-origin(50% 50%);
@@ -77,10 +70,6 @@ nav {
   .nav-item {
     position: relative;
 
-    &:hover {
-
-    }
-
     &.nav-course-settings {
       .wrapper-nav-sub {
         width: ($baseline*9);
@@ -90,9 +79,10 @@ nav {
 
   .wrapper-nav-sub {
     @include transition(opacity $tmg-f2 ease-in-out 0s);
+
     position: absolute;
     top: ($baseline*2.5);
-    opacity: 0.0;
+    opacity: 0;
     pointer-events: none;
     width: ($baseline*8);
     overflow: hidden;
@@ -101,7 +91,7 @@ nav {
 
     // dropped down state
     &.is-shown {
-      opacity: 1.0;
+      opacity: 1;
       pointer-events: auto;
       overflow: visible;
       height: auto;
@@ -110,7 +100,9 @@ nav {
 
   .nav-sub {
     border-radius: 2px;
+
     @include box-sizing(border-box);
+
     box-shadow: 0 1px 1px $shadow-l1;
     position: relative;
     width: 100%;
@@ -118,7 +110,8 @@ nav {
     padding: ($baseline/2) ($baseline*0.75);
     background: $white;
 
-    &:after, &:before {
+    &::after,
+    &::before {
       bottom: 100%;
       border: solid transparent;
       content: " ";
@@ -129,13 +122,13 @@ nav {
     }
 
     // ui triangle/nub
-    &:after {
+    &::after {
       border-color: rgba(255, 255, 255, 0);
       border-bottom-color: $white;
       border-width: 10px;
     }
 
-    &:before {
+    &::before {
       border-color: rgba(178, 178, 178, 0);
       border-bottom-color: $gray-l3;
       border-width: 11px;
@@ -144,6 +137,7 @@ nav {
     .nav-item {
       @extend %t-action3;
       @extend %t-regular;
+
       display: block;
       margin: 0 0 ($baseline/4) 0;
       border-bottom: 1px solid $gray-l5;
@@ -158,7 +152,8 @@ nav {
       a {
         display: block;
 
-        &:hover, &:active {
+        &:hover,
+        &:active {
           color: $uxpl-blue-base;
         }
       }
@@ -167,7 +162,6 @@ nav {
 
   // CASE: left-hand side arrow/dd
   &.ui-left {
-
     .wrapper-nav-sub {
       left: 0;
     }
@@ -176,12 +170,12 @@ nav {
       @include text-align(left);
 
       // ui triangle/nub
-      &:after {
+      &::after {
         left: $baseline;
         margin-left: -10px;
       }
 
-      &:before {
+      &::before {
         left: $baseline;
         margin-left: -11px;
       }
@@ -190,7 +184,6 @@ nav {
 
   // CASE: right-hand side arrow/dd
   &.ui-right {
-
     .wrapper-nav-sub {
       @include left(none);
       @include right(0);
@@ -199,13 +192,15 @@ nav {
     .nav-sub {
 
       // ui triangle/nub
-      &:after {
+      &::after {
         @include right($baseline);
+
         margin-right: -10px;
       }
 
-      &:before {
+      &::before {
         @include right($baseline);
+
         margin-right: -11px;
       }
     }

cms/static/sass/elements/_pagination.scss

@@ -3,6 +3,7 @@
 
 %pagination {
   @include clearfix();
+
   display: inline-block;
   width: flex-grid(3, 12);
 
@@ -24,6 +25,7 @@
 
   .nav-link {
     @include transition(all $tmg-f2 ease-in-out 0s);
+
     display: block;
     border: 0;
     padding: ($baseline/4) ($baseline*0.75);
@@ -65,6 +67,7 @@
   .total-pages {
     @extend %t-copy-base;
     @extend %t-strong;
+
     width: ($baseline*2.5);
     margin: 0 ($baseline*0.75);
     padding: ($baseline/4);
@@ -74,19 +77,23 @@
 
   .current-page {
     @extend %ui-depth1;
+
     position: absolute;
+
     @include left(-($baseline/4));
   }
 
   .page-divider {
     @extend %t-title4;
     @extend %t-regular;
+
     vertical-align: middle;
     color: $gray;
   }
 
   .pagination-form {
     @extend %ui-depth2;
+
     position: relative;
 
     .page-number-label,
@@ -96,6 +103,7 @@
 
     .page-number-input {
       @include transition(all $tmg-f2 ease-in-out 0s);
+
       border: 1px solid transparent;
       border-bottom: 1px dotted $gray-l2;
       border-radius: 0;
@@ -110,7 +118,8 @@
       &:focus {
         // borrowing the base input focus styles to match overall app
         @include linear-gradient($paleYellow, tint($paleYellow, 90%));
-        opacity: 1.0;
+
+        opacity: 1;
         box-shadow: 0 0 3px $shadow-d1 inset;
         background-color: $white;
         border: 1px solid transparent;

cms/static/sass/elements/_sock.scss

@@ -3,6 +3,7 @@
 
 .wrapper-sock {
   @include clearfix();
+
   position: relative;
   margin: ($baseline*2) 0 0 0;
   border-top: 1px solid $gray-l4;
@@ -10,7 +11,9 @@
 
   .wrapper-inner {
     @include linear-gradient($gray-d3 0%, $gray-d3 98%, $black 100%);
+
     @extend %ui-depth0;
+
     display: none;
     width: 100% !important;
     border-bottom: 1px solid $white;
@@ -20,6 +23,7 @@
   // sock - actions
   .list-cta {
     @extend %ui-depth1;
+
     position: absolute;
     top: -($baseline*0.75);
     width: 100%;
@@ -29,12 +33,14 @@
     .cta-show-sock {
       @extend %ui-btn-pill;
       @extend %t-action4;
+
       background: $gray-l5;
       padding: ($baseline/2) $baseline;
       color: $gray-d2;
 
       .icon {
         @extend %t-icon6;
+
         @include margin-right($baseline/4);
       }
 
@@ -48,7 +54,9 @@
   // sock - additional help
   .sock {
     @include clearfix();
+
     @extend %t-copy-sub2;
+
     max-width: $fg-max-width;
     min-width: $fg-min-width;
     width: flex-grid(12);
@@ -58,25 +66,26 @@
 
     // support body
     header {
-
       .title {
         @extend %t-title4;
       }
-
     }
 
     // shared elements
-    .support, .feedback {
+    .support,
+    .feedback {
       @include box-sizing(border-box);
 
       .title {
         @extend %t-title6;
+
         color: $white;
         margin-bottom: ($baseline/2);
       }
 
       .copy {
         @extend %t-copy-sub2;
+
         margin: 0 0 $baseline 0;
       }
 
@@ -86,6 +95,7 @@
         .action-item {
           @include float(left);
           @include margin-right($baseline/2);
+
           margin-bottom: ($baseline/2);
 
           &:last-child {
@@ -94,16 +104,15 @@
 
           .action {
             @extend %t-action4;
+
             display: block;
 
             .icon {
               @extend %t-icon4;
-              vertical-align: middle;
-              @include margin-right($baseline/4);
-            }
 
-            &:hover, &:active {
+              vertical-align: middle;
 
+              @include margin-right($baseline/4);
             }
           }
 
@@ -121,22 +130,22 @@
 
     // studio support content
     .support {
-      width: flex-grid(8,12);
+      width: flex-grid(8, 12);
       float: left;
       margin-right: flex-gutter();
 
       .action-item {
-        width: flexgrid(4,8);
+        width: flexgrid(4, 8);
       }
     }
 
     // studio feedback content
     .feedback {
-      width: flex-grid(4,12);
+      width: flex-grid(4, 12);
       float: left;
 
       .action-item {
-        width: flexgrid(4,4);
+        width: flexgrid(4, 4);
       }
     }
   }