@itwin/itwinui-css 0.49.0 → 0.51.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (63) hide show
  1. package/css/alert.css +232 -174
  2. package/css/all.css +7251 -5567
  3. package/css/badge.css +2 -1
  4. package/css/blockquote.css +10 -7
  5. package/css/breadcrumbs.css +110 -87
  6. package/css/button.css +443 -315
  7. package/css/carousel.css +125 -78
  8. package/css/code.css +69 -56
  9. package/css/color-picker.css +150 -103
  10. package/css/date-picker.css +73 -55
  11. package/css/expandable-block.css +212 -160
  12. package/css/fieldset.css +22 -18
  13. package/css/file-upload.css +93 -79
  14. package/css/footer.css +64 -53
  15. package/css/global.css +100 -78
  16. package/css/header.css +471 -364
  17. package/css/icon.css +108 -78
  18. package/css/information-panel.css +174 -137
  19. package/css/inputs.css +1134 -942
  20. package/css/keyboard.css +11 -7
  21. package/css/location-marker.css +68 -58
  22. package/css/menu.css +105 -80
  23. package/css/modal.css +54 -42
  24. package/css/non-ideal-state.css +47 -40
  25. package/css/notification-marker.css +275 -200
  26. package/css/popover.css +10 -8
  27. package/css/progress-indicator.css +315 -237
  28. package/css/reset-global-styles.css +10 -5
  29. package/css/side-navigation.css +189 -140
  30. package/css/skip-to-content.css +41 -27
  31. package/css/slider.css +112 -87
  32. package/css/table.css +563 -419
  33. package/css/tabs.css +324 -238
  34. package/css/tag.css +111 -84
  35. package/css/text.css +46 -27
  36. package/css/tile.css +387 -311
  37. package/css/time-picker.css +113 -86
  38. package/css/toast-notification.css +232 -173
  39. package/css/toggle-switch.css +176 -111
  40. package/css/tooltip.css +21 -16
  41. package/css/tree.css +123 -93
  42. package/css/user-icon.css +204 -162
  43. package/css/wizard.css +156 -131
  44. package/package.json +5 -6
  45. package/scss/alert/alert.scss +1 -5
  46. package/scss/button/button-group.scss +38 -8
  47. package/scss/button/classes.scss +4 -0
  48. package/scss/carousel/carousel.scss +17 -6
  49. package/scss/code/codeblock.scss +1 -1
  50. package/scss/inputs/checkbox.scss +1 -0
  51. package/scss/inputs/labeled-inputs.scss +8 -8
  52. package/scss/inputs/radio.scss +0 -4
  53. package/scss/location-marker/data-rich.scss +1 -1
  54. package/scss/location-marker/me.scss +4 -4
  55. package/scss/modal/modal.scss +1 -0
  56. package/scss/popover/popover.scss +1 -2
  57. package/scss/progress-indicator/linear.scss +2 -10
  58. package/scss/style/global.scss +1 -5
  59. package/scss/style/mixins.scss +9 -0
  60. package/scss/table/table.scss +23 -14
  61. package/scss/toast-notification/categories.scss +1 -5
  62. package/scss/toggle-switch/classes.scss +4 -0
  63. package/scss/toggle-switch/toggle-switch.scss +141 -162
package/css/toggle-switch.css CHANGED
@@ -2,132 +2,197 @@
2
2
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
3
3
  * See LICENSE.md in the project root for license terms and full copyright notice.
4
4
  *--------------------------------------------------------------------------------------------*/
