1 | @use 'sass:map';
|
2 | @use 'sass:meta';
|
3 | @use '../core/theming/theming';
|
4 | @use '../core/typography/typography';
|
5 | @use '../core/typography/typography-utils';
|
6 |
|
7 | @mixin _inner-content-theme($palette) {
|
8 | .mat-slider-track-fill,
|
9 | .mat-slider-thumb,
|
10 | .mat-slider-thumb-label {
|
11 | background-color: theming.get-color-from-palette($palette);
|
12 | }
|
13 |
|
14 | .mat-slider-thumb-label-text {
|
15 | color: theming.get-color-from-palette($palette, default-contrast);
|
16 | }
|
17 |
|
18 | .mat-slider-focus-ring {
|
19 | $opacity: 0.2;
|
20 | $color: theming.get-color-from-palette($palette, default, $opacity);
|
21 | background-color: $color;
|
22 |
|
23 |
|
24 |
|
25 | @if (meta.type-of($color) != color) {
|
26 | opacity: $opacity;
|
27 | }
|
28 | }
|
29 | }
|
30 |
|
31 | @mixin color($config-or-theme) {
|
32 | $config: theming.get-color-config($config-or-theme);
|
33 | $primary: map.get($config, primary);
|
34 | $accent: map.get($config, accent);
|
35 | $warn: map.get($config, warn);
|
36 | $background: map.get($config, background);
|
37 | $foreground: map.get($config, foreground);
|
38 |
|
39 | $mat-slider-off-color: theming.get-color-from-palette($foreground, slider-off);
|
40 | $mat-slider-off-focused-color: theming.get-color-from-palette($foreground, slider-off-active);
|
41 | $mat-slider-disabled-color: theming.get-color-from-palette($foreground, slider-off);
|
42 | $mat-slider-labeled-min-value-thumb-color:
|
43 | theming.get-color-from-palette($foreground, slider-min);
|
44 | $mat-slider-labeled-min-value-thumb-label-color:
|
45 | theming.get-color-from-palette($foreground, slider-off);
|
46 | $mat-slider-tick-opacity: 0.7;
|
47 | $mat-slider-tick-color:
|
48 | theming.get-color-from-palette($foreground, base, $mat-slider-tick-opacity);
|
49 | $mat-slider-tick-size: 2px;
|
50 |
|
51 | .mat-slider-track-background {
|
52 | background-color: $mat-slider-off-color;
|
53 | }
|
54 |
|
55 | .mat-slider {
|
56 | &.mat-primary {
|
57 | @include _inner-content-theme($primary);
|
58 | }
|
59 |
|
60 | &.mat-accent {
|
61 | @include _inner-content-theme($accent);
|
62 | }
|
63 |
|
64 | &.mat-warn {
|
65 | @include _inner-content-theme($warn);
|
66 | }
|
67 | }
|
68 |
|
69 | .mat-slider:hover,
|
70 | .mat-slider.cdk-focused {
|
71 | .mat-slider-track-background {
|
72 | background-color: $mat-slider-off-focused-color;
|
73 | }
|
74 | }
|
75 |
|
76 | .mat-slider.mat-slider-disabled {
|
77 | .mat-slider-track-background,
|
78 | .mat-slider-track-fill,
|
79 | .mat-slider-thumb {
|
80 | background-color: $mat-slider-disabled-color;
|
81 | }
|
82 |
|
83 | &:hover {
|
84 | .mat-slider-track-background {
|
85 | background-color: $mat-slider-disabled-color;
|
86 | }
|
87 | }
|
88 | }
|
89 |
|
90 | .mat-slider.mat-slider-min-value {
|
91 | .mat-slider-focus-ring {
|
92 | $opacity: 0.12;
|
93 | $color: theming.get-color-from-palette($foreground, base, $opacity);
|
94 | background-color: $color;
|
95 |
|
96 |
|
97 |
|
98 | @if (meta.type-of($color) != color) {
|
99 | opacity: $opacity;
|
100 | }
|
101 | }
|
102 |
|
103 | &.mat-slider-thumb-label-showing {
|
104 | .mat-slider-thumb,
|
105 | .mat-slider-thumb-label {
|
106 | background-color: $mat-slider-labeled-min-value-thumb-color;
|
107 | }
|
108 |
|
109 | &.cdk-focused {
|
110 | .mat-slider-thumb,
|
111 | .mat-slider-thumb-label {
|
112 | background-color: $mat-slider-labeled-min-value-thumb-label-color;
|
113 | }
|
114 | }
|
115 | }
|
116 |
|
117 | &:not(.mat-slider-thumb-label-showing) {
|
118 | .mat-slider-thumb {
|
119 | border-color: $mat-slider-off-color;
|
120 | background-color: transparent;
|
121 | }
|
122 |
|
123 | &:hover,
|
124 | &.cdk-focused {
|
125 | .mat-slider-thumb {
|
126 | border-color: $mat-slider-off-focused-color;
|
127 | }
|
128 |
|
129 | &.mat-slider-disabled .mat-slider-thumb {
|
130 | border-color: $mat-slider-disabled-color;
|
131 | }
|
132 | }
|
133 | }
|
134 | }
|
135 |
|
136 | .mat-slider-has-ticks .mat-slider-wrapper::after {
|
137 | border-color: $mat-slider-tick-color;
|
138 |
|
139 |
|
140 |
|
141 | @if (meta.type-of($mat-slider-tick-color) != color) {
|
142 | opacity: $mat-slider-tick-opacity;
|
143 | }
|
144 | }
|
145 |
|
146 | .mat-slider-horizontal .mat-slider-ticks {
|
147 | background-image: repeating-linear-gradient(to right, $mat-slider-tick-color,
|
148 | $mat-slider-tick-color $mat-slider-tick-size, transparent 0, transparent);
|
149 |
|
150 |
|
151 | background-image: -moz-repeating-linear-gradient(0.0001deg, $mat-slider-tick-color,
|
152 | $mat-slider-tick-color $mat-slider-tick-size, transparent 0, transparent);
|
153 |
|
154 |
|
155 |
|
156 | @if (meta.type-of($mat-slider-tick-color) != color) {
|
157 | opacity: $mat-slider-tick-opacity;
|
158 | }
|
159 | }
|
160 |
|
161 | .mat-slider-vertical .mat-slider-ticks {
|
162 | background-image: repeating-linear-gradient(to bottom, $mat-slider-tick-color,
|
163 | $mat-slider-tick-color $mat-slider-tick-size, transparent 0, transparent);
|
164 |
|
165 |
|
166 |
|
167 | @if (meta.type-of($mat-slider-tick-color) != color) {
|
168 | opacity: $mat-slider-tick-opacity;
|
169 | }
|
170 | }
|
171 | }
|
172 |
|
173 | @mixin typography($config-or-theme) {
|
174 | $config: typography.private-typography-to-2014-config(
|
175 | theming.get-typography-config($config-or-theme));
|
176 | .mat-slider-thumb-label-text {
|
177 | font: {
|
178 | family: typography-utils.font-family($config);
|
179 | size: typography-utils.font-size($config, caption);
|
180 | weight: typography-utils.font-weight($config, body-2);
|
181 | }
|
182 | }
|
183 | }
|
184 |
|
185 | @mixin _density($config-or-theme) {}
|
186 |
|
187 | @mixin theme($theme-or-color-config) {
|
188 | $theme: theming.private-legacy-get-theme($theme-or-color-config);
|
189 | @include theming.private-check-duplicate-theme-styles($theme, 'mat-slider') {
|
190 | $color: theming.get-color-config($theme);
|
191 | $density: theming.get-density-config($theme);
|
192 | $typography: theming.get-typography-config($theme);
|
193 |
|
194 | @if $color != null {
|
195 | @include color($color);
|
196 | }
|
197 | @if $density != null {
|
198 | @include _density($density);
|
199 | }
|
200 | @if $typography != null {
|
201 | @include typography($typography);
|
202 | }
|
203 | }
|
204 | }
|