1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 |
|
26 | @use '@material/feature-targeting/feature-targeting';
|
27 | @use '@material/ripple/ripple-theme';
|
28 | @use '@material/theme/state';
|
29 | @use '@material/theme/theme';
|
30 |
|
31 |
|
32 | $color: primary;
|
33 | $disabled-color: on-surface;
|
34 |
|
35 |
|
36 | $value-indicator-color: #000;
|
37 | $value-indicator-opacity: 0.6;
|
38 | $value-indicator-text-color: on-primary;
|
39 |
|
40 |
|
41 | $track-inactive-opacity: 0.24;
|
42 | $tick-mark-active-color: on-primary;
|
43 | $tick-mark-inactive-color: primary;
|
44 | $tick-mark-opacity: 0.6;
|
45 |
|
46 |
|
47 |
|
48 |
|
49 |
|
50 |
|
51 |
|
52 |
|
53 |
|
54 |
|
55 |
|
56 | @mixin track-active-color($color-or-map, $query: feature-targeting.all()) {
|
57 | @include _set-track-active-color(
|
58 | state.get-default-state($color-or-map),
|
59 | $query
|
60 | );
|
61 |
|
62 | $_disabled-color: state.get-disabled-state($color-or-map);
|
63 | @if $_disabled-color {
|
64 | &.mdc-slider--disabled {
|
65 | @include _set-track-active-color($_disabled-color, $query);
|
66 | }
|
67 | }
|
68 | }
|
69 |
|
70 | @mixin _set-track-active-color($color, $query) {
|
71 | $feat-color: feature-targeting.create-target($query, color);
|
72 |
|
73 | .mdc-slider__track--active_fill {
|
74 | @include feature-targeting.targets($feat-color) {
|
75 | @include theme.property(border-color, $color);
|
76 | }
|
77 | }
|
78 | }
|
79 |
|
80 |
|
81 |
|
82 |
|
83 |
|
84 |
|
85 |
|
86 |
|
87 |
|
88 |
|
89 |
|
90 | @mixin track-inactive-color(
|
91 | $color-or-map,
|
92 | $opacity: $track-inactive-opacity,
|
93 | $query: feature-targeting.all()
|
94 | ) {
|
95 | @include _set-track-inactive-color(
|
96 | state.get-default-state($color-or-map),
|
97 | $opacity,
|
98 | $query
|
99 | );
|
100 |
|
101 | $_disabled-color: state.get-disabled-state($color-or-map);
|
102 | @if $_disabled-color {
|
103 | &.mdc-slider--disabled {
|
104 | @include _set-track-inactive-color($_disabled-color, $opacity, $query);
|
105 | }
|
106 | }
|
107 | }
|
108 |
|
109 | @mixin _set-track-inactive-color($color, $opacity, $query) {
|
110 | $feat-color: feature-targeting.create-target($query, color);
|
111 |
|
112 | .mdc-slider__track--inactive {
|
113 | @include feature-targeting.targets($feat-color) {
|
114 | @include theme.property(background-color, $color);
|
115 |
|
116 | opacity: $opacity;
|
117 | }
|
118 | }
|
119 | }
|
120 |
|
121 |
|
122 |
|
123 |
|
124 |
|
125 |
|
126 |
|
127 |
|
128 |
|
129 |
|
130 |
|
131 | @mixin thumb-color($color-or-map, $query: feature-targeting.all()) {
|
132 | @include _set-thumb-color(state.get-default-state($color-or-map), $query);
|
133 |
|
134 | $_disabled-color: state.get-disabled-state($color-or-map);
|
135 | @if $_disabled-color {
|
136 | &.mdc-slider--disabled {
|
137 | @include _set-thumb-color($_disabled-color, $query);
|
138 | }
|
139 | }
|
140 | }
|
141 |
|
142 | @mixin _set-thumb-color($color, $query) {
|
143 | $feat-color: feature-targeting.create-target($query, color);
|
144 |
|
145 | @include feature-targeting.targets($feat-color) {
|
146 | .mdc-slider__thumb-knob {
|
147 | @include theme.property(background-color, $color);
|
148 | @include theme.property(border-color, $color);
|
149 | }
|
150 |
|
151 | .mdc-slider__thumb--top {
|
152 | .mdc-slider__thumb-knob,
|
153 | &.mdc-slider__thumb:hover .mdc-slider__thumb-knob,
|
154 | &.mdc-slider__thumb--focused .mdc-slider__thumb-knob {
|
155 | border-color: #fff;
|
156 | }
|
157 | }
|
158 | }
|
159 | }
|
160 |
|
161 |
|
162 |
|
163 |
|
164 |
|
165 |
|
166 | @mixin thumb-ripple-color($color, $query: feature-targeting.all()) {
|
167 | .mdc-slider__thumb {
|
168 | @include ripple-theme.states($color: $color, $query: $query);
|
169 | }
|
170 | }
|
171 |
|
172 |
|
173 |
|
174 |
|
175 |
|
176 | @mixin thumb-activated-color($color, $query: feature-targeting.all()) {
|
177 | $feat-color: feature-targeting.create-target($query, color);
|
178 |
|
179 | .mdc-slider__thumb:hover,
|
180 | .mdc-slider__thumb--focused {
|
181 | @include _set-thumb-color($color, $query);
|
182 | }
|
183 | }
|
184 |
|
185 |
|
186 |
|
187 |
|
188 |
|
189 |
|
190 |
|
191 |
|
192 |
|
193 |
|
194 |
|
195 | @mixin tick-mark-active-color(
|
196 | $color-or-map,
|
197 | $opacity: $tick-mark-opacity,
|
198 | $query: feature-targeting.all()
|
199 | ) {
|
200 | @include _set-tick-mark-active-color(
|
201 | state.get-default-state($color-or-map),
|
202 | $opacity,
|
203 | $query
|
204 | );
|
205 |
|
206 | $_disabled-color: state.get-disabled-state($color-or-map);
|
207 | @if $_disabled-color {
|
208 | &.mdc-slider--disabled {
|
209 | @include _set-tick-mark-active-color($_disabled-color, $opacity, $query);
|
210 | }
|
211 | }
|
212 | }
|
213 |
|
214 | @mixin _set-tick-mark-active-color($color, $opacity, $query) {
|
215 | $feat-color: feature-targeting.create-target($query, color);
|
216 |
|
217 | .mdc-slider__tick-mark--active {
|
218 | @include feature-targeting.targets($feat-color) {
|
219 | @include theme.property(background-color, $color);
|
220 |
|
221 | opacity: $opacity;
|
222 | }
|
223 | }
|
224 | }
|
225 |
|
226 |
|
227 |
|
228 |
|
229 |
|
230 |
|
231 |
|
232 |
|
233 |
|
234 |
|
235 |
|
236 | @mixin tick-mark-inactive-color(
|
237 | $color-or-map,
|
238 | $opacity: $tick-mark-opacity,
|
239 | $query: feature-targeting.all()
|
240 | ) {
|
241 | @include _set-tick-mark-inactive-color(
|
242 | state.get-default-state($color-or-map),
|
243 | $opacity,
|
244 | $query
|
245 | );
|
246 |
|
247 | $_disabled-color: state.get-disabled-state($color-or-map);
|
248 | @if $_disabled-color {
|
249 | &.mdc-slider--disabled {
|
250 | @include _set-tick-mark-inactive-color(
|
251 | $_disabled-color,
|
252 | $opacity,
|
253 | $query
|
254 | );
|
255 | }
|
256 | }
|
257 | }
|
258 |
|
259 | @mixin _set-tick-mark-inactive-color($color, $opacity, $query) {
|
260 | $feat-color: feature-targeting.create-target($query, color);
|
261 |
|
262 | .mdc-slider__tick-mark--inactive {
|
263 | @include feature-targeting.targets($feat-color) {
|
264 | @include theme.property(background-color, $color);
|
265 |
|
266 | opacity: $opacity;
|
267 | }
|
268 | }
|
269 | }
|
270 |
|
271 |
|
272 |
|
273 |
|
274 |
|
275 |
|
276 |
|
277 | @mixin value-indicator-color(
|
278 | $color,
|
279 | $opacity,
|
280 | $query: feature-targeting.all()
|
281 | ) {
|
282 | $feat-color: feature-targeting.create-target($query, color);
|
283 |
|
284 | .mdc-slider__value-indicator {
|
285 | @include feature-targeting.targets($feat-color) {
|
286 | @include theme.property(background-color, $color);
|
287 |
|
288 | opacity: $opacity;
|
289 | }
|
290 | }
|
291 |
|
292 |
|
293 | .mdc-slider__value-indicator::before {
|
294 | @include feature-targeting.targets($feat-color) {
|
295 | @include theme.property(border-top-color, $color);
|
296 | }
|
297 | }
|
298 | }
|
299 |
|
300 |
|
301 |
|
302 |
|
303 |
|
304 |
|
305 | @mixin value-indicator-text-color($color, $query: feature-targeting.all()) {
|
306 | $feat-color: feature-targeting.create-target($query, color);
|
307 |
|
308 | .mdc-slider__value-indicator {
|
309 | @include feature-targeting.targets($feat-color) {
|
310 | @include theme.property(color, $color);
|
311 | }
|
312 | }
|
313 | }
|