@kelvininc/ui-components
Version:
Kelvin UI Components
75 lines (72 loc) • 1.79 kB
CSS
/** HEADINGS **/
/** LABELS **/
/** SPANS **/
/** PARAGRAPHS **/
/** TODO: CODE/CONSOLE **/
@property --rotation {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}
@keyframes rotate-border {
to {
--rotation: 360deg;
}
}
/**
* Design Tokens - Auto-generated by Style Dictionary
* Do not edit manually - run `pnpm tokens:build` to regenerate
*/
kv-dropdown-base:not(.hydrated) > [slot=list] {
display: none;
}
:host {
/**
* @prop --loader-overlay-color: Overlay color.
* @prop --loader-background-color: Loader background color.
* @prop --loader-spinner-color: Loader spinner color.
* @prop --loader-padding: Loader padding.
* @prop --loader-border-size: Loader border size.
* @prop --loader-z-index: Loader z-index position.
*/
--loader-overlay-color: var(--overlay-surface-opacity-80);
--loader-background-color: var(--background-container-accent-purple-disabled);
--loader-spinner-color: var(--background-container-accent-purple-strong);
--loader-padding: 15px;
--loader-border-size: 6px;
--loader-z-index: 1;
}
.loader-container {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: var(--loader-z-index);
}
.loader-container .overlay {
width: 100%;
height: 100%;
background-color: var(--loader-overlay-color);
}
.loader-container .loader {
height: 0;
width: 0;
padding: var(--loader-padding);
border: var(--loader-border-size) solid var(--loader-background-color);
border-right-color: var(--loader-spinner-color);
border-radius: 50%;
animation: loadrotate 1s infinite linear;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
@keyframes loadrotate {
/* Use 0% instead for anticlockwise */
100% {
transform: rotate(360deg);
}
}