@kelvininc/ui-components
Version:
Kelvin UI Components
59 lines (55 loc) • 1.72 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-split-height-large: Split button height when size is large.
* @prop --button-split-height-small: Split button height when size is size.
* @prop --button-split-padding-x-large: Split button horizontal padding when size is large.
* @prop --button-split-padding-x-small: Split button horizontal padding when size is size.
* @prop --button-split-icon-width: Split button icon width.
* @prop --button-split-icon-height: Split button icon height.
*/
--button-split-height-large: 36px;
--button-split-height-small: 28px;
--button-split-padding-x-large: var(--kv-spacing-2x, 8px);
--button-split-padding-x-small: var(--kv-spacing, 4px);
--button-split-icon-width: 24px;
--button-split-icon-height: 24px;
}
.action-button-split {
display: flex;
align-items: center;
}
kv-action-button-text::part(button) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right-width: 0.5px;
}
kv-action-button::part(button) {
--button-height-large: var(--button-split-height-large);
--button-height-small: var(--button-split-height-small);
--button-padding-x-large: var(--button-split-padding-x-large);
--button-padding-x-small: var(--button-split-padding-x-small);
display: flex;
margin-left: -1px;
border-left-width: 0.5px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
kv-icon {
--icon-width: var(--button-split-icon-width);
--icon-height: var(--button-split-icon-width);
}