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 'sass:math';
|
27 | @use 'sass:map';
|
28 | @use 'sass:meta';
|
29 | @use '@material/density/functions' as density-functions;
|
30 | @use '@material/density/variables' as density-variables;
|
31 | @use '@material/elevation/elevation-theme';
|
32 | @use '@material/feature-targeting/feature-targeting';
|
33 | @use '@material/focus-ring/focus-ring';
|
34 | @use '@material/ripple/ripple-theme';
|
35 | @use '@material/rtl/rtl';
|
36 | @use '@material/dom/dom';
|
37 | @use '@material/theme/keys';
|
38 | @use '@material/theme/state';
|
39 | @use '@material/theme/theme';
|
40 | @use '@material/theme/theme-color';
|
41 | @use '@material/touch-target/mixins' as touch-target-mixins;
|
42 |
|
43 | $ripple-target: '.mdc-icon-button__ripple';
|
44 |
|
45 | $icon-size: 24px !default;
|
46 | $size: 48px !default;
|
47 | $minimum-height: 28px !default;
|
48 | $maximum-height: $size !default;
|
49 | $container-shape: 50%;
|
50 | $density-scale: density-variables.$default-scale !default;
|
51 | $density-config: (
|
52 | size: (
|
53 | default: $size,
|
54 | maximum: $maximum-height,
|
55 | minimum: $minimum-height,
|
56 | ),
|
57 | ) !default;
|
58 |
|
59 | $_custom-property-prefix: 'icon-button';
|
60 |
|
61 | $light-theme: (
|
62 | disabled-icon-color: theme-color.$on-surface,
|
63 | disabled-icon-opacity: 0.38,
|
64 | icon-color: theme-color.$primary,
|
65 | icon-size: $icon-size,
|
66 | focus-icon-color: theme-color.$primary,
|
67 | focus-state-layer-color: theme-color.$primary,
|
68 | focus-state-layer-opacity: 0.12,
|
69 | hover-icon-color: theme-color.$primary,
|
70 | hover-state-layer-color: theme-color.$primary,
|
71 | hover-state-layer-opacity: 0.08,
|
72 | pressed-icon-color: theme-color.$primary,
|
73 | pressed-state-layer-color: theme-color.$primary,
|
74 | pressed-state-layer-opacity: 0.12,
|
75 | state-layer-size: $size,
|
76 | );
|
77 |
|
78 | @mixin theme($theme) {
|
79 | @include theme.validate-theme($light-theme, $theme);
|
80 |
|
81 | @include keys.declare-custom-properties(
|
82 | $theme,
|
83 | $prefix: $_custom-property-prefix
|
84 | );
|
85 | }
|
86 |
|
87 | @mixin theme-styles($theme) {
|
88 | @include theme.validate-theme($light-theme, $theme);
|
89 |
|
90 | $theme: keys.create-theme-properties(
|
91 | $theme,
|
92 | $prefix: $_custom-property-prefix
|
93 | );
|
94 |
|
95 | @include _state-layer-size($size: map.get($theme, state-layer-size));
|
96 | @include _icon-size(map.get($theme, icon-size));
|
97 | @include _disabled-icon-opacity(map.get($theme, disabled-icon-opacity));
|
98 | @include _icon-color-with-map(
|
99 | (
|
100 | default: map.get($theme, icon-color),
|
101 | disabled: map.get($theme, disabled-icon-color),
|
102 | focus: map.get($theme, focus-icon-color),
|
103 | hover: map.get($theme, hover-icon-color),
|
104 | pressed: map.get($theme, pressed-icon-color),
|
105 | )
|
106 | );
|
107 |
|
108 |
|
109 | @include ripple-theme.theme-styles(
|
110 | (
|
111 | focus-state-layer-color: map.get($theme, focus-state-layer-color),
|
112 | focus-state-layer-opacity: map.get($theme, focus-state-layer-opacity),
|
113 | hover-state-layer-color: map.get($theme, hover-state-layer-color),
|
114 | hover-state-layer-opacity: map.get($theme, hover-state-layer-opacity),
|
115 | pressed-state-layer-color: map.get($theme, pressed-state-layer-color),
|
116 | pressed-state-layer-opacity: map.get($theme, pressed-state-layer-opacity),
|
117 | ),
|
118 | $ripple-target: $ripple-target
|
119 | );
|
120 | }
|
121 |
|
122 |
|
123 |
|
124 |
|
125 |
|
126 |
|
127 |
|
128 | @mixin density($density-scale, $query: feature-targeting.all()) {
|
129 | $size: density-functions.prop-value(
|
130 | $density-config: $density-config,
|
131 | $density-scale: $density-scale,
|
132 | $property-name: size,
|
133 | );
|
134 |
|
135 | @include size($size, $query: $query);
|
136 | }
|
137 |
|
138 |
|
139 |
|
140 |
|
141 |
|
142 |
|
143 |
|
144 | @mixin size($size, $query: feature-targeting.all()) {
|
145 | $feat-structure: feature-targeting.create-target($query, structure);
|
146 |
|
147 | @include feature-targeting.targets($feat-structure) {
|
148 | width: $size;
|
149 | height: $size;
|
150 | padding: math.div($size - $icon-size, 2);
|
151 | }
|
152 |
|
153 | .mdc-icon-button__focus-ring {
|
154 | @include feature-targeting.targets($feat-structure) {
|
155 | display: none;
|
156 | }
|
157 | }
|
158 |
|
159 | @include ripple-theme.focus {
|
160 | .mdc-icon-button__focus-ring {
|
161 | @include dom.forced-colors-mode($exclude-ie11: true) {
|
162 | @include focus-ring.focus-ring(
|
163 | $query: $query,
|
164 | $container-outer-padding-vertical: 0,
|
165 | $container-outer-padding-horizontal: 0
|
166 | );
|
167 | }
|
168 |
|
169 | @include feature-targeting.targets($feat-structure) {
|
170 | display: block;
|
171 | max-height: $size;
|
172 | max-width: $size;
|
173 | }
|
174 | }
|
175 | }
|
176 |
|
177 | &.mdc-icon-button--reduced-size {
|
178 | $component-size: $size;
|
179 |
|
180 |
|
181 |
|
182 | @if $size >= 40px and $size <= 48px {
|
183 | $component-size: 40px;
|
184 | }
|
185 |
|
186 | .mdc-icon-button__ripple {
|
187 | @include feature-targeting.targets($feat-structure) {
|
188 | width: $component-size;
|
189 | height: $component-size;
|
190 | }
|
191 |
|
192 | @include touch-target-mixins.margin(
|
193 | $component-height: $component-size,
|
194 | $component-width: $component-size,
|
195 | $touch-target-height: $size,
|
196 | $touch-target-width: $size,
|
197 | $query: $query
|
198 | );
|
199 | }
|
200 |
|
201 | @include ripple-theme.focus {
|
202 | .mdc-icon-button__focus-ring {
|
203 | @include feature-targeting.targets($feat-structure) {
|
204 | max-height: $component-size;
|
205 | max-width: $component-size;
|
206 | }
|
207 | }
|
208 | }
|
209 | }
|
210 |
|
211 | .mdc-icon-button__touch {
|
212 | @include touch-target-mixins.touch-target(
|
213 | $set-width: true,
|
214 | $query: $query,
|
215 | $height: $size,
|
216 | $width: $size
|
217 | );
|
218 | }
|
219 | }
|
220 |
|
221 |
|
222 |
|
223 |
|
224 |
|
225 |
|
226 |
|
227 |
|
228 |
|
229 |
|
230 |
|
231 |
|
232 | @mixin icon-size(
|
233 | $width,
|
234 | $height: $width,
|
235 | $padding: math.div(math.max($width, $height), 2),
|
236 | $query: feature-targeting.all()
|
237 | ) {
|
238 | $feat-structure: feature-targeting.create-target($query, structure);
|
239 |
|
240 | $component-width: $width + $padding * 2;
|
241 | $component-height: $height + $padding * 2;
|
242 |
|
243 | @include feature-targeting.targets($feat-structure) {
|
244 | width: $component-width;
|
245 | height: $component-height;
|
246 | padding: $padding;
|
247 | font-size: math.max($width, $height);
|
248 | }
|
249 |
|
250 | svg,
|
251 | img {
|
252 | @include feature-targeting.targets($feat-structure) {
|
253 | width: $width;
|
254 | height: $height;
|
255 | }
|
256 | }
|
257 | }
|
258 |
|
259 |
|
260 |
|
261 |
|
262 |
|
263 | @mixin ink-color($color, $query: feature-targeting.all()) {
|
264 | @include ink-color_($color, $query: $query);
|
265 | @include ripple-theme.states(
|
266 | $color,
|
267 | $query: $query,
|
268 | $ripple-target: $ripple-target
|
269 | );
|
270 | }
|
271 |
|
272 |
|
273 |
|
274 |
|
275 | @mixin flip-icon-in-rtl($query: feature-targeting.all()) {
|
276 | $feat-structure: feature-targeting.create-target($query, structure);
|
277 |
|
278 | .mdc-button__icon {
|
279 | @include rtl.rtl {
|
280 | @include feature-targeting.targets($feat-structure) {
|
281 | @include rtl.ignore-next-line();
|
282 | transform: rotate(180deg);
|
283 | }
|
284 | }
|
285 | }
|
286 | }
|
287 |
|
288 |
|
289 |
|
290 |
|
291 |
|
292 | @mixin disabled-ink-color($color, $query: feature-targeting.all()) {
|
293 | @include if-disabled_ {
|
294 | @include ink-color_($color, $query: $query);
|
295 | }
|
296 | }
|
297 |
|
298 |
|
299 |
|
300 |
|
301 | @mixin high-contrast-mode-shim($query: feature-targeting.all()) {
|
302 | $feat-structure: feature-targeting.create-target($query, structure);
|
303 |
|
304 | @include feature-targeting.targets($feat-structure) {
|
305 |
|
306 |
|
307 | outline: solid 3px transparent;
|
308 |
|
309 | &:focus {
|
310 | outline: double 5px transparent;
|
311 | }
|
312 | }
|
313 | }
|
314 |
|
315 |
|
316 |
|
317 |
|
318 |
|
319 |
|
320 | @mixin ink-color_($color, $query: feature-targeting.all()) {
|
321 | $feat-color: feature-targeting.create-target($query, color);
|
322 |
|
323 | @include feature-targeting.targets($feat-color) {
|
324 | @include theme.property(color, $color);
|
325 | }
|
326 | }
|
327 |
|
328 | @mixin _state-layer-size($size) {
|
329 | @include theme.property(height, $size);
|
330 | @include theme.property(width, $size);
|
331 | }
|
332 |
|
333 | @mixin _icon-size($size) {
|
334 | @include theme.property(font-size, $size);
|
335 |
|
336 | svg,
|
337 | img {
|
338 | @include theme.property(width, $size);
|
339 | @include theme.property(height, $size);
|
340 | }
|
341 | }
|
342 |
|
343 |
|
344 |
|
345 |
|
346 |
|
347 | @mixin _disabled-icon-opacity($opacity) {
|
348 | &:disabled {
|
349 | @include theme.property(opacity, $opacity);
|
350 | }
|
351 | }
|
352 |
|
353 |
|
354 |
|
355 |
|
356 |
|
357 |
|
358 |
|
359 | @mixin _icon-color-with-map($color-map) {
|
360 | @include ink-color_(state.get-default-state($color-map));
|
361 |
|
362 | $disabled: state.get-disabled-state($color-map);
|
363 | @if $disabled {
|
364 | &:disabled {
|
365 | @include ink-color_($disabled);
|
366 | }
|
367 | }
|
368 |
|
369 | $focus: state.get-focus-state($color-map);
|
370 | @if $focus {
|
371 | @include ripple-theme.focus {
|
372 | @include ink-color_($focus);
|
373 | }
|
374 | }
|
375 |
|
376 | $hover: state.get-hover-state($color-map);
|
377 | @if $hover {
|
378 | &:hover {
|
379 | @include ink-color_($hover);
|
380 | }
|
381 | }
|
382 |
|
383 | $pressed: state.get-pressed-state($color-map);
|
384 | @if $pressed {
|
385 | @include ripple-theme.active {
|
386 | @include ink-color_($pressed);
|
387 | }
|
388 | }
|
389 | }
|
390 |
|
391 | @mixin _states-colors($color-map) {
|
392 |
|
393 |
|
394 | $hover: map.get($color-map, hover);
|
395 | @if $hover {
|
396 | @include ripple-theme.states-base-color(
|
397 | $color: $hover,
|
398 | $ripple-target: $ripple-target
|
399 | );
|
400 | }
|
401 | }
|
402 |
|
403 |
|
404 |
|
405 |
|
406 |
|
407 | @mixin if-disabled_ {
|
408 | &:disabled {
|
409 | @content;
|
410 | }
|
411 | }
|