Migrate $primary color variations to CSS variables
This commit is contained in:
parent
5dd4019528
commit
9dda522151
|
@ -66,6 +66,8 @@
|
||||||
--primary-a: 1 !important;
|
--primary-a: 1 !important;
|
||||||
--primary: hsla(var(--primary-h), var(--primary-s), var(--primary-l), var(--primary-a));
|
--primary: hsla(var(--primary-h), var(--primary-s), var(--primary-l), var(--primary-a));
|
||||||
|
|
||||||
|
// simulate sass lighten($primary, 30) by increasing lightness 30% to 73%
|
||||||
|
--primary-light: hsla(var(--primary-h), var(--primary-s), 73%, var(--primary-a));
|
||||||
--primary-translucent: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.5);
|
--primary-translucent: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -92,5 +94,4 @@
|
||||||
--text-light: var(--grey-300) !important;
|
--text-light: var(--grey-300) !important;
|
||||||
--text-strong: var(--grey-900) !important;
|
--text-strong: var(--grey-900) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -246,7 +246,7 @@ export default {
|
||||||
}
|
}
|
||||||
10% {
|
10% {
|
||||||
transform: translate(0, -15px);
|
transform: translate(0, -15px);
|
||||||
background-color: $primary-dark;
|
background-color: var(--primary-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
|
@ -929,7 +929,7 @@ $flash-background-duration: 750ms;
|
||||||
|
|
||||||
@keyframes flash-background {
|
@keyframes flash-background {
|
||||||
0% {
|
0% {
|
||||||
background: lighten($primary, 30);
|
background: var(--primary-light);
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
|
|
Reference in New Issue
Block a user