diff --git a/src/lib/core/theming/_palette.scss b/src/lib/core/theming/_palette.scss index ffba34784659..e27ff7910f40 100644 --- a/src/lib/core/theming/_palette.scss +++ b/src/lib/core/theming/_palette.scss @@ -679,30 +679,34 @@ $mat-dark-theme-background: ( // Foreground palette for light themes. $mat-light-theme-foreground: ( - base: black, - divider: $black-12-opacity, - dividers: $black-12-opacity, - disabled: rgba(black, 0.38), - disabled-button: rgba(black, 0.38), - disabled-text: rgba(black, 0.38), - hint-text: rgba(black, 0.38), - secondary-text: rgba(black, 0.54), - icon: rgba(black, 0.54), - icons: rgba(black, 0.54), - text: rgba(black, 0.87) + base: black, + divider: $black-12-opacity, + dividers: $black-12-opacity, + disabled: rgba(black, 0.38), + disabled-button: rgba(black, 0.38), + disabled-text: rgba(black, 0.38), + hint-text: rgba(black, 0.38), + secondary-text: rgba(black, 0.54), + icon: rgba(black, 0.54), + icons: rgba(black, 0.54), + text: rgba(black, 0.87), + slider-off: rgba(black, 0.26), + slider-off-active: rgba(black, 0.38), ); // Foreground palette for dark themes. $mat-dark-theme-foreground: ( - base: white, - divider: $white-12-opacity, - dividers: $white-12-opacity, - 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 + base: white, + divider: $white-12-opacity, + dividers: $white-12-opacity, + 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, + slider-off: rgba(white, 0.3), + slider-off-active: rgba(white, 0.3), ); diff --git a/src/lib/slider/_slider-theme.scss b/src/lib/slider/_slider-theme.scss index 4216913f75f7..98d7932a7fca 100644 --- a/src/lib/slider/_slider-theme.scss +++ b/src/lib/slider/_slider-theme.scss @@ -17,14 +17,18 @@ $primary: map-get($theme, primary); $accent: map-get($theme, accent); $warn: map-get($theme, warn); - - $mat-slider-off-color: rgba(black, 0.26); - $mat-slider-off-focused-color: rgba(black, 0.38); - $mat-slider-disabled-color: rgba(black, 0.26); - $mat-slider-labeled-min-value-thumb-color: black; - $mat-slider-labeled-min-value-thumb-label-color: rgba(black, 0.26); - $mat-slider-focus-ring-color: rgba(mat-color($accent), 0.2); - $mat-slider-focus-ring-min-value-color: rgba(black, 0.12); + $background: map-get($theme, background); + $foreground: map-get($theme, foreground); + + $mat-slider-off-color: mat-color($foreground, slider-off); + $mat-slider-off-focused-color: mat-color($foreground, slider-off-active); + $mat-slider-disabled-color: mat-color($foreground, slider-off); + $mat-slider-labeled-min-value-thumb-color: mat-color($foreground, base); + $mat-slider-labeled-min-value-thumb-label-color: mat-color($foreground, slider-off); + $mat-slider-focus-ring-color: mat-color($accent, default, 0.2); + $mat-slider-focus-ring-min-value-color: mat-color($foreground, base, 0.12); + $mat-slider-tick-color: mat-color($foreground, base, 0.7); + $mat-slider-tick-size: 2px; .mat-slider-track-background { background-color: $mat-slider-off-color; @@ -104,4 +108,22 @@ } } } + + .mat-slider-has-ticks .mat-slider-wrapper::after { + border-color: $mat-slider-tick-color; + } + + .mat-slider-horizontal .mat-slider-ticks { + background-image: repeating-linear-gradient(to right, $mat-slider-tick-color, + $mat-slider-tick-color $mat-slider-tick-size, transparent 0, transparent); + // Firefox doesn't draw the gradient correctly with 'to right' + // (see https://bugzilla.mozilla.org/show_bug.cgi?id=1314319). + background-image: -moz-repeating-linear-gradient(0.0001deg, $mat-slider-tick-color, + $mat-slider-tick-color $mat-slider-tick-size, transparent 0, transparent); + } + + .mat-slider-vertical .mat-slider-ticks { + background-image: repeating-linear-gradient(to bottom, $mat-slider-tick-color, + $mat-slider-tick-color $mat-slider-tick-size, transparent 0, transparent); + } } diff --git a/src/lib/slider/slider.scss b/src/lib/slider/slider.scss index a43cadb9d1d6..408ed2fa11db 100644 --- a/src/lib/slider/slider.scss +++ b/src/lib/slider/slider.scss @@ -22,7 +22,6 @@ $mat-slider-thumb-arrow-gap: 12px !default; $mat-slider-thumb-label-size: 28px !default; -$mat-slider-tick-color: rgba(0, 0, 0, 0.6) !default; $mat-slider-tick-size: 2px !default; $mat-slider-focus-ring-size: 30px !default; @@ -70,6 +69,8 @@ $mat-slider-focus-ring-size: 30px !default; } .mat-slider-ticks { + background-repeat: repeat; + background-clip: content-box; box-sizing: border-box; opacity: 0; transition: opacity $swift-ease-out-duration $swift-ease-out-timing-function; @@ -168,7 +169,8 @@ $mat-slider-focus-ring-size: 30px !default; .mat-slider-wrapper::after { content: ''; position: absolute; - border: 0 solid $mat-slider-tick-color; + border-width: 0; + border-style: solid; opacity: 0; transition: opacity $swift-ease-out-duration $swift-ease-out-timing-function; } @@ -298,13 +300,6 @@ $mat-slider-focus-ring-size: 30px !default; } .mat-slider-ticks { - background: repeating-linear-gradient(to right, $mat-slider-tick-color, - $mat-slider-tick-color $mat-slider-tick-size, transparent 0, transparent) repeat; - // Firefox doesn't draw the gradient correctly with 'to right' - // (see https://bugzilla.mozilla.org/show_bug.cgi?id=1314319). - background: -moz-repeating-linear-gradient(0.0001deg, $mat-slider-tick-color, - $mat-slider-tick-color $mat-slider-tick-size, transparent 0, transparent) repeat; - background-clip: content-box; height: $mat-slider-track-thickness; width: 100%; } @@ -386,9 +381,6 @@ $mat-slider-focus-ring-size: 30px !default; } .mat-slider-ticks { - background: repeating-linear-gradient(to bottom, $mat-slider-tick-color, - $mat-slider-tick-color $mat-slider-tick-size, transparent 0, transparent) repeat; - background-clip: content-box; width: $mat-slider-track-thickness; height: 100%; }