From e137b09ce271e65932685aedfe2dd0db8e8b9bad Mon Sep 17 00:00:00 2001 From: Robert Messerle Date: Fri, 27 May 2016 11:40:26 -0700 Subject: [PATCH] adds stylelint config settings --- .../button-toggle/button-toggle.scss | 8 +- src/components/button/_button-base.scss | 8 +- src/components/button/button.scss | 4 +- src/components/card/card.scss | 8 +- src/components/checkbox/checkbox.scss | 42 +++---- src/components/grid-list/grid-list.scss | 2 +- src/components/icon/icon.scss | 4 +- src/components/input/input.scss | 6 +- src/components/list/list.scss | 8 +- src/components/progress-bar/progress-bar.scss | 106 +++++++++--------- .../progress-circle/progress-circle.scss | 18 +-- src/components/radio/radio.scss | 10 +- .../sidenav/sidenav-transitions.scss | 2 +- src/components/sidenav/sidenav.scss | 10 +- src/components/slide-toggle/slide-toggle.scss | 12 +- src/components/tabs/tab-group.scss | 2 +- src/components/toolbar/toolbar.scss | 8 +- src/core/a11y/live-announcer.scss | 2 +- src/core/style/_default-theme.scss | 2 +- src/core/style/_elevation.scss | 6 +- src/core/style/_mixins.scss | 10 +- src/core/style/_palette.scss | 16 +-- src/core/style/_theme-functions.scss | 6 +- src/core/style/_variables.scss | 20 ++-- src/demo-app/card/card-demo.scss | 2 +- src/demo-app/demo-app/demo-app.scss | 2 +- src/demo-app/gestures/gestures-demo.scss | 4 +- src/demo-app/grid-list/grid-list-demo.scss | 2 +- src/demo-app/list/list-demo.scss | 8 +- src/demo-app/main.scss | 4 +- src/demo-app/toolbar/toolbar-demo.scss | 4 +- src/e2e-app/main.scss | 4 +- stylelint-config.json | 56 ++++++++- 33 files changed, 230 insertions(+), 176 deletions(-) diff --git a/src/components/button-toggle/button-toggle.scss b/src/components/button-toggle/button-toggle.scss index 09846d13a35b..d85806a96053 100644 --- a/src/components/button-toggle/button-toggle.scss +++ b/src/components/button-toggle/button-toggle.scss @@ -1,7 +1,7 @@ -@import "elevation"; -@import "default-theme"; -@import "palette"; -@import "mixins"; +@import 'elevation'; +@import 'default-theme'; +@import 'palette'; +@import 'mixins'; $md-button-toggle-padding: 0 16px !default; $md-button-toggle-line-height: 36px !default; diff --git a/src/components/button/_button-base.scss b/src/components/button/_button-base.scss index 77da7cea5df1..1856ec13010c 100644 --- a/src/components/button/_button-base.scss +++ b/src/components/button/_button-base.scss @@ -1,10 +1,10 @@ -@import "variables"; -@import "elevation"; +@import 'variables'; +@import 'elevation'; // TODO(jelbourn): This goes away. -@import "default-theme"; -@import "button-theme"; +@import 'default-theme'; +@import 'button-theme'; // Flat and raised button standards $md-button-padding: 0 16px !default; diff --git a/src/components/button/button.scss b/src/components/button/button.scss index 99058c9ddd3d..2d5e366a549b 100644 --- a/src/components/button/button.scss +++ b/src/components/button/button.scss @@ -1,7 +1,7 @@ // TODO(jelbourn): Measure perf benefits for translate3d and will-change. // TODO(jelbourn): Figure out if anchor hover underline actually happens in any browser. -@import "button-base"; +@import 'button-base'; // TODO(kara): Replace attribute selectors with class selectors when possible [md-button] { @@ -23,7 +23,7 @@ } [md-mini-fab] { - @include md-fab($md-mini-fab-size, $md-mini-fab-padding) + @include md-fab($md-mini-fab-size, $md-mini-fab-padding); } [md-icon-button] { diff --git a/src/components/card/card.scss b/src/components/card/card.scss index 02f9c60f5c66..36526861d014 100644 --- a/src/components/card/card.scss +++ b/src/components/card/card.scss @@ -1,7 +1,7 @@ -@import "variables"; -@import "elevation"; -@import "default-theme"; // TODO: Remove this +@import 'variables'; +@import 'elevation'; +@import 'default-theme'; // TODO: Remove this $md-card-default-padding: 24px !default; $md-card-mobile-padding: 24px 16px !default; @@ -215,7 +215,7 @@ md-card-header md-card-subtitle:not(:first-child) { // xl image should always have 16px on top. // when it's the first el, it'll need to remove 8px from default card padding of 24px -.md-card > [md-card-xl-image]:first-child{ +.md-card > [md-card-xl-image]:first-child { margin-top: -8px; } diff --git a/src/components/checkbox/checkbox.scss b/src/components/checkbox/checkbox.scss index 6c825a685cf4..5b8e91eed116 100644 --- a/src/components/checkbox/checkbox.scss +++ b/src/components/checkbox/checkbox.scss @@ -1,7 +1,7 @@ -@import "default-theme"; -@import "theme-functions"; -@import "variables"; -@import "mixins"; +@import 'default-theme'; +@import 'theme-functions'; +@import 'variables'; +@import 'mixins'; /** The width/height of the checkbox element. */ $md-checkbox-size: $md-toggle-size !default; @@ -240,7 +240,7 @@ md-checkbox { white-space: nowrap; width: $md-checkbox-size; - [dir="rtl"] & { + [dir='rtl'] & { margin: { left: $md-checkbox-item-spacing; right: auto; @@ -265,7 +265,7 @@ md-checkbox { .md-checkbox-background { @extend %md-checkbox-outer-box; - align-items: center; + align-items: center; display: inline-flex; justify-content: center; transition: background-color $md-checkbox-transition-duration @@ -310,7 +310,7 @@ md-checkbox { right: auto; } - [dir="rtl"] & { + [dir='rtl'] & { margin: { left: auto; right: $md-checkbox-item-spacing; @@ -331,7 +331,7 @@ md-checkbox { .md-checkbox-mixedmark { transform: scaleX(1) rotate(-45deg); } - + .md-checkbox-background { background-color: $md-checkbox-background-color; } @@ -360,7 +360,7 @@ md-checkbox { .md-checkbox-unchecked { .md-checkbox-background { - background-color: transparent; + background-color: transparent; } } @@ -394,7 +394,7 @@ md-checkbox { &-unchecked-checked { .md-checkbox-background { - animation: $md-checkbox-transition-duration * 2 linear 0s md-checkbox-fade-in-background; + animation: $md-checkbox-transition-duration * 2 linear 0ms md-checkbox-fade-in-background; } .md-checkbox-checkmark-path { @@ -402,64 +402,64 @@ md-checkbox { // 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: - $md-checkbox-transition-duration * 2 linear 0s md-checkbox-unchecked-checked-checkmark-path; + $md-checkbox-transition-duration * 2 linear 0ms md-checkbox-unchecked-checked-checkmark-path; } } &-unchecked-indeterminate { .md-checkbox-background { - animation: $md-checkbox-transition-duration * 2 linear 0s md-checkbox-fade-in-background; + animation: $md-checkbox-transition-duration * 2 linear 0ms md-checkbox-fade-in-background; } .md-checkbox-mixedmark { animation: - $md-checkbox-transition-duration linear 0s md-checkbox-unchecked-indeterminate-mixedmark; + $md-checkbox-transition-duration linear 0ms md-checkbox-unchecked-indeterminate-mixedmark; } } &-checked-unchecked { .md-checkbox-background { - animation: $md-checkbox-transition-duration * 2 linear 0s md-checkbox-fade-out-background; + animation: $md-checkbox-transition-duration * 2 linear 0ms md-checkbox-fade-out-background; } .md-checkbox-checkmark-path { animation: - $md-checkbox-transition-duration linear 0s md-checkbox-checked-unchecked-checkmark-path; + $md-checkbox-transition-duration linear 0ms md-checkbox-checked-unchecked-checkmark-path; } } &-checked-indeterminate { .md-checkbox-checkmark { animation: - $md-checkbox-transition-duration linear 0s md-checkbox-checked-indeterminate-checkmark; + $md-checkbox-transition-duration linear 0ms md-checkbox-checked-indeterminate-checkmark; } .md-checkbox-mixedmark { animation: - $md-checkbox-transition-duration linear 0s md-checkbox-checked-indeterminate-mixedmark; + $md-checkbox-transition-duration linear 0ms md-checkbox-checked-indeterminate-mixedmark; } } &-indeterminate-checked { .md-checkbox-checkmark { animation: - $indeterminate-change-duration linear 0s md-checkbox-indeterminate-checked-checkmark; + $indeterminate-change-duration linear 0ms md-checkbox-indeterminate-checked-checkmark; } .md-checkbox-mixedmark { animation: - $indeterminate-change-duration linear 0s md-checkbox-indeterminate-checked-mixedmark; + $indeterminate-change-duration linear 0ms md-checkbox-indeterminate-checked-mixedmark; } } &-indeterminate-unchecked { .md-checkbox-background { - animation: $md-checkbox-transition-duration * 2 linear 0s md-checkbox-fade-out-background; + animation: $md-checkbox-transition-duration * 2 linear 0ms md-checkbox-fade-out-background; } .md-checkbox-mixedmark { animation: - $indeterminate-change-duration * 0.6 linear 0s + $indeterminate-change-duration * 0.6 linear 0ms md-checkbox-indeterminate-unchecked-mixedmark; } } diff --git a/src/components/grid-list/grid-list.scss b/src/components/grid-list/grid-list.scss index f0024520cad3..37dd9b9432b5 100644 --- a/src/components/grid-list/grid-list.scss +++ b/src/components/grid-list/grid-list.scss @@ -1,4 +1,4 @@ -@import "list-shared"; +@import 'list-shared'; /* height of tile header or footer if it has one line */ $md-grid-list-one-line-height: 48px; diff --git a/src/components/icon/icon.scss b/src/components/icon/icon.scss index a8bd0cebe37d..acfe82459986 100644 --- a/src/components/icon/icon.scss +++ b/src/components/icon/icon.scss @@ -1,5 +1,5 @@ -@import "variables"; -@import "default-theme"; +@import 'variables'; +@import 'default-theme'; /** The width/height of the icon element. */ $md-icon-size: 24px !default; diff --git a/src/components/input/input.scss b/src/components/input/input.scss index 588e5a496f1f..2e87b0c79d3b 100644 --- a/src/components/input/input.scss +++ b/src/components/input/input.scss @@ -17,9 +17,9 @@ $md-input-underline-focused-color: md-color($md-primary); // Gradient for showing the dashed line when the input is disabled. $md-input-underline-disabled-background-image: linear-gradient(to right, - rgba(0,0,0,0.26) 0%, rgba(0,0,0,0.26) 33%, transparent 0%); + rgba(0, 0, 0, 0.26) 0%, rgba(0, 0, 0, 0.26) 33%, transparent 0%); -/** +/** * Undo the red box-shadow glow added by Firefox on invalid inputs. * See https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-ui-invalid */ @@ -214,7 +214,7 @@ $md-input-underline-disabled-background-image: linear-gradient(to right, // RTL support. -:host-context([dir="rtl"]) { +:host-context([dir='rtl']) { text-align: right; .md-input-placeholder { diff --git a/src/components/list/list.scss b/src/components/list/list.scss index c93d7c05968a..13ab1a530931 100644 --- a/src/components/list/list.scss +++ b/src/components/list/list.scss @@ -1,6 +1,6 @@ -@import "variables"; -@import "default-theme"; -@import "list-shared"; +@import 'variables'; +@import 'default-theme'; +@import 'list-shared'; $md-list-side-padding: 16px; $md-list-avatar-size: 40px; @@ -99,7 +99,7 @@ based on whether the list is in dense mode. } } -md-list, md-nav-list { +md-list, md-nav-list { padding-top: $md-list-top-padding; display: block; diff --git a/src/components/progress-bar/progress-bar.scss b/src/components/progress-bar/progress-bar.scss index b3388f8d2a02..bfc052fa2745 100644 --- a/src/components/progress-bar/progress-bar.scss +++ b/src/components/progress-bar/progress-bar.scss @@ -1,8 +1,8 @@ -@import "variables"; -@import "default-theme"; +@import 'variables'; +@import 'default-theme'; $md-progress-bar-height: 5px !default; -$md-progress-bar-full-animation-duration: 2s !default; +$md-progress-bar-full-animation-duration: 2000ms !default; $md-progress-bar-piece-animation-duration: 250ms !default; // TODO(josephperrott): Find better way to inline svgs. @@ -18,24 +18,24 @@ $md-progress-bar-piece-animation-duration: 250ms !default; */ -$md-buffer-bubbles-primary: ( - "data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27" + - "%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20enable-backgroun" + - "d%3D%27new%200%200%205%202%27%20xml%3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio" + - "%3D%27none%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27" + - md-color($md-primary, 100) + "%27%2F%3E%3C%2Fsvg%3E") !default; -$md-buffer-bubbles-accent: ( - "data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27" + - "%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20enable-backgroun" + - "d%3D%27new%200%200%205%202%27%20xml%3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio" + - "%3D%27none%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27" + - md-color($md-accent, 100) + "%27%2F%3E%3C%2Fsvg%3E") !default; -$md-buffer-bubbles-warn: ( - "data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27" + - "%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20enable-backgroun" + - "d%3D%27new%200%200%205%202%27%20xml%3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio" + - "%3D%27none%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27" + - md-color($md-warn, 100) + "%27%2F%3E%3C%2Fsvg%3E") !default; +$md-buffer-bubbles-primary-url: url( + 'data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27' + + '%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20enable-backgroun' + + 'd%3D%27new%200%200%205%202%27%20xml%3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio' + + '%3D%27none%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27' + + md-color($md-primary, 100) + '%27%2F%3E%3C%2Fsvg%3E') !default; +$md-buffer-bubbles-accent-url: url( + 'data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27' + + '%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20enable-backgroun' + + 'd%3D%27new%200%200%205%202%27%20xml%3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio' + + '%3D%27none%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27' + + md-color($md-accent, 100) + '%27%2F%3E%3C%2Fsvg%3E') !default; +$md-buffer-bubbles-warn-url: url( + 'data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27' + + '%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20enable-backgroun' + + 'd%3D%27new%200%200%205%202%27%20xml%3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio' + + '%3D%27none%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27' + + md-color($md-warn, 100) + '%27%2F%3E%3C%2Fsvg%3E') !default; :host { display: block; @@ -50,7 +50,7 @@ $md-buffer-bubbles-warn: ( // The progress bar background is used to show the bubble animation scrolling behind a buffering progress bar. .md-progress-bar-background { - background: url($md-buffer-bubbles-primary); + background: $md-buffer-bubbles-primary-url; background-repeat: repeat-x; background-size: 10px 4px; height: 100%; @@ -104,9 +104,9 @@ $md-buffer-bubbles-warn: ( width: 100%; } - &[color="accent"] { + &[color='accent'] { .md-progress-bar-background { - background: url($md-buffer-bubbles-accent); + background: $md-buffer-bubbles-accent-url; background-repeat: repeat-x; background-size: 10px 4px; } @@ -118,9 +118,9 @@ $md-buffer-bubbles-warn: ( } } - &[color="warn"] { + &[color='warn'] { .md-progress-bar-background { - background: url($md-buffer-bubbles-warn); + background: $md-buffer-bubbles-warn-url; background-repeat: repeat-x; background-size: 10px 4px; } @@ -132,12 +132,12 @@ $md-buffer-bubbles-warn: ( } } - &[mode="query"] { + &[mode='query'] { transform: rotateZ(180deg); } - &[mode="indeterminate"], - &[mode="query"] { + &[mode='indeterminate'], + &[mode='query'] { .md-progress-bar-fill { transition: none; } @@ -158,7 +158,7 @@ $md-buffer-bubbles-warn: ( } } - &[mode="buffer"] { + &[mode='buffer'] { .md-progress-bar-background { animation: md-progress-bar-background-scroll $md-progress-bar-piece-animation-duration infinite linear; visibility: visible; @@ -168,7 +168,7 @@ $md-buffer-bubbles-warn: ( // Reverse the apparent directionality of progress vars for rtl. -:host-context([dir="rtl"]) { +:host-context([dir='rtl']) { transform: rotateY(180deg); } @@ -196,34 +196,34 @@ $md-buffer-bubbles-warn: ( // Progress Bar Timing functions: // $md-progress-bar-primary-indeterminate-translate-step-1 has no timing function. -$md-progress-bar-primary-indeterminate-translate-step-2: cubic-bezier(.5, 0, .701732, .495819) !default; -$md-progress-bar-primary-indeterminate-translate-step-3: cubic-bezier(.302435, .381352, .55, .956352) !default; +$md-progress-bar-primary-indeterminate-translate-step-2: cubic-bezier(0.5, 0, 0.701732, 0.495819) !default; +$md-progress-bar-primary-indeterminate-translate-step-3: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352) !default; // $md-progress-bar-primary-indeterminate-translate-step-4 has no timing function. // $md-progress-bar-primary-indeterminate-scale-step-1 has no timing function -$md-progress-bar-primary-indeterminate-scale-step-2: cubic-bezier(.334731, .124820, .785844, 1) !default; -$md-progress-bar-primary-indeterminate-scale-step-3: cubic-bezier(.06, .11, .6, 1) !default; +$md-progress-bar-primary-indeterminate-scale-step-2: cubic-bezier(0.334731, 0.12482, 0.785844, 1) !default; +$md-progress-bar-primary-indeterminate-scale-step-3: cubic-bezier(0.06, 0.11, 0.6, 1) !default; // $md-progress-bar-primary-indeterminate-scale-step-4 has no timing function -$md-progress-bar-secondary-indeterminate-translate-step-1: cubic-bezier(.15, 0, .515058, .409685) !default; -$md-progress-bar-secondary-indeterminate-translate-step-2: cubic-bezier(.310330, .284058, .8, .733712) !default; -$md-progress-bar-secondary-indeterminate-translate-step-3: cubic-bezier(.4, .627035, .6, .902026) !default; +$md-progress-bar-secondary-indeterminate-translate-step-1: cubic-bezier(0.15, 0, 0.515058, 0.409685) !default; +$md-progress-bar-secondary-indeterminate-translate-step-2: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712) !default; +$md-progress-bar-secondary-indeterminate-translate-step-3: cubic-bezier(0.4, 0.627035, 0.6, 0.902026) !default; // $md-progress-bar-secondary-indeterminate-translate-step-4 has no timing function -$md-progress-bar-secondary-indeterminate-scale-step-1: cubic-bezier(.15, 0, .515058, .409685) !default; -$md-progress-bar-secondary-indeterminate-scale-step-2: cubic-bezier(.310330, .284058, .8, .733712) !default; -$md-progress-bar-secondary-indeterminate-scale-step-3: cubic-bezier(.4, .627035, .6, .902026) !default; +$md-progress-bar-secondary-indeterminate-scale-step-1: cubic-bezier(0.15, 0, 0.515058, 0.409685) !default; +$md-progress-bar-secondary-indeterminate-scale-step-2: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712) !default; +$md-progress-bar-secondary-indeterminate-scale-step-3: cubic-bezier(0.4, 0.627035, 0.6, 0.902026) !default; // $md-progress-bar-secondary-indeterminate-scale-step-4 has no timing function /** Animations for indeterminate and query mode. */ // Primary indicator. @keyframes md-progress-bar-primary-indeterminate-translate { 0% { - transform: translateX(0px); + transform: translateX(0); } 20% { animation-timing-function: $md-progress-bar-primary-indeterminate-translate-step-2; - transform: translateX(0px); + transform: translateX(0); } 59.15% { animation-timing-function: $md-progress-bar-primary-indeterminate-translate-step-3; @@ -236,18 +236,18 @@ $md-progress-bar-secondary-indeterminate-scale-step-3: cubic-bezier(.4, .627035, @keyframes md-progress-bar-primary-indeterminate-scale { 0% { - transform: scaleX(.08); + transform: scaleX(0.08); } 36.65% { animation-timing-function: $md-progress-bar-primary-indeterminate-scale-step-2; - transform: scaleX(.08); + transform: scaleX(0.08); } 69.15% { animation-timing-function: $md-progress-bar-primary-indeterminate-scale-step-3; - transform: scaleX(.661479); + transform: scaleX(0.661479); } 100% { - transform: scaleX(.08); + transform: scaleX(0.08); } } @@ -255,7 +255,7 @@ $md-progress-bar-secondary-indeterminate-scale-step-3: cubic-bezier(.4, .627035, @keyframes md-progress-bar-secondary-indeterminate-translate { 0% { animation-timing-function: $md-progress-bar-secondary-indeterminate-translate-step-1; - transform: translateX(0px); + transform: translateX(0); } 25% { animation-timing-function: $md-progress-bar-secondary-indeterminate-translate-step-2; @@ -266,7 +266,7 @@ $md-progress-bar-secondary-indeterminate-scale-step-3: cubic-bezier(.4, .627035, animation-timing-function: $md-progress-bar-secondary-indeterminate-translate-step-3; transform: translateX(84.386165%); } - 100% { + 100% { transform: translateX(160.277782%); } } @@ -274,18 +274,18 @@ $md-progress-bar-secondary-indeterminate-scale-step-3: cubic-bezier(.4, .627035, @keyframes md-progress-bar-secondary-indeterminate-scale { 0% { animation-timing-function: $md-progress-bar-secondary-indeterminate-scale-step-1; - transform: scaleX(.08); + transform: scaleX(0.08); } 19.15% { animation-timing-function: $md-progress-bar-secondary-indeterminate-scale-step-2; - transform: scaleX(.457104); + transform: scaleX(0.457104); } 44.15% { animation-timing-function: $md-progress-bar-secondary-indeterminate-scale-step-3; - transform: scaleX(.727960); + transform: scaleX(0.72796); } 100% { - transform: scaleX(.08); + transform: scaleX(0.08); } } diff --git a/src/components/progress-circle/progress-circle.scss b/src/components/progress-circle/progress-circle.scss index b27d3a1bc29b..2fa7a4f588d8 100644 --- a/src/components/progress-circle/progress-circle.scss +++ b/src/components/progress-circle/progress-circle.scss @@ -1,16 +1,16 @@ -@import "variables"; +@import 'variables'; -@import "default-theme"; +@import 'default-theme'; /* Animation Durations */ -$md-progress-circle-duration : 5.25s !default; -$md-progress-circle-constant-rotate-duration : $md-progress-circle-duration * 0.55 !default; -$md-progress-circle-sporadic-rotate-duration : $md-progress-circle-duration !default; +$md-progress-circle-duration: 5250ms !default; +$md-progress-circle-constant-rotate-duration: $md-progress-circle-duration * 0.55 !default; +$md-progress-circle-sporadic-rotate-duration: $md-progress-circle-duration !default; /** Component sizing */ $md-progress-circle-stroke-width: 10px !default; // Height and weight of the viewport for md-progress-circle. -$md-progress-circle-viewport-size : 100px !default; +$md-progress-circle-viewport-size: 100px !default; :host { @@ -38,17 +38,17 @@ $md-progress-circle-viewport-size : 100px !default; stroke-width: $md-progress-circle-stroke-width; } - &[color="accent"] path { + &[color='accent'] path { stroke: md-color($md-accent, 600); } - &[color="warn"] path { + &[color='warn'] path { stroke: md-color($md-warn, 600); } - &[mode="indeterminate"] { + &[mode='indeterminate'] { animation-duration: $md-progress-circle-sporadic-rotate-duration, $md-progress-circle-constant-rotate-duration; animation-name: md-progress-circle-sporadic-rotate, diff --git a/src/components/radio/radio.scss b/src/components/radio/radio.scss index 703b9ef4ecd7..5dd61c20d649 100644 --- a/src/components/radio/radio.scss +++ b/src/components/radio/radio.scss @@ -1,6 +1,6 @@ -@import "default-theme"; -@import "variables"; -@import "mixins"; +@import 'default-theme'; +@import 'variables'; +@import 'mixins'; $md-radio-size: $md-toggle-size !default; @@ -38,7 +38,7 @@ md-radio-button { left: 0; position: absolute; top: 0; - transition: border-color ease 0.28s; + transition: border-color ease 280ms; width: $md-radio-size; .md-radio-checked & { @@ -59,7 +59,7 @@ md-radio-button { left: 0; position: absolute; top: 0; - transition: transform ease 0.28s, background-color ease 0.28s; + transition: transform ease 280ms, background-color ease 280ms; transform: scale(0); width: $md-radio-size; diff --git a/src/components/sidenav/sidenav-transitions.scss b/src/components/sidenav/sidenav-transitions.scss index f79c0165d47d..f4c5d20c8234 100644 --- a/src/components/sidenav/sidenav-transitions.scss +++ b/src/components/sidenav/sidenav-transitions.scss @@ -1,7 +1,7 @@ /** * We separate transitions to be able to disable them in unit tests, by simply not loading this file. */ -@import "variables"; +@import 'variables'; :host { diff --git a/src/components/sidenav/sidenav.scss b/src/components/sidenav/sidenav.scss index add78263ad0c..c598ad2fa234 100644 --- a/src/components/sidenav/sidenav.scss +++ b/src/components/sidenav/sidenav.scss @@ -1,7 +1,7 @@ -@import "default-theme"; -@import "mixins"; -@import "variables"; -@import "elevation"; +@import 'default-theme'; +@import 'mixins'; +@import 'variables'; +@import 'elevation'; // We use invert() here to have the darken the background color expected to be used. If the @@ -139,7 +139,7 @@ $md-sidenav-push-background-color: md-color($md-background, dialog) !default; } -:host-context([dir="rtl"]) { +:host-context([dir='rtl']) { > md-sidenav { @include md-sidenav-transition(0, 100%); diff --git a/src/components/slide-toggle/slide-toggle.scss b/src/components/slide-toggle/slide-toggle.scss index b72da7699ee4..a02ca683c188 100644 --- a/src/components/slide-toggle/slide-toggle.scss +++ b/src/components/slide-toggle/slide-toggle.scss @@ -1,9 +1,9 @@ -@import "variables"; -@import "mixins"; -@import "elevation"; +@import 'variables'; +@import 'mixins'; +@import 'elevation'; //TODO(): remove the default theme. -@import "default-theme"; +@import 'default-theme'; $md-slide-toggle-width: 36px !default; $md-slide-toggle-height: 24px !default; @@ -176,5 +176,5 @@ $md-slide-toggle-margin: 16px !default; .md-slide-toggle-thumb { transition: $swift-linear; transition-property: background-color; - transition-delay: 0.05s; -} \ No newline at end of file + transition-delay: 50ms; +} diff --git a/src/components/tabs/tab-group.scss b/src/components/tabs/tab-group.scss index 7509ad63c962..4a4db09e4bd4 100644 --- a/src/components/tabs/tab-group.scss +++ b/src/components/tabs/tab-group.scss @@ -66,5 +66,5 @@ md-ink-bar { bottom: 0; height: 2px; background-color: md-color($md-primary, 500); - transition: 0.35s ease-out; + transition: 350ms ease-out; } diff --git a/src/components/toolbar/toolbar.scss b/src/components/toolbar/toolbar.scss index 23f83d2650df..3bcb814c1a29 100644 --- a/src/components/toolbar/toolbar.scss +++ b/src/components/toolbar/toolbar.scss @@ -1,6 +1,6 @@ -@import "variables"; -@import "mixins"; -@import "default-theme"; //TODO: remove that soon. +@import 'variables'; +@import 'mixins'; +@import 'default-theme'; //TODO: remove that soon. $md-toolbar-min-height: 64px !default; $md-toolbar-font-size: 20px !default; @@ -54,4 +54,4 @@ $md-toolbar-padding: 16px !default; align-items: center; } -} \ No newline at end of file +} diff --git a/src/core/a11y/live-announcer.scss b/src/core/a11y/live-announcer.scss index c4eeae7d2682..6ea7cfb6fa52 100644 --- a/src/core/a11y/live-announcer.scss +++ b/src/core/a11y/live-announcer.scss @@ -2,4 +2,4 @@ .md-live-announcer { @include md-visually-hidden(); -} \ No newline at end of file +} diff --git a/src/core/style/_default-theme.scss b/src/core/style/_default-theme.scss index 22ca178e79b7..34149400a25b 100644 --- a/src/core/style/_default-theme.scss +++ b/src/core/style/_default-theme.scss @@ -7,7 +7,7 @@ $md-is-dark-theme: false; $md-primary: md-palette($md-teal, 500, 100, 700, $md-contrast-palettes); -$md-accent: md-palette($md-purple, 500, 300,800, $md-contrast-palettes); +$md-accent: md-palette($md-purple, 500, 300, 800, $md-contrast-palettes); $md-warn: md-palette($md-red, 500, 300, 900, $md-contrast-palettes); $md-foreground: if($md-is-dark-theme, $md-dark-theme-foreground, $md-light-theme-foreground); $md-background: if($md-is-dark-theme, $md-dark-theme-background, $md-light-theme-background); diff --git a/src/core/style/_elevation.scss b/src/core/style/_elevation.scss index af44269217f3..c929bb0f1847 100644 --- a/src/core/style/_elevation.scss +++ b/src/core/style/_elevation.scss @@ -1,4 +1,4 @@ -@import "variables"; +@import 'variables'; /** * A collection of mixins and CSS classes that can be used to apply elevation to a material @@ -139,10 +139,10 @@ $md-elevation-transition-timing-function: $md-fast-out-slow-in-timing-function; */ @mixin md-elevation($zValue) { @if type-of($zValue) != number or not unitless($zValue) { - @error "$zValue must be a unitless number"; + @error '$zValue must be a unitless number'; } @if $zValue < 0 or $zValue > 24 { - @error "$zValue must be between 0 and 24"; + @error '$zValue must be between 0 and 24'; } #{$md-elevation-property}: #{map-get($_umbra-elevation-map, $zValue)}, diff --git a/src/core/style/_mixins.scss b/src/core/style/_mixins.scss index 6df7cee07341..8839a765f9c9 100644 --- a/src/core/style/_mixins.scss +++ b/src/core/style/_mixins.scss @@ -7,7 +7,7 @@ position: relative; // Use a transform to create a new stacking context. - transform: translate3D(0, 0, 0); + transform: translate3d(0, 0, 0); } /** @@ -31,7 +31,7 @@ * `overflow: hidden;` because it doesn't cut off contents. */ @mixin md-clearfix { - &:before, &:after { + &::before, &::after { content: ''; clear: both; display: table; @@ -57,8 +57,8 @@ pointer-events: none; position: absolute; top: 50%; - transform: translate(-50%,-50%); - transition: opacity ease 0.28s, background-color ease 0.28s; + transform: translate(-50%, -50%); + transition: opacity ease 280ms, background-color ease 280ms; width: 48px; } @@ -73,4 +73,4 @@ #{if($bindToParent, '&', '')}.md-#{$component}-disabled .md-ink-ripple { background-color: #000; } -} \ No newline at end of file +} diff --git a/src/core/style/_palette.scss b/src/core/style/_palette.scss index e98bc90e6539..e64a111a3bae 100644 --- a/src/core/style/_palette.scss +++ b/src/core/style/_palette.scss @@ -332,7 +332,7 @@ $md-light-theme-background: ( status-bar: map_get($md-grey, 300), app-bar: map_get($md-grey, 100), background: map_get($md-grey, 50), - hover: rgba(black, 0.04), // TODO(kara): check style with Material Design UX + hover: rgba(black, 0.04), // TODO(kara): check style with Material Design UX card: white, dialog: white, disabled-button: rgba(black, 0.12) @@ -343,10 +343,10 @@ $md-dark-theme-background: ( status-bar: black, app-bar: map_get($md-grey, 900), background: #303030, - hover: rgba(white, 0.04), // TODO(kara): check style with Material Design UX + hover: rgba(white, 0.04), // TODO(kara): check style with Material Design UX card: map_get($md-grey, 800), dialog: map_get($md-grey, 800), - disabled-button: rgba(white, 0.12) + disabled-button: rgba(white, 0.12) ); // Foreground palette for light themes. @@ -369,11 +369,11 @@ $md-dark-theme-foreground: ( base: white, divider: rgba(white, 0.12), dividers: rgba(white, 0.12), - disabled: rgba(white, 0.30), - disabled-button: rgba(white,0.30), - disabled-text: rgba(white, 0.30), - hint-text: rgba(white, 0.30), - secondary-text: rgba(white, 0.70), + disabled: rgba(white, 0.3), + disabled-button: rgba(white, 0.3), + disabled-text: rgba(white, 0.3), + hint-text: rgba(white, 0.3), + secondary-text: rgba(white, 0.7), icon: white, icons: white, text: white diff --git a/src/core/style/_theme-functions.scss b/src/core/style/_theme-functions.scss index 4a3537ee5af1..30c4002b7391 100644 --- a/src/core/style/_theme-functions.scss +++ b/src/core/style/_theme-functions.scss @@ -34,8 +34,8 @@ // For each hue in the palette, add a "-contrast" color to the map. @each $hue, $color in $color-map { $result: map_merge($result, ( - "#{$hue}-contrast": md-contrast($color-map, $hue, $contrast-color-map) - )) + '#{$hue}-contrast': md-contrast($color-map, $hue, $contrast-color-map) + )); } @return $result; @@ -50,7 +50,7 @@ // If hueKey is a number between zero and one, then it actually contains an // opacity value, so recall this function with the default hue and that given opacity. @if type-of($hue-key) == number and $hue-key >= 0 and $hue-key <= 1 { - @return md-color($color-map, default, $hue-key) + @return md-color($color-map, default, $hue-key); } $color: map-get($color-map, $hue-key); diff --git a/src/core/style/_variables.scss b/src/core/style/_variables.scss index 417a6cd0a0cf..55877597d460 100644 --- a/src/core/style/_variables.scss +++ b/src/core/style/_variables.scss @@ -2,11 +2,11 @@ // Typography -$md-body-font-size-base: rem(1.400) !default; +$md-body-font-size-base: rem(1.4) !default; $md-font-family: Roboto, 'Helvetica Neue', sans-serif !default; // Media queries -$md-xsmall: "max-width: 600px"; +$md-xsmall: 'max-width: 600px'; // z-index master list $z-index-fab: 20 !default; @@ -24,24 +24,24 @@ $md-toggle-size: 20px !default; // TODO(jelbourn): all of these need to be revisited // The default animation curves used by material design. -$md-linear-out-slow-in-timing-function: cubic-bezier(0.0, 0.0, 0.2, 0.1) !default; -$md-fast-out-slow-in-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1) !default; -$md-fast-out-linear-in-timing-function: cubic-bezier(0.4, 0.0, 1, 1) !default; +$md-linear-out-slow-in-timing-function: cubic-bezier(0, 0, 0.2, 0.1) !default; +$md-fast-out-slow-in-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default; +$md-fast-out-linear-in-timing-function: cubic-bezier(0.4, 0, 1, 1) !default; $ease-in-out-curve-function: cubic-bezier(0.35, 0, 0.25, 1) !default; -$swift-ease-out-duration: 0.4s !default; +$swift-ease-out-duration: 400ms !default; $swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default; $swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default; -$swift-ease-in-duration: 0.3s !default; +$swift-ease-in-duration: 300ms !default; $swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default; $swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !default; -$swift-ease-in-out-duration: 0.5s !default; +$swift-ease-in-out-duration: 500ms !default; $swift-ease-in-out-timing-function: $ease-in-out-curve-function !default; $swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default; -$swift-linear-duration: 0.08s !default; +$swift-linear-duration: 80ms !default; $swift-linear-timing-function: linear !default; -$swift-linear: all $swift-linear-duration $swift-linear-timing-function !default; \ No newline at end of file +$swift-linear: all $swift-linear-duration $swift-linear-timing-function !default; diff --git a/src/demo-app/card/card-demo.scss b/src/demo-app/card/card-demo.scss index 7e462aa9917e..e5dfdfce005b 100644 --- a/src/demo-app/card/card-demo.scss +++ b/src/demo-app/card/card-demo.scss @@ -13,7 +13,7 @@ } .demo-card-blue { - background-color: #B0BECC; + background-color: #b0becc; md-card-actions { display: flex; diff --git a/src/demo-app/demo-app/demo-app.scss b/src/demo-app/demo-app/demo-app.scss index 972c22e62b41..9a85b466a86f 100644 --- a/src/demo-app/demo-app/demo-app.scss +++ b/src/demo-app/demo-app/demo-app.scss @@ -38,4 +38,4 @@ h1 { font-size: 20px; } -} \ No newline at end of file +} diff --git a/src/demo-app/gestures/gestures-demo.scss b/src/demo-app/gestures/gestures-demo.scss index 62d259164b3b..75917c2ae647 100644 --- a/src/demo-app/gestures/gestures-demo.scss +++ b/src/demo-app/gestures/gestures-demo.scss @@ -3,5 +3,5 @@ width: 200px; background: gray; padding: 15px; - color: #FFF; -} \ No newline at end of file + color: white; +} diff --git a/src/demo-app/grid-list/grid-list-demo.scss b/src/demo-app/grid-list/grid-list-demo.scss index 607acef66a07..686a09d7380b 100644 --- a/src/demo-app/grid-list/grid-list-demo.scss +++ b/src/demo-app/grid-list/grid-list-demo.scss @@ -10,7 +10,7 @@ } .demo-basic-list md-grid-tile { - background: rgba(0,0,0,0.32); + background: rgba(0, 0, 0, 0.32); } img { diff --git a/src/demo-app/list/list-demo.scss b/src/demo-app/list/list-demo.scss index 0aab51351a7d..268668fa15d3 100644 --- a/src/demo-app/list/list-demo.scss +++ b/src/demo-app/list/list-demo.scss @@ -4,7 +4,7 @@ flex-flow: row wrap; md-list, md-nav-list { - border: 1px solid rgba(0,0,0,0.12); + border: 1px solid rgba(0, 0, 0, 0.12); width: 350px; margin: 20px 20px 0 0; @@ -14,15 +14,15 @@ } md-icon { - color: rgba(0,0,0,0.12); + color: rgba(0, 0, 0, 0.12); } [md-list-icon] { color: white; - background: rgba(0,0,0,0.3); + background: rgba(0, 0, 0, 0.3); } } .demo-secondary-text { color: rgba(0, 0, 0, 0.54); -} \ No newline at end of file +} diff --git a/src/demo-app/main.scss b/src/demo-app/main.scss index 3c3e40cf99b3..1ca2844c5a35 100644 --- a/src/demo-app/main.scss +++ b/src/demo-app/main.scss @@ -2,5 +2,5 @@ // Contains CSS rules that users will consume throughout their application as well as rules // that are consumed across multiple components (and thus shouldn't be scoped). -@import "core/overlay/overlay"; -@import "core/a11y/live-announcer"; +@import 'core/overlay/overlay'; +@import 'core/a11y/live-announcer'; diff --git a/src/demo-app/toolbar/toolbar-demo.scss b/src/demo-app/toolbar/toolbar-demo.scss index ec89aee752cd..a433f45b5cb9 100644 --- a/src/demo-app/toolbar/toolbar-demo.scss +++ b/src/demo-app/toolbar/toolbar-demo.scss @@ -2,11 +2,11 @@ padding: 6px; .demo-toolbar-icon { - padding: 0 14px 0 14px; + padding: 0 14px; } .demo-fill-remaining { flex: 1 1 auto; } -} \ No newline at end of file +} diff --git a/src/e2e-app/main.scss b/src/e2e-app/main.scss index 73b3fbb8b0e3..af4ecaa1d1a9 100644 --- a/src/e2e-app/main.scss +++ b/src/e2e-app/main.scss @@ -1,2 +1,2 @@ -@import "core/overlay/overlay"; -@import "core/a11y/live-announcer"; +@import 'core/overlay/overlay'; +@import 'core/a11y/live-announcer'; diff --git a/stylelint-config.json b/stylelint-config.json index 34377bcf1fcd..71090ad21782 100644 --- a/stylelint-config.json +++ b/stylelint-config.json @@ -1,5 +1,59 @@ { "rules": { + "color-hex-case": "lower", + "color-no-invalid-hex": true, + + "function-calc-no-unspaced-operator": true, + "function-comma-space-after": "always-single-line", + "function-comma-space-before": "never", + "function-name-case": "lower", + "function-url-quotes": "always", + "function-whitespace-after": "always", + + "number-leading-zero": "always", + "number-no-trailing-zeros": true, + "number-zero-length-no-unit": true, + + "string-no-newline": true, + "string-quotes": "single", + + "unit-case": "lower", + "unit-no-unknown": true, + "unit-whitelist": ["px", "%", "deg", "ms", "em"], + + "value-list-comma-space-after": "always-single-line", + "value-list-comma-space-before": "never", + + "shorthand-property-no-redundant-values": true, + + "property-case": "lower", + + "declaration-block-no-duplicate-properties": true, + "declaration-block-no-ignored-properties": true, + "declaration-block-trailing-semicolon": "always", + "declaration-block-single-line-max-declarations": 1, + "declaration-block-semicolon-space-before": "never", + "declaration-block-semicolon-space-after": "always-single-line", + "declaration-block-semicolon-newline-before": "never-multi-line", + "declaration-block-semicolon-newline-after": "always-multi-line", + + "block-closing-brace-newline-after": "always", + "block-closing-brace-newline-before": "always-multi-line", + "block-no-empty": true, + "block-opening-brace-newline-after": "always-multi-line", + "block-opening-brace-space-before": "always-multi-line", + + "selector-attribute-brackets-space-inside": "never", + "selector-attribute-operator-space-after": "never", + "selector-attribute-operator-space-before": "never", + "selector-combinator-space-after": "always", + "selector-combinator-space-before": "always", + "selector-pseudo-class-case": "lower", + "selector-pseudo-class-parentheses-space-inside": "never", + "selector-pseudo-element-case": "lower", + "selector-pseudo-element-colon-notation": "double", + "selector-pseudo-element-no-unknown": true, + "selector-type-case": "lower", "selector-no-id": true } -} \ No newline at end of file +}