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 |
|
75 | .#{$css-prefix}tree-unfold-icon::before {
|
76 | content: $tree-unfold-icon-content;
|
77 | }
|
78 |
|
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';
|