UNPKG

10.3 kBSCSSView Raw
1@import "../core/index-noreset.scss";
2
3@import "scss/variable";
4@import "scss/mixin";
5
6#{$tree-prefix} {
7 @include box-sizing;
8
9 &, &-child-tree {
10 margin: 0;
11 padding: 0;
12 list-style: none;
13 }
14
15 &-node {
16 white-space: nowrap;
17 }
18
19 &-node-inner {
20 font-size: 0;
21 outline: none;
22 }
23
24 &-node-label-wrapper {
25 display: inline-block;
26 margin: 0 $tree-node-title-margin;
27 vertical-align: middle;
28 }
29
30 &-node-label {
31 height: $tree-node-title-height;
32 line-height: $tree-node-title-height;
33 padding: 0 $tree-node-title-padding;
34 border-radius: $tree-node-title-border-radius;
35 font-size: $tree-node-title-font-size;
36
37 .#{$css-prefix}icon {
38 font-size: calc(#{$tree-node-title-font-size} + 2px);
39 &::before {
40 font-size: $tree-node-title-font-size;
41 width: $tree-node-title-font-size;
42 margin-right: .5em;
43 }
44 }
45 }
46
47 &-node-input.#{$css-prefix}input {
48 margin: 0 $tree-node-title-margin;
49 }
50
51 &-node-indent-unit {
52 display: inline-block;
53 width: $tree-child-indent;
54 vertical-align: middle;
55 position: relative;
56
57 &.#{$css-prefix}line::before {
58 content: '';
59 position: absolute;
60 display: inline-block;
61 border-left: $tree-line;
62 height: calc(#{$tree-node-padding} + #{$line-2} * 2 + #{$tree-node-title-height});
63 left: calc((#{$tree-switch-size} - #{$tree-line-width}) / 2);
64 }
65 }
66
67 &-switcher {
68 position: relative;
69 display: inline-block;
70 vertical-align: middle;
71 margin-right: $tree-switch-margint-right;
72 }
73
74 // --------- this is for config platform
75 .#{$css-prefix}tree-unfold-icon::before {
76 content: $tree-unfold-icon-content;
77 }
78 // --------- this is for config platform
79
80 &-switcher.#{$css-prefix}noline {
81 width: $tree-switch-arrow-size;
82 height: $tree-switch-arrow-size;
83 line-height: $tree-switch-arrow-size;
84 cursor: pointer;
85
86 #{$tree-prefix}-switcher-icon {
87 @include icon-size($tree-switch-arrow-size);
88 transition: transform $motion-duration-immediately $motion-linear;
89 color: $tree-switch-arrow-color;
90 }
91
92 .#{$css-prefix}tree-fold-icon::before {
93 content: $tree-fold-icon-content;
94 }
95
96 &.#{$css-prefix}close #{$tree-prefix}-switcher-icon {
97 @if get-compiling-value($tree-unfold-icon-content) != get-compiling-value($icon-reset) {
98 &::before {
99 content: $tree-unfold-icon-content;
100 }
101 } @else {
102 @include icon-size(
103 $size: $tree-switch-arrow-size,
104 $transform: rotate(-90deg)
105 );
106 }
107 }
108
109 &:not(.#{$css-prefix}disabled):hover #{$tree-prefix}-switcher-icon {
110 color: $tree-switch-hover-arrow-color;
111 }
112
113 &.#{$css-prefix}disabled {
114 cursor: not-allowed;
115
116 #{$tree-prefix}-switcher-icon {
117 color: $tree-node-disabled-color;
118 }
119 }
120 }
121
122 &-switcher.#{$css-prefix}noop-noline {
123 width: $tree-switch-arrow-size;
124 height: $tree-switch-arrow-size;
125 }
126
127 &-switcher.#{$css-prefix}line {
128 width: $tree-switch-size;
129 height: $tree-switch-size;
130 line-height: calc(#{$tree-switch-size} - #{$tree-switch-border-width} * 2);
131 border: $tree-switch-border-width $line-solid $tree-switch-border-color;
132 border-radius: $tree-switch-corner;
133 background-color: $tree-switch-bg-color;
134 cursor: pointer;
135
136 #{$tree-prefix}-switcher-icon {
137 @include icon-size($tree-switch-icon-size, calc((#{$tree-switch-size} - #{$tree-switch-icon-size} - #{$tree-switch-border-width} * 2 ) / 2));
138 color: $tree-switch-icon-color;
139 }
140
141 .#{$css-prefix}tree-switcher-fold-icon::before {
142 content: $tree-switcher-fold-icon-content;
143 }
144
145 .#{$css-prefix}tree-switcher-unfold-icon::before {
146 content: $tree-switcher-unfold-icon-content;
147 }
148
149 &:not(.#{$css-prefix}disabled):hover {
150 border-color: $tree-switch-hover-border-color;
151 background-color: $tree-switch-hover-bg-color;
152
153 #{$tree-prefix}-switcher-icon {
154 color: $tree-switch-hover-icon-color;
155 }
156 }
157
158 &.#{$css-prefix}disabled {
159 border-color: $color-line1-1;
160 background-color: $color-white;
161 cursor: not-allowed;
162
163 #{$tree-prefix}-switcher-icon {
164 color: $tree-node-disabled-color;
165 }
166 }
167 }
168
169 &-switcher.#{$css-prefix}noop-line {
170 width: $tree-switch-size;
171 height: $tree-switch-size;
172 }
173
174 &-switcher.#{$css-prefix}noop-line-noroot {
175 height: 0;
176 border-left: $tree-switch-border-width $line-solid $tree-line-color;
177 border-bottom: $tree-line;
178
179 #{$tree-prefix}-right-angle {
180 bottom: calc(0px - #{$tree-line-width});
181 }
182 }
183
184 &-switcher.#{$css-prefix}loading {
185 &.#{$css-prefix}loading-noline {
186 width: $tree-switch-arrow-size;
187 height: $tree-switch-arrow-size;
188 line-height: $tree-switch-arrow-size;
189 }
190
191 &.#{$css-prefix}loading-line {
192 width: $tree-switch-size;
193 height: $tree-switch-size;
194 line-height: calc(#{$tree-switch-size} - #{$tree-switch-border-width} * 2);
195 border: $tree-switch-border-width $line-solid $color-transparent;
196 }
197
198 #{$tree-prefix}-switcher-icon {
199 @include icon-size($tree-switch-arrow-size);
200 color: $color-brand1-6;
201 }
202 }
203
204 &-right-angle {
205 position: absolute;
206 bottom: calc((#{$tree-switch-size} - #{$tree-switch-border-width} * 2 - #{$tree-line-width}) / 2);
207 left: $tree-child-right-angle-left;
208 display: block;
209 width: $tree-child-right-angle-width;
210 height: calc(#{$tree-node-title-height} + #{$tree-node-padding} - #{$tree-line-width} * 2);
211 border-left: $tree-line;
212 border-bottom: $tree-line;
213 }
214
215 &.#{$css-prefix}label-block {
216 #{$tree-prefix}-node-inner {
217 display: flex;
218 align-items: center;
219 outline: none;
220 }
221
222 #{$tree-prefix}-node-label-wrapper {
223 flex: 1 1 auto;
224 }
225 }
226
227 &.#{$css-prefix}node-indent {
228 #{$tree-prefix}-node #{$tree-prefix}-node {
229 margin-left: $tree-child-indent;
230 }
231
232 #{$tree-prefix}-node-inner {
233 padding-top: calc(#{$tree-node-padding} / 2);
234 padding-bottom: calc(#{$tree-node-padding} / 2);
235 &:focus {
236 #{$tree-prefix}-node-label {
237 @include tree-node-state($tree-node-hover-color, $tree-node-hover-bg-color);
238 }
239 }
240 }
241
242 #{$tree-prefix}-node-label-wrapper {
243 border-top: $line-2 solid $color-transparent;
244 border-bottom: $line-2 solid $color-transparent;
245 }
246
247 #{$tree-prefix}-node-label {
248 transition: color $motion-duration-immediately $motion-linear, background-color $motion-duration-immediately $motion-linear;
249 cursor: default;
250 @include tree-node-state($tree-node-normal-color, $tree-node-normal-background);
251 }
252
253 #{$tree-prefix}-node-label-selectable {
254 cursor: pointer;
255 }
256
257 #{$tree-prefix}-node-label:hover {
258 @include tree-node-state($tree-node-hover-color, $tree-node-hover-bg-color);
259 }
260
261 #{$tree-prefix}-node-inner.#{$css-prefix}selected #{$tree-prefix}-node-label {
262 @include tree-node-state($tree-node-selected-color, $tree-node-selected-background);
263 }
264
265 #{$tree-prefix}-node-inner.#{$css-prefix}disabled #{$tree-prefix}-node-label,
266 #{$tree-prefix}-node-inner.#{$css-prefix}disabled #{$tree-prefix}-node-label:hover {
267 @include tree-node-state($tree-node-disabled-color, $tree-node-disabled-background);
268 cursor: not-allowed;
269 }
270
271 #{$tree-prefix}-node-inner.#{$css-prefix}drag-over #{$tree-prefix}-node-label {
272 background-color: $color-brand1-6;
273 color: $color-white;
274 opacity: .8;
275 }
276
277 #{$tree-prefix}-node-inner.#{$css-prefix}drag-over-gap-top #{$tree-prefix}-node-label-wrapper {
278 border-top-color: $color-brand1-6;
279 }
280
281 #{$tree-prefix}-node-inner.#{$css-prefix}drag-over-gap-bottom #{$tree-prefix}-node-label-wrapper {
282 border-bottom-color: $color-brand1-6;
283 }
284 }
285
286 &.#{$css-prefix}node-block #{$tree-prefix}-node-inner {
287 padding-top: $tree-node-padding;
288 padding-bottom: $tree-node-padding;
289 transition: color $motion-duration-immediately $motion-linear, background-color $motion-duration-immediately $motion-linear;
290 cursor: pointer;
291 @include tree-node-state($tree-node-normal-color, $tree-node-normal-background);
292
293 &:hover,
294 &:focus {
295 @include tree-node-state($tree-node-hover-color, $tree-node-hover-bg-color);
296 }
297
298 &.#{$css-prefix}selected {
299 @include tree-node-state($tree-node-selected-color, $tree-node-selected-background);
300 }
301
302 &.#{$css-prefix}disabled,
303 &.#{$css-prefix}disabled:hover {
304 @include tree-node-state($tree-node-disabled-color, $tree-node-disabled-background);
305 cursor: not-allowed;
306 }
307 }
308
309 &.#{$css-prefix}show-line &-node &-node:not(:last-child) {
310 margin-left: $tree-child-indent-left;
311 border-left: $tree-line;
312 padding-left: $tree-child-indent-right;
313 }
314
315 &-node.#{$css-prefix}filtered > #{$tree-prefix}-node-inner #{$tree-prefix}-node-label {
316 color: $color-brand1-6;
317
318 &:hover {
319 color: $color-brand1-6;
320 }
321 }
322}
323
324@import './rtl.scss';