From d6f1a8d9bf089704e05e517c5773cf396708dd1e Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Thu, 3 Aug 2017 01:15:05 +0200 Subject: [PATCH] build: enforce line length in scss files (#6233) Enforces a 100-character line length in the SCSS files for consistency with the TS. --- src/demo-app/ripple/ripple-demo.scss | 2 +- src/lib/autocomplete/autocomplete.scss | 10 ++++-- src/lib/button/button.scss | 2 +- src/lib/checkbox/checkbox.scss | 4 +-- src/lib/input/_input-theme.scss | 8 ++--- src/lib/progress-bar/progress-bar.scss | 36 ++++++++++++------- src/lib/sidenav/sidenav.scss | 2 ++ src/lib/slide-toggle/_slide-toggle-theme.scss | 10 +++--- src/lib/slider/slider.scss | 6 ++-- stylelint-config.json | 3 +- 10 files changed, 53 insertions(+), 30 deletions(-) diff --git a/src/demo-app/ripple/ripple-demo.scss b/src/demo-app/ripple/ripple-demo.scss index 2f8268a8361..b43ebe90cee 100644 --- a/src/demo-app/ripple/ripple-demo.scss +++ b/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; } } diff --git a/src/lib/autocomplete/autocomplete.scss b/src/lib/autocomplete/autocomplete.scss index 3a75e9064b1..297b085473b 100644 --- a/src/lib/autocomplete/autocomplete.scss +++ b/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 { diff --git a/src/lib/button/button.scss b/src/lib/button/button.scss index 5e4761a93f5..8c084abf4f7 100644 --- a/src/lib/button/button.scss +++ b/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; } diff --git a/src/lib/checkbox/checkbox.scss b/src/lib/checkbox/checkbox.scss index 028a20456a7..049ed8c67eb 100644 --- a/src/lib/checkbox/checkbox.scss +++ b/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; } } diff --git a/src/lib/input/_input-theme.scss b/src/lib/input/_input-theme.scss index 31a88def73c..e4b9ea76a6d 100644 --- a/src/lib/input/_input-theme.scss +++ b/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. diff --git a/src/lib/progress-bar/progress-bar.scss b/src/lib/progress-bar/progress-bar.scss index 95d1e36c6af..bb7a7a13e47 100644 --- a/src/lib/progress-bar/progress-bar.scss +++ b/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 diff --git a/src/lib/sidenav/sidenav.scss b/src/lib/sidenav/sidenav.scss index 4a3083d678d..23d300baed5 100644 --- a/src/lib/sidenav/sidenav.scss +++ b/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; diff --git a/src/lib/slide-toggle/_slide-toggle-theme.scss b/src/lib/slide-toggle/_slide-toggle-theme.scss index f1a3eb31950..dec7e55ae94 100644 --- a/src/lib/slide-toggle/_slide-toggle-theme.scss +++ b/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 { diff --git a/src/lib/slider/slider.scss b/src/lib/slider/slider.scss index 46a66951553..1a2b36e59b4 100644 --- a/src/lib/slider/slider.scss +++ b/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); } diff --git a/stylelint-config.json b/stylelint-config.json index e5871fd7bbc..71ce9a75ad8 100644 --- a/stylelint-config.json +++ b/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 } }