mirror of
https://github.com/material-components/material-web.git
synced 2024-09-17 16:48:02 +03:00
89 lines
3.4 KiB
SCSS
89 lines
3.4 KiB
SCSS
//
|
|
// Copyright 2022 Google LLC
|
|
// SPDX-License-Identifier: Apache-2.0
|
|
//
|
|
|
|
// go/keep-sorted start
|
|
@use './slider';
|
|
// go/keep-sorted end
|
|
|
|
@media (forced-colors: active) {
|
|
:host {
|
|
$container-color: CanvasText; // white
|
|
$color: Canvas; // black
|
|
$disabled-color: GrayText;
|
|
@include slider.theme(
|
|
(
|
|
active-track-color: $container-color,
|
|
disabled-active-track-color: $disabled-color,
|
|
disabled-active-track-opacity: 1,
|
|
disabled-handle-color: $disabled-color,
|
|
disabled-inactive-track-color: $disabled-color,
|
|
disabled-inactive-track-opacity: 1,
|
|
focus-handle-color: $container-color,
|
|
handle-color: $container-color,
|
|
handle-shadow-color: $color,
|
|
hover-handle-color: $container-color,
|
|
hover-state-layer-color: $color,
|
|
hover-state-layer-opacity: 1,
|
|
inactive-track-color: $color,
|
|
label-container-color: $color,
|
|
label-text-color: $container-color,
|
|
pressed-handle-color: $container-color,
|
|
pressed-state-layer-color: $color,
|
|
pressed-state-layer-opacity: 1,
|
|
with-overlap-handle-outline-color: $container-color,
|
|
)
|
|
);
|
|
}
|
|
|
|
.label,
|
|
.label::before {
|
|
border: var(--_with-overlap-handle-outline-color) solid
|
|
var(--_with-overlap-handle-outline-width);
|
|
}
|
|
|
|
// inactive track
|
|
:host(:not([disabled])) .track::before {
|
|
border: 1px solid var(--_active-track-color);
|
|
}
|
|
|
|
// inactive-track
|
|
.tickmarks::before {
|
|
// A url must be used when forced-colors is active as it's the only value
|
|
// that is respected. The radial-gradient is not displayed. This is a
|
|
// stop-gap solution so ticks are displayed at all when forced-colors is
|
|
// active.
|
|
// Note:
|
|
// * The SVG has no viewBox which lets the svg take its dimensions from
|
|
// background-size.
|
|
// * The fill is set directly. Using currentColor does not seem to work,
|
|
// hence the duplication of background-image.
|
|
// * This approach does not respect tick sizes. Instead they will always be
|
|
// 1px wide. This is a limitation of using the url, as I'm not sure how
|
|
// to pass in a custom property to change the `r` attribute.
|
|
// TODO(b/298051946): Tick marks cannot be resized in HCM
|
|
// stylelint-disable function-url-quotes -- SVG data URI
|
|
// SVG is optimized for data URI (https://codepen.io/tigt/post/optimizing-svgs-in-data-uris)
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='CanvasText'%3E%3Ccircle cx='2' cy='2' r='1'/%3E%3C/svg%3E");
|
|
// stylelint-enable function-url-quotes
|
|
}
|
|
|
|
// active-track
|
|
.tickmarks::after {
|
|
// See inactive-track documentation for background-image.
|
|
// stylelint-disable function-url-quotes -- SVG data URI
|
|
// TODO(b/298051946): Tick marks cannot be resized in HCM
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='Canvas'%3E%3Ccircle cx='2' cy='2' r='1'/%3E%3C/svg%3E");
|
|
// stylelint-enable function-url-quotes
|
|
}
|
|
|
|
:host([disabled]) .tickmarks::before {
|
|
// TODO(b/298051946): Tick marks cannot be resized in HCM
|
|
// stylelint-disable function-url-quotes -- SVG data URI
|
|
// SVG is optimized for data URI (https://codepen.io/tigt/post/optimizing-svgs-in-data-uris)
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='Canvas'%3E%3Ccircle cx='2' cy='2' r='1'/%3E%3C/svg%3E");
|
|
// stylelint-enable function-url-quotes
|
|
}
|
|
}
|