build: enforce line length in scss files (#6233)

Enforces a 100-character line length in the SCSS files for consistency with the TS.

Author: crisbeto

src/demo-app/ripple/ripple-demo.scss

@@ -23,7 +23,7 @@
       border-radius: 50%;
       overflow: hidden;
       // z-index needed to make clipping to border-radius work correctly.
-      // http://stackoverflow.com/questions/20001515/chrome-bug-border-radius-not-clipping-contents-when-combined-with-css-transiti
+      // http://stackoverflow.com/questions/20001515/
       z-index: 1;
     }
   }

src/lib/autocomplete/autocomplete.scss

@@ -6,10 +6,16 @@
  */
 $mat-autocomplete-panel-max-height: 256px !default;
 
-/** When in "below" position, the panel needs a slight y-offset to ensure the input underline displays. */
+/**
+ * When in "below" position, the panel needs a slight
+ * y-offset to ensure the input underline displays.
+ */
 $mat-autocomplete-panel-below-offset: 6px !default;
 
-/** When in "above" position, the panel needs a larger y-offset to ensure the label has room to display. */
+/**
+ * When in "above" position, the panel needs a larger
+ * y-offset to ensure the label has room to display.
+ */
 $mat-autocomplete-panel-above-offset: -24px !default;
 
 .mat-autocomplete-panel {

src/lib/button/button.scss

@@ -93,7 +93,7 @@
 .mat-button-ripple-round {
   border-radius: 50%;
   // z-index needed to make clipping to border-radius work correctly.
-  // http://stackoverflow.com/questions/20001515/chrome-bug-border-radius-not-clipping-contents-when-combined-with-css-transiti
+  // http://stackoverflow.com/questions/20001515/
   z-index: 1;
 }
 

src/lib/checkbox/checkbox.scss

@@ -347,8 +347,8 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
       // Instead of delaying the animation, we simply multiply its length by 2 and begin the
       // animation at 50% in order to prevent a flash of styles applied to a checked checkmark
       // as the background is fading in before the animation begins.
-      animation:
-        $mat-checkbox-transition-duration * 2 linear 0ms mat-checkbox-unchecked-checked-checkmark-path;
+      animation: $mat-checkbox-transition-duration * 2 linear 0ms
+          mat-checkbox-unchecked-checked-checkmark-path;
     }
   }
 

src/lib/input/_input-theme.scss

@@ -102,12 +102,12 @@
 
 // Applies a floating placeholder above the input itself.
 @mixin _mat-input-placeholder-floating($font-scale, $infix-padding, $infix-margin-top) {
+  // We use perspecitve to fix the text blurriness as described here:
+  // http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/
+  // This results in a small jitter after the label floats on Firefox, which the
+  // translateZ fixes.
   transform: translateY(-$infix-margin-top - $infix-padding)
              scale($font-scale)
-             // We use perspecitve to fix the text blurriness as described here:
-             // http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/
-             // This results in a small jitter after the label floats on Firefox, which the
-             // translateZ fixes.
              perspective(100px) translateZ(0.001px);
   // The tricks above used to smooth out the animation on chrome and firefox actually make things
   // worse on IE, so we don't include them in the IE version.

src/lib/progress-bar/progress-bar.scss

@@ -115,9 +115,11 @@ $mat-progress-bar-piece-animation-duration: 250ms !default;
 
 // KEYFRAME BLOCK                      DESCRIPTION
 // primary-indeterminate-translate     Translation of the primary progressbar across the screen
-// primary-indeterminate-scale         Scaling of the primary bar as it's being translated across the screen
+// primary-indeterminate-scale         Scaling of the primary bar as it's being translated
+//                                     across the screen
 // secondary-indeterminate-translate   Translation of the secondary bar across the screen
-// secondary-indeterminate-scale       Scaling of the secondary bar as it's being translated across the screen
+// secondary-indeterminate-scale       Scaling of the secondary bar as it's being translated
+//                                     across the screen
 //
 // Because two different transform animations need to be applied at once, the translation is
 // applied to the outer element and the scaling is applied to the inner element, which provides the
@@ -126,23 +128,33 @@ $mat-progress-bar-piece-animation-duration: 250ms !default;
 
 // Progress Bar Timing functions:
 // $mat-progress-bar-primary-indeterminate-translate-step-1 has no timing function.
-$mat-progress-bar-primary-indeterminate-translate-step-2: cubic-bezier(0.5, 0, 0.701732, 0.495819) !default;
-$mat-progress-bar-primary-indeterminate-translate-step-3: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352) !default;
+$mat-progress-bar-primary-indeterminate-translate-step-2:
+    cubic-bezier(0.5, 0, 0.701732, 0.495819) !default;
+$mat-progress-bar-primary-indeterminate-translate-step-3:
+    cubic-bezier(0.302435, 0.381352, 0.55, 0.956352) !default;
 // $mat-progress-bar-primary-indeterminate-translate-step-4 has no timing function.
 
 // $mat-progress-bar-primary-indeterminate-scale-step-1 has no timing function
-$mat-progress-bar-primary-indeterminate-scale-step-2: cubic-bezier(0.334731, 0.12482, 0.785844, 1) !default;
-$mat-progress-bar-primary-indeterminate-scale-step-3: cubic-bezier(0.06, 0.11, 0.6, 1) !default;
+$mat-progress-bar-primary-indeterminate-scale-step-2:
+    cubic-bezier(0.334731, 0.12482, 0.785844, 1) !default;
+$mat-progress-bar-primary-indeterminate-scale-step-3:
+    cubic-bezier(0.06, 0.11, 0.6, 1) !default;
 // $mat-progress-bar-primary-indeterminate-scale-step-4 has no timing function
 
