@itwin/itwinui-css 0.39.1 → 0.42.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 (40) hide show
  1. package/css/all.css +607 -362
  2. package/css/breadcrumbs.css +31 -15
  3. package/css/button.css +279 -189
  4. package/css/code.css +2 -0
  5. package/css/header.css +50 -30
  6. package/css/inputs.css +26 -40
  7. package/css/side-navigation.css +27 -24
  8. package/css/table.css +34 -23
  9. package/css/tile.css +51 -40
  10. package/css/tree.css +107 -0
  11. package/css/user-icon.css +3 -1
  12. package/package.json +1 -1
  13. package/scss/breadcrumbs/breadcrumbs.scss +1 -1
  14. package/scss/button/borderless.scss +37 -39
  15. package/scss/button/button-group.scss +54 -47
  16. package/scss/button/button-icon.scss +12 -0
  17. package/scss/button/button.scss +27 -32
  18. package/scss/button/classes.scss +25 -3
  19. package/scss/button/cta.scss +31 -21
  20. package/scss/button/default.scss +40 -45
  21. package/scss/button/disabled.scss +3 -14
  22. package/scss/button/high-visibility.scss +31 -21
  23. package/scss/button/index.scss +1 -0
  24. package/scss/button/split-menu.scss +39 -20
  25. package/scss/classes.scss +1 -0
  26. package/scss/code/codeblock.scss +4 -0
  27. package/scss/header/header.scss +38 -18
  28. package/scss/index.scss +1 -0
  29. package/scss/inputs/checkbox-radio.scss +1 -3
  30. package/scss/inputs/checkbox.scss +5 -2
  31. package/scss/inputs/classes.scss +2 -2
  32. package/scss/inputs/labeled-inputs.scss +3 -3
  33. package/scss/side-navigation/side-navigation.scss +27 -22
  34. package/scss/table/paginator.scss +34 -21
  35. package/scss/table/table.scss +12 -8
  36. package/scss/tile/tile.scss +4 -2
  37. package/scss/tree/classes.scss +15 -0
  38. package/scss/tree/index.scss +3 -0
  39. package/scss/tree/tree.scss +137 -0
  40. package/scss/user-icon/user-icon.scss +3 -0
package/css/button.css CHANGED
@@ -28,25 +28,21 @@
28
28
  cursor:pointer;
29
29
  white-space:nowrap;
30
30
  border:1px solid transparent;
31
+ color:rgba(0, 0, 0, 0.8);
32
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
31
33
  padding:0 16px;
32
34
  height:38px;
33
- background-color:#FFF;
34
- border-color:rgba(0, 0, 0, 0.4);
35
- color:rgba(0, 0, 0, 0.8);
36
- background-color:var(--iui-color-background-1);
37
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
38
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
35
+ gap:8px;
36
+ padding:0 16px;
37
+ height:38px;
38
+ gap:8px; }
39
39
  @media (prefers-reduced-motion: no-preference){
40
40
  .iui-button{
41
41
  transition:color 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out; } }
42
- .iui-button > .iui-icon:not(.iui-user-icon){
43
- width:16px;
44
- height:16px; }
45
- @media (prefers-reduced-motion: no-preference){
46
- .iui-button > .iui-icon:not(.iui-user-icon){
47
- transition:fill 0.2s ease-out; } }
48
- .iui-button:enabled:hover{
49
- text-decoration:none; }
42
+ .iui-button:hover{
43
+ text-decoration:none;
44
+ color:black;
45
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1)); }
50
46
  .iui-button:focus{
51
47
  outline:0;
52
48
  box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
@@ -57,65 +53,76 @@
57
53
  outline:0;
58
54
  box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
59
55
  box-shadow:var(--iui-focus-box-shadow); }
