Fix Sass quality issues in lms/static/sass/features

Sass fixes

lms/static/sass/features/_bookmarks-v1.scss

@@ -8,6 +8,7 @@ $bookmarked-icon: "\f02e"; // .fa-bookmark
 
   > div {
     @include box-sizing(border-box);
+
     display: inline-block;
   }
 }
@@ -22,11 +23,13 @@ $bookmarked-icon: "\f02e"; // .fa-bookmark
 
     // set styles
     @extend %btn-pl-default-base;
+
     @include font-size(13);
+
     width: 100%;
     padding: ($baseline/4) ($baseline/2);
 
-    &:before {
+    &::before {
       content: $bookmarked-icon;
       font-family: FontAwesome;
     }
@@ -35,9 +38,9 @@ $bookmarked-icon: "\f02e"; // .fa-bookmark
 
 // Rules for bookmark icon shown on each sequence nav item
 .course-content {
-
   .bookmark-icon.bookmarked {
     @include right($baseline / 4);
+
     top: -3px;
     position: absolute;
   }
@@ -48,17 +51,15 @@ $bookmarked-icon: "\f02e"; // .fa-bookmark
   }
 
   .bookmark-button {
-
-    &:before {
+    &::before {
       content: $bookmark-icon;
       font-family: FontAwesome;
     }
 
     &.bookmarked {
-      &:before {
+      &::before {
         content: $bookmarked-icon;
       }
     }
-
   }
 }

lms/static/sass/features/_bookmarks.scss

@@ -14,6 +14,7 @@ $bookmarked-icon: "\f02e"; // .fa-bookmark
 
   .bookmarks-results-list-item {
     @include padding(0, $baseline, ($baseline/4), $baseline);
+
     display: block;
     border: 1px solid $lms-border-color;
     margin-bottom: $baseline;
@@ -29,6 +30,7 @@ $bookmarked-icon: "\f02e"; // .fa-bookmark
 
   .results-list-item-view {
     @include float(right);
+
     margin-top: $baseline;
   }
 
@@ -38,7 +40,7 @@ $bookmarked-icon: "\f02e"; // .fa-bookmark
     font-size: font-size(small);
   }
 
-    .bookmarks-results-list-item:before {
+  .bookmarks-results-list-item::before {
     content: $bookmarked-icon;
     position: relative;
     top: -7px;
@@ -61,7 +63,6 @@ $bookmarked-icon: "\f02e"; // .fa-bookmark
     vertical-align: middle;
 
     .fa-arrow-right {
-
       @include rtl {
         @include transform(rotate(180deg));
       }
@@ -79,6 +80,7 @@ $bookmarked-icon: "\f02e"; // .fa-bookmark
 
 .bookmarks-empty-header {
   @extend %t-title5;
+
   margin-bottom: ($baseline/2);
 }
 

lms/static/sass/features/_course-experience.scss

@@ -26,8 +26,10 @@
       margin: $baseline 0;
     }
 
-    &:after, &:before {
+    &::after,
+    &::before {
       @include left(0);
+
       bottom: 35%;
       border: solid transparent;
       height: 0;
@@ -40,15 +42,17 @@
       }
     }
 
-    &:after {
+    &::after {
       @include border-right-color($white);
       @include margin-left($baseline*-1+1);
+
       border-width: $baseline/2;
     }
 
-    &:before {
+    &::before {
       @include margin-left($baseline*-1);
       @include border-right-color($lms-border-color);
+
       border-width: $baseline/2;
     }
 
@@ -65,14 +69,19 @@
 }
 
 // Welcome message / Latest Update message
-.welcome-message, .update-message{
+.welcome-message,
+.update-message {
   border: solid 1px $lms-border-color;
+
   @include border-left(solid 4px $black);
+
   margin-bottom: $baseline;
   padding: $baseline;
   overflow: hidden;
 
-  h1, h2, h3 {
+  h1,
+  h2,
+  h3 {
     font-size: font-size(large);
     font-weight: $font-bold;
     color: $black;
@@ -80,12 +89,14 @@
 
   img {
     @include float(left);
+
     margin: $baseline/2;
     max-width: 100%;
   }
 
   .dismiss-message {
     @include float(right);
+
     .btn-link {
       color: palette(grayscale, base);
     }
@@ -123,6 +134,7 @@
 
       .section-name {
         @include margin(0, 0, ($baseline / 2), ($baseline / 2));
+
         padding: 0;
 
         h3 {
@@ -141,7 +153,6 @@
         border-bottom: 1px solid $light-grey-solid;
         margin: 0 0 ($baseline / 2) 0;
 
-
         .subsection {
           list-style-type: none;
           border: 1px solid transparent;
@@ -157,7 +168,8 @@
               margin: 0;
             }
 
-            &:hover, &:focus {
+            &:hover,
+            &:focus {
               background-color: palette(primary, x-back);
               border-radius: $btn-border-radius;
               text-decoration: none;
@@ -205,6 +217,7 @@
   .date-summary {
     @include clearfix;
     @include border-left(3px solid $gray-l3);
+
     padding: $baseline/2;
 
     .heading {
@@ -223,6 +236,7 @@
 
     .date-summary-link {
       font-weight: $font-semibold;
+
       a {
         color: $link-color;
         font-weight: $font-regular;

lms/static/sass/features/_course-search.scss

@@ -17,12 +17,14 @@
 
   .search-count {
     @include text-align(right);
+
     display: block;
     color: $lms-gray;
   }
 
   .search-results-item {
     @include padding-right(140px);
+
     position: relative;
     border-top: 1px solid $border-color;
     padding: $baseline ($baseline/2);
@@ -51,6 +53,7 @@
 
   .result-link {
     @include right($baseline/2);
+
     position: absolute;
     top: $baseline;
     line-height: 1.6em;
@@ -58,6 +61,7 @@
 
   .result-type {
     @include right($baseline/2);
+
     position: absolute;
     color: $lms-gray;
     font-size: 14px;

lms/static/sass/features/_course-sock.scss

@@ -2,7 +2,6 @@
   display: inline-block;
   position: relative;
   width: 100%;
-  margin-top: $baseline;
   max-width: $lms-max-width;
   margin: $baseline auto 0;
   -webkit-transition: all 0.4s ease-out;
@@ -14,6 +13,7 @@
   .action-toggle-verification-sock {
     @include left(50%);
     @include margin-left(-1 * $baseline * 15/2);
+
     position: absolute;
     top: (-1 * $baseline);
     width: ($baseline * 15);
@@ -71,6 +71,7 @@
 
       .mini-cert {
         @include right($baseline);
+
         position: absolute;
         top: $baseline;
         width: ($baseline * 13);
@@ -96,7 +97,7 @@
           width: ($baseline * 5/2);
         }
 
-        .story-quote > .author{
+        .story-quote > .author {
           display: block;
           margin-top: ($baseline / 4);
           font-weight: 600;
@@ -135,6 +136,7 @@
 
           &.attached {
             @include right($baseline);
+
             position: fixed;
             bottom: $baseline;
             top: auto;

lms/static/sass/features/_course-upgrade-message.scss

@@ -17,7 +17,7 @@ $upgrade-message-background-color: $blue-d1;
   -webkit-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
 
-  &:after {
+  &::after {
     content: "";
     display: table;
     clear: both;
@@ -28,12 +28,14 @@ $upgrade-message-background-color: $blue-d1;
     font-size: 1.25rem;
     font-weight: 700;
     margin-bottom: 1rem;
+
     @include float(left);
   }
 
   .vc-selling-points {
     @include clear(left);
     @include padding-left(0);
+
     font-size: 0.825rem;
     margin: 1rem 0;
     display: table;
@@ -42,19 +44,21 @@ $upgrade-message-background-color: $blue-d1;
       list-style: none;
       display: table-row;
 
-      &:before {
+      &::before {
         content: "\2022";
         display: table-cell;
+
         @include padding-right($baseline/2);
       }
 
-      &:after {
+      &::after {
         content: "";
         display: table-row;
         height: 0.25rem;
       }
     }
   }
+
   img {
     max-width: 100%;
   }
@@ -62,12 +66,14 @@ $upgrade-message-background-color: $blue-d1;
   // Show/hide button
   .vc-toggle {
     @include float(right);
+
     color: $white;
   }
 
   // Upgrade Button
   .btn-upgrade {
     @extend %btn-primary-green;
+
     background: $uxpl-green-base;
   }
 
@@ -75,6 +81,7 @@ $upgrade-message-background-color: $blue-d1;
   .vc-hero {
     @include float(right);
     @include padding-left(1rem);
+
     clear: both;
     width: 35%;
 
@@ -95,6 +102,7 @@ $upgrade-message-background-color: $blue-d1;
 
   .vc-title {
     margin: 0;
+
     @include margin-right(auto);
   }
 

lms/static/sass/features/_learner-profile.scss

@@ -4,9 +4,11 @@
 .learner-achievements {
   .learner-message {
     @extend %no-content;
+
     margin: $baseline*0.75 0;
 
-        .message-header, .message-actions {
+    .message-header,
+    .message-actions {
       text-align: center;
     }
 
@@ -36,6 +38,7 @@
 
   .card-logo {
     @include margin-right($baseline);
+
     width: 100px;
     height: 100px;
 
@@ -51,17 +54,20 @@
 
   .card-supertitle {
     @extend %t-title6;
+
     color: $lightest-base-font-color;
   }
 
   .card-title {
     @extend %t-title5;
     @extend %t-strong;
+
     margin-bottom: $baseline/2;
   }
 
   .card-text {
     @extend %t-title8;
+
     color: $lightest-base-font-color;
   }
 
@@ -108,11 +114,13 @@
 
   .ui-loading-indicator {
     @extend .ui-loading-base;
+
     padding-bottom: $baseline;
 
     // center horizontally
     @include margin-left(auto);
     @include margin-right(auto);
+
     width: ($baseline*5);
   }
 
@@ -153,10 +161,12 @@
         height: $profile-image-dimension;
         border-radius: ($profile-image-dimension/2);
         border: 2px dashed transparent;
-                background: rgba(229,241,247, .8);
+        background: rgba(229, 241, 247, 0.8);
         color: $link-color;
         text-shadow: none;
+
         @include transition(all $tmg-f1 ease-in-out 0s);
+
         z-index: 6;
 
         i {
@@ -166,6 +176,7 @@
         &:focus,
         &:hover {
           @include show-hover-state();
+
           border-color: $link-color;
         }
 
@@ -182,7 +193,9 @@
       .upload-button-title {
         display: block;
         margin-bottom: ($baseline/4);
+
         @include transform(translateY(35px));
+
         line-height: 1.3em;
         text-align: center;
         z-index: 7;
@@ -192,7 +205,9 @@
       .upload-button-input {
         position: absolute;
         top: 0;
+
         @include left(0);
+
         width: $profile-image-dimension;
         border-radius: ($profile-image-dimension/2);
         height: 100%;
@@ -213,7 +228,8 @@
         transition: opacity 0.5s;
       }
 
-            &:hover, &:active {
+      &:hover,
+      &:active {
         .u-field-remove-button {
           opacity: 1;
         }
@@ -234,14 +250,16 @@
     .wrapper-profile-field-account-privacy {
       @include clearfix();
       @include box-sizing(border-box);
+
       width: 100%;
-            margin: 0 auto 0;
+      margin: 0 auto;
       border: 1px solid $gray-l3;
       background-color: $gray-l4;
       padding: ($baseline*0.75) 0;
 
       .u-field-account_privacy {
         @extend .container;
+
         border: none;
         box-shadow: none;
         padding: 0 ($baseline*3);
@@ -249,6 +267,7 @@
 
       .u-field-title {
         @extend %t-strong;
+
         width: auto;
         color: $base-font-color;
         cursor: text;
@@ -257,11 +276,13 @@
 
       .u-field-value {
         width: auto;
+
         @include margin-left($baseline/2);
       }
 
       .u-field-message {
         @include float(left);
+
         width: 100%;
         padding: 0;
         color: $base-font-color;
@@ -275,7 +296,9 @@
 
   .wrapper-profile-sections {
     @extend .container;
+
     @include padding($baseline*1.5, $baseline*1.5, $baseline*1.5, 0);
+
     min-width: 0;
 
     @media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap
@@ -294,6 +317,7 @@
     .header {
       @extend %t-title4;
       @extend %t-ultrastrong;
+
       display: inline-block;
     }
 
@@ -311,6 +335,7 @@
     .wrapper-profile-section-one {
       @include float(left);
       @include margin-left($baseline*3);
+
       width: 300px;
       background-color: $white;
       border-top: 5px solid $blue;
@@ -318,6 +343,7 @@
 
       @media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap
         @include margin-left(0);
+
         width: 100%;
       }
 
@@ -326,6 +352,7 @@
 
         .social-links {
           @include padding($baseline/4, 0, 0, $baseline/4);
+
           font-size: 2rem;
 
           & > span {
@@ -349,11 +376,14 @@
 
         .u-field {
           font-weight: $font-semibold;
+
           @include padding(0, 0, 0, 3px);
+
           color: $base-font-color;
           margin-top: $baseline/5;
 
-                    .u-field-value, .u-field-title {
+          .u-field-value,
+          .u-field-title {
             font-weight: 500;
             width: calc(100% - 40px);
             color: $lightest-base-font-color;
@@ -389,7 +419,7 @@
           }
         }
 
-                &>.u-field {
+        & > .u-field {
           &:not(:first-child) {
             font-size: $body-font-size;
             color: $base-font-color;
@@ -400,16 +430,18 @@
           &:first-child {
             @extend %t-title4;
             @extend %t-weight4;
+
             font-size: em(24);
           }
         }
 
         select {
-                    width: 85%
+          width: 85%;
         }
 
         .u-field-message {
           @include right(0);
+
           position: absolute;
           top: 0;
           width: 20px;
@@ -426,6 +458,7 @@
   .wrapper-profile-section-container-two {
     @include float(left);
     @include padding-left($baseline);
+
     width: calc(100% - 380px);
     max-width: $learner-profile-container-flex; // Switch to map-get($grid-breakpoints,md) for bootstrap
     font-family: $sans-serif;
@@ -437,7 +470,8 @@
     }
 
     .u-field-textarea {
-            @include padding(0, ($baseline*.75), ($baseline*.75), 0);
+      @include padding(0, ($baseline*0.75), ($baseline*0.75), 0);
+
       margin-bottom: ($baseline/2);
 
       @media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap
@@ -449,6 +483,7 @@
 
         .u-field-message {
           @include right(0);
+
           top: $baseline/4;
           position: absolute;
         }
@@ -461,6 +496,7 @@
 
     .u-field-title {
       @extend %t-title6;
+
       display: inline-block;
       margin-top: 0;
       margin-bottom: ($baseline/4);
@@ -471,6 +507,7 @@
 
     .u-field-value {
       @extend %t-copy-base;
+
       width: 100%;
       overflow: auto;
 
@@ -493,6 +530,7 @@
 
     .u-field-message {
       @include float(right);
+
       width: auto;
 
       .message-can-edit {
@@ -507,10 +545,13 @@
 
       i {
         font-size: 12px;
+
         @include padding-right(5px);
+
         vertical-align: middle;
         color: $base-font-color;
       }
+
       .u-field-title {
         width: 100%;
         text-align: center;
@@ -519,14 +560,17 @@
       .u-field-value {
         text-align: center;
         line-height: 1.5em;
+
         @extend %t-copy-sub1;
+
         color: $base-font-color;
       }
 
       &:hover {
         border: 2px dashed $link-color;
 
-                .u-field-title, i {
+        .u-field-title,
+        i {
           color: $link-color;
         }
       }
@@ -536,14 +580,16 @@
       font-size: $body-font-size;
       color: $base-font-color;
 
-            .u-field-header .u-field-title{
+      .u-field-header .u-field-title {
         color: $base-font-color;
       }
 
       .u-field-footer {
         .field-textarea-character-count {
           @extend %t-weight1;
+
           @include float(right);
+
           margin-top: $baseline/4;
         }
       }
@@ -551,7 +597,8 @@
 
     .profile-private-message {
       @include padding-left($baseline*0.75);
-            line-height: 3.0em;
+
+      line-height: 3em;
     }
   }
 
@@ -565,7 +612,8 @@
 
   .badge-set-display {
     @extend .container;
-        padding: 0 0;
+
+    padding: 0;
 
     .badge-list {
       // We're using a div instead of ul for accessibility, so we have to match the style
@@ -579,15 +627,18 @@
       display: inline-block;
       vertical-align: top;
       padding: 2em 0;
+
       .badge-image-container {
         padding-right: $baseline;
         margin-left: 1em;
         width: 20%;
         vertical-align: top;
         display: inline-block;
+
         img.badge {
           width: 100%;
         }
+
         .accomplishment-placeholder {
           border: 4px dotted $gray-l4;
           border-radius: 50%;
@@ -596,24 +647,31 @@
           padding-bottom: 100%;
         }
       }
+
       .badge-details {
         @extend %t-copy-sub1;
         @extend %t-regular;
+
         max-width: 70%;
         display: inline-block;
         color: $gray-d1;
+
         .badge-name {
           @extend %t-strong;
           @extend %t-copy-base;
+
           color: $gray-d3;
         }
+
         .badge-description {
           padding-bottom: $baseline;
           line-height: 1.5em;
         }
-                .badge-date-stamp{
+
+        .badge-date-stamp {
           @extend %t-copy-sub1;
         }
+
         .find-button-container {
           border: 1px solid $blue-l1;
           padding: ($baseline / 2) $baseline ($baseline / 2) $baseline;
@@ -622,9 +680,11 @@
           font-weight: bold;
           color: $blue-s3;
         }
+
         .share-button {
           @extend %t-action3;
           @extend %button-reset;
+
           background: $gray-l6;
           color: $gray-d1;
           padding: ($baseline / 4) ($baseline / 2);
@@ -633,21 +693,26 @@
           border-radius: 5px;
           border: 2px solid $gray-d1;
           cursor: pointer;
-                    transition: background .5s;
+          transition: background 0.5s;
+
           .share-prefix {
             display: inline-block;
             vertical-align: middle;
           }
+
           .share-icon-container {
             display: inline-block;
+
             img.icon-mozillaopenbadges {
               max-width: 1.5em;
-                            margin-right: .25em;
+              margin-right: 0.25em;
             }
           }
+
           &:hover {
             background: $gray-l4;
           }
+
           &:active {
             box-shadow: inset 0 4px 15px 0 $black-t2;
             transition: none;
@@ -655,6 +720,7 @@
         }
       }
     }
+
     .badge-placeholder {
       background-color: $gray-l7;
       box-shadow: inset 0 0 4px 0 $gray-l4;
@@ -666,6 +732,7 @@
   // ------------------------------
   .badges-overlay {
     @extend %ui-depth1;
+
     position: fixed;
     top: 0;
     left: 0;
@@ -677,6 +744,7 @@
     .badges-modal {
       @extend %t-copy-lead1;
       @extend %ui-depth2;
+
       color: $lighter-base-font-color;
       box-sizing: content-box;
       position: fixed;
@@ -703,14 +771,18 @@
       .close {
         @extend %button-reset;
         @extend %t-strong;
+
         color: $lighter-base-font-color;
         position: absolute;
         right: ($baseline);
         top: $baseline;
         cursor: pointer;
         padding: ($baseline / 4) ($baseline / 2);
+
         @include transition(all $tmg-f2 ease-in-out 0s);
-                &:focus, &:hover {
+
+        &:focus,
+        &:hover {
           background-color: $blue-d2;
           border-radius: 3px;
           color: $white;
@@ -721,13 +793,15 @@
         display: table;
       }
 
-            .image-container{
+      .image-container {
         // Lines the image up with the content of the above list.
         @include ltr {
           @include padding-left(2em);
         }
+
         @include rtl {
           @include padding-right(1em);
+
           float: right;
         }
       }

scripts/all-tests.sh

@@ -13,7 +13,7 @@ set -e
 # Violations thresholds for failing the build
 export PYLINT_THRESHOLD=3600
 export ESLINT_THRESHOLD=9134
-export STYLELINT_THRESHOLD=18431
+export STYLELINT_THRESHOLD=18416
 
 XSSLINT_THRESHOLDS=`cat scripts/xsslint_thresholds.json`
 export XSSLINT_THRESHOLDS=${XSSLINT_THRESHOLDS//[[:space:]]/}