@itwin/itwinui-css 0.44.1 → 0.46.1

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 (28) hide show
  1. package/css/all.css +696 -562
  2. package/css/button.css +0 -1
  3. package/css/carousel.css +97 -0
  4. package/css/inputs.css +211 -223
  5. package/css/popover.css +12 -0
  6. package/css/table.css +1 -2
  7. package/css/tile.css +340 -300
  8. package/css/tree.css +11 -6
  9. package/package.json +1 -1
  10. package/scss/button/button.scss +0 -1
  11. package/scss/carousel/carousel.scss +119 -0
  12. package/scss/carousel/classes.scss +15 -0
  13. package/scss/carousel/index.scss +3 -0
  14. package/scss/classes.scss +2 -0
  15. package/scss/index.scss +2 -0
  16. package/scss/inputs/classes.scss +15 -9
  17. package/scss/inputs/index.scss +1 -0
  18. package/scss/inputs/input-with-icon.scss +36 -0
  19. package/scss/inputs/input.scss +1 -0
  20. package/scss/inputs/labeled-inputs.scss +45 -12
  21. package/scss/inputs/select.scss +44 -93
  22. package/scss/popover/classes.scss +7 -0
  23. package/scss/popover/index.scss +3 -0
  24. package/scss/popover/popover.scss +23 -0
  25. package/scss/table/table.scss +1 -1
  26. package/scss/tile/classes.scss +28 -0
  27. package/scss/tile/tile.scss +230 -235
  28. package/scss/tree/tree.scss +2 -14
package/css/button.css CHANGED
@@ -16,7 +16,6 @@
16
16
  box-sizing:border-box;
17
17
  border-radius:3px;
18
18
  line-height:22px;
19
- outline:none;
20
19
  box-shadow:none;
21
20
  font-size:14px;
22
21
  font-weight:400;