5
- .iui-toggle-switch{
5
+ .iui-toggle-switch-wrapper{
6
6
  margin:0;
7
7
  padding:0;
8
8
  border:none;
9
9
  vertical-align:baseline;
10
- display:flex;
10
+ display:-ms-grid;
11
+ display:grid;
12
+ grid-template-areas:"toggle";
11
13
  align-items:center;
14
+ gap:8px;
12
15
  font-size:14px;
13
16
  width:-webkit-fit-content;
14
17
  width:-moz-fit-content;
15
18
  width:fit-content;
16
- padding:5.5px 0;
17
19
  -webkit-user-select:none;
18
20
  -moz-user-select:none;
19
21
  -ms-user-select:none;
20
22
  user-select:none;
21
23
  cursor:pointer;
22
- position:relative;
24
+ isolation:isolate;
23
25
  color:rgba(0, 0, 0, 0.8);
24
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
25
- .iui-toggle-switch > input{
26
- width:0;
27
- height:0;
26
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
27
+ }
28
+ .iui-toggle-switch-wrapper > * + *{
29
+ margin-left:8px;
30
+ }
31
+ @supports (gap: 8px){
32
+ .iui-toggle-switch-wrapper > * + *{
33
+ margin-left:0;
34
+ }
35
+ }
36
+ .iui-toggle-switch-wrapper.iui-disabled{
37
+ cursor:not-allowed;
38
+ color:rgba(0, 0, 0, 0.4);
39
+ color:var(--iui-text-color-muted);
40
+ }
41
+ .iui-toggle-switch-wrapper.iui-label-on-left{
42
+ grid-template-areas:"label toggle";
43
+ }
44
+ .iui-toggle-switch-wrapper.iui-label-on-right{
45
+ grid-template-areas:"toggle label";
46
+ }
47
+
48
+ .iui-toggle-switch{
49
+ -ms-grid-row:1;
50
+ -ms-grid-column:1;
51
+ margin:0;
52
+ padding:0;
53
+ border:none;
54
+ vertical-align:baseline;
55
+ grid-area:toggle;
56
+ display:flex;
57
+ position:relative;
58
+ cursor:pointer;
59
+ width:16px;
60
+ height:16px;
61
+ background-color:var(--iui-color-background-1);
62
+ border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
63
+ }
64
+
65
+ .iui-toggle-switch-wrapper.iui-label-on-left > .iui-toggle-switch{
66
+ -ms-grid-row:1;
67
+ -ms-grid-column:2;
68
+ }
69
+
70
+ .iui-toggle-switch-wrapper.iui-label-on-right > .iui-toggle-switch{
71
+ -ms-grid-row:1;
72
+ -ms-grid-column:1;
73
+ }
74
+ .iui-toggle-switch:focus-visible{
75
+ outline:1px solid var(--iui-color-foreground-primary);
76
+ outline-offset:1px;
77
+ }
78
+ @supports not selector(*:focus-visible){
79
+ .iui-toggle-switch:focus{
80
+ outline:1px solid var(--iui-color-foreground-primary);
81
+ outline-offset:1px;
82
+ }
83
+ }
84
+ @supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)){
85
+ .iui-toggle-switch{
28
86
  -webkit-appearance:none;
29
87
  -moz-appearance:none;
30
88
  appearance:none;
31
- opacity:0;
32
- position:absolute; }
33
- .iui-toggle-switch > input ~ .iui-toggle{
34
- display:block;
35
- position:relative;
36
- height:20px;
37
- width:38px;
38
- border-radius:11px;
39
- background-color:#FFF;
40
- border:1px solid rgba(0, 0, 0, 0.4);
41
- background-color:var(--iui-color-background-1);
42
- border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
43
- @media (prefers-reduced-motion: no-preference){
44
- .iui-toggle-switch > input ~ .iui-toggle{
45
- transition:background-color 0.2s ease, border-color 0.2s ease; } }
46
- .iui-toggle-switch > input ~ .iui-toggle > .iui-icon{
47
- opacity:0;
48
- width:12px;
49
- height:12px;
50
- display:inline-block;
51
- position:relative;
52
- left:4px;
53
- fill:#FFF;
54
- fill:var(--iui-color-foreground-accessory); }
55
- @media (prefers-reduced-motion: no-preference){
56
- .iui-toggle-switch > input ~ .iui-toggle > .iui-icon{
57
- transition:opacity 0.2s ease; } }
58
- .iui-toggle-switch > input ~ .iui-toggle > .iui-handle{
59
- position:absolute;
60
- height:16px;
61
- width:16px;
62
- top:50%;
63
- transform:translateY(-50%);
64
- right:20px;
65
- border-radius:50%;
66
- background-color:#000;
67
- opacity:0.8;
68
- background-color:var(--iui-color-foreground-body);
69
- opacity:var(--iui-opacity-2); }
70
- @media (prefers-reduced-motion: no-preference){
71
- .iui-toggle-switch > input ~ .iui-toggle > .iui-handle{
72
- transition:right 0.2s ease, background-color 0.2s ease, opacity 0.2s ease; } }
73
- .iui-toggle-switch > input:hover:not(:disabled) ~ .iui-toggle, .iui-toggle-switch > input:focus ~ .iui-toggle{
74
- border:1px solid rgba(0, 0, 0, 0.8);
75
- border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
76
- .iui-toggle-switch > input:hover:not(:disabled) ~ .iui-toggle > .iui-handle, .iui-toggle-switch > input:focus ~ .iui-toggle > .iui-handle{
77
- opacity:1;
78
- opacity:var(--iui-opacity-1); }
79
- .iui-toggle-switch > input:checked ~ .iui-toggle{
80
- background-color:#008BE1;
81
- border-color:#008BE1;
82
- background-color:var(--iui-color-background-primary);
83
- border-color:var(--iui-color-background-primary); }
84
- .iui-toggle-switch > input:checked ~ .iui-toggle > .iui-icon{
85
- opacity:1;
86
- opacity:var(--iui-opacity-1); }
87
- .iui-toggle-switch > input:checked ~ .iui-toggle > .iui-handle{
88
- background-color:#FFF;
89
- opacity:0.8;
90
- background-color:var(--iui-color-foreground-accessory);
91
- opacity:var(--iui-opacity-2);
92
- right:2px; }
93
- .iui-toggle-switch > input:checked:hover:not(:disabled) ~ .iui-toggle{
94
- border-color:#008BE1;
95
- border-color:var(--iui-color-background-primary); }
96
- .iui-toggle-switch > input:checked:hover:not(:disabled) ~ .iui-toggle > .iui-handle{
97
- opacity:1;
98
- opacity:var(--iui-opacity-1); }
99
- .iui-toggle-switch > input:disabled ~ .iui-toggle{
100
- cursor:not-allowed;
101
- background-color:#EEF0F3;
102
- border-color:#EEF0F3;
103
- background-color:var(--iui-color-background-disabled);
104
- border-color:var(--iui-color-background-disabled); }
105
- .iui-toggle-switch > input:disabled ~ .iui-toggle > .iui-handle{
106
- background-color:#000;
107
- opacity:0.2;
108
- background-color:var(--iui-color-foreground-body);
109
- opacity:var(--iui-opacity-5); }
110
- .iui-toggle-switch > input:disabled ~ .iui-toggle > .iui-icon{
111
- fill:rgba(0, 0, 0, 0.8);
112
- fill:var(--iui-icons-color-actionable);
113
- opacity:0; }
114
- .iui-toggle-switch > input:disabled ~ .iui-label{
115
- cursor:not-allowed;
116
- color:rgba(0, 0, 0, 0.4);
117
- color:var(--iui-text-color-muted); }
118
- .iui-toggle-switch > input:disabled:checked ~ .iui-toggle > .iui-icon{
119
- opacity:0.2;
120
- opacity:var(--iui-opacity-5); }
121
- .iui-toggle-switch > input:enabled:focus ~ .iui-toggle{
122
- outline:1px solid #008BE1;
123
- outline:1px solid var(--iui-color-foreground-primary);
124
- outline-offset:1px; }
125
- .iui-toggle-switch > input:enabled:focus:not(:focus-visible) ~ .iui-toggle{
126
- outline:none; }
127
- .iui-toggle-switch.iui-disabled{
128
- cursor:not-allowed; }
129
- .iui-toggle-switch > .iui-label{
130
- margin-right:8px; }
131
- .iui-toggle-switch .iui-toggle ~ .iui-label{
132
- margin-left:8px;
133
- margin-right:0; }
89
+ width:44px;
90
+ height:auto;
91
+ border-radius:9999px;
92
+ box-sizing:border-box;
93
+ transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
94
+ background-color:var(--iui-color-background-1);
95
+ border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
96
+ }
97
+ }
98
+ .iui-toggle-switch-label{
99
+ -ms-grid-row:1;
100
+ -ms-grid-column:1;
101
+ grid-area:label;
102
+ }
103
+ .iui-toggle-switch-wrapper.iui-label-on-right > .iui-toggle-switch-label{
104
+ -ms-grid-row:1;
105
+ -ms-grid-column:2;
106
+ }
107
+ .iui-toggle-switch::after{
108
+ content:"";
109
+ height:16px;
110
+ width:16px;
111
+ margin:3px;
112
+ aspect-ratio:1/1;
113
+ border-radius:50%;
114
+ transition:background-color 0.2s ease-out, opacity 0.2s ease-out;
115
+ z-index:2;
116
+ }
117
+ @media (prefers-reduced-motion: no-preference){
118
+ .iui-toggle-switch::after{
119
+ transition:transform 0.2s ease-out, background-color 0.2s ease-out, opacity 0.2s ease-out;
120
+ }
121
+ }
122
+ .iui-toggle-switch::after{
123
+ background-color:var(--iui-color-foreground-body);
124
+ opacity:var(--iui-opacity-2);
125
+ }
126
+ .iui-toggle-switch:hover{
127
+ border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
128
+ }
129
+ .iui-toggle-switch:focus-visible{
130
+ border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
131
+ }
132
+ @supports not selector(*:focus-visible){
133
+ .iui-toggle-switch:focus{
134
+ border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
135
+ }
136
+ }
137
+ .iui-toggle-switch:checked{
138
+ background-color:var(--iui-color-background-primary);
139
+ border-color:var(--iui-color-background-primary);
140
+ }
141
+ .iui-toggle-switch:checked::after{
142
+ transform:translateX(19px);
143
+ background-color:var(--iui-color-foreground-accessory);
144
+ opacity:var(--iui-opacity-2);
145
+ }
146
+ .iui-toggle-switch:checked ~ .iui-toggle-switch-icon{
147
+ opacity:var(--iui-opacity-1);
148
+ }
149
+ .iui-toggle-switch:hover::after{
150
+ opacity:var(--iui-opacity-1);
151
+ }
152
+ .iui-toggle-switch:focus-visible::after{
153
+ opacity:var(--iui-opacity-1);
154
+ }
155
+ @supports not selector(*:focus-visible){
156
+ .iui-toggle-switch:focus::after{
157
+ opacity:var(--iui-opacity-1);
158
+ }
159
+ }
160
+ .iui-toggle-switch:disabled{
161
+ cursor:not-allowed;
162
+ background-color:var(--iui-color-background-disabled);
163
+ border-color:var(--iui-color-background-disabled);
164
+ }
165
+ .iui-toggle-switch:disabled::after{
166
+ background-color:var(--iui-color-foreground-body);
167
+ opacity:var(--iui-opacity-5);
168
+ }
169
+ .iui-toggle-switch:disabled ~ .iui-toggle-switch-icon{
170
+ opacity:0;
171
+ fill:var(--iui-icons-color-actionable);
172
+ }
173
+ .iui-toggle-switch:disabled:checked ~ .iui-toggle-switch-icon{
174
+ opacity:var(--iui-opacity-5);
175
+ }
176
+ .iui-toggle-switch-icon{
177
+ -ms-grid-row:1;
178
+ -ms-grid-column:1;
179
+ opacity:0;
180
+ grid-area:toggle;
181
+ width:12px;
182
+ height:12px;
183
+ padding:2px;
184
+ margin:4px;
185
+ display:flex;
186
+ z-index:1;
187
+ transition:opacity 0.2s ease-out;
188
+ pointer-events:none;
189
+ fill:var(--iui-color-foreground-accessory);
190
+ }
191
+ .iui-toggle-switch-wrapper.iui-label-on-left > .iui-toggle-switch-icon{
192
+ -ms-grid-row:1;
193
+ -ms-grid-column:2;
194
+ }
195
+ .iui-toggle-switch-wrapper.iui-label-on-right > .iui-toggle-switch-icon{
196
+ -ms-grid-row:1;
197
+ -ms-grid-column:1;
198
+ }
package/css/tooltip.css CHANGED
@@ -9,22 +9,26 @@
9
9
  height:-webkit-fit-content;
10
10
  height:-moz-fit-content;
11
11
  height:fit-content;
12
- position:relative; }
12
+ position:relative;
13
+ }
14
+ .iui-tooltip-container > .iui-tooltip{
15
+ position:absolute;
16
+ visibility:hidden;
17
+ -webkit-user-select:none;
18
+ -moz-user-select:none;
19
+ -ms-user-select:none;
20
+ user-select:none;
21
+ opacity:0;
22
+ }
23
+ @media (prefers-reduced-motion: no-preference){
13
24
  .iui-tooltip-container > .iui-tooltip{
14
- position:absolute;
15
- visibility:hidden;
16
- -webkit-user-select:none;
17
- -moz-user-select:none;
18
- -ms-user-select:none;
19
- user-select:none;
20
- opacity:0; }
21
- @media (prefers-reduced-motion: no-preference){
22
- .iui-tooltip-container > .iui-tooltip{
23
- transition:visibility 0s linear 0.2s, opacity 0.2s ease-out; } }
24
- .iui-tooltip-container > .iui-tooltip.iui-tooltip-visible,
25
- .iui-tooltip-container:hover > .iui-tooltip{
26
- visibility:visible;
27
- opacity:1; }
25
+ transition:visibility 0s linear 0.2s, opacity 0.2s ease-out;
26
+ }
27
+ }
28
+ .iui-tooltip-container > .iui-tooltip.iui-tooltip-visible, .iui-tooltip-container:hover > .iui-tooltip{
29
+ visibility:visible;
30
+ opacity:1;
31
+ }
28
32
 
