Skip to content

Commit d5ba3be

Browse files
mlmoravekmlmoravek
authored
feat(tree): add tree component styling (#204)
1 parent 24e1a9d commit d5ba3be

File tree

4 files changed

+125
-0
lines changed

4 files changed

+125
-0
lines changed

‎src/assets/scss/components/_tree.scss‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
/* @docs */
2+
$tree-list-line-height: 1.25em !default;
3+
$tree-item-padding: 0.5em 0.75em !default;
4+
$tree-item-margin: 0.2em 0 !default;
5+
$tree-item-bg: transparent !default;
6+
$tree-item-border-radius: var(--#{$prefix}border-radius) !default;
7+
$tree-item-color: var(--#{$prefix}body-color) !default;
8+
$tree-item-active-bg: var(--#{$prefix}primary) !default;
9+
$tree-item-active-color: var(--#{$prefix}white) !default;
10+
$tree-item-disabled-bg: transparent !default;
11+
$tree-item-disabled-color: var(--#{$prefix}secondary) !default;
12+
$tree-item-hover-bg: var(--#{$prefix}tertiary-bg) !default;
13+
$tree-item-hover-color: var(--#{$prefix}body-color) !default;
14+
$tree-icon-spacer: 0.25rem !default;
15+
$tree-subtree-border-left: 1px solid #445e00 !default;
16+
$tree-subtree-padding: 0 0.5em !default;
17+
$tree-subtree-margin: 0.5em 1.3em !default;
18+
/* @docs */
19+
20+
.tree {
21+
&-list {
22+
--#{$prefix}tree-list-line-height: #{$tree-list-line-height};
23+
24+
padding: 0;
25+
line-height: var(--#{$prefix}tree-list-line-height);
26+
}
27+
28+
&-item {
29+
--#{$prefix}tree-item-padding: #{$tree-item-padding};
30+
--#{$prefix}tree-item-margin: #{$tree-item-margin};
31+
--#{$prefix}tree-item-bg: #{$tree-item-bg};
32+
--#{$prefix}tree-item-border-radius: #{$tree-item-border-radius};
33+
--#{$prefix}tree-item-color: #{$tree-item-color};
34+
--#{$prefix}tree-item-active-bg: #{$tree-item-active-bg};
35+
--#{$prefix}tree-item-active-color: #{$tree-item-active-color};
36+
--#{$prefix}tree-item-hover-bg: #{$tree-item-hover-bg};
37+
--#{$prefix}tree-item-hover-color: #{$tree-item-hover-color};
38+
--#{$prefix}tree-item-disabled-bg: #{$tree-item-disabled-bg};
39+
--#{$prefix}tree-item-disabled-color: #{$tree-item-disabled-color};
40+
41+
list-style: none;
42+
display: block;
43+
44+
&-label {
45+
display: flex;
46+
align-items: center;
47+
cursor: pointer;
48+
background: var(--#{$prefix}tree-item-bg);
49+
color: var(--#{$prefix}tree-item-color);
50+
padding: var(--#{$prefix}tree-item-padding);
51+
margin: var(--#{$prefix}tree-item-margin);
52+
border: 0;
53+
border-radius: var(--#{$prefix}tree-item-border-radius);
54+
}
55+
56+
&.active {
57+
--#{$prefix}tree-item-bg: var(--#{$prefix}tree-item-active-bg);
58+
--#{$prefix}tree-item-color: var(
59+
--#{$prefix}tree-item-active-color
60+
);
61+
}
62+
63+
& > .tree-item-label:hover,
64+
&:focus-visible,
65+
&.focused {
66+
outline: unset;
67+
68+
&:not(.active) {
69+
--#{$prefix}tree-item-bg: var(--#{$prefix}tree-item-hover-bg);
70+
--#{$prefix}tree-item-color: var(
71+
--#{$prefix}tree-item-hover-color
72+
);
73+
}
74+
75+
> .tree-item-label {
76+
box-shadow: var(--#{$prefix}focus-ring-x, 0)
77+
var(--#{$prefix}focus-ring-y, 0)
78+
var(--#{$prefix}focus-ring-blur, 0)
79+
var(--#{$prefix}focus-ring-width)
80+
var(--#{$prefix}focus-ring-color);
81+
}
82+
}
83+
84+
&.disabled {
85+
--#{$prefix}tree-item-bg: var(--#{$prefix}tree-item-disabled-bg);
86+
--#{$prefix}tree-item-color: var(
87+
--#{$prefix}tree-item-disabled-color
88+
);
89+
}
90+
91+
&-toggle-icon,
92+
&-icon {
93+
--#{$prefix}tree-icon-spacer: #{$tree-icon-spacer};
94+
95+
margin-right: var(--#{$prefix}tree-icon-spacer);
96+
}
97+
}
98+
99+
.tree-subtree {
100+
--#{$prefix}tree-subtree-border-left: #{$tree-subtree-border-left};
101+
--#{$prefix}tree-subtree-padding: #{$tree-subtree-padding};
102+
--#{$prefix}tree-subtree-margin: #{$tree-subtree-margin};
103+
104+
border-left: var(--#{$prefix}tree-subtree-border-left);
105+
padding: var(--#{$prefix}tree-subtree-padding);
106+
margin: var(--#{$prefix}tree-subtree-margin);
107+
}
108+
}

‎src/assets/scss/theme.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,4 +39,5 @@
3939
@import "components/tag";
4040
@import "components/timepicker";
4141
@import "components/tooltip";
42+
@import "components/tree";
4243
@import "components/upload";

‎src/components.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,6 @@ export default [
3131
"Taginput",
3232
"Timepicker",
3333
"Tooltip",
34+
"Tree",
3435
"Upload",
3536
];

‎src/plugins/theme.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -592,6 +592,21 @@ const bootstrapConfig: OrugaConfig = {
592592
triggerClass: "tooltip-trigger",
593593
contentClass: "tooltip-content",
594594
},
595+
tree: {
596+
override: true,
597+
rootClass: "tree",
598+
listClass: "tree-list",
599+
itemClass: "tree-item",
600+
itemLabelClass: "tree-item-label",
601+
itemIconClass: "tree-item-icon",
602+
itemToggleIconClass: "tree-item-toggle-icon",
603+
disabledClass: "disabled",
604+
itemSelectableClass: "selectable",
605+
itemFocusedClass: "focused",
606+
itemSelectedClass: "active",
607+
itemDisabledClass: "disabled",
608+
subtreeClass: "tree-subtree",
609+
},
595610
upload: {
596611
override: true,
597612
rootClass: "upload",

0 commit comments

Comments
 (0)