package/css/carousel.css ADDED
@@ -0,0 +1,97 @@
1
+ /*---------------------------------------------------------------------------------------------
2
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
3
+ * See LICENSE.md in the project root for license terms and full copyright notice.
4
+ *--------------------------------------------------------------------------------------------*/
5
+ .iui-carousel{
6
+ overflow:hidden;
7
+ border-radius:3px; }
8
+ .iui-carousel:focus-visible{
9
+ outline:1px solid var(--iui-color-foreground-primary);
10
+ outline-offset:4px; }
11
+ @supports not selector(*:focus-visible){
12
+ .iui-carousel:focus{
13
+ outline:1px solid var(--iui-color-foreground-primary);
14
+ outline-offset:4px; } }
15
+
16
+ .iui-carousel-slider{
17
+ display:flex;
18
+ list-style:none;
19
+ margin:0;
20
+ padding:0; }
21
+ @media (prefers-reduced-motion: no-preference){
22
+ .iui-carousel-slider{
23
+ transition:transform 0.8s ease-in-out; } }
24
+ .iui-carousel-slider-item{
25
+ width:100%;
26
+ flex-shrink:0;
27
+ box-sizing:border-box; }
28
+
29
+ .iui-carousel-navigation{
30
+ display:flex;
31
+ align-items:center;
32
+ height:33px;
33
+ box-sizing:border-box;
34
+ border-top:2px solid #DCE0E3;
35
+ border-top:2px solid var(--iui-color-background-4); }
36
+ .iui-carousel-navigation-dots, .iui-carousel-navigation-left, .iui-carousel-navigation-right{
37
+ display:flex;
38
+ align-items:center;
39
+ flex:1; }
40
+ .iui-carousel-navigation-dots button[data-pressed='true'], .iui-carousel-navigation-left button[data-pressed='true'], .iui-carousel-navigation-right button[data-pressed='true']{
41
+ outline-offset:-1px;
42
+ outline:1px solid #008BE1;
43
+ outline:1px solid var(--iui-color-foreground-primary); }
44
+ .iui-carousel-navigation-dots{
45
+ margin:0;
46
+ padding:0;
47
+ border:none;
48
+ vertical-align:baseline;
49
+ border-radius:3px;
50
+ white-space:nowrap;
51
+ overflow:hidden;
52
+ justify-content:center;
53
+ list-style:none; }
54
+ .iui-carousel-navigation-dots:focus-visible{
55
+ outline:1px solid var(--iui-color-foreground-primary);
56
+ outline-offset:-1px; }
57
+ @supports not selector(*:focus-visible){
58
+ .iui-carousel-navigation-dots:focus{
59
+ outline:1px solid var(--iui-color-foreground-primary);
60
+ outline-offset:-1px; } }
61
+ .iui-carousel-navigation-dot{
62
+ padding:0 8px;
63
+ height:27px;
64
+ gap:4px;
65
+ background-color:transparent;
66
+ border:none;
67
+ cursor:pointer; }
68
+ .iui-carousel-navigation-dot:hover::after{
69
+ background-color:rgba(0, 0, 0, 0.6);
70
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3)); }
71
+ .iui-carousel-navigation-dot.iui-invisible{
72
+ display:none; }
73
+ .iui-carousel-navigation-dot::after{
74
+ content:'';
75
+ display:block;
76
+ width:12px;
77
+ height:12px;
78
+ border-radius:50%;
79
+ transition:background-color 0.2s ease;
80
+ background-color:rgba(0, 0, 0, 0.4);
81
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
82
+ @media (prefers-reduced-motion: no-preference){
83
+ .iui-carousel-navigation-dot::after{
84
+ transition:background-color 0.2s 0.2s ease, transform 0.4s ease; } }
85
+ .iui-carousel-navigation-dot.iui-first::after{
86
+ transform:scale(0.5); }
87
+ .iui-carousel-navigation-dot.iui-second::after{
88
+ transform:scale(0.75); }
89
+ .iui-carousel-navigation-dot.iui-invisible::after{
90
+ transform:scale(0);
91
+ background-color:rgba(0, 0, 0, 0);
92
+ background-color:rgba(var(--iui-color-foreground-body-rgb), 0); }
93
+ .iui-carousel-navigation-dot.iui-active::after{
94
+ background-color:#008BE1;
95
+ background-color:var(--iui-color-foreground-primary); }
96
+ .iui-carousel-navigation-right{
97
+ justify-content:flex-end; }
package/css/inputs.css CHANGED
@@ -29,9 +29,9 @@
29
29
  .iui-input-container.iui-with-message:not(.iui-inline-icon) > .iui-input-icon{
30
30
  margin-top:3px; }
31
31
  .iui-input-container .iui-input,
32
+ .iui-input-container .iui-input-with-icon,
32
33
  .iui-input-container .iui-textarea,
33
- .iui-input-container .iui-input-group,
34
- .iui-input-container .iui-select{
34
+ .iui-input-container .iui-input-group{
35
35
  -ms-grid-row:2;
36
36
  -ms-grid-column:1;
37
37
  -ms-grid-column-span:2;
@@ -55,9 +55,9 @@
55
55
  div.iui-input-container.iui-inline-label{
56
56
  -ms-grid-columns:auto min-content auto; }
57
57
  .iui-input-container.iui-inline-label .iui-input,
58
+ .iui-input-container.iui-inline-label .iui-input-with-icon,
58
59
  .iui-input-container.iui-inline-label .iui-textarea,
59
- .iui-input-container.iui-inline-label .iui-input-group,
60
- .iui-input-container.iui-inline-label .iui-select{
60
+ .iui-input-container.iui-inline-label .iui-input-group{
61
61
  -ms-grid-row:1;
62
62
  -ms-grid-column:2; }
63
63
  .iui-input-container.iui-inline-label .iui-input-icon{
@@ -101,7 +101,7 @@
101
101
  margin-left:4px;
102
102
  color:#D30A0A;
103
103
  color:var(--iui-color-foreground-negative); }
104
- .iui-input-container > .iui-input-icon{
104
+ .iui-input-container .iui-input-icon{
105
105
  -ms-grid-row:3;
106
106
  -ms-grid-column:1;
107
107
  display:flex;
@@ -112,7 +112,7 @@
112
112
  align-self:center;
113
113
  fill:rgba(0, 0, 0, 0.4);
114
114
  fill:var(--iui-icons-color); }
115
- .iui-input-container > .iui-input-icon:not(:last-child){
115
+ .iui-input-container .iui-input-icon:not(:last-child){
116
116
  margin-right:4px; }
117
117
  .iui-input-container .iui-message{
118
118
  -ms-grid-row:3;
@@ -127,19 +127,17 @@
127
127
  -moz-user-select:none;
128
128
  -ms-user-select:none;
129
129
  user-select:none; }
130
- .iui-input-container.iui-inline-label > .iui-label{
131
- margin:0 16px 0 0;
132
- -ms-grid-column-span:1; }
133
- .iui-input-container.iui-inline-label > .iui-label.iui-required{
134
- margin-right:6px; }
135
130
  .iui-input-container.iui-inline-icon > .iui-input-icon{
136
131
  -ms-grid-row:1;
137
132
  -ms-grid-column:3;
138
133
  grid-area:inputs;
139
134
  -ms-grid-column-align:end;
140
135
  justify-self:end;
141
- margin:0 12px 0 0;
136
+ margin:0 14px 0 0;
142
137
  position:relative; }
138
+ .iui-input-container.iui-inline-icon > .iui-input-icon svg{
139
+ width:16px;
140
+ height:16px; }
143
141
  .iui-input-container.iui-inline-icon > .iui-input-icon.iui-button{
144
142
  height:100%;
145
143
  width:-webkit-fit-content;
@@ -151,7 +149,7 @@
151
149
  .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable{
152
150
  align-items:center;
153
151
  height:90%;
154
- margin-right:1px;
152
+ margin-right:2px;
155
153
  padding:0 12px;
156
154
  cursor:pointer;
157
155
  background-position:center;
@@ -163,13 +161,21 @@
163
161
  background-size:100%;
164
162
  transition:background 0s; }
165
163
  .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable svg{
166
- width:16px;
167
- height:16px;
168
164
  fill:rgba(0, 0, 0, 0.4);
169
165
  fill:var(--iui-icons-color);
170
166
  transition:transform 0.2s ease-out; }
171
167
  .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable.iui-open svg{
172
168
  transform:rotate(180deg); }
169
+ .iui-input-container.iui-inline-icon > .iui-input-icon.iui-disabled{
170
+ cursor:not-allowed; }
171
+ .iui-input-container.iui-inline-icon > .iui-input-icon.iui-disabled svg{
172
+ fill:rgba(0, 0, 0, 0.2);
173
+ fill:var(--iui-icons-color-actionable-disabled); }
174
+ .iui-input-container.iui-inline-label > .iui-label{
175
+ margin:0 16px 0 0;
176
+ -ms-grid-column-span:1; }
177
+ .iui-input-container.iui-inline-label > .iui-label.iui-required{
178
+ margin-right:6px; }
173
179
  .iui-input-container.iui-positive *::-moz-selection{
174
180
  background-color:rgba(83, 162, 26, 0.4);
175
181
  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-4)); }
@@ -190,29 +196,39 @@
190
196
  text-decoration:none;
191
197
  color:#3c7613;
192
198
  color:var(--iui-color-foreground-positive-overlay); }
193
- .iui-input-container.iui-positive > .iui-input,
194
- .iui-input-container.iui-positive > .iui-textarea,
195
- .iui-input-container.iui-positive > .iui-select > .iui-select-button{
199
+ .iui-input-container.iui-positive .iui-input,
200
+ .iui-input-container.iui-positive .iui-textarea{
196
201
  padding-bottom:6px;
197
202
  border-bottom:2px solid #53A21A;
198
203
  border-bottom:2px solid var(--iui-color-foreground-positive); }
199
- .iui-input-container.iui-positive > .iui-input.iui-small,
200
- .iui-input-container.iui-positive > .iui-textarea.iui-small,
201
- .iui-input-container.iui-positive > .iui-select > .iui-select-button.iui-small{
204
+ .iui-input-container.iui-positive .iui-input.iui-small,
205
+ .iui-input-container.iui-positive .iui-textarea.iui-small{
202
206
  padding-bottom:0.5px; }
203
- .iui-input-container.iui-positive > .iui-input.iui-large,
204
- .iui-input-container.iui-positive > .iui-textarea.iui-large,
205
- .iui-input-container.iui-positive > .iui-select > .iui-select-button.iui-large{
207
+ .iui-input-container.iui-positive .iui-input.iui-large,
208
+ .iui-input-container.iui-positive .iui-textarea.iui-large{
206
209
  padding-bottom:11.5px; }
207
- .iui-input-container.iui-positive > .iui-input:focus,
208
- .iui-input-container.iui-positive > .iui-textarea:focus,
209
- .iui-input-container.iui-positive > .iui-select > .iui-select-button:focus{
210
+ .iui-input-container.iui-positive .iui-input:focus,
211
+ .iui-input-container.iui-positive .iui-textarea:focus{
210
212
  border-bottom:2px solid #53A21A;
211
213
  outline:2px solid #53A21A;
212
214
  outline-offset:-2px;
213
215
  border-bottom:2px solid var(--iui-color-foreground-positive);
214
216
  outline:2px solid var(--iui-color-foreground-positive);
215
217
  outline-offset:-2px; }
218
+ .iui-input-container.iui-positive .iui-input-with-icon{
219
+ --_hover-color:var(--iui-color-foreground-positive);
220
+ --_focus-color:var(--iui-color-foreground-positive); }
221
+ .iui-input-container.iui-positive .iui-select-button{
222
+ border-bottom:transparent; }
223
+ .iui-input-container.iui-positive .iui-select-button::after{
224
+ content:'';
225
+ width:100%;
226
+ position:absolute;
227
+ bottom:0;
228
+ left:0;
229
+ height:2px;
230
+ background-color:#53A21A;
231
+ background-color:var(--iui-color-foreground-positive); }
216
232
  .iui-input-container.iui-negative *::-moz-selection{
217
233
  background-color:rgba(211, 10, 10, 0.4);
218
234
  background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-4)); }
@@ -233,29 +249,39 @@
233
249
  text-decoration:none;
234
250
  color:#a20808;
235
251
  color:var(--iui-color-foreground-negative-overlay); }
236
- .iui-input-container.iui-negative > .iui-input,
237
- .iui-input-container.iui-negative > .iui-textarea,
238
- .iui-input-container.iui-negative > .iui-select > .iui-select-button{
252
+ .iui-input-container.iui-negative .iui-input,
253
+ .iui-input-container.iui-negative .iui-textarea{
239
254
  padding-bottom:6px;
240
255
  border-bottom:2px solid #D30A0A;
241
256
  border-bottom:2px solid var(--iui-color-foreground-negative); }
242
- .iui-input-container.iui-negative > .iui-input.iui-small,
243
- .iui-input-container.iui-negative > .iui-textarea.iui-small,
244
- .iui-input-container.iui-negative > .iui-select > .iui-select-button.iui-small{
257
+ .iui-input-container.iui-negative .iui-input.iui-small,
258
+ .iui-input-container.iui-negative .iui-textarea.iui-small{
245
259
  padding-bottom:0.5px; }
246
- .iui-input-container.iui-negative > .iui-input.iui-large,
247
- .iui-input-container.iui-negative > .iui-textarea.iui-large,
248
- .iui-input-container.iui-negative > .iui-select > .iui-select-button.iui-large{
260
+ .iui-input-container.iui-negative .iui-input.iui-large,
261
+ .iui-input-container.iui-negative .iui-textarea.iui-large{
249
262
  padding-bottom:11.5px; }
250
- .iui-input-container.iui-negative > .iui-input:focus,
251
- .iui-input-container.iui-negative > .iui-textarea:focus,
252
- .iui-input-container.iui-negative > .iui-select > .iui-select-button:focus{
263
+ .iui-input-container.iui-negative .iui-input:focus,
264
+ .iui-input-container.iui-negative .iui-textarea:focus{
253
265
  border-bottom:2px solid #D30A0A;
254
266
  outline:2px solid #D30A0A;
255
267
  outline-offset:-2px;
256
268
  border-bottom:2px solid var(--iui-color-foreground-negative);
257
269
  outline:2px solid var(--iui-color-foreground-negative);
258
270
  outline-offset:-2px; }
271
+ .iui-input-container.iui-negative .iui-input-with-icon{
272
+ --_hover-color:var(--iui-color-foreground-negative);
273
+ --_focus-color:var(--iui-color-foreground-negative); }
274
+ .iui-input-container.iui-negative .iui-select-button{
275
+ border-bottom:transparent; }
276
+ .iui-input-container.iui-negative .iui-select-button::after{
277
+ content:'';
278
+ width:100%;
279
+ position:absolute;
280
+ bottom:0;
281
+ left:0;
282
+ height:2px;
283
+ background-color:#D30A0A;
284
+ background-color:var(--iui-color-foreground-negative); }
259
285
  .iui-input-container.iui-warning *::-moz-selection{
260
286
  background-color:rgba(241, 139, 18, 0.4);
261
287
  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-4)); }
@@ -276,29 +302,39 @@
276
302
  text-decoration:none;
277
303
  color:#c4700c;
278
304
  color:var(--iui-color-foreground-warning-overlay); }
279
- .iui-input-container.iui-warning > .iui-input,
280
- .iui-input-container.iui-warning > .iui-textarea,
281
- .iui-input-container.iui-warning > .iui-select > .iui-select-button{
305
+ .iui-input-container.iui-warning .iui-input,
306
+ .iui-input-container.iui-warning .iui-textarea{
282
307
  padding-bottom:6px;
283
308
  border-bottom:2px solid #F18B12;
284
309
  border-bottom:2px solid var(--iui-color-foreground-warning); }
285
- .iui-input-container.iui-warning > .iui-input.iui-small,
286
- .iui-input-container.iui-warning > .iui-textarea.iui-small,
287
- .iui-input-container.iui-warning > .iui-select > .iui-select-button.iui-small{
310
+ .iui-input-container.iui-warning .iui-input.iui-small,
311
+ .iui-input-container.iui-warning .iui-textarea.iui-small{
288
312
  padding-bottom:0.5px; }
289
- .iui-input-container.iui-warning > .iui-input.iui-large,
290
- .iui-input-container.iui-warning > .iui-textarea.iui-large,
291
- .iui-input-container.iui-warning > .iui-select > .iui-select-button.iui-large{
313
+ .iui-input-container.iui-warning .iui-input.iui-large,
314
+ .iui-input-container.iui-warning .iui-textarea.iui-large{
292
315
  padding-bottom:11.5px; }
293
- .iui-input-container.iui-warning > .iui-input:focus,
294
- .iui-input-container.iui-warning > .iui-textarea:focus,
295
- .iui-input-container.iui-warning > .iui-select > .iui-select-button:focus{
316
+ .iui-input-container.iui-warning .iui-input:focus,
317
+ .iui-input-container.iui-warning .iui-textarea:focus{
296
318
  border-bottom:2px solid #F18B12;
297
319
  outline:2px solid #F18B12;
298
320
  outline-offset:-2px;
299
321
  border-bottom:2px solid var(--iui-color-foreground-warning);
300
322
  outline:2px solid var(--iui-color-foreground-warning);
301
323
  outline-offset:-2px; }
324
+ .iui-input-container.iui-warning .iui-input-with-icon{
325
+ --_hover-color:var(--iui-color-foreground-warning);
326
+ --_focus-color:var(--iui-color-foreground-warning); }
327
+ .iui-input-container.iui-warning .iui-select-button{
328
+ border-bottom:transparent; }
329
+ .iui-input-container.iui-warning .iui-select-button::after{
330
+ content:'';
331
+ width:100%;
332
+ position:absolute;
333
+ bottom:0;
334
+ left:0;
335
+ height:2px;
336
+ background-color:#F18B12;
337
+ background-color:var(--iui-color-foreground-warning); }
302
338
 
303
339
  .iui-input-label{
304
340
  font-weight:600;
@@ -406,7 +442,70 @@
406
442
  border-color:#EEF0F3;
407
443
  background-color:var(--iui-color-background-disabled);
408
444
  border-color:var(--iui-color-background-disabled);
445
+ cursor:not-allowed;
446
+ --_hover-color:var(--iui-color-background-disabled); }
447
+
448
+ .iui-select-button{
449
+ width:100%;
450
+ margin:0;
451
+ border-radius:3px;
452
+ box-sizing:border-box;
453
+ padding:7px 12px;
454
+ min-height:38px;
455
+ transition:border-color 0.2s ease-out;
456
+ display:flex;
457
+ align-items:center;
458
+ -webkit-user-select:none;
459
+ -moz-user-select:none;
460
+ -ms-user-select:none;
461
+ user-select:none;
462
+ position:relative;
463
+ overflow:hidden;
464
+ color:rgba(0, 0, 0, 0.8);
465
+ background-color:#FFF;
466
+ border:1px solid rgba(0, 0, 0, 0.4);
467
+ color:var(--iui-text-color);
468
+ background-color:var(--iui-color-background-1);
469
+ border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
470
+ .iui-select-button:focus-visible{
471
+ outline:2px solid var(--iui-color-foreground-primary);
472
+ outline-offset:-2px; }
473
+ @supports not selector(*:focus-visible){
474
+ .iui-select-button:focus{
475
+ outline:2px solid var(--iui-color-foreground-primary);
476
+ outline-offset:-2px; } }
477
+ .iui-select-button.iui-small{
478
+ padding-top:1.5px;
479
+ padding-bottom:1.5px;
480
+ min-height:27px; }
481
+ .iui-select-button.iui-large{
482
+ padding-top:12.5px;
483
+ padding-bottom:12.5px;
484
+ min-height:49px;
485
+ font-size:16px; }
486
+ .iui-select-button.iui-disabled{
487
+ background-color:#EEF0F3;
488
+ border-color:#EEF0F3;
489
+ background-color:var(--iui-color-background-disabled);
490
+ border-color:var(--iui-color-background-disabled);
491
+ --_hover-color:var(--iui-color-background-disabled);
409
492
  cursor:not-allowed; }
493
+ .iui-select-button .iui-icon{
494
+ width:16px;
495
+ height:16px;
496
+ flex:0 0 auto;
497
+ fill:rgba(0, 0, 0, 0.8);
498
+ fill:var(--iui-icons-color-actionable);
499
+ fill:currentColor; }
500
+ .iui-select-button .iui-icon + .iui-content{
501
+ margin-left:8px; }
502
+ .iui-select-button .iui-content{
503
+ overflow:hidden;
504
+ white-space:nowrap;
505
+ text-overflow:ellipsis; }
506
+ .iui-select-button.iui-placeholder{
507
+ color:rgba(0, 0, 0, 0.2);
508
+ color:var(--iui-text-color-placeholder); }
410
509
 
411
510
  .iui-textarea{
412
511
  margin:0;
@@ -494,183 +593,72 @@
494
593
  border-color:#EEF0F3;
495
594
  background-color:var(--iui-color-background-disabled);
496
595
  border-color:var(--iui-color-background-disabled);
497
- cursor:not-allowed; }
596
+ cursor:not-allowed;
597
+ --_hover-color:var(--iui-color-background-disabled); }
498
598
  .iui-textarea[disabled], .iui-textarea[readonly]{
499
599
  resize:none; }
500
600
 
501
- .iui-select{
502
- margin:0;
503
- padding:0;
504
- border:none;
505
- vertical-align:baseline;
506
- display:flex;
507
- flex-direction:column;
601
+ .iui-input-with-icon{
602
+ display:-ms-grid;
603
+ display:grid;
604
+ align-items:center;
605
+ cursor:pointer; }
606
+ .iui-input-with-icon > :first-child{
607
+ -ms-grid-row:1;
608
+ grid-area:1 / -1;
609
+ padding-right:40px; }
610
+ .iui-input-with-icon:focus-within > :first-child{
611
+ outline:2px solid var(--_focus-color, var(--iui-color-foreground-primary));
612
+ outline-offset:-2px; }
613
+ .iui-input-with-icon:hover > :first-child{
614
+ border-color:var(--_hover-color, rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2))); }
615
+
616
+ .iui-end-icon{
617
+ -ms-grid-row:1;
618
+ -ms-grid-column:3;
619
+ grid-area:inputs;
620
+ -ms-grid-column-align:end;
621
+ justify-self:end;
622
+ margin:0 14px 0 0;
508
623
  position:relative;
509
- width:100%;
510
- min-width:0; }
511
- .iui-select > .iui-select-button{
512
- margin:0;
513
- padding:0;
514
- border:none;
515
- vertical-align:baseline;
516
- width:100%;
517
- font-family:inherit;
518
- font-size:14px;
519
- font-weight:400;
520
- line-height:22px;
521
- border-radius:3px;
522
- -webkit-appearance:none;
523
- -moz-appearance:none;
524
- appearance:none;
525
- box-sizing:border-box;
526
- padding:7px 12px;
527
- min-height:38px;
528
- color:rgba(0, 0, 0, 0.8);
529
- background-color:#FFF;
530
- border:1px solid rgba(0, 0, 0, 0.4);
531
- color:var(--iui-text-color);
532
- background-color:var(--iui-color-background-1);
533
- border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
534
- display:flex;
624
+ display:flex;
625
+ grid-area:1 / -1; }
626
+ .iui-end-icon svg{
627
+ width:16px;
628
+ height:16px; }
629
+ .iui-end-icon.iui-button{
630
+ height:100%;
631
+ width:-webkit-fit-content;
632
+ width:-moz-fit-content;
633
+ width:fit-content;
634
+ margin-right:0;
635
+ border-top-left-radius:0;
636
+ border-bottom-left-radius:0; }
637
+ .iui-end-icon.iui-actionable{
535
638
  align-items:center;
536
- min-height:38px;
537
- padding-right:32px;
538
- -webkit-user-select:none;
539
- -moz-user-select:none;
540
- -ms-user-select:none;
541
- user-select:none;
542
- position:relative; }
543
- .iui-select > .iui-select-button:focus-visible{
544
- outline:2px solid var(--iui-color-foreground-primary);
545
- outline-offset:-2px; }
546
- @supports not selector(*:focus-visible){
547
- .iui-select > .iui-select-button:focus{
548
- outline:2px solid var(--iui-color-foreground-primary);
549
- outline-offset:-2px; } }
550
- @media (prefers-reduced-motion: no-preference){
551
- .iui-select > .iui-select-button{
552
- transition:border-color 0.2s ease-out; } }
553
- .iui-select > .iui-select-button.iui-small{
554
- padding-top:1.5px;
555
- padding-bottom:1.5px;
556
- min-height:27px; }
557
- .iui-select > .iui-select-button.iui-large{
558
- padding-top:12.5px;
559
- padding-bottom:12.5px;
560
- min-height:49px;
561
- font-size:16px; }
562
- .iui-select > .iui-select-button::-moz-placeholder{
563
- -moz-user-select:none;
564
- user-select:none;
565
- color:rgba(0, 0, 0, 0.2);
566
- color:var(--iui-text-color-placeholder); }
567
- .iui-select > .iui-select-button:-ms-input-placeholder{
568
- -ms-user-select:none;
569
- user-select:none;
570
- color:rgba(0, 0, 0, 0.2);
571
- color:var(--iui-text-color-placeholder); }
572
- .iui-select > .iui-select-button::placeholder{
573
- -webkit-user-select:none;
574
- -moz-user-select:none;
575
- -ms-user-select:none;
576
- user-select:none;
577
- color:rgba(0, 0, 0, 0.2);
578
- color:var(--iui-text-color-placeholder); }
579
- .iui-select > .iui-select-button:-webkit-autofill{
580
- border-color:#008be1;
581
- color:#008be1;
582
- background:linear-gradient(rgba(0, 139, 225, 0.1), rgba(0, 139, 225, 0.1)), linear-gradient(#FFF, #FFF);
583
- border-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
584
- color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
585
- 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)); }
586
- .iui-select > .iui-select-button:autofill{
587
- border-color:#008be1;
588
- color:#008be1;
589
- background:linear-gradient(rgba(0, 139, 225, 0.1), rgba(0, 139, 225, 0.1)), linear-gradient(#FFF, #FFF);
590
- border-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
591
- color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
592
- 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)); }
593
- .iui-select > .iui-select-button:hover{
594
- border-color:rgba(0, 0, 0, 0.8);
595
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
596
- @media (prefers-reduced-motion: no-preference){
597
- .iui-select > .iui-select-button:hover{
598
- transition:border-color 0.2s ease-out; } }
599
- .iui-select > .iui-select-button[disabled]{
600
- background-color:#EEF0F3;
601
- border-color:#EEF0F3;
602
- background-color:var(--iui-color-background-disabled);
603
- border-color:var(--iui-color-background-disabled);
604
- cursor:not-allowed; }
605
- .iui-select > .iui-select-button:focus-visible{
606
- outline:2px solid var(--iui-color-foreground-primary);
607
- outline-offset:-2px; }
608
- @supports not selector(*:focus-visible){
609
- .iui-select > .iui-select-button:focus{
610
- outline:2px solid var(--iui-color-foreground-primary);
611
- outline-offset:-2px; } }
612
- @media (prefers-reduced-motion: no-preference){
613
- .iui-select > .iui-select-button{
614
- transition:border-color 0.2s ease-out; } }
615
- .iui-select > .iui-select-button > .iui-icon{
616
- width:16px;
617
- height:16px;
618
- flex:0 0 auto;
619
- fill:rgba(0, 0, 0, 0.8);
620
- fill:var(--iui-icons-color-actionable); }
621
- .iui-select > .iui-select-button > .iui-icon + .iui-content{
622
- margin-left:8px; }
623
- .iui-select > .iui-select-button > .iui-content{
624
- overflow:hidden;
625
- white-space:nowrap;
626
- text-overflow:ellipsis; }
627
- .iui-select > .iui-select-button.iui-placeholder{
628
- color:rgba(0, 0, 0, 0.2);
629
- color:var(--iui-text-color-placeholder); }
630
- .iui-select > .iui-select-button::after{
631
- content:'';
632
- position:absolute;
633
- top:50%;
634
- right:16px;
635
- transform:translateY(-50%);
636
- width:0;
637
- height:0;
638
- border-left:5px solid transparent;
639
- border-right:5px solid transparent;
640
- border-top:5px solid rgba(0, 0, 0, 0.8);
641
- border-top:5px solid var(--iui-icons-color-actionable); }
642
- .iui-select > .iui-select-button:hover{
643
- border-color:rgba(0, 0, 0, 0.8);
644
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
645
- .iui-select > .iui-select-button:hover::after{
646
- border-bottom:none;
647
- border-top:5px solid black;
648
- border-top:5px solid var(--iui-icons-color-actionable-hover); }
649
- .iui-select > .iui-select-button.iui-active::after{
650
- border-top:none;
651
- border-bottom:5px solid rgba(0, 0, 0, 0.8);
652
- border-bottom:5px solid var(--iui-icons-color-actionable); }
653
- .iui-select > .iui-select-button.iui-active:hover::after{
654
- border-bottom:5px solid black;
655
- border-bottom:5px solid var(--iui-icons-color-actionable-hover); }
656
- .iui-select > .iui-select-button.iui-disabled{
657
- cursor:not-allowed;
658
- background-color:#EEF0F3;
659
- border-color:#EEF0F3;
660
- background-color:var(--iui-color-background-disabled);
661
- border-color:var(--iui-color-background-disabled); }
662
- .iui-select > .iui-select-button.iui-disabled::after{
663
- border-top:5px solid rgba(0, 0, 0, 0.2);
664
- border-top:5px solid var(--iui-icons-color-actionable-disabled); }
665
- .iui-select.iui-small .iui-select-button{
666
- padding-top:1.5px;
667
- padding-bottom:1.5px;
668
- min-height:27px; }
669
- .iui-select.iui-large .iui-select-button{
670
- padding-top:12.5px;
671
- padding-bottom:12.5px;
672
- min-height:49px;
673
- font-size:16px; }
639
+ height:90%;
640
+ margin-right:2px;
641
+ padding:0 12px;
642
+ cursor:pointer;
643
+ background-position:center;
644
+ transition:background 0.4s ease-out; }
645
+ .iui-end-icon.iui-actionable:hover{
646
+ background:var(--iui-color-background-1) radial-gradient(circle, transparent 1%, var(--iui-color-background-1) 1%) center/15000%; }
647
+ .iui-end-icon.iui-actionable:active{
648
+ background-color:var(--iui-color-background-2);
649
+ background-size:100%;
650
+ transition:background 0s; }
651
+ .iui-end-icon.iui-actionable svg{
652
+ fill:rgba(0, 0, 0, 0.4);
653
+ fill:var(--iui-icons-color);
654
+ transition:transform 0.2s ease-out; }
655
+ .iui-end-icon.iui-actionable.iui-open svg{
656
+ transform:rotate(180deg); }
657
+ .iui-end-icon.iui-disabled{
658
+ cursor:not-allowed; }
659
+ .iui-end-icon.iui-disabled svg{
660
+ fill:rgba(0, 0, 0, 0.2);
661
+ fill:var(--iui-icons-color-actionable-disabled); }
674
662
 
675
663
  .iui-checkbox{
676
664
  margin:0;
package/css/popover.css ADDED
@@ -0,0 +1,12 @@
1
+ /*---------------------------------------------------------------------------------------------
2
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
3
+ * See LICENSE.md in the project root for license terms and full copyright notice.
4
+ *--------------------------------------------------------------------------------------------*/
5
+ .iui-popover{ }
6
+ .iui-popover.tippy-box{
7
+ all:revert; }
8
+ .iui-popover.tippy-box[data-reference-hidden]{
9
+ visibility:visible;
10
+ pointer-events:auto; }
11
+ .iui-popover .tippy-content{
12
+ all:revert; }