@kelvininc/ui-components
Version:
Kelvin UI Components
67 lines (65 loc) • 1.6 kB
CSS
/** HEADINGS **/
/** LABELS **/
/** SPANS **/
/** PARAGRAPHS **/
/** CODE/CONSOLE **/
@property --rotation {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}
@keyframes rotate-border {
to {
--rotation: 360deg;
}
}
/** HEADINGS **/
/** LABELS **/
/** SPANS **/
/** PARAGRAPHS **/
/** CODE/CONSOLE **/
@property --rotation {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}
@keyframes rotate-border {
to {
--rotation: 360deg;
}
}
:host {
/**
* @prop --tree-node-width: Tree Node height.
* @prop --tree-node-height: Tree Node height.
* @prop --tree-node-gap: Gap between child nodes in px.
* @prop --tree-children-offset: Offset of the child nodes in px.
* @prop --tree-children-padding-left: Left padding for the child nodes in px.
*/
--tree-node-width: 300px;
--tree-node-height: 40px;
--tree-node-gap: var(--kv-spacing-2x, 8px);
--tree-children-offset: var(--kv-spacing-3x, 12px);
--tree-children-padding-left: var(--kv-spacing-2x, 8px);
}
:host .container {
width: var(--tree-node-width);
}
:host kv-tree-item {
--node-width: var(--tree-node-width);
--node-height: var(--tree-node-height);
--node-gap: var(--tree-node-gap);
--children-offset: var(--tree-children-offset);
--children-padding-left: var(--tree-children-padding-left);
}
:host > kv-tree-item:not(:first-child)::before {
content: "";
display: block;
height: var(--tree-node-gap);
}
:host {
--tree-connector-lines-color: var(--kv-primary, #005cc7);
}
:host kv-tree-item {
--connector-lines-color: var(--tree-connector-lines-color);
}