29
33
  .iui-tooltip{
30
34
  margin:0;
@@ -49,4 +53,5 @@
49
53
  background-color:rgba(0, 0, 0, 0.6);
50
54
  color:#FFF;
51
55
  background-color:rgba(0, 0, 0, var(--iui-opacity-3));
52
- color:var(--iui-color-foreground-accessory); }
56
+ color:var(--iui-color-foreground-accessory);
57
+ }
package/css/tree.css CHANGED
@@ -7,111 +7,141 @@
7
7
  padding:0;
8
8
  border:none;
9
9
  vertical-align:baseline;
10
- list-style:none; }
10
+ list-style:none;
11
+ }
11
12
 
12
13
  .iui-sub-tree{
13
14
  margin:0;
14
15
  padding:0;
15
16
  border:none;
16
17
  vertical-align:baseline;
17
- list-style:none; }
18
+ list-style:none;
19
+ }
18
20
 
19
21
  .iui-tree-item:focus-visible{
20
- outline:none; }
21
- .iui-tree-item:focus-visible > .iui-tree-node{
22
- outline:1px solid var(--iui-color-foreground-primary);
23
- outline-offset:-1px; }
24
- .iui-tree-item:focus-visible > .iui-tree-node.iui-active{
25
- outline:2px solid var(--iui-color-foreground-primary);
26
- outline-offset:-2px; }
27
-
22
+ outline:none;
23
+ }
24
+ .iui-tree-item:focus-visible > .iui-tree-node{
25
+ outline:1px solid var(--iui-color-foreground-primary);
26
+ outline-offset:-1px;
27
+ }
28
+ .iui-tree-item:focus-visible > .iui-tree-node.iui-active{
29
+ outline:2px solid var(--iui-color-foreground-primary);
30
+ outline-offset:-2px;
31
+ }
28
32
  @supports not selector(*:focus-visible){
29
33
  .iui-tree-item:focus{
30
- outline:none; }
31
- .iui-tree-item:focus > .iui-tree-node{
32
- outline:1px solid var(--iui-color-foreground-primary);
33
- outline-offset:-1px; }
34
- .iui-tree-item:focus > .iui-tree-node.iui-active{
35
- outline:2px solid var(--iui-color-foreground-primary);
36
- outline-offset:-2px; } }
34
+ outline:none;
35
+ }
36
+ .iui-tree-item:focus > .iui-tree-node{
37
+ outline:1px solid var(--iui-color-foreground-primary);
38
+ outline-offset:-1px;
39
+ }
40
+ .iui-tree-item:focus > .iui-tree-node.iui-active{
41
+ outline:2px solid var(--iui-color-foreground-primary);
42
+ outline-offset:-2px;
43
+ }
44
+ }
37
45
 
