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

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:]]/}