@itwin/itwinui-css 1.0.0-dev.14 → 1.0.0-dev.16

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 (49) hide show
  1. package/css/alert.css +1 -295
  2. package/css/all.css +1 -8827
  3. package/css/anchor.css +1 -56
  4. package/css/avatar.css +1 -225
  5. package/css/backdrop.css +1 -22
  6. package/css/badge.css +1 -25
  7. package/css/blockquote.css +1 -28
  8. package/css/breadcrumbs.css +1 -346
  9. package/css/button.css +1 -388
  10. package/css/carousel.css +1 -121
  11. package/css/checkbox.css +1 -148
  12. package/css/code.css +1 -85
  13. package/css/color-picker.css +1 -200
  14. package/css/date-picker.css +1 -394
  15. package/css/dialog.css +1 -161
  16. package/css/expandable-block.css +1 -171
  17. package/css/fieldset.css +1 -28
  18. package/css/file-upload.css +1 -78
  19. package/css/footer.css +1 -83
  20. package/css/global.css +1 -59
  21. package/css/header.css +1 -437
  22. package/css/information-panel.css +1 -190
  23. package/css/input.css +1 -167
  24. package/css/keyboard.css +1 -27
  25. package/css/location-marker.css +1 -114
  26. package/css/menu.css +1 -169
  27. package/css/non-ideal-state.css +1 -61
  28. package/css/progress-indicator.css +1 -299
  29. package/css/radio-tile.css +1 -188
  30. package/css/radio.css +1 -155
  31. package/css/select.css +1 -239
  32. package/css/side-navigation.css +1 -211
  33. package/css/skip-to-content.css +1 -61
  34. package/css/slider.css +1 -261
  35. package/css/stepper.css +1 -137
  36. package/css/surface.css +1 -11
  37. package/css/table.css +1 -723
  38. package/css/tabs.css +1 -324
  39. package/css/tag.css +1 -132
  40. package/css/text.css +1 -115
  41. package/css/tile.css +1 -491
  42. package/css/time-picker.css +1 -128
  43. package/css/toast.css +1 -315
  44. package/css/toggle-switch.css +1 -207
  45. package/css/tooltip.css +1 -48
  46. package/css/tree.css +1 -126
  47. package/css/utils.css +1 -513
  48. package/css/workflow-diagram.css +1 -63
  49. package/package.json +8 -4
