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/theme/theme';
|
28 | @use './functions';
|
29 |
|
30 |
|
31 |
|
32 | @mixin core-styles($query: feature-targeting.all()) {
|
33 | $feat-structure: feature-targeting.create-target($query, structure);
|
34 | $feat-animation: feature-targeting.create-target($query, animation);
|
35 |
|
36 |
|
37 | .mdc-line-ripple {
|
38 | @include feature-targeting.targets($feat-structure) {
|
39 | &::before,
|
40 | &::after {
|
41 | position: absolute;
|
42 | bottom: 0;
|
43 | left: 0;
|
44 | width: 100%;
|
45 | border-bottom-style: solid;
|
46 | content: '';
|
47 | }
|
48 |
|
49 | &::before {
|
50 | border-bottom-width: 1px;
|
51 | z-index: 1;
|
52 | }
|
53 |
|
54 | &::after {
|
55 | transform: scaleX(0);
|
56 | border-bottom-width: 2px;
|
57 | opacity: 0;
|
58 | z-index: 2;
|
59 | }
|
60 | }
|
61 |
|
62 | @include feature-targeting.targets($feat-animation) {
|
63 | &::after {
|
64 | transition: functions.transition-value(transform),
|
65 | functions.transition-value(opacity);
|
66 | }
|
67 | }
|
68 | }
|
69 |
|
70 | .mdc-line-ripple--active::after {
|
71 | @include feature-targeting.targets($feat-structure) {
|
72 | transform: scaleX(1);
|
73 | opacity: 1;
|
74 | }
|
75 | }
|
76 |
|
77 | .mdc-line-ripple--deactivating::after {
|
78 | @include feature-targeting.targets($feat-structure) {
|
79 | opacity: 0;
|
80 | }
|
81 | }
|
82 | }
|
83 |
|
84 | @mixin active-color($color, $query: feature-targeting.all()) {
|
85 | $feat-color: feature-targeting.create-target($query, color);
|
86 |
|
87 | @include feature-targeting.targets($feat-color) {
|
88 | &::after {
|
89 | @include theme.property(border-bottom-color, $color);
|
90 | }
|
91 | }
|
92 | }
|
93 |
|
94 | @mixin inactive-color($color, $query: feature-targeting.all()) {
|
95 | $feat-color: feature-targeting.create-target($query, color);
|
96 |
|
97 | @include feature-targeting.targets($feat-color) {
|
98 | &::before {
|
99 | @include theme.property(border-bottom-color, $color);
|
100 | }
|
101 | }
|
102 | }
|