60
- .iui-button > .iui-icon + .iui-label,
61
- .iui-button > .iui-label + .iui-icon,
62
- .iui-button > .iui-icon + .iui-icon{
63
- margin-left:8px; }
64
- .iui-button.iui-small{
65
- padding:0 8px;
66
- height:27px; }
67
- .iui-button.iui-small > .iui-icon + .iui-label,
68
- .iui-button.iui-small > .iui-label + .iui-icon,
69
- .iui-button.iui-small > .iui-icon + .iui-icon{
70
- margin-left:4px; }
71
- .iui-button.iui-large{
72
- padding:0 24px;
73
- height:49px;
74
- font-size:16px; }
75
- .iui-button.iui-large > .iui-icon + .iui-label,
76
- .iui-button.iui-large > .iui-label + .iui-icon,
77
- .iui-button.iui-large > .iui-icon + .iui-icon{
78
- margin-left:12px; }
79
- .iui-button > .iui-icon{
80
- fill:rgba(0, 0, 0, 0.8);
81
- fill:var(--iui-icons-color-actionable); }
82
- .iui-button:enabled:hover, .iui-button:enabled:active, .iui-button:focus-visible{
83
- background-color:#f2f2f2;
84
- border-color:black;
85
- color:black;
86
- background-color:var(--iui-color-background-1-overlay);
87
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
88
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1)); }
89
- .iui-button:enabled:hover .iui-notification-primary::before,
90
- .iui-button:enabled:hover .iui-notification-positive::before,
91
- .iui-button:enabled:hover .iui-notification-warning::before,
92
- .iui-button:enabled:hover .iui-notification-negative::before, .iui-button:enabled:active .iui-notification-primary::before,
93
- .iui-button:enabled:active .iui-notification-positive::before,
94
- .iui-button:enabled:active .iui-notification-warning::before,
95
- .iui-button:enabled:active .iui-notification-negative::before, .iui-button:focus-visible .iui-notification-primary::before,
96
- .iui-button:focus-visible .iui-notification-positive::before,
97
- .iui-button:focus-visible .iui-notification-warning::before,
98
- .iui-button:focus-visible .iui-notification-negative::before{
99
- border-color:#f2f2f2;
100
- border-color:var(--iui-color-background-1-overlay); }
101
- .iui-button:enabled:hover > .iui-icon, .iui-button:enabled:active > .iui-icon, .iui-button:focus-visible > .iui-icon{
102
- fill:black;
103
- fill:var(--iui-icons-color-actionable-hover); }
104
- .iui-button.iui-dropdown{
105
- padding-right:8px; }
106
- .iui-button.iui-dropdown.iui-small{
107
- padding-right:4px; }
108
- .iui-button.iui-dropdown.iui-large{
109
- padding-right:12px; }
110
- .iui-button.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled, .iui-button.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled:hover, .iui-button.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled:active{
111
- background:linear-gradient(rgba(0, 139, 225, 0.1), rgba(0, 139, 225, 0.1)), linear-gradient(#FFF, #FFF);
112
- background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1)); }
113
- .iui-button.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled > .iui-label, .iui-button.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled:hover > .iui-label, .iui-button.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled:active > .iui-label{
56
+ .iui-button[disabled], .iui-button:disabled{
57
+ cursor:not-allowed;
58
+ background:#EEF0F3;
59
+ border-color:#EEF0F3;
60
+ color:rgba(0, 0, 0, 0.2);
61
+ background:var(--iui-color-background-disabled);
62
+ border-color:var(--iui-color-background-disabled);
63
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
64
+ .iui-button.iui-default{
65
+ background-color:#FFF;
66
+ border-color:rgba(0, 0, 0, 0.4);
67
+ color:rgba(0, 0, 0, 0.8);
68
+ background-color:var(--iui-color-background-1);
69
+ border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
70
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
71
+ .iui-button.iui-default:focus{
72
+ background-color:#f2f2f2;
73
+ border-color:black;
74
+ color:black;
75
+ background-color:var(--iui-color-background-1-overlay);
76
+ border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
77
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1)); }
78
+ .iui-button.iui-default:focus .iui-notification-primary::before,
79
+ .iui-button.iui-default:focus .iui-notification-positive::before,
80
+ .iui-button.iui-default:focus .iui-notification-warning::before,
81
+ .iui-button.iui-default:focus .iui-notification-negative::before{
82
+ border-color:#f2f2f2;
83
+ border-color:var(--iui-color-background-1-overlay); }
84
+ .iui-button.iui-default:focus:where(:not(:focus-visible)){
85
+ background-color:#FFF;
86
+ border-color:rgba(0, 0, 0, 0.4);
87
+ color:rgba(0, 0, 0, 0.8);
88
+ background-color:var(--iui-color-background-1);
89
+ border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
90
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
91
+ .iui-button.iui-default:hover, .iui-button.iui-default:active{
92
+ background-color:#f2f2f2;
93
+ border-color:black;
94
+ color:black;
95
+ background-color:var(--iui-color-background-1-overlay);
96
+ border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
97
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1)); }
98
+ .iui-button.iui-default:hover .iui-notification-primary::before,
99
+ .iui-button.iui-default:hover .iui-notification-positive::before,
100
+ .iui-button.iui-default:hover .iui-notification-warning::before,
101
+ .iui-button.iui-default:hover .iui-notification-negative::before, .iui-button.iui-default:active .iui-notification-primary::before,
102
+ .iui-button.iui-default:active .iui-notification-positive::before,
103
+ .iui-button.iui-default:active .iui-notification-warning::before,
104
+ .iui-button.iui-default:active .iui-notification-negative::before{
105
+ border-color:#f2f2f2;
106
+ border-color:var(--iui-color-background-1-overlay); }
107
+ .iui-button.iui-default.iui-dropdown{
108
+ padding-right:8px; }
109
+ .iui-button.iui-default.iui-dropdown.iui-small{
110
+ padding-right:4px; }
111
+ .iui-button.iui-default.iui-dropdown.iui-large{
112
+ padding-right:12px; }
113
+ .iui-button.iui-default.iui-active{
114
+ background:linear-gradient(rgba(0, 139, 225, 0.1), rgba(0, 139, 225, 0.1)), linear-gradient(#FFF, #FFF);
114
115
  color:#008BE1;
116
+ background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
115
117
  color:var(--iui-color-foreground-primary); }
116
- .iui-button.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled > .iui-icon, .iui-button.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled:hover > .iui-icon, .iui-button.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled:active > .iui-icon{
117
- fill:#008BE1;
118
- fill:var(--iui-icons-color-primary); }
118
+ .iui-button.iui-default[disabled], .iui-button.iui-default:disabled{
119
+ cursor:not-allowed;
120
+ background:#EEF0F3;
121
+ border-color:#EEF0F3;
122
+ color:rgba(0, 0, 0, 0.2);
123
+ background:var(--iui-color-background-disabled);
124
+ border-color:var(--iui-color-background-disabled);
125
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
119
126
  .iui-button.iui-high-visibility{
120
127
  background-color:#008BE1;
121
128
  border-color:#008BE1;
@@ -123,19 +130,35 @@
123
130
  background-color:var(--iui-color-background-primary);
124
131
  border-color:var(--iui-color-background-primary);
125
132
  color:var(--iui-color-foreground-accessory); }
126
- .iui-button.iui-high-visibility > .iui-icon{
127
- fill:#FFF;
128
- fill:var(--iui-color-foreground-accessory); }
129
- .iui-button.iui-high-visibility:enabled:hover, .iui-button.iui-high-visibility:enabled:active, .iui-button.iui-high-visibility:focus-visible{
133
+ .iui-button.iui-high-visibility:focus{
134
+ background-color:#006bae;
135
+ border-color:#006bae;
136
+ color:#FFF;
137
+ background-color:var(--iui-color-background-primary-overlay);
138
+ border-color:var(--iui-color-background-primary-overlay);
139
+ color:var(--iui-color-foreground-accessory); }
140
+ .iui-button.iui-high-visibility:focus:where(:not(:focus-visible)){
141
+ background-color:#008BE1;
142
+ border-color:#008BE1;
143
+ color:#FFF;
144
+ background-color:var(--iui-color-background-primary);
145
+ border-color:var(--iui-color-background-primary);
146
+ color:var(--iui-color-foreground-accessory); }
147
+ .iui-button.iui-high-visibility:hover, .iui-button.iui-high-visibility:active{
130
148
  background-color:#006bae;
131
149
  border-color:#006bae;
132
150
  color:#FFF;
133
151
  background-color:var(--iui-color-background-primary-overlay);
134
152
  border-color:var(--iui-color-background-primary-overlay);
135
153
  color:var(--iui-color-foreground-accessory); }
136
- .iui-button.iui-high-visibility:enabled:hover > .iui-icon, .iui-button.iui-high-visibility:enabled:active > .iui-icon, .iui-button.iui-high-visibility:focus-visible > .iui-icon{
137
- fill:#FFF;
138
- fill:var(--iui-color-foreground-accessory); }
154
+ .iui-button.iui-high-visibility[disabled], .iui-button.iui-high-visibility:disabled{
155
+ cursor:not-allowed;
156
+ background:#EEF0F3;
157
+ border-color:#EEF0F3;
158
+ color:rgba(0, 0, 0, 0.2);
159
+ background:var(--iui-color-background-disabled);
160
+ border-color:var(--iui-color-background-disabled);
161
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
139
162
  .iui-button.iui-cta{
140
163
  background-color:#53A21A;
141
164
  border-color:#53A21A;
@@ -143,19 +166,35 @@
143
166
  background-color:var(--iui-color-background-positive);
144
167
  border-color:var(--iui-color-background-positive);
145
168
  color:var(--iui-color-foreground-accessory); }
146
- .iui-button.iui-cta > .iui-icon{
147
- fill:#FFF;
148
- fill:var(--iui-color-foreground-accessory); }
149
- .iui-button.iui-cta:enabled:hover, .iui-button.iui-cta:enabled:active, .iui-button.iui-cta:focus-visible{
169
+ .iui-button.iui-cta:focus{
150
170
  background-color:#3c7613;
151
171
  border-color:#3c7613;
152
172
  color:#FFF;
153
173
  background-color:var(--iui-color-background-positive-overlay);
154
174
  border-color:var(--iui-color-background-positive-overlay);
155
175
  color:var(--iui-color-foreground-accessory); }
156
- .iui-button.iui-cta:enabled:hover > .iui-icon, .iui-button.iui-cta:enabled:active > .iui-icon, .iui-button.iui-cta:focus-visible > .iui-icon{
157
- fill:#FFF;
158
- fill:var(--iui-color-foreground-accessory); }
176
+ .iui-button.iui-cta:focus:where(:not(:focus-visible)){
177
+ background-color:#53A21A;
178
+ border-color:#53A21A;
179
+ color:#FFF;
180
+ background-color:var(--iui-color-background-positive);
181
+ border-color:var(--iui-color-background-positive);
182
+ color:var(--iui-color-foreground-accessory); }
183
+ .iui-button.iui-cta:hover, .iui-button.iui-cta:active{
184
+ background-color:#3c7613;
185
+ border-color:#3c7613;
186
+ color:#FFF;
187
+ background-color:var(--iui-color-background-positive-overlay);
188
+ border-color:var(--iui-color-background-positive-overlay);
189
+ color:var(--iui-color-foreground-accessory); }
190
+ .iui-button.iui-cta[disabled], .iui-button.iui-cta:disabled{
191
+ cursor:not-allowed;
192
+ background:#EEF0F3;
193
+ border-color:#EEF0F3;
194
+ color:rgba(0, 0, 0, 0.2);
195
+ background:var(--iui-color-background-disabled);
196
+ border-color:var(--iui-color-background-disabled);
197
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
159
198
  .iui-button.iui-idea{
160
199
  background-color:#008BE1;
161
200
  border-color:#008BE1;
@@ -168,87 +207,111 @@
168
207
  position:fixed;
169
208
  bottom:11px;
170
209
  right:16px; }
171
- .iui-button.iui-idea > .iui-icon{
172
- fill:#FFF;
173
- fill:var(--iui-color-foreground-accessory); }
174
- .iui-button.iui-idea:enabled:hover, .iui-button.iui-idea:enabled:active, .iui-button.iui-idea:focus-visible{
210
+ .iui-button.iui-idea:focus{
211
+ background-color:#006bae;
212
+ border-color:#006bae;
213
+ color:#FFF;
214
+ background-color:var(--iui-color-background-primary-overlay);
215
+ border-color:var(--iui-color-background-primary-overlay);
216
+ color:var(--iui-color-foreground-accessory); }
217
+ .iui-button.iui-idea:focus:where(:not(:focus-visible)){
218
+ background-color:#008BE1;
219
+ border-color:#008BE1;
220
+ color:#FFF;
221
+ background-color:var(--iui-color-background-primary);
222
+ border-color:var(--iui-color-background-primary);
223
+ color:var(--iui-color-foreground-accessory); }
224
+ .iui-button.iui-idea:hover, .iui-button.iui-idea:active{
175
225
  background-color:#006bae;
176
226
  border-color:#006bae;
177
227
  color:#FFF;
178
228
  background-color:var(--iui-color-background-primary-overlay);
179
229
  border-color:var(--iui-color-background-primary-overlay);
180
230
  color:var(--iui-color-foreground-accessory); }
181
- .iui-button.iui-idea:enabled:hover > .iui-icon, .iui-button.iui-idea:enabled:active > .iui-icon, .iui-button.iui-idea:focus-visible > .iui-icon{
182
- fill:#FFF;
183
- fill:var(--iui-color-foreground-accessory); }
231
+ .iui-button.iui-idea[disabled], .iui-button.iui-idea:disabled{
232
+ cursor:not-allowed;
233
+ background:#EEF0F3;
234
+ border-color:#EEF0F3;
235
+ color:rgba(0, 0, 0, 0.2);
236
+ background:var(--iui-color-background-disabled);
237
+ border-color:var(--iui-color-background-disabled);
238
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
184
239
  .iui-button.iui-borderless{
185
- background-color:transparent;
186
240
  border-color:transparent;
187
- padding:0 8px; }
188
- .iui-button.iui-borderless.iui-small{
189
- padding:0 2px; }
190
- .iui-button.iui-borderless.iui-large{
191
- padding:0 12px; }
192
- .iui-button.iui-borderless > .iui-icon:only-child{
241
+ background-color:transparent;
242
+ padding:0 8px;
243
+ height:38px;
244
+ gap:8px; }
245
+ .iui-button.iui-borderless > .iui-button-icon:only-child{
193
246
  margin-left:3px;
194
247
  margin-right:3px; }
195
- .iui-button.iui-borderless:enabled:hover, .iui-button.iui-borderless:enabled:active, .iui-button.iui-borderless:focus-visible{
248
+ .iui-button.iui-borderless:focus{
249
+ background-color:rgba(0, 0, 0, 0.1);
250
+ border-color:transparent;
251
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
252
+ border-color:transparent; }
253
+ .iui-button.iui-borderless:focus:where(:not(:focus-visible)){
254
+ border-color:transparent;
255
+ background-color:transparent; }
256
+ .iui-button.iui-borderless:focus:where(:not(:focus-visible)) > .iui-button-icon:only-child{
257
+ margin-left:3px;
258
+ margin-right:3px; }
259
+ .iui-button.iui-borderless:hover{
196
260
  background-color:rgba(0, 0, 0, 0.1);
197
261
  border-color:transparent;
198
262
  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
199
263
  border-color:transparent; }
200
- .iui-button.iui-borderless.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled, .iui-button.iui-borderless.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled:hover, .iui-button.iui-borderless.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled:active{
201
- background:transparent;
264
+ .iui-button.iui-borderless.iui-active{
202
265
  background-color:rgba(0, 139, 225, 0.1);
266
+ color:#008BE1;
203
267
  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
268
+ color:var(--iui-color-foreground-primary);
204
269
  border-color:transparent; }
205
- .iui-button.iui-borderless[disabled], .iui-button.iui-borderless[disabled]:hover, .iui-button.iui-borderless[disabled]:active, .iui-button.iui-borderless[disabled]:focus{
270
+ .iui-button.iui-borderless[disabled], .iui-button.iui-borderless:disabled{
271
+ cursor:not-allowed;
272
+ background:#EEF0F3;
273
+ border-color:#EEF0F3;
274
+ color:rgba(0, 0, 0, 0.2);
275
+ background:var(--iui-color-background-disabled);
276
+ border-color:var(--iui-color-background-disabled);
277
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
278
+ background-color:transparent;
279
+ border-color:transparent;
206
280
  background-color:transparent;
207
281
  border-color:transparent; }
208
- .iui-button.iui-borderless[disabled] > .iui-icon, .iui-button.iui-borderless[disabled]:hover > .iui-icon, .iui-button.iui-borderless[disabled]:active > .iui-icon, .iui-button.iui-borderless[disabled]:focus > .iui-icon{
209
- fill:rgba(0, 0, 0, 0.2);
210
- fill:var(--iui-icons-color-actionable-disabled); }
211
- .iui-button.iui-borderless[disabled].iui-active, .iui-button.iui-borderless[disabled]:hover.iui-active, .iui-button.iui-borderless[disabled]:active.iui-active, .iui-button.iui-borderless[disabled]:focus.iui-active{
282
+ .iui-button.iui-borderless[disabled].iui-active, .iui-button.iui-borderless:disabled.iui-active{
212
283
  background-color:rgba(0, 0, 0, 0.05);
213
284
  background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05); }
214
- .iui-button[disabled]{
215
- cursor:not-allowed;
216
- background-color:#EEF0F3;
217
- border-color:#EEF0F3;
218
- background-color:var(--iui-color-background-disabled);
219
- border-color:var(--iui-color-background-disabled); }
220
- .iui-button[disabled] > .iui-label{
221
- color:rgba(0, 0, 0, 0.2);
222
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
223
- .iui-button[disabled] > .iui-icon{
224
- fill:rgba(0, 0, 0, 0.2);
225
- fill:var(--iui-icons-color-actionable-disabled); }
285
+ .iui-button.iui-small{
286
+ padding:0 8px;
287
+ height:27px;
288
+ gap:4px; }
289
+ .iui-button.iui-small.iui-borderless{
290
+ padding:0 2px;
291
+ height:27px;
292
+ gap:4px; }
293
+ .iui-button.iui-large{
294
+ padding:0 24px;
295
+ height:49px;
296
+ font-size:16px;
297
+ gap:12px; }
298
+ .iui-button.iui-large.iui-borderless{
299
+ padding:0 12px;
300
+ height:49px;
301
+ font-size:16px;
302
+ gap:12px; }
226
303
 
227
304
  .iui-button-group{
228
305
  display:inline-flex;
229
- align-items:center; }
230
- .iui-button-group > .iui-button:not(.iui-borderless){
231
- border-radius:0; }
232
- .iui-button-group > .iui-button:first-of-type:not(.iui-borderless){
233
- border-top-left-radius:3px;
234
- border-bottom-left-radius:3px; }
235
- .iui-button-group > .iui-button:last-of-type:not(.iui-borderless){
236
- border-top-right-radius:3px;
237
- border-bottom-right-radius:3px; }
238
- .iui-button-group > .iui-button:not(.iui-borderless):not(.iui-cta):not(.iui-high-visibility):not(:last-of-type){
239
- border-right:none; }
240
- .iui-button-group > .iui-button:not(.iui-high-visibility):not(.iui-cta):not(.iui-borderless):enabled + :disabled{
241
- border-left-color:rgba(0, 0, 0, 0.4);
242
- border-left-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
243
- .iui-button-group > .iui-button:not(.iui-high-visibility):not(.iui-cta):not(.iui-borderless):enabled:hover + .iui-button,
244
- .iui-button-group > .iui-button:not(.iui-high-visibility):not(.iui-cta):not(.iui-borderless):enabled:active + .iui-button,
245
- .iui-button-group > .iui-button:not(.iui-high-visibility):not(.iui-cta):not(.iui-borderless):enabled:focus-visible + .iui-button{
246
- border-left-color:black;
247
- border-left-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1)); }
248
- .iui-button-group > .iui-button:not(.iui-high-visibility):not(.iui-cta):not(.iui-borderless):disabled + .iui-button:disabled{
249
- border-left-color:#DCE0E3;
250
- border-left-color:var(--iui-color-background-4); }
251
- .iui-button-group > .iui-active::after{
306
+ align-items:center;
307
+ isolation:isolate; }
308
+ .iui-button-group > * input:hover, .iui-button-group > * input:focus, .iui-button-group > * input:focus-within, .iui-button-group > * button:hover, .iui-button-group > * button:focus, .iui-button-group > * button:focus-within{
309
+ position:relative;
310
+ z-index:1; }
311
+ .iui-button-group > * input:disabled, .iui-button-group > * button:disabled{
312
+ position:relative;
313
+ z-index:-1; }
314
+ .iui-button-group > * input.iui-active::after, .iui-button-group > * button.iui-active::after{
252
315
  content:'';
253
316
  position:absolute;
254
317
  height:2px;
@@ -258,37 +321,37 @@
258
321
  width:calc(100% - 4px);
259
322
  background-color:#008BE1;
260
323
  background-color:var(--iui-color-foreground-primary); }
261
- .iui-button-group > .iui-active:disabled::after{
324
+ .iui-button-group > * input.iui-active:disabled::after, .iui-button-group > * button.iui-active:disabled::after{
262
325
  background-color:rgba(0, 0, 0, 0.2);
263
326
  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
264
-
265
- .iui-button-split-menu{
266
- display:inline-flex;
267
- align-items:center;
268
- display:inline-flex;
269
- align-items:center; }
270
- .iui-button-split-menu > .iui-button:not(.iui-borderless){
327
+ .iui-button-group > * input:not(.iui-borderless), .iui-button-group > * button:not(.iui-borderless){
271
328
  border-radius:0; }
272
- .iui-button-split-menu > .iui-button:first-of-type:not(.iui-borderless){
329
+ .iui-button-group > *:first-child input, .iui-button-group > *:first-child button:not(.iui-borderless){
273
330
  border-top-left-radius:3px;
274
331
  border-bottom-left-radius:3px; }
275
- .iui-button-split-menu > .iui-button:last-of-type:not(.iui-borderless){
332
+ .iui-button-group > *:last-child input, .iui-button-group > *:last-child button:not(.iui-borderless){
276
333
  border-top-right-radius:3px;
277
334
  border-bottom-right-radius:3px; }
278
- .iui-button-split-menu > .iui-button:not(.iui-borderless):not(.iui-cta):not(.iui-high-visibility):not(:last-of-type){
279
- border-right:none; }
280
- .iui-button-split-menu > .iui-button:not(.iui-high-visibility):not(.iui-cta):not(.iui-borderless):enabled + :disabled{
281
- border-left-color:rgba(0, 0, 0, 0.4);
282
- border-left-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
283
- .iui-button-split-menu > .iui-button:not(.iui-high-visibility):not(.iui-cta):not(.iui-borderless):enabled:hover + .iui-button,
284
- .iui-button-split-menu > .iui-button:not(.iui-high-visibility):not(.iui-cta):not(.iui-borderless):enabled:active + .iui-button,
285
- .iui-button-split-menu > .iui-button:not(.iui-high-visibility):not(.iui-cta):not(.iui-borderless):enabled:focus-visible + .iui-button{
286
- border-left-color:black;
287
- border-left-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1)); }
288
- .iui-button-split-menu > .iui-button:not(.iui-high-visibility):not(.iui-cta):not(.iui-borderless):disabled + .iui-button:disabled{
335
+ .iui-button-group > *:not(:last-child){
336
+ margin-right:-1px; }
337
+ .iui-button-group > *:not(:first-child) .iui-default:disabled{
289
338
  border-left-color:#DCE0E3;
290
339
  border-left-color:var(--iui-color-background-4); }
291
- .iui-button-split-menu > .iui-active::after{
340
+
341
+ .iui-button-split-menu{
342
+ display:inline-flex;
343
+ align-items:center;
344
+ isolation:isolate;
345
+ display:inline-flex;
346
+ align-items:center;
347
+ isolation:isolate; }
348
+ .iui-button-split-menu > * input:hover, .iui-button-split-menu > * input:focus, .iui-button-split-menu > * input:focus-within, .iui-button-split-menu > * button:hover, .iui-button-split-menu > * button:focus, .iui-button-split-menu > * button:focus-within{
349
+ position:relative;
350
+ z-index:1; }
351
+ .iui-button-split-menu > * input:disabled, .iui-button-split-menu > * button:disabled{
352
+ position:relative;
353
+ z-index:-1; }
354
+ .iui-button-split-menu > * input.iui-active::after, .iui-button-split-menu > * button.iui-active::after{
292
355
  content:'';
293
356
  position:absolute;
294
357
  height:2px;
@@ -298,31 +361,29 @@
298
361
  width:calc(100% - 4px);
299
362
  background-color:#008BE1;
300
363
  background-color:var(--iui-color-foreground-primary); }
301
- .iui-button-split-menu > .iui-active:disabled::after{
364
+ .iui-button-split-menu > * input.iui-active:disabled::after, .iui-button-split-menu > * button.iui-active:disabled::after{
302
365
  background-color:rgba(0, 0, 0, 0.2);
303
366
  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
304
- .iui-button-split-menu > .iui-button:not(.iui-borderless){
367
+ .iui-button-split-menu > * input:not(.iui-borderless), .iui-button-split-menu > * button:not(.iui-borderless){
305
368
  border-radius:0; }
306
- .iui-button-split-menu > .iui-button:first-of-type:not(.iui-borderless){
369
+ .iui-button-split-menu > *:first-child input, .iui-button-split-menu > *:first-child button:not(.iui-borderless){
307
370
  border-top-left-radius:3px;
308
371
  border-bottom-left-radius:3px; }
309
- .iui-button-split-menu > .iui-button:last-of-type:not(.iui-borderless){
372
+ .iui-button-split-menu > *:last-child input, .iui-button-split-menu > *:last-child button:not(.iui-borderless){
310
373
  border-top-right-radius:3px;
311
374
  border-bottom-right-radius:3px; }
312
- .iui-button-split-menu > .iui-button:not(.iui-borderless):not(.iui-cta):not(.iui-high-visibility):not(:last-of-type){
313
- border-right:none; }
314
- .iui-button-split-menu > .iui-button:not(.iui-high-visibility):not(.iui-cta):not(.iui-borderless):enabled + :disabled{
315
- border-left-color:rgba(0, 0, 0, 0.4);
316
- border-left-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
317
- .iui-button-split-menu > .iui-button:not(.iui-high-visibility):not(.iui-cta):not(.iui-borderless):enabled:hover + .iui-button,
318
- .iui-button-split-menu > .iui-button:not(.iui-high-visibility):not(.iui-cta):not(.iui-borderless):enabled:active + .iui-button,
319
- .iui-button-split-menu > .iui-button:not(.iui-high-visibility):not(.iui-cta):not(.iui-borderless):enabled:focus-visible + .iui-button{
320
- border-left-color:black;
321
- border-left-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1)); }
322
- .iui-button-split-menu > .iui-button:not(.iui-high-visibility):not(.iui-cta):not(.iui-borderless):disabled + .iui-button:disabled{
375
+ .iui-button-split-menu > *:not(:last-child){
376
+ margin-right:-1px; }
377
+ .iui-button-split-menu > *:not(:first-child) .iui-default:disabled{
323
378
  border-left-color:#DCE0E3;
324
379
  border-left-color:var(--iui-color-background-4); }
325
- .iui-button-split-menu > .iui-active::after{
380
+ .iui-button-split-menu > * input:hover, .iui-button-split-menu > * input:focus, .iui-button-split-menu > * input:focus-within, .iui-button-split-menu > * button:hover, .iui-button-split-menu > * button:focus, .iui-button-split-menu > * button:focus-within{
381
+ position:relative;
382
+ z-index:1; }
383
+ .iui-button-split-menu > * input:disabled, .iui-button-split-menu > * button:disabled{
384
+ position:relative;
385
+ z-index:-1; }
386
+ .iui-button-split-menu > * input.iui-active::after, .iui-button-split-menu > * button.iui-active::after{
326
387
  content:'';
327
388
  position:absolute;
328
389
  height:2px;
@@ -332,26 +393,55 @@
332
393
  width:calc(100% - 4px);
333
394
  background-color:#008BE1;
334
395
  background-color:var(--iui-color-foreground-primary); }
335
- .iui-button-split-menu > .iui-active:disabled::after{
396
+ .iui-button-split-menu > * input.iui-active:disabled::after, .iui-button-split-menu > * button.iui-active:disabled::after{
336
397
  background-color:rgba(0, 0, 0, 0.2);
337
398
  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
399
+ .iui-button-split-menu > * input:not(.iui-borderless), .iui-button-split-menu > * button:not(.iui-borderless){
400
+ border-radius:0; }
401
+ .iui-button-split-menu > *:first-child input, .iui-button-split-menu > *:first-child button:not(.iui-borderless){
402
+ border-top-left-radius:3px;
403
+ border-bottom-left-radius:3px; }
404
+ .iui-button-split-menu > *:last-child input, .iui-button-split-menu > *:last-child button:not(.iui-borderless){
405
+ border-top-right-radius:3px;
406
+ border-bottom-right-radius:3px; }
407
+ .iui-button-split-menu > *:not(:last-child){
408
+ margin-right:-1px; }
409
+ .iui-button-split-menu > *:not(:first-child) .iui-default:disabled{
410
+ border-left-color:#DCE0E3;
411
+ border-left-color:var(--iui-color-background-4); }
338
412
  .iui-button-split-menu:hover{
339
413
  background-color:rgba(0, 0, 0, 0.1);
340
414
  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6)); }
341
- .iui-button-split-menu .iui-button:first-child.iui-borderless:hover{
415
+ .iui-button-split-menu > *:first-child > .iui-borderless:hover{
342
416
  background-color:transparent; }
343
- .iui-button-split-menu > .iui-button + .iui-button{
417
+ .iui-button-split-menu > *:last-child > .iui-button{
344
418
  padding:4px; }
345
- .iui-button-split-menu > .iui-small + .iui-small{
419
+ .iui-button-split-menu > *:last-child > .iui-small{
346
420
  padding:2px; }
347
- .iui-button-split-menu > .iui-large + .iui-large{
421
+ .iui-button-split-menu > *:last-child > .iui-large{
348
422
  padding:8px; }
349
- .iui-button-split-menu > .iui-high-visibility + .iui-high-visibility,
350
- .iui-button-split-menu > .iui-high-visibility + .iui-high-visibility:hover,
351
- .iui-button-split-menu > .iui-cta + .iui-cta,
352
- .iui-button-split-menu > .iui-cta + .iui-cta:hover{
423
+ .iui-button-split-menu > *:first-child > .iui-high-visibility,
424
+ .iui-button-split-menu > *:first-child > .iui-cta{
425
+ border-right-color:rgba(255, 255, 255, 0.4);
426
+ border-right-color:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4)); }
427
+ .iui-button-split-menu > *:last-child > .iui-high-visibility,
428
+ .iui-button-split-menu > *:last-child > .iui-cta{
353
429
  border-left-color:rgba(255, 255, 255, 0.4);
354
430
  border-left-color:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4)); }
355
431
  .iui-button-split-menu.iui-disabled{
356
432
  background-color:transparent;
357
433
  background-color:transparent; }
434
+ .iui-button-split-menu[disabled], .iui-button-split-menu:disabled{
435
+ cursor:not-allowed;
436
+ background:#EEF0F3;
437
+ border-color:#EEF0F3;
438
+ color:rgba(0, 0, 0, 0.2);
439
+ background:var(--iui-color-background-disabled);
440
+ border-color:var(--iui-color-background-disabled);
441
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
442
+
443
+ .iui-button-icon{
444
+ width:16px;
445
+ height:16px;
446
+ transition:fill 0.2s ease-out;
447
+ fill:currentColor; }
package/css/code.css CHANGED
@@ -39,6 +39,8 @@
39
39
  user-select:all; }
40
40
  .iui-codeblock > .iui-title-bar > .iui-button{
41
41
  margin-left:auto; }
42
+ .iui-codeblock .iui-button{
43
+ gap:0; }
42
44
  .iui-codeblock > .iui-codeblock-content{
43
45
  margin:0;
44
46
  overflow-x:auto;