package/css/anchor.css CHANGED
@@ -2,59 +2,4 @@
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-anchor{
6
- color:var(--iui-color-text-accent);
7
- -webkit-tap-highlight-color:hsl(var(--iui-color-accent-hsl)/var(--iui-opacity-6));
8
- border-radius:var(--iui-border-radius-1);
9
- cursor:pointer;
10
- text-decoration:none;
11
- }
12
- .iui-anchor:focus-visible{
13
- outline:1px solid var(--iui-color-text-accent);
14
- outline-offset:1px;
15
- }
16
- @supports not selector(*:focus-visible){
17
- .iui-anchor:focus{
18
- outline:1px solid var(--iui-color-text-accent);
19
- outline-offset:1px;
20
- }
21
- }
22
- .iui-anchor:hover{
23
- color:var(--iui-color-text-accent-hover);
24
- }
25
- .iui-anchor:hover{
26
- text-decoration:underline;
27
- }
28
- @media (prefers-contrast: more){
29
- .iui-anchor{
30
- text-decoration:underline;
31
- }
32
- .iui-anchor:hover{
33
- text-decoration:none;
34
- }
35
- }
36
- [data-iui-contrast=high] .iui-anchor{
37
- text-decoration:underline;
38
- }
39
- [data-iui-contrast=high] .iui-anchor:hover{
40
- text-decoration:none;
41
- }
42
- .iui-anchor-external{
43
- --_iui-anchor-external-svg:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='m16 0v5.4l-1.9-2-8.4 8.4-1.5-1.5 8.3-8.4-1.9-1.9m5.4 16v-9h-1v8h-14v-14h8v-1h-9v16z' /></svg>");
44
- }
45
- .iui-anchor-external::after{
46
- content:"";
47
- display:inline-block;
48
- width:1.5ch;
49
- height:1.5ch;
50
- margin-left:0.5ch;
51
- vertical-align:-0.1ch;
52
- background-color:currentColor;
53
- -webkit-mask:var(--_iui-anchor-external-svg);
54
- mask:var(--_iui-anchor-external-svg);
55
- }
56
- @media (forced-colors: active){
57
- .iui-anchor-external::after{
58
- background-color:LinkText;
59
- }
60
- }
5
+ .iui-anchor{color:var(--iui-color-text-accent);-webkit-tap-highlight-color:hsl(var(--iui-color-accent-hsl)/var(--iui-opacity-6));border-radius:var(--iui-border-radius-1);cursor:pointer;text-decoration:none}.iui-anchor:focus-visible{outline:1px solid var(--iui-color-text-accent);outline-offset:1px}@supports not selector(*:focus-visible){.iui-anchor:focus{outline:1px solid var(--iui-color-text-accent);outline-offset:1px}}.iui-anchor:hover{color:var(--iui-color-text-accent-hover);text-decoration:underline}@media (prefers-contrast:more){.iui-anchor{text-decoration:underline}.iui-anchor:hover{text-decoration:none}}[data-iui-contrast=high] .iui-anchor{text-decoration:underline}[data-iui-contrast=high] .iui-anchor:hover{text-decoration:none}.iui-anchor-external{--_iui-anchor-external-svg:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='m16 0v5.4l-1.9-2-8.4 8.4-1.5-1.5 8.3-8.4-1.9-1.9m5.4 16v-9h-1v8h-14v-14h8v-1h-9v16z' /></svg>")}.iui-anchor-external:after{content:"";width:1.5ch;height:1.5ch;vertical-align:-.1ch;-webkit-mask:var(--_iui-anchor-external-svg);mask:var(--_iui-anchor-external-svg);background-color:currentColor;margin-left:.5ch;display:inline-block}@media (forced-colors:active){.iui-anchor-external:after{background-color:LinkText}}
package/css/avatar.css CHANGED
@@ -2,228 +2,4 @@
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-avatar{
6
- margin:0;
7
- padding:0;
8
- border:none;
9
- vertical-align:baseline;
10
- display:inline-flex;
11
- align-items:center;
12
- justify-content:center;
13
- position:relative;
14
- margin:0;
15
- -webkit-user-select:none;
16
- -moz-user-select:none;
17
- -ms-user-select:none;
18
- user-select:none;
19
- }
20
- .iui-avatar > .iui-stroke{
21
- display:block;
22
- position:absolute;
23
- left:0;
24
- top:0;
25
- width:100%;
26
- height:100%;
27
- margin:0;
28
- border-radius:50%;
29
- box-shadow:inset 0 0 0 var(--iui-size-3xs) hsl(var(--iui-color-foreground-hsl)/var(--iui-opacity-5));
30
- }
31
- .iui-avatar > .iui-initials{
32
- display:flex;
33
- justify-content:center;
34
- align-items:center;
35
- position:absolute;
36
- left:0;
37
- top:0;
38
- width:100%;
39
- height:100%;
40
- margin:0;
41
- border-radius:50%;
42
- font-style:normal;
43
- font-weight:var(--iui-font-weight-semibold);
44
- text-align:center;
45
- text-decoration:none;
46
- text-transform:uppercase;
47
- background-color:#b1c856;
48
- overflow:hidden;
49
- color:var(--iui-color-white);
50
- }
51
- .iui-avatar > .iui-icon{
52
- display:inline-flex;
53
- width:50%;
54
- height:50%;
55
- position:absolute;
56
- fill:var(--iui-color-white);
57
- }
58
- .iui-avatar > img{
59
- display:block;
60
- position:absolute;
61
- -o-object-fit:cover;
62
- object-fit:cover;
63
- left:0;
64
- top:0;
65
- width:100%;
66
- height:100%;
67
- border-width:0;
68
- border-radius:50%;
69
- background-color:var(--iui-color-background);
70
- }
71
- .iui-avatar > .iui-status{
72
- box-sizing:content-box;
73
- display:flex;
74
- align-items:center;
75
- justify-content:center;
76
- position:absolute;
77
- right:calc(0px - var(--iui-size-3xs));
78
- bottom:calc(0px - var(--iui-size-3xs));
79
- width:25%;
80
- height:25%;
81
- border-radius:50%;
82
- border:var(--iui-size-3xs) solid var(--iui-color-background);
83
- background-color:var(--iui-color-border);
84
- }
85
- .iui-avatar > .iui-status::after{
86
- content:"";
87
- width:var(--_iui-avatar-status-size, var(--iui-size-xs));
88
- height:var(--_iui-avatar-status-size, var(--iui-size-xs));
89
- }
90
- .iui-avatar > .iui-status.iui-online{
91
- background-color:var(--iui-color-background-positive);
92
- }
93
- .iui-avatar > .iui-status.iui-online::after{
94
- -webkit-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6,14L0,8l2-2l4,4l8-8l2,2L6,14z' /></svg>");
95
- mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6,14L0,8l2-2l4,4l8-8l2,2L6,14z' /></svg>");
96
- background-color:var(--iui-color-white);
97
- }
98
- .iui-avatar > .iui-status.iui-away{
99
- background-color:var(--iui-color-background-warning);
100
- }
101
- .iui-avatar > .iui-status.iui-away::after{
102
- -webkit-mask:url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='m13.445 12.832-6.445-4.297v-7.535h2v6.465l5.555 3.703z' /></svg>");
103
- mask:url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='m13.445 12.832-6.445-4.297v-7.535h2v6.465l5.555 3.703z' /></svg>");
104
- background-color:var(--iui-color-white);
105
- }
106
- .iui-avatar > .iui-status.iui-busy{
107
- background-color:var(--iui-color-background-negative);
108
- }
109
- .iui-avatar > .iui-status.iui-busy::after{
110
- -webkit-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='2' y='7' width='12' height='2'></rect></svg>");
111
- mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='2' y='7' width='12' height='2'></rect></svg>");
112
- background-color:var(--iui-color-white);
113
- }
114
- .iui-avatar > .iui-status.iui-offline{
115
- background-color:var(--iui-color-background);
116
- box-shadow:inset 0 0 0 1px var(--iui-color-text-muted);
117
- }
118
- .iui-avatar > .iui-status.iui-offline::after{
119
- -webkit-mask:url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='m12.5 2-4.5 4.5-4.5-4.5-1.5 1.5 4.5 4.5-4.5 4.5 1.5 1.5 4.5-4.5 4.5 4.5 1.5-1.5-4.5-4.5 4.5-4.5z' /></svg>");
120
- mask:url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='m12.5 2-4.5 4.5-4.5-4.5-1.5 1.5 4.5 4.5-4.5 4.5 1.5 1.5 4.5-4.5 4.5 4.5 1.5-1.5-4.5-4.5 4.5-4.5z' /></svg>");
121
- background-color:var(--iui-color-icon-muted);
122
- }
123
- .iui-avatar.iui-avatar-count > .iui-initials{
124
- background-color:var(--iui-color-background);
125
- color:var(--iui-color-text-muted);
126
- }
127
- .iui-avatar.iui-avatar-count > .iui-stroke{
128
- box-shadow:inset 0 0 0 var(--iui-size-3xs) var(--iui-color-border);
129
- }
130
- .iui-avatar.iui-avatar-count:focus{
131
- outline:none;
132
- }
133
- .iui-avatar.iui-avatar-count:focus > .iui-stroke{
134
- box-shadow:var(--iui-focus-box-shadow);
135
- }
136
- .iui-avatar.iui-avatar-count:focus-visible{
137
- outline:none;
138
- }
139
- .iui-avatar.iui-avatar-count:focus:not(:focus-visible) > .iui-stroke{
140
- box-shadow:inset 0 0 0 var(--iui-size-3xs) var(--iui-color-background-transparent-hover);
141
- }
142
- .iui-avatar.iui-avatar{
143
- width:var(--iui-size-xl);
144
- height:var(--iui-size-xl);
145
- --_iui-avatar-status-size:calc(var(--iui-size-2xs) * 1.5);
146
- }
147
- .iui-avatar.iui-avatar > .iui-initials{
148
- line-height:var(--iui-size-xl);
149
- font-size:var(--iui-font-size-2);
150
- }
151
- .iui-avatar.iui-small{
152
- width:calc(1.5 * var(--iui-size-m));
153
- height:calc(1.5 * var(--iui-size-m));
154
- --_iui-avatar-status-size:var(--iui-size-2xs);
155
- }
156
- .iui-avatar.iui-small > .iui-initials{
157
- line-height:calc(1.5 * var(--iui-size-m));
158
- font-size:var(--iui-font-size-0);
159
- }
160
- .iui-avatar.iui-large{
161
- width:calc(3 * var(--iui-size-m));
162
- height:calc(3 * var(--iui-size-m));
163
- --_iui-avatar-status-size:var(--iui-size-xs);
164
- }
165
- .iui-avatar.iui-large > .iui-initials{
166
- line-height:calc(3 * var(--iui-size-m));
167
- font-size:var(--iui-font-size-3);
168
- }
169
- .iui-avatar.iui-x-large{
170
- width:var(--iui-size-2xl);
171
- height:var(--iui-size-2xl);
172
- --_iui-avatar-status-size:var(--iui-size-s);
173
- }
174
- .iui-avatar.iui-x-large > .iui-initials{
175
- line-height:var(--iui-size-2xl);
176
- font-size:var(--iui-font-size-4);
177
- }
178
-
179
- .iui-avatar-list{
180
- display:inline-flex;
181
- flex-wrap:wrap;
182
- }
183
- .iui-avatar-list .iui-avatar:not(:first-child){
184
- margin-left:var(--iui-size-2xs);
185
- }
186
- .iui-avatar-list .iui-avatar:not(:first-child).iui-small{
187
- margin-left:var(--iui-size-3xs);
188
- }
189
- .iui-avatar-list .iui-avatar:not(:first-child).iui-large{
190
- margin-left:var(--iui-size-xs);
191
- }
192
- .iui-avatar-list .iui-avatar:not(:first-child).iui-x-large{
193
- margin-left:var(--iui-size-s);
194
- }
195
- .iui-avatar-list.iui-stacked .iui-avatar:not(:first-child){
196
- margin-left:calc(0px - var(--iui-size-2xs));
197
- }
198
- .iui-avatar-list.iui-stacked .iui-avatar:not(:first-child) .iui-initials{
199
- box-shadow:0 0 0 var(--iui-size-2xs) var(--iui-color-background);
200
- }
201
- .iui-avatar-list.iui-stacked .iui-avatar:not(:first-child).iui-small{
202
- margin-left:calc(0px - var(--iui-size-3xs));
203
- }
204
- .iui-avatar-list.iui-stacked .iui-avatar:not(:first-child).iui-small .iui-initials{
205
- box-shadow:0 0 0 var(--iui-size-3xs) var(--iui-color-background);
206
- }
207
- .iui-avatar-list.iui-stacked .iui-avatar:not(:first-child).iui-large{
208
- margin-left:calc(0px - var(--iui-size-xs));
209
- }
210
- .iui-avatar-list.iui-stacked .iui-avatar:not(:first-child).iui-x-large{
211
- margin-left:calc(0px - var(--iui-size-s));
212
- }
213
- @media (prefers-reduced-motion: no-preference){
214
- .iui-avatar-list.iui-stacked.iui-animated .iui-avatar{
215
- transition:margin-left var(--iui-duration-2) ease-out;
216
- }
217
- }
218
- .iui-avatar-list.iui-stacked.iui-animated:hover .iui-avatar:not(:first-child){
219
- margin-left:var(--iui-size-2xs);
220
- }
221
- .iui-avatar-list.iui-stacked.iui-animated:hover .iui-avatar:not(:first-child).iui-small{
222
- margin-left:var(--iui-size-3xs);
223
- }
224
- .iui-avatar-list.iui-stacked.iui-animated:hover .iui-avatar:not(:first-child).iui-large{
225
- margin-left:var(--iui-size-xs);
226
- }
227
- .iui-avatar-list.iui-stacked.iui-animated:hover .iui-avatar:not(:first-child).iui-x-large{
228
- margin-left:var(--iui-size-s);
229
- }
5
+ .iui-avatar{vertical-align:baseline;-webkit-user-select:none;user-select:none;border:none;justify-content:center;align-items:center;margin:0;padding:0;display:inline-flex;position:relative}.iui-avatar>.iui-stroke{width:100%;height:100%;box-shadow:inset 0 0 0 var(--iui-size-3xs)hsl(var(--iui-color-foreground-hsl)/var(--iui-opacity-5));border-radius:50%;margin:0;display:block;position:absolute;top:0;left:0}.iui-avatar>.iui-initials{width:100%;height:100%;font-style:normal;font-weight:var(--iui-font-weight-semibold);text-align:center;text-transform:uppercase;color:var(--iui-color-white);background-color:#b1c856;border-radius:50%;justify-content:center;align-items:center;margin:0;text-decoration:none;display:flex;position:absolute;top:0;left:0;overflow:hidden}.iui-avatar>.iui-icon{width:50%;height:50%;fill:var(--iui-color-white);display:inline-flex;position:absolute}.iui-avatar>img{object-fit:cover;width:100%;height:100%;background-color:var(--iui-color-background);border-width:0;border-radius:50%;display:block;position:absolute;top:0;left:0}.iui-avatar>.iui-status{box-sizing:content-box;right:calc(0px - var(--iui-size-3xs));bottom:calc(0px - var(--iui-size-3xs));width:25%;height:25%;border:var(--iui-size-3xs)solid var(--iui-color-background);background-color:var(--iui-color-border);border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute}.iui-avatar>.iui-status:after{content:"";width:var(--_iui-avatar-status-size,var(--iui-size-xs));height:var(--_iui-avatar-status-size,var(--iui-size-xs))}.iui-avatar>.iui-status.iui-online{background-color:var(--iui-color-background-positive)}.iui-avatar>.iui-status.iui-online:after{background-color:var(--iui-color-white);-webkit-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6,14L0,8l2-2l4,4l8-8l2,2L6,14z' /></svg>");mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6,14L0,8l2-2l4,4l8-8l2,2L6,14z' /></svg>")}.iui-avatar>.iui-status.iui-away{background-color:var(--iui-color-background-warning)}.iui-avatar>.iui-status.iui-away:after{background-color:var(--iui-color-white);-webkit-mask:url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='m13.445 12.832-6.445-4.297v-7.535h2v6.465l5.555 3.703z' /></svg>");mask:url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='m13.445 12.832-6.445-4.297v-7.535h2v6.465l5.555 3.703z' /></svg>")}.iui-avatar>.iui-status.iui-busy{background-color:var(--iui-color-background-negative)}.iui-avatar>.iui-status.iui-busy:after{background-color:var(--iui-color-white);-webkit-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='2' y='7' width='12' height='2'></rect></svg>");mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='2' y='7' width='12' height='2'></rect></svg>")}.iui-avatar>.iui-status.iui-offline{background-color:var(--iui-color-background);box-shadow:inset 0 0 0 1px var(--iui-color-text-muted)}.iui-avatar>.iui-status.iui-offline:after{background-color:var(--iui-color-icon-muted);-webkit-mask:url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='m12.5 2-4.5 4.5-4.5-4.5-1.5 1.5 4.5 4.5-4.5 4.5 1.5 1.5 4.5-4.5 4.5 4.5 1.5-1.5-4.5-4.5 4.5-4.5z' /></svg>");mask:url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='m12.5 2-4.5 4.5-4.5-4.5-1.5 1.5 4.5 4.5-4.5 4.5 1.5 1.5 4.5-4.5 4.5 4.5 1.5-1.5-4.5-4.5 4.5-4.5z' /></svg>")}.iui-avatar.iui-avatar-count>.iui-initials{background-color:var(--iui-color-background);color:var(--iui-color-text-muted)}.iui-avatar.iui-avatar-count>.iui-stroke{box-shadow:inset 0 0 0 var(--iui-size-3xs)var(--iui-color-border)}.iui-avatar.iui-avatar-count:focus{outline:none}.iui-avatar.iui-avatar-count:focus>.iui-stroke{box-shadow:var(--iui-focus-box-shadow)}.iui-avatar.iui-avatar-count:focus-visible{outline:none}.iui-avatar.iui-avatar-count:focus:not(:focus-visible)>.iui-stroke{box-shadow:inset 0 0 0 var(--iui-size-3xs)var(--iui-color-background-transparent-hover)}.iui-avatar.iui-avatar{width:var(--iui-size-xl);height:var(--iui-size-xl);--_iui-avatar-status-size:calc(var(--iui-size-2xs)*1.5)}.iui-avatar.iui-avatar>.iui-initials{line-height:var(--iui-size-xl);font-size:var(--iui-font-size-2)}.iui-avatar.iui-small{width:calc(1.5*var(--iui-size-m));height:calc(1.5*var(--iui-size-m));--_iui-avatar-status-size:var(--iui-size-2xs)}.iui-avatar.iui-small>.iui-initials{line-height:calc(1.5*var(--iui-size-m));font-size:var(--iui-font-size-0)}.iui-avatar.iui-large{width:calc(3*var(--iui-size-m));height:calc(3*var(--iui-size-m));--_iui-avatar-status-size:var(--iui-size-xs)}.iui-avatar.iui-large>.iui-initials{line-height:calc(3*var(--iui-size-m));font-size:var(--iui-font-size-3)}.iui-avatar.iui-x-large{width:var(--iui-size-2xl);height:var(--iui-size-2xl);--_iui-avatar-status-size:var(--iui-size-s)}.iui-avatar.iui-x-large>.iui-initials{line-height:var(--iui-size-2xl);font-size:var(--iui-font-size-4)}.iui-avatar-list{flex-wrap:wrap;display:inline-flex}.iui-avatar-list .iui-avatar:not(:first-child){margin-left:var(--iui-size-2xs)}.iui-avatar-list .iui-avatar:not(:first-child).iui-small{margin-left:var(--iui-size-3xs)}.iui-avatar-list .iui-avatar:not(:first-child).iui-large{margin-left:var(--iui-size-xs)}.iui-avatar-list .iui-avatar:not(:first-child).iui-x-large{margin-left:var(--iui-size-s)}.iui-avatar-list.iui-stacked .iui-avatar:not(:first-child){margin-left:calc(0px - var(--iui-size-2xs))}.iui-avatar-list.iui-stacked .iui-avatar:not(:first-child) .iui-initials{box-shadow:0 0 0 var(--iui-size-2xs)var(--iui-color-background)}.iui-avatar-list.iui-stacked .iui-avatar:not(:first-child).iui-small{margin-left:calc(0px - var(--iui-size-3xs))}.iui-avatar-list.iui-stacked .iui-avatar:not(:first-child).iui-small .iui-initials{box-shadow:0 0 0 var(--iui-size-3xs)var(--iui-color-background)}.iui-avatar-list.iui-stacked .iui-avatar:not(:first-child).iui-large{margin-left:calc(0px - var(--iui-size-xs))}.iui-avatar-list.iui-stacked .iui-avatar:not(:first-child).iui-x-large{margin-left:calc(0px - var(--iui-size-s))}@media (prefers-reduced-motion:no-preference){.iui-avatar-list.iui-stacked.iui-animated .iui-avatar{transition:margin-left var(--iui-duration-2)ease-out}}.iui-avatar-list.iui-stacked.iui-animated:hover .iui-avatar:not(:first-child){margin-left:var(--iui-size-2xs)}.iui-avatar-list.iui-stacked.iui-animated:hover .iui-avatar:not(:first-child).iui-small{margin-left:var(--iui-size-3xs)}.iui-avatar-list.iui-stacked.iui-animated:hover .iui-avatar:not(:first-child).iui-large{margin-left:var(--iui-size-xs)}.iui-avatar-list.iui-stacked.iui-animated:hover .iui-avatar:not(:first-child).iui-x-large{margin-left:var(--iui-size-s)}
package/css/backdrop.css CHANGED
@@ -2,25 +2,4 @@
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-backdrop{
6
- z-index:998;
7
- isolation:isolate;
8
- position:absolute;
9
- top:0;
10
- left:0;
11
- width:100%;
12
- height:100%;
13
- background-color:rgba(0, 0, 0, var(--iui-opacity-4));
14
- transition:visibility var(--iui-duration-0) linear, opacity var(--iui-duration-1) ease-out;
15
- transition-delay:var(--iui-duration-1), var(--iui-duration-0);
16
- }
17
- .iui-backdrop:not(.iui-backdrop-visible){
18
- visibility:hidden;
19
- opacity:0;
20
- }
21
- .iui-backdrop.iui-backdrop-visible{
22
- transition-delay:var(--iui-duration-0);
23
- }
24
- .iui-backdrop.iui-backdrop-fixed{
25
- position:fixed;
26
- }
5
+ .iui-backdrop{z-index:998;isolation:isolate;width:100%;height:100%;background-color:rgba(0,0,0,var(--iui-opacity-4));transition:visibility var(--iui-duration-0)linear,opacity var(--iui-duration-1)ease-out;transition-delay:var(--iui-duration-1),var(--iui-duration-0);position:absolute;top:0;left:0}.iui-backdrop:not(.iui-backdrop-visible){visibility:hidden;opacity:0}.iui-backdrop.iui-backdrop-visible{transition-delay:var(--iui-duration-0)}.iui-backdrop.iui-backdrop-fixed{position:fixed}
package/css/badge.css CHANGED
@@ -2,28 +2,4 @@
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-badge{
6
- --iui-badge-background-color:hsl(210, 10%, 80%);
7
- --_iui-badge-text-color:hsl(0 0% 0% / 0.6);
8
- margin:0;
9
- padding:0;
10
- border:none;
11
- vertical-align:baseline;
12
- display:inline-block;
13
- font-size:var(--iui-font-size-0);
14
- padding:0 calc(var(--iui-size-2xs) * 1.5);
15
- margin:calc(var(--iui-size-s) * 0.5) 0;
16
- border-radius:var(--iui-border-radius-1);
17
- background-color:var(--iui-badge-background-color);
18
- color:var(--_iui-badge-text-color);
19
- text-transform:uppercase;
20
- -webkit-user-select:none;
21
- -moz-user-select:none;
22
- -ms-user-select:none;
23
- user-select:none;
24
- max-width:calc(20ch + var(--iui-size-2xs) * 1.5 * 2);
25
- white-space:nowrap;
26
- overflow:hidden;
27
- text-overflow:ellipsis;
28
- font-weight:var(--iui-font-weight-semibold);
29
- }
5
+ .iui-badge{--iui-badge-background-color:#c7ccd1;--_iui-badge-text-color:#0009;vertical-align:baseline;font-size:var(--iui-font-size-0);padding:0;padding:0 calc(var(--iui-size-2xs)*1.5);margin:0;margin:calc(var(--iui-size-s)*.5)0;border-radius:var(--iui-border-radius-1);background-color:var(--iui-badge-background-color);color:var(--_iui-badge-text-color);text-transform:uppercase;-webkit-user-select:none;user-select:none;max-width:calc(20ch + var(--iui-size-2xs)*1.5*2);white-space:nowrap;text-overflow:ellipsis;font-weight:var(--iui-font-weight-semibold);border:none;display:inline-block;overflow:hidden}
@@ -2,31 +2,4 @@
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-blockquote{
6
- margin:0;
7
- padding:0;
8
- border:none;
9
- vertical-align:baseline;
10
- --iui-surface-background-color:var(--iui-color-background);
11
- --iui-surface-border-color:var(--iui-color-border-subtle);
12
- --iui-surface-border-radius:var(--iui-border-radius-1);
13
- --iui-surface-elevation:var(--iui-shadow-1);
14
- background-color:var(--iui-surface-background-color);
15
- border:1px solid var(--iui-surface-border-color);
16
- border-radius:var(--iui-surface-border-radius);
17
- box-shadow:var(--iui-surface-elevation);
18
- color:var(--iui-color-text);
19
- display:block;
20
- position:relative;
21
- padding:var(--iui-size-s) var(--iui-size-m);
22
- margin:var(--iui-size-s) 0;
23
- text-align:justify;
24
- border-left:var(--iui-size-xs) solid var(--iui-color-border);
25
- }
26
- .iui-blockquote > footer{
27
- text-align:right;
28
- color:var(--iui-color-text-muted);
29
- }
30
- .iui-blockquote > footer > cite{
31
- font-style:normal;
32
- }
5
+ .iui-blockquote{vertical-align:baseline;--iui-surface-background-color:var(--iui-color-background);--iui-surface-border-color:var(--iui-color-border-subtle);--iui-surface-border-radius:var(--iui-border-radius-1);--iui-surface-elevation:var(--iui-shadow-1);background-color:var(--iui-surface-background-color);border:none;border:1px solid var(--iui-surface-border-color);border-radius:var(--iui-surface-border-radius);box-shadow:var(--iui-surface-elevation);color:var(--iui-color-text);padding:0;padding:var(--iui-size-s)var(--iui-size-m);margin:0;margin:var(--iui-size-s)0;text-align:justify;border-left:var(--iui-size-xs)solid var(--iui-color-border);display:block;position:relative}.iui-blockquote>footer{text-align:right;color:var(--iui-color-text-muted)}.iui-blockquote>footer>cite{font-style:normal}