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 | @include height(1px);
|
50 |
|
51 | &::before {
|
52 | z-index: 1;
|
53 | }
|
54 |
|
55 | &::after {
|
56 | transform: scaleX(0);
|
57 | border-bottom-width: 2px;
|
58 | opacity: 0;
|
59 | z-index: 2;
|
60 | }
|
61 | }
|
62 |
|
63 | @include feature-targeting.targets($feat-animation) {
|
64 | &::after {
|
65 | transition: functions.transition-value(transform),
|
66 | functions.transition-value(opacity);
|
67 | }
|
68 | }
|
69 | }
|
70 |
|
71 | .mdc-line-ripple--active::after {
|
72 | @include feature-targeting.targets($feat-structure) {
|
73 | transform: scaleX(1);
|
74 | opacity: 1;
|
75 | }
|
76 | }
|
77 |
|
78 | .mdc-line-ripple--deactivating::after {
|
79 | @include feature-targeting.targets($feat-structure) {
|
80 | opacity: 0;
|
81 | }
|
82 | }
|
83 | }
|
84 |
|
85 | @mixin height($height) {
|
86 | &::before {
|
87 | border-bottom-width: $height;
|
88 | }
|
89 | }
|
90 |
|
91 | @mixin active-color($color, $query: feature-targeting.all()) {
|
92 | $feat-color: feature-targeting.create-target($query, color);
|
93 |
|
94 | @include feature-targeting.targets($feat-color) {
|
95 | &::after {
|
96 | @include theme.property(border-bottom-color, $color);
|
97 | }
|
98 | }
|
99 | }
|
100 |
|
101 | @mixin inactive-color($color, $query: feature-targeting.all()) {
|
102 | $feat-color: feature-targeting.create-target($query, color);
|
103 |
|
104 | @include feature-targeting.targets($feat-color) {
|
105 | &::before {
|
106 | @include theme.property(border-bottom-color, $color);
|
107 | }
|
108 | }
|
109 | }
|