@kelvininc/ui-components
Version:
Kelvin UI Components
56 lines • 1.82 kB
CSS
/** HEADINGS **/
/** LABELS **/
/** SPANS **/
/** PARAGRAPHS **/
/** CODE/CONSOLE **/
@property --rotation {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}
@keyframes rotate-border {
to {
--rotation: 360deg;
}
}
.toggle-switch-container {
display: flex;
}
.toggle-switch-container > :last-child {
--border-radius-top-right: 4px;
--border-radius-bottom-right: 4px;
}
.toggle-switch-container > :first-child {
--border-radius-top-left: 4px;
--border-radius-bottom-left: 4px;
}
.toggle-switch-container kv-toggle-button {
--border-radius-top-right: 0;
--border-radius-bottom-right: 0;
--border-radius-top-left: 0;
--border-radius-bottom-left: 0;
--button-padding-small: var(--kv-spacing, 4px) var(--kv-spacing-3x, 12px);
--button-padding-large: var(--kv-spacing-2x, 8px) var(--kv-spacing-3x, 12px);
--text-color-default: var(--kv-neutral-4, #bebebe);
--text-color-active: var(--kv-neutral-2, #e5e5e5);
--text-color-disabled: var(--kv-neutral-5, #707070);
--text-color-disabled-active: var(--kv-neutral-5, #707070);
--background-color-default: "transparent";
--background-color-active: var(--kv-neutral-6, #3f3f3f);
--background-color-disabled: "transparent";
--background-color-disabled-active: var(--kv-neutral-7, #2a2a2a);
--border-color-default: var(--kv-neutral-6, #3f3f3f);
--border-color-active: var(--kv-neutral-2, #e5e5e5);
--border-color-disabled: var(--kv-neutral-6, #3f3f3f);
--border-color-disabled-active: var(--kv-neutral-6, #3f3f3f);
}
.toggle-switch-container kv-toggle-button::part(toggle-label) {
font-family: var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");
font-size: 12px;
font-weight: 400;
font-stretch: normal;
font-style: normal;
line-height: 18px;
letter-spacing: normal;
text-transform: none;
}