@kelvininc/ui-components
Version:
Kelvin UI Components
69 lines (68 loc) • 1.85 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 --tab-list-bg-color: Background color of the list.
* @prop --tab-list-indicator-color: Tab indicator bar color.
* @prop --tab-list-divider-color: Tab divider bar color.
* @prop --secondary-tab-list-direction: Flex direction of the secondary tab list.
* @prop --secondary-items-align: Alignment of secondary tab items.
*/
--tab-list-bg-color: transparent;
--tab-list-indicator-color: var(--tab-primary-border-color-selected);
--tab-list-divider-color: var(--tab-primary-border-color-default);
--secondary-tab-list-direction: row;
--secondary-items-align: center;
}
:host .primary {
position: relative;
width: 100%;
display: flex;
background-color: var(--tab-list-bg-color);
}
:host .primary::before {
content: "";
width: 100%;
position: absolute;
bottom: 0;
border-bottom: var(--tab-primary-border-thickness-default) solid var(--tab-list-divider-color);
}
:host .primary .selected-tab-indicator {
height: var(--tab-primary-border-thickness-strong);
position: absolute;
bottom: 0;
transition: all 0.3s ease-out;
background: var(--tab-list-indicator-color);
}
:host .secondary {
display: flex;
gap: var(--spacing-xl);
align-items: var(--secondary-items-align);
flex-direction: var(--secondary-tab-list-direction);
}
:host kv-badge {
--badge-height: var(--size-md);
}
:host kv-tag-status {
--tag-status-icon-size: var(--size-md);
}