skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Enforces a 100-character line length in the SCSS files for consistency with the TS.
This commit is contained in:
Kristiyan Kostadinov
2017-08-03 01:15:05 +02:00
committed by tinayuangao
parent 4e6e42ea2f
commit d6f1a8d9bf
10 changed files with 53 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/demo-app/ripple/ripple-demo.scss
+1 -1
View File
@@ -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
+8 -2
View File
@@ -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
+1 -1
View File
@@ -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
+2 -2
View File
@@ -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
+4 -4
View File
@@ -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
+24 -12
View File
@@ -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
+2
View File
@@ -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
+5 -5
View File
@@ -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
+4 -2
View File
@@ -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
+2 -1
View File
@@ -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
}
}