32 lines
902 B
CSS
32 lines
902 B
CSS
@layer components {
|
|
.spinner {
|
|
@apply inline-block h-6 w-6 shrink-0 rounded-full;
|
|
/* currentColor track (not --shadow-color, which the flat theme doesn't
|
|
define — an undefined var there voids the whole border shorthand) */
|
|
border: 3px solid color-mix(in srgb, currentColor 20%, transparent);
|
|
border-top-color: var(--primary);
|
|
animation: spinner-spin 0.7s linear infinite;
|
|
}
|
|
|
|
.button-primary .spinner,
|
|
.button-error .spinner {
|
|
border-top-color: currentColor;
|
|
}
|
|
|
|
/* sizes share the element with .spinner rather than nesting under it, and only override its
|
|
dimensions — the shape, colour and animation all come from .spinner, so a size on its own
|
|
renders as a bordered box */
|
|
.spinner-sm {
|
|
@apply h-4 w-4 border-2;
|
|
}
|
|
|
|
.spinner-xs {
|
|
@apply h-3 w-3 border-2;
|
|
}
|
|
}
|
|
|
|
@keyframes spinner-spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|