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

Fix validation issues with Studio Sass files

common/static/sass/_mixins-inherited.scss

@@ -122,7 +122,7 @@
   @include transition(background-color 0.15s, box-shadow 0.15s);
   @extend %t-action3;
   @extend %t-strong;
-  box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 0 0 $transparent;
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 0 $transparent;
   display: inline-block;
   padding: ($baseline/5) $baseline ($baseline/4);
 
@@ -139,14 +139,14 @@
   }
 
   &:hover, &:focus, &:active {
-    box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 1px 1px rgba(0, 0, 0, .15);
+    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 1px rgba(0, 0, 0, 0.15);
   }
 }
 
 @mixin green-button {
   @include button;
-  @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
-  box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
+  @include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
   border: 1px solid $uxpl-green-base;
   border-radius: 3px;
   background-color: $uxpl-green-base;
@@ -167,7 +167,7 @@
 
 @mixin blue-button {
   @include button;
-  @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
+  @include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
   border: 1px solid $uxpl-blue-base;
   border-radius: 3px;
   background-color: $uxpl-blue-base;
@@ -188,7 +188,7 @@
 
 @mixin red-button {
   @include button;
-  @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
+  @include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
   border: 1px solid $red-d1;
   border-radius: 3px;
   background-color: $red;
@@ -209,7 +209,7 @@
 
 @mixin pink-button {
   @include button;
-  @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
+  @include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
   border: 1px solid $pink-d1;
   border-radius: 3px;
   background-color: $pink;
@@ -231,7 +231,7 @@
 @mixin orange-button {
   @include button;
   @include linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 60%);
-  box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
   border: 1px solid $orange-d1;
   border-radius: 3px;
   background-color: $orange;
@@ -253,12 +253,12 @@
 @mixin white-button {
   @include button;
   @include linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
-  box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
   border: 1px solid $mediumGrey;
   border-radius: 3px;
   background-color: #dfe5eb;
   color: rgb(92, 103, 122);
-  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
 
   &:hover, &:focus {
     background-color: rgb(222, 236, 247);
@@ -268,8 +268,8 @@
 
 @mixin grey-button {
   @include button;
-  @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
-  box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
+  @include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
   border: 1px solid $gray-d2;
   border-radius: 3px;
   background-color: #d1dae3;
@@ -298,7 +298,7 @@
 
 // only needed for course updates
 @mixin edit-box {
-  box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset;
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
   padding: 15px 20px;
   border-radius: 3px;
   background-color: $lightBluishGrey2;
@@ -344,8 +344,8 @@
 
 // sunsetted mixins
 @mixin active {
-  @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));
   box-shadow: 0 -1px 0 $shadow inset, 0 1px 0 $white inset;
-  background-color: rgba(255, 255, 255, .3);
+  background-color: rgba(255, 255, 255, 0.3);
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
 }

common/static/sass/_mixins.scss

@@ -59,11 +59,13 @@
   :-moz-placeholder {
     color: $color;
   }
+
   ::-webkit-input-placeholder {
     color: $color;
   }
+
   :-ms-input-placeholder {
-     color: $color;
+    color: $color;
   }
 }
 
@@ -113,18 +115,21 @@
 %ui-wrapper {
   @include clearfix();
   @include box-sizing(border-box);
+
   width: 100%;
 }
 
 // layout placeholders
 .ui-col-wide  {
   width: flex-grid(9, 12);
+
   @include margin-right(flex-gutter());
   @include float(left);
 }
 
 .ui-col-narrow  {
   width: flex-grid(3, 12);
+
   @include float(left);
 }
 
@@ -132,6 +137,7 @@
 // ====================
 %ui-window {
   @include clearfix();
+
   border-radius: ($baseline/10);
   box-shadow: 0 1px 1px $shadow-l2;
   margin-bottom: $baseline;
@@ -172,7 +178,6 @@
 // ====================
 // extends - UI - utility - first child clearing
 %wipe-first-child {
-
   &:first-child {
     margin-top: 0;
     border-top: none;
@@ -182,7 +187,6 @@
 
 // extends - UI - utility - last child clearing
 %wipe-last-child {
-
   &:last-child {
     margin-bottom: 0;
     border-bottom: none;
@@ -195,6 +199,7 @@
 %ui-btn {
   @include box-sizing(border-box);
   @include transition(color $tmg-f2 ease-in-out 0s, border-color $tmg-f2 ease-in-out 0s, background $tmg-f2 ease-in-out 0s, box-shadow $tmg-f2 ease-in-out 0s);
+
   display: inline-block;
   cursor: pointer;
 
@@ -231,6 +236,7 @@
   @extend %ui-btn;
   @extend %ui-btn-pill;
   @extend %t-strong;
+
   padding:($baseline/2) $baseline;
   border-width: 1px;
   border-style: solid;
@@ -255,6 +261,7 @@
 %ui-btn-secondary {
   @extend %ui-btn;
   @extend %ui-btn-pill;
+
   border-width: 1px;
   border-style: solid;
   padding:($baseline/2) $baseline;
@@ -265,8 +272,10 @@
 
 %ui-btn-flat-outline {
   @include transition(all .15s);
+
   @extend %t-strong;
   @extend %t-action4;
+
   text-align: center;
   border-radius: ($baseline/4);
   border: 1px solid $uxpl-blue-base;
@@ -282,18 +291,21 @@
 
   &.is-disabled,
   &[disabled="disabled"]{
-   border: 1px solid $gray-l2;
-   background-color: $gray-l4;
-   color: $gray-l2;
-   pointer-events: none;
+    border: 1px solid $gray-l2;
+    background-color: $gray-l4;
+    color: $gray-l2;
+    pointer-events: none;
   }
 }
 
 // button with no button shell until hover for understated actions
 %ui-btn-non {
   @include transition(all .15s);
+
   @extend %ui-btn-pill;
+
   @include transition(all $tmg-f2 linear 0s);
+
   display: inline-block;
   vertical-align: middle;
   border: none;
@@ -326,6 +338,7 @@
 
 %no-content {
   @extend %ui-well;
+
   padding: ($baseline*2);
   background-color: $gray-l4;
   text-align: center;
@@ -335,6 +348,7 @@
   .action {
     @extend %btn-primary-green;
     @extend %t-action3;
+
     margin-left: $baseline;
 
     .icon {
@@ -345,8 +359,10 @@
 
 .ui-loading {
   @include animation(fadeIn $tmg-f2 linear 1);
+
   @extend %ui-well;
   @extend %t-copy-base;
+
   opacity: .6;
   background-color: $white;
   padding: ($baseline*1.5) $baseline;
@@ -354,6 +370,7 @@
 
   .spin {
     @extend %anim-rotateCW;
+
     display: inline-block;
   }
 
@@ -393,18 +410,18 @@
 // +Content - Screenreader Text - Extend
 // ====================
 %cont-text-sr {
-    // clip has been deprecated but is still supported
-    clip: rect(1px 1px 1px 1px);
-    clip: rect(1px, 1px, 1px, 1px);
-    position: absolute;
-    margin: -1px;
-    height: 1px;
-    width: 1px;
-    border: 0;
-    padding: 0;
-    overflow: hidden;
-    // ensure there are spaces in sr text
-    word-wrap: normal;
+  // clip has been deprecated but is still supported
+  clip: rect(1px 1px 1px 1px);
+  clip: rect(1px, 1px, 1px, 1px);
+  position: absolute;
+  margin: -1px;
+  height: 1px;
+  width: 1px;
+  border: 0;
+  padding: 0;
+  overflow: hidden;
+  // ensure there are spaces in sr text
+  word-wrap: normal;
 }
 
 // +Content - Text Wrap - Extend
@@ -417,6 +434,7 @@
 // ====================
 %cont-truncated {
   @include box-sizing(border-box);
+
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;

common/static/sass/edx-pattern-library-shims/_breadcrumbs.scss

@@ -9,9 +9,11 @@
 
   .nav-item {
     @include margin-left($baseline/4);
+
     display: inline-block;
 
-    a, a:visited {
+    a,
+    a:visited {
       color: $uxpl-blue-base;
     }
 
@@ -22,6 +24,7 @@
 
   .fa-angle-right {
     @include margin-left($baseline/4);
+
     display: inline-block;
     color: $base-font-color;
 

common/static/sass/edx-pattern-library-shims/_buttons.scss

@@ -43,6 +43,7 @@
       @include margin-right(0);
     }
   }
+
   &.btn-small {
     @extend %btn-small;
   }
@@ -53,6 +54,7 @@
 // ----------------------------
 .btn-default {
   @extend %btn-shims;
+
   border-color: $btn-default-border-color;
   background: $btn-default-background;
   color: $btn-default-color;
@@ -88,6 +90,7 @@
 // ----------------------------
 .btn-brand {
   @extend %btn-shims;
+
   border-color: $btn-brand-border-color;
   background: $btn-brand-background;
   color: $btn-brand-color;
@@ -118,4 +121,3 @@
     color: $btn-brand-disabled-color;
   }
 }
-

common/static/sass/edx-pattern-library-shims/_form.scss

@@ -6,12 +6,12 @@
 
 .post-type-label {
   @include margin-right($baseline);
+
   display: inline-block;
   line-height: 100%;
 }
 
 .field-label {
-
   .post-options & {
     display: inline-block;
   }