|
115 | 115 | opacity: var(--overlay-opacity, 0);
|
116 | 116 | }
|
117 | 117 |
|
118 |
| - |
119 | 118 | /* Primary Button */
|
120 | 119 |
|
121 | 120 | .primary {
|
|
137 | 136 | fill: var(--primary-secondary-text);
|
138 | 137 | }
|
139 | 138 |
|
140 |
| -.primary.includeHoverAnimations:hover:enabled { |
| 139 | +.primary.includeHoverAnimations:hover.enabled { |
141 | 140 | --overlay-color: var(--static-white);
|
142 |
| - --overlay-opacity: .1; |
| 141 | + --overlay-opacity: 0.1; |
143 | 142 | box-shadow: var(--shadow-mid);
|
144 | 143 | transform: var(--grow);
|
145 | 144 | background: var(--button-color);
|
146 | 145 | }
|
147 | 146 |
|
148 |
| -.primary.includeHoverAnimations:active:enabled { |
| 147 | +.primary.includeHoverAnimations:active.enabled { |
149 | 148 | --overlay-color: var(--static-blck);
|
150 |
| - --overlay-opacity: .2; |
| 149 | + --overlay-opacity: 0.2; |
151 | 150 | box-shadow: none;
|
152 | 151 | transform: perspective(1px) scale3d(0.99, 0.99, 0.99);
|
153 | 152 | background: var(--button-color);
|
|
174 | 173 | fill: var(--primary-secondary-text);
|
175 | 174 | }
|
176 | 175 |
|
177 |
| -.primaryAlt.includeHoverAnimations:hover:enabled { |
| 176 | +.primaryAlt.includeHoverAnimations:hover.enabled { |
178 | 177 | transform: var(--grow);
|
179 | 178 | background: var(--primary-light-1);
|
180 | 179 | }
|
181 | 180 |
|
182 |
| -.primaryAlt.includeHoverAnimations:active:enabled { |
| 181 | +.primaryAlt.includeHoverAnimations:active.enabled { |
183 | 182 | transform: perspective(1px) scale3d(0.99, 0.99, 0.99);
|
184 | 183 | background: var(--primary-dark-1);
|
185 | 184 | }
|
|
213 | 212 | fill: var(--primary);
|
214 | 213 | }
|
215 | 214 |
|
216 |
| -.secondary.includeHoverAnimations:hover:enabled { |
| 215 | +.secondary.includeHoverAnimations:hover.enabled { |
217 | 216 | transform: var(--grow);
|
218 | 217 | border: 1px solid var(--primary-dark-2);
|
219 | 218 | background: var(--primary);
|
220 | 219 | }
|
221 | 220 |
|
222 |
| -.secondary.includeHoverAnimations:hover:enabled .textLabel { |
| 221 | +.secondary.includeHoverAnimations:hover.enabled .textLabel { |
223 | 222 | color: var(--primary-secondary-text);
|
224 | 223 | }
|
225 | 224 |
|
226 |
| -.secondary.includeHoverAnimations:hover:enabled .icon path, |
227 |
| -.secondary.includeHoverAnimations:hover:enabled .icon use { |
| 225 | +.secondary.includeHoverAnimations:hover.enabled .icon path, |
| 226 | +.secondary.includeHoverAnimations:hover.enabled .icon use { |
228 | 227 | fill: var(--primary-secondary-text);
|
229 | 228 | }
|
230 | 229 |
|
231 |
| -.secondary.includeHoverAnimations:active:enabled { |
| 230 | +.secondary.includeHoverAnimations:active.enabled { |
232 | 231 | transform: perspective(1px) scale3d(0.99, 0.99, 0.99);
|
233 | 232 | border: 1px solid var(--primary-dark-2);
|
234 | 233 | background: var(--primary-dark-2);
|
|
254 | 253 | fill: var(--secondary);
|
255 | 254 | }
|
256 | 255 |
|
257 |
| -.tertiary.includeHoverAnimations:hover:enabled { |
| 256 | +.tertiary.includeHoverAnimations:hover.enabled { |
258 | 257 | transform: var(--grow);
|
259 | 258 | background-color: var(--static-white);
|
260 | 259 | }
|
261 | 260 |
|
262 |
| -.tertiary.includeHoverAnimations:active:enabled { |
| 261 | +.tertiary.includeHoverAnimations:active.enabled { |
263 | 262 | transform: perspective(1px) scale3d(0.99, 0.99, 0.99);
|
264 | 263 | }
|
265 | 264 |
|
|
292 | 291 | fill: var(--neutral);
|
293 | 292 | }
|
294 | 293 |
|
295 |
| -.common.includeHoverAnimations:hover:enabled { |
| 294 | +.common.includeHoverAnimations:hover.enabled { |
296 | 295 | transform: var(--grow);
|
297 | 296 | border: 1px solid var(--primary-dark-2);
|
298 | 297 | background: var(--primary);
|
299 | 298 | }
|
300 | 299 |
|
301 |
| -.common.includeHoverAnimations:hover:enabled .textLabel { |
| 300 | +.common.includeHoverAnimations:hover.enabled .textLabel { |
302 | 301 | color: var(--primary-secondary-text);
|
303 | 302 | }
|
304 | 303 |
|
305 |
| -.common.includeHoverAnimations:hover:enabled .icon path, |
306 |
| -.common.includeHoverAnimations:hover:enabled .icon use { |
| 304 | +.common.includeHoverAnimations:hover.enabled .icon path, |
| 305 | +.common.includeHoverAnimations:hover.enabled .icon use { |
307 | 306 | fill: var(--primary-secondary-text);
|
308 | 307 | }
|
309 | 308 |
|
310 |
| -.common.includeHoverAnimations:active:enabled { |
| 309 | +.common.includeHoverAnimations:active.enabled { |
311 | 310 | transform: perspective(1px) scale3d(0.99, 0.99, 0.99);
|
312 | 311 | border: 1px solid var(--primary-dark-2);
|
313 | 312 | background: var(--primary-dark-2);
|
314 | 313 | }
|
315 | 314 |
|
316 |
| -.common.includeHoverAnimations:active:enabled .textLabel { |
| 315 | +.common.includeHoverAnimations:active.enabled .textLabel { |
317 | 316 | color: var(--primary-secondary-text);
|
318 | 317 | }
|
319 | 318 |
|
320 |
| -.common.includeHoverAnimations:active:enabled .icon path { |
| 319 | +.common.includeHoverAnimations:active.enabled .icon path { |
321 | 320 | fill: var(--primary-secondary-text);
|
322 | 321 | }
|
323 | 322 |
|
|
345 | 344 | fill: var(--neutral);
|
346 | 345 | }
|
347 | 346 |
|
348 |
| -.commonAlt:hover:enabled { |
| 347 | +.commonAlt:hover.enabled { |
349 | 348 | transform: var(--grow);
|
350 | 349 | border: 1px solid var(--neutral-light-6);
|
351 | 350 | background: var(--neutral-light-10);
|
352 | 351 | }
|
353 | 352 |
|
354 |
| -.commonAlt.includeHoverAnimations:active:enabled { |
| 353 | +.commonAlt.includeHoverAnimations:active.enabled { |
355 | 354 | transform: perspective(1px) scale3d(0.99, 0.99, 0.99);
|
356 | 355 | border: 1px solid var(--neutral-light-6);
|
357 | 356 | background: var(--neutral-light-8);
|
|
377 | 376 | fill: var(--white);
|
378 | 377 | }
|
379 | 378 |
|
380 |
| -.glass.includeHoverAnimations:hover:enabled { |
| 379 | +.glass.includeHoverAnimations:hover.enabled { |
381 | 380 | transform: var(--grow);
|
382 | 381 | background-color: rgba(255, 255, 255, 0.2);
|
383 | 382 | }
|
384 | 383 |
|
385 |
| -.glass.includeHoverAnimations:active:enabled { |
| 384 | +.glass.includeHoverAnimations:active.enabled { |
386 | 385 | transform: perspective(1px) scale3d(1, 1, 1);
|
387 | 386 | background-color: rgba(255, 255, 255, 0.05);
|
388 | 387 | }
|
|
432 | 431 | fill: var(--secondary);
|
433 | 432 | }
|
434 | 433 |
|
435 |
| -.white.includeHoverAnimations:hover:enabled { |
| 434 | +.white.includeHoverAnimations:hover.enabled { |
436 | 435 | transform: var(--grow);
|
437 | 436 | background-color: var(--static-white);
|
438 | 437 | box-shadow: 0 1px 0 0 var(--neutral-light-5),
|
439 | 438 | 0 5px 20px -3px rgba(0, 0, 0, 0.3);
|
440 | 439 | }
|
441 | 440 |
|
442 |
| -.white.includeHoverAnimations:active:enabled { |
| 441 | +.white.includeHoverAnimations:active.enabled { |
443 | 442 | background-color: #eeeeee;
|
444 | 443 | box-shadow: 0 1px 0 0 var(--neutral-light-4),
|
445 | 444 | 0 4px 12px -4px rgba(0, 0, 0, 0.3);
|
|
517 | 516 | }
|
518 | 517 |
|
519 | 518 | /** destructive hover **/
|
520 |
| -.destructive.includeHoverAnimations:hover:enabled { |
| 519 | +.destructive.includeHoverAnimations:hover.enabled { |
521 | 520 | transform: var(--grow);
|
522 | 521 | background-color: var(--accent-red);
|
523 | 522 | }
|
524 | 523 |
|
525 |
| -.destructive.includeHoverAnimations:active:enabled { |
| 524 | +.destructive.includeHoverAnimations:active.enabled { |
526 | 525 | transform: perspective(1px) scale3d(0.99, 0.99, 0.99);
|
527 | 526 | background-color: var(--accent-red-dark-1);
|
528 | 527 | }
|
529 | 528 |
|
530 |
| -.destructive.includeHoverAnimations:hover:enabled .textLabel { |
| 529 | +.destructive.includeHoverAnimations:hover.enabled .textLabel { |
531 | 530 | color: white;
|
532 | 531 | }
|
533 | 532 |
|
534 |
| -.destructive.includeHoverAnimations:hover:enabled .icon path { |
| 533 | +.destructive.includeHoverAnimations:hover.enabled .icon path { |
535 | 534 | fill: var(--static-white);
|
536 | 535 | }
|
537 | 536 |
|
|
0 commit comments