@kelvininc/ui-components
Version:
Kelvin UI Components
68 lines (64 loc) • 1.91 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 --button-icon-large-width: Button's icon large width.
* @prop --button-icon-small-width: Button's icon small width.
* @prop --button-icon-large-height: Button's icon large height.
* @prop --button-icon-small-height: Button's icon small height.
* @prop --button-size-large: Button's height and width size when size is large.
* @prop --button-size-small: Button's height and width size when size is small.
*/
--button-size-large: 36px;
--button-size-small: 28px;
--button-icon-large-width: 24px;
--button-icon-large-height: 24px;
--button-icon-small-height: 20px;
--button-icon-small-width: 20px;
position: relative;
}
.action-button-icon--size-large kv-action-button::part(button) {
width: var(--button-size-large);
}
.action-button-icon--size-large kv-icon {
--icon-width: var(--button-icon-large-width);
--icon-height: var(--button-icon-large-height);
}
.action-button-icon--size-small kv-action-button::part(button) {
width: var(--button-size-small);
}
.action-button-icon--size-small kv-icon {
--icon-width: var(--button-icon-small-width);
--icon-height: var(--button-icon-small-height);
}
kv-action-button {
--background-color-active-tertiary: var(--kv-neutral-5, #707070);
--border-color-active-tertiary: var(--kv-neutral-4, #bebebe);
--text-color-active-tertiary: var(--kv-neutral-4, #bebebe);
--button-padding-x-small: 0;
--button-height-large: var(--button-size-large);
--button-height-small: var(--button-size-small);
display: flex;
}
kv-action-button::part(button) {
justify-content: center;
}
.button-badge {
position: absolute;
z-index: 1;
top: -5px;
right: -5px;
}