@kelvininc/ui-components
Version:
Kelvin UI Components
45 lines • 1.02 kB
CSS
/** HEADINGS **/
/** LABELS **/
/** SPANS **/
/** PARAGRAPHS **/
/** CODE/CONSOLE **/
@property --rotation {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}
@keyframes rotate-border {
to {
--rotation: 360deg;
}
}
: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
*
*/
--tab-list-bg-color: "transparent";
--tab-list-indicator-color: var(--kv-primary, #005cc7);
--tab-list-divider-color: var(--kv-neutral-5, #707070);
position: relative;
height: 34px;
width: 100%;
display: flex;
background-color: var(--tab-list-bg-color);
}
:host::before {
content: "";
width: 100%;
position: absolute;
bottom: 0;
border-bottom: 1px solid var(--tab-list-divider-color);
}
:host .selected-tab-indicator {
height: 2px;
position: absolute;
bottom: 0;
transition: all 0.3s ease-out;
background: var(--tab-list-indicator-color);
}