93 lines
2.0 KiB
JavaScript
93 lines
2.0 KiB
JavaScript
export default (css) => css`
|
|
*::before,
|
|
*::after {
|
|
display: inline-block;
|
|
animation-play-state: paused;
|
|
animation-fill-mode: forwards;
|
|
animation-iteration-count: var(--icon-resolution, 1);
|
|
vertical-align: text-top;
|
|
}
|
|
*::before {
|
|
animation-name: var(--icon-name-start, var(--icon-name)),
|
|
var(--icon-size-start, var(--icon-size, icon-000));
|
|
background-color: var(--icon-color-start, var(--icon-color));
|
|
}
|
|
*::after {
|
|
animation-name: var(--icon-name-end, var(--icon-name)),
|
|
var(--icon-size-end, var(--icon-size, icon-000));
|
|
background-color: var(--icon-color-end, var(--icon-color));
|
|
}
|
|
|
|
[style*='--icon-color-start']::before {
|
|
color: var(--icon-color-start);
|
|
}
|
|
[style*='--icon-color-end']::after {
|
|
color: var(--icon-color-end);
|
|
}
|
|
[style*='--icon-name-start']::before,
|
|
[style*='--icon-name-end']::after {
|
|
content: '';
|
|
}
|
|
|
|
@keyframes icon-000 {
|
|
100% {
|
|
width: 1.2em;
|
|
height: 1.2em;
|
|
}
|
|
}
|
|
@keyframes icon-100 {
|
|
100% {
|
|
width: 0.625rem; /* 10px */
|
|
height: 0.625rem; /* 10px */
|
|
}
|
|
}
|
|
@keyframes icon-200 {
|
|
100% {
|
|
width: 0.75rem; /* 12px */
|
|
height: 0.75rem; /* 12px */
|
|
}
|
|
}
|
|
@keyframes icon-300 {
|
|
100% {
|
|
width: 1rem; /* 16px */
|
|
height: 1rem; /* 16px */
|
|
}
|
|
}
|
|
@keyframes icon-400 {
|
|
100% {
|
|
width: 1.125rem; /* 18px */
|
|
height: 1.125rem; /* 18px */
|
|
}
|
|
}
|
|
@keyframes icon-500 {
|
|
100% {
|
|
width: 1.25rem; /* 20px */
|
|
height: 1.25rem; /* 20px */
|
|
}
|
|
}
|
|
@keyframes icon-600 {
|
|
100% {
|
|
width: 1.375rem; /* 22px */
|
|
height: 1.375rem; /* 22px */
|
|
}
|
|
}
|
|
@keyframes icon-700 {
|
|
100% {
|
|
width: 1.5rem; /* 24px */
|
|
height: 1.5rem; /* 24px */
|
|
}
|
|
}
|
|
@keyframes icon-800 {
|
|
100% {
|
|
width: 1.625rem; /* 26px */
|
|
height: 1.625rem; /* 26px */
|
|
}
|
|
}
|
|
@keyframes icon-900 {
|
|
100% {
|
|
width: 1.75rem; /* 28px */
|
|
height: 1.75rem; /* 28px */
|
|
}
|
|
}
|
|
`;
|