-$mat-progress-bar-secondary-indeterminate-translate-step-1: cubic-bezier(0.15, 0, 0.515058, 0.409685) !default;
-$mat-progress-bar-secondary-indeterminate-translate-step-2: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712) !default;
-$mat-progress-bar-secondary-indeterminate-translate-step-3: cubic-bezier(0.4, 0.627035, 0.6, 0.902026) !default;
+$mat-progress-bar-secondary-indeterminate-translate-step-1:
+    cubic-bezier(0.15, 0, 0.515058, 0.409685) !default;
+$mat-progress-bar-secondary-indeterminate-translate-step-2:
+    cubic-bezier(0.31033, 0.284058, 0.8, 0.733712) !default;
+$mat-progress-bar-secondary-indeterminate-translate-step-3:
+    cubic-bezier(0.4, 0.627035, 0.6, 0.902026) !default;
 // $mat-progress-bar-secondary-indeterminate-translate-step-4 has no timing function
 
-$mat-progress-bar-secondary-indeterminate-scale-step-1: cubic-bezier(0.15, 0, 0.515058, 0.409685) !default;
-$mat-progress-bar-secondary-indeterminate-scale-step-2: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712) !default;
-$mat-progress-bar-secondary-indeterminate-scale-step-3: cubic-bezier(0.4, 0.627035, 0.6, 0.902026) !default;
+$mat-progress-bar-secondary-indeterminate-scale-step-1:
+    cubic-bezier(0.15, 0, 0.515058, 0.409685) !default;
+$mat-progress-bar-secondary-indeterminate-scale-step-2:
+    cubic-bezier(0.31033, 0.284058, 0.8, 0.733712) !default;
+$mat-progress-bar-secondary-indeterminate-scale-step-3:
+    cubic-bezier(0.4, 0.627035, 0.6, 0.902026) !default;
 // $mat-progress-bar-secondary-indeterminate-scale-step-4 has no timing function
 
 

src/lib/sidenav/sidenav.scss

@@ -3,8 +3,10 @@
 @import '../core/style/layout-common';
 @import '../core/a11y/a11y';
 
+// stylelint-disable max-line-length
 // Mixin that creates a new stacking context.
 // see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
+// stylelint-enable
 @mixin mat-sidenav-stacking-context() {
   position: relative;
 

src/lib/slide-toggle/_slide-toggle-theme.scss

@@ -3,8 +3,8 @@
 @import '../core/typography/typography-utils';
 
 @mixin _mat-slide-toggle-checked($palette, $thumb-checked-hue) {
-  // Do not apply the checked colors if the toggle is disabled, because the specificity would be to high for
-  // the disabled styles.
+  // Do not apply the checked colors if the toggle is disabled, because the
+  // specificity would be to high for the disabled styles.
   &.mat-checked:not(.mat-disabled) {
     .mat-slide-toggle-thumb {
       background-color: mat-color($palette, $thumb-checked-hue);
@@ -69,9 +69,9 @@
 
   .mat-disabled {
     .mat-slide-toggle-thumb {
-      // The thumb of the slide-toggle always uses the hue 400 of the grey palette in dark or light themes.
-      // Since this is very specific to the slide-toggle component, we're not providing
-      // it in the background palette.
+      // The thumb of the slide-toggle always uses the hue 400 of the grey palette in dark
+      // or light themes. Since this is very specific to the slide-toggle component, we're not
+      // providing it in the background palette.
       background-color: mat-color($mat-grey, $thumb-disabled-hue);
     }
     .mat-slide-toggle-bar {

src/lib/slider/slider.scss

@@ -316,7 +316,8 @@ $mat-slider-focus-ring-size: 30px !default;
   .mat-slider-thumb-label {
     right: -$mat-slider-thumb-label-size / 2;
     top: -($mat-slider-thumb-label-size + $mat-slider-thumb-arrow-gap);
-    transform: translateY($mat-slider-thumb-label-size / 2 + $mat-slider-thumb-arrow-gap) scale(0.01)
+    transform: translateY($mat-slider-thumb-label-size / 2 + $mat-slider-thumb-arrow-gap)
+        scale(0.01)
         rotate(45deg);
   }
 
@@ -392,7 +393,8 @@ $mat-slider-focus-ring-size: 30px !default;
   .mat-slider-thumb-label {
     bottom: -$mat-slider-thumb-label-size / 2;
     left: -($mat-slider-thumb-label-size + $mat-slider-thumb-arrow-gap);
-    transform: translateX($mat-slider-thumb-label-size / 2 + $mat-slider-thumb-arrow-gap) scale(0.01)
+    transform: translateX($mat-slider-thumb-label-size / 2 + $mat-slider-thumb-arrow-gap)
+        scale(0.01)
         rotate(-45deg);
   }
 

stylelint-config.json

@@ -73,6 +73,7 @@
     "selector-pseudo-element-no-unknown": true,
     "selector-type-case": "lower",
     "selector-max-id": 0,
-    "no-missing-end-of-source-newline": true
+    "no-missing-end-of-source-newline": true,
+    "max-line-length": 100
   }
 }