38
46
  .iui-tree-node{
39
47
  display:flex;
40
48
  cursor:pointer;
41
49
  padding:0 8px;
42
- align-items:center; }
43
- .iui-tree-node-checkbox{
44
- margin-right:8px; }
45
- .iui-tree-node-content{
46
- display:flex;
47
- align-items:center;
48
- box-sizing:border-box;
49
- min-height:33px;
50
- margin-left:calc(28px * (var(--level, 0)));
51
- overflow:hidden;
52
- padding-left:2px; }
53
- .iui-tree-node-content-icon{
54
- fill:rgba(0, 0, 0, 0.4);
55
- fill:var(--iui-icons-color);
56
- display:inline-flex;
57
- width:16px;
58
- height:16px;
59
- padding:0 6px;
60
- flex-shrink:0; }
61
- .iui-tree-node-content-icon.iui-informational{
62
- fill:#008BE1;
63
- fill:var(--iui-icons-color-primary); }
64
- .iui-tree-node-content-icon.iui-positive{
65
- fill:#53A21A;
66
- fill:var(--iui-icons-color-positive); }
67
- .iui-tree-node-content-icon.iui-warning{
68
- fill:#F18B12;
69
- fill:var(--iui-icons-color-warning); }
70
- .iui-tree-node-content-icon.iui-negative{
71
- fill:#D30A0A;
72
- fill:var(--iui-icons-color-negative); }
73
- .iui-tree-node-content-icon:first-child{
74
- margin-left:28px; }
75
- @media (prefers-reduced-motion: no-preference){
76
- .iui-tree-node-content-expander-icon{
77
- transition:transform 0.2s ease-out; } }
78
- .iui-tree-node-content-expander-icon-expanded{
79
- transform:rotate(90deg); }
80
- .iui-tree-node-content-label{
81
- min-width:0;
82
- padding-left:6px; }
83
- .iui-tree-node-content-label:first-child{
84
- margin-left:28px; }
85
- .iui-tree-node-content-title, .iui-tree-node-content-caption{
86
- white-space:nowrap;
87
- overflow:hidden;
88
- text-overflow:ellipsis; }
89
- .iui-tree-node-content-title{
90
- font-size:14px; }
91
- .iui-tree-node-content-caption{
92
- font-size:12px;
93
- color:rgba(0, 0, 0, 0.4);
94
- color:var(--iui-text-color-muted); }
95
- .iui-tree-node:hover{
96
- background-color:rgba(0, 139, 225, 0.1);
97
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
98
- .iui-tree-node:hover .iui-tree-node-content-caption{
99
- color:#000;
100
- color:var(--iui-color-foreground-body);
101
- transition:color 0.2s ease; }
102
- .iui-tree-node.iui-active{
103
- background-color:rgba(0, 139, 225, 0.2);
104
- outline:thin solid var(--iui-color-foreground-primary);
105
- outline-offset:-1px;
106
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
107
- outline:thin solid var(--iui-color-foreground-primary);
108
- outline-offset:-1px; }
109
- .iui-tree-node.iui-disabled{
110
- cursor:not-allowed;
111
- outline:none;
112
- background-color:transparent;
113
- color:rgba(0, 0, 0, 0.2);
114
- color:var(--iui-text-color-placeholder); }
115
- .iui-tree-node.iui-disabled .iui-tree-node-content-caption{
116
- color:rgba(0, 0, 0, 0.2);
117
- color:var(--iui-text-color-placeholder); }
50
+ align-items:center;
51
+ }
52
+ .iui-tree-node-checkbox{
53
+ margin-right:8px;
54
+ }
55
+ .iui-tree-node-content{
56
+ display:flex;
57
+ align-items:center;
58
+ box-sizing:border-box;
59
+ min-height:33px;
60
+ margin-left:calc(28px * (var(--level, 0)));
61
+ overflow:hidden;
62
+ padding-left:2px;
63
+ }
64
+ .iui-tree-node-content-icon{
65
+ fill:rgba(0, 0, 0, 0.4);
66
+ fill:var(--iui-icons-color);
67
+ display:inline-flex;
68
+ width:16px;
69
+ height:16px;
70
+ padding:0 6px;
71
+ flex-shrink:0;
72
+ }
73
+ .iui-tree-node-content-icon.iui-informational{
74
+ fill:#008BE1;
75
+ fill:var(--iui-icons-color-primary);
76
+ }
77
+ .iui-tree-node-content-icon.iui-positive{
78
+ fill:#53A21A;
79
+ fill:var(--iui-icons-color-positive);
80
+ }
81
+ .iui-tree-node-content-icon.iui-warning{
82
+ fill:#F18B12;
83
+ fill:var(--iui-icons-color-warning);
84
+ }
85
+ .iui-tree-node-content-icon.iui-negative{
86
+ fill:#D30A0A;
87
+ fill:var(--iui-icons-color-negative);
88
+ }
89
+ .iui-tree-node-content-icon:first-child{
90
+ margin-left:28px;
91
+ }
92
+ @media (prefers-reduced-motion: no-preference){
93
+ .iui-tree-node-content-expander-icon{
94
+ transition:transform 0.2s ease-out;
95
+ }
96
+ }
97
+ .iui-tree-node-content-expander-icon-expanded{
98
+ transform:rotate(90deg);
99
+ }
100
+ .iui-tree-node-content-label{
101
+ min-width:0;
102
+ padding-left:6px;
103
+ }
104
+ .iui-tree-node-content-label:first-child{
105
+ margin-left:28px;
106
+ }
107
+ .iui-tree-node-content-title, .iui-tree-node-content-caption{
108
+ white-space:nowrap;
109
+ overflow:hidden;
110
+ text-overflow:ellipsis;
111
+ }
112
+ .iui-tree-node-content-title{
113
+ font-size:14px;
114
+ }
115
+ .iui-tree-node-content-caption{
116
+ font-size:12px;
117
+ color:rgba(0, 0, 0, 0.4);
118
+ color:var(--iui-text-color-muted);
119
+ }
120
+ .iui-tree-node:hover{
121
+ background-color:rgba(0, 139, 225, 0.1);
122
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
123
+ }
124
+ .iui-tree-node:hover .iui-tree-node-content-caption{
125
+ color:#000;
126
+ color:var(--iui-color-foreground-body);
127
+ transition:color 0.2s ease;
128
+ }
129
+ .iui-tree-node.iui-active{
130
+ background-color:rgba(0, 139, 225, 0.2);
131
+ outline:thin solid var(--iui-color-foreground-primary);
132
+ outline-offset:-1px;
133
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
134
+ outline:thin solid var(--iui-color-foreground-primary);
135
+ outline-offset:-1px;
136
+ }
137
+ .iui-tree-node.iui-disabled{
138
+ cursor:not-allowed;
139
+ outline:none;
140
+ background-color:transparent;
141
+ color:rgba(0, 0, 0, 0.2);
142
+ color:var(--iui-text-color-placeholder);
143
+ }
144
+ .iui-tree-node.iui-disabled .iui-tree-node-content-caption{
145
+ color:rgba(0, 0, 0, 0.2);
146
+ color:var(--iui-text-color-placeholder);
147
+ }