@kelvininc/ui-components
Version:
Kelvin UI Components
64 lines • 1.74 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 --dropdown-node-gap: Gap between child nodes in px.
* @prop --dropdown-children-offset: Offset of the child nodes in px.
* @prop --dropdown-padding-left: Left padding of option text in px.
* @prop --dropdown-width: Container width in px;
*/
--dropdown-node-gap: 0;
--dropdown-children-offset: var(--kv-spacing-3x, 12px);
--dropdown-padding-left: 36px;
--dropdown-width: 224px;
}
:host kv-tree {
--tree-node-gap: var(--dropdown-node-gap);
--tree-children-offset: var(--dropdown-children-offset);
--tree-node-width: var(--dropdown-width);
}
:host .tree::part(tree) {
border-radius: 4px;
overflow: hidden;
border: 1px solid transparent;
}
:host .expanded::part(tree) {
margin-bottom: var(--kv-spacing-2x, 8px);
border: 1px solid #3f3f3f;
}
:host .expanded::part(tree-item) {
--background-color-highlighted: #2a2a2a;
}
:host .nochildren::part(tree-item) {
--children-padding-left: var(--dropdown-padding-left);
}
:host kv-tree::part(tree-item) {
--vertical-lines-height: 0;
--horizontal-lines-width: 0;
--background-color-default: var(--kv-background);
--border-color-default: none;
--background-color-focused: #3f3f3f;
--background-color-highlighted: none;
--border-color-highlighted: none;
--children-margin-top: 0;
--children-margin-left: 0;
--border-radius: 0;
--node-icon-width: 20px;
--node-icon-height: 20px;
}
:host kv-tree::part(children) {
--tree-children-padding-left: var(--dropdown-padding-left);
}