1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 | @use '@material/theme/theme';
|
23 | @use '@material/theme/custom-properties';
|
24 |
|
25 | @mixin primary-indeterminate-translate-keyframes_ {
|
26 | @keyframes mdc-linear-progress-primary-indeterminate-translate {
|
27 | 0% {
|
28 | transform: translateX(0);
|
29 | }
|
30 |
|
31 | 20% {
|
32 | animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
|
33 | transform: translateX(0);
|
34 | }
|
35 |
|
36 | 59.15% {
|
37 | animation-timing-function: cubic-bezier(
|
38 | 0.302435,
|
39 | 0.381352,
|
40 | 0.55,
|
41 | 0.956352
|
42 | );
|
43 |
|
44 | $primary-half: custom-properties.create(
|
45 | --mdc-linear-progress-primary-half,
|
46 | 83.67142%
|
47 | );
|
48 | @include apply-translate_($primary-half);
|
49 | }
|
50 |
|
51 | 100% {
|
52 | $primary-full: custom-properties.create(
|
53 | --mdc-linear-progress-primary-full,
|
54 | 200.611057%
|
55 | );
|
56 | @include apply-translate_($primary-full);
|
57 | }
|
58 | }
|
59 | }
|
60 |
|
61 | @mixin primary-indeterminate-scale-keyframes_ {
|
62 | @keyframes mdc-linear-progress-primary-indeterminate-scale {
|
63 | 0% {
|
64 | transform: scaleX(0.08);
|
65 | }
|
66 |
|
67 | 36.65% {
|
68 | animation-timing-function: cubic-bezier(0.334731, 0.12482, 0.785844, 1);
|
69 | transform: scaleX(0.08);
|
70 | }
|
71 |
|
72 | 69.15% {
|
73 | animation-timing-function: cubic-bezier(0.06, 0.11, 0.6, 1);
|
74 | transform: scaleX(0.661479);
|
75 | }
|
76 |
|
77 | 100% {
|
78 | transform: scaleX(0.08);
|
79 | }
|
80 | }
|
81 | }
|
82 |
|
83 | @mixin secondary-indeterminate-translate-keyframes_ {
|
84 | @keyframes mdc-linear-progress-secondary-indeterminate-translate {
|
85 | 0% {
|
86 | animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);
|
87 | transform: translateX(0);
|
88 | }
|
89 |
|
90 | 25% {
|
91 | animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);
|
92 | $secondary-quarter: custom-properties.create(
|
93 | --mdc-linear-progress-secondary-quarter,
|
94 | 37.651913%
|
95 | );
|
96 | @include apply-translate_($secondary-quarter);
|
97 | }
|
98 |
|
99 | 48.35% {
|
100 | animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);
|
101 | $secondary-half: custom-properties.create(
|
102 | --mdc-linear-progress-secondary-half,
|
103 | 84.386165%
|
104 | );
|
105 | @include apply-translate_($secondary-half);
|
106 | }
|
107 |
|
108 | 100% {
|
109 | $secondary-full: custom-properties.create(
|
110 | --mdc-linear-progress-secondary-full,
|
111 | 160.277782%
|
112 | );
|
113 | @include apply-translate_($secondary-full);
|
114 | }
|
115 | }
|
116 | }
|
117 |
|
118 | @mixin secondary-indeterminate-scale-keyframes_ {
|
119 | @keyframes mdc-linear-progress-secondary-indeterminate-scale {
|
120 | 0% {
|
121 | animation-timing-function: cubic-bezier(
|
122 | 0.205028,
|
123 | 0.057051,
|
124 | 0.57661,
|
125 | 0.453971
|
126 | );
|
127 | transform: scaleX(0.08);
|
128 | }
|
129 |
|
130 | 19.15% {
|
131 | animation-timing-function: cubic-bezier(
|
132 | 0.152313,
|
133 | 0.196432,
|
134 | 0.648374,
|
135 | 1.004315
|
136 | );
|
137 | transform: scaleX(0.457104);
|
138 | }
|
139 |
|
140 | 44.15% {
|
141 | animation-timing-function: cubic-bezier(
|
142 | 0.257759,
|
143 | -0.003163,
|
144 | 0.211762,
|
145 | 1.38179
|
146 | );
|
147 | transform: scaleX(0.72796);
|
148 | }
|
149 |
|
150 | 100% {
|
151 | transform: scaleX(0.08);
|
152 | }
|
153 | }
|
154 | }
|
155 |
|
156 | @mixin buffering-keyframes_ {
|
157 | @keyframes mdc-linear-progress-buffering {
|
158 | from {
|
159 |
|
160 |
|
161 |
|
162 | transform: rotate(180deg) translateX(-10px);
|
163 | }
|
164 | }
|
165 | }
|
166 |
|
167 | @mixin primary-indeterminate-translate-reverse-keyframes_ {
|
168 | @keyframes mdc-linear-progress-primary-indeterminate-translate-reverse {
|
169 | 0% {
|
170 | transform: translateX(0);
|
171 | }
|
172 |
|
173 | 20% {
|
174 | animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
|
175 | transform: translateX(0);
|
176 | }
|
177 |
|
178 | 59.15% {
|
179 | animation-timing-function: cubic-bezier(
|
180 | 0.302435,
|
181 | 0.381352,
|
182 | 0.55,
|
183 | 0.956352
|
184 | );
|
185 | $primary-half: custom-properties.create(
|
186 | --mdc-linear-progress-primary-half-neg,
|
187 | -83.67142%
|
188 | );
|
189 | @include apply-translate_($primary-half);
|
190 | }
|
191 |
|
192 | 100% {
|
193 | $primary-full: custom-properties.create(
|
194 | --mdc-linear-progress-primary-full-neg,
|
195 | -200.611057%
|
196 | );
|
197 | @include apply-translate_($primary-full);
|
198 | }
|
199 | }
|
200 | }
|
201 |
|
202 | @mixin secondary-indeterminate-translate-reverse-keyframes_ {
|
203 | @keyframes mdc-linear-progress-secondary-indeterminate-translate-reverse {
|
204 | 0% {
|
205 | animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);
|
206 | transform: translateX(0);
|
207 | }
|
208 |
|
209 | 25% {
|
210 | animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);
|
211 | $secondary-quarter: custom-properties.create(
|
212 | --mdc-linear-progress-secondary-quarter-neg,
|
213 | -37.651913%
|
214 | );
|
215 | @include apply-translate_($secondary-quarter);
|
216 | }
|
217 |
|
218 | 48.35% {
|
219 | animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);
|
220 | $secondary-half: custom-properties.create(
|
221 | --mdc-linear-progress-secondary-half-neg,
|
222 | -84.386165%
|
223 | );
|
224 | @include apply-translate_($secondary-half);
|
225 | }
|
226 |
|
227 | 100% {
|
228 | $secondary-full: custom-properties.create(
|
229 | --mdc-linear-progress-secondary-full-neg,
|
230 | -160.277782%
|
231 | );
|
232 | @include apply-translate_($secondary-full);
|
233 | }
|
234 | }
|
235 | }
|
236 |
|
237 | @mixin buffering-reverse-keyframes_ {
|
238 | @keyframes mdc-linear-progress-buffering-reverse {
|
239 | from {
|
240 | transform: translateX(-10px);
|
241 | }
|
242 | }
|
243 | }
|
244 |
|
245 | @mixin apply-translate_($value) {
|
246 | @include theme.property(
|
247 | transform,
|
248 | translateX(value),
|
249 | $replace: (value: $value)
|
250 | );
|
251 | }
|