@itwin/itwinui-css 0.63.2-dev.0 → 0.63.2-dev.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 (96) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/css/alert.css +250 -248
  3. package/css/all.css +969 -925
  4. package/css/anchor.css +58 -56
  5. package/css/backdrop.css +21 -19
  6. package/css/badge.css +26 -24
  7. package/css/blockquote.css +26 -24
  8. package/css/breadcrumbs.css +384 -382
  9. package/css/button.css +462 -460
  10. package/css/carousel.css +119 -117
  11. package/css/code.css +87 -85
  12. package/css/color-picker.css +221 -219
  13. package/css/date-picker.css +449 -447
  14. package/css/dialog.css +153 -151
  15. package/css/expandable-block.css +209 -207
  16. package/css/fieldset.css +33 -31
  17. package/css/file-upload.css +100 -98
  18. package/css/footer.css +87 -85
  19. package/css/global.css +462 -460
  20. package/css/header.css +484 -482
  21. package/css/icon.css +163 -161
  22. package/css/information-panel.css +190 -188
  23. package/css/inputs.css +1257 -1255
  24. package/css/keyboard.css +34 -32
  25. package/css/location-marker.css +110 -108
  26. package/css/menu.css +168 -166
  27. package/css/non-ideal-state.css +62 -60
  28. package/css/notification-marker.css +246 -244
  29. package/css/popover.css +11 -9
  30. package/css/progress-indicator.css +379 -377
  31. package/css/radio-tile.css +184 -182
  32. package/css/reset-global-styles.css +35 -33
  33. package/css/side-navigation.css +209 -207
  34. package/css/skip-to-content.css +55 -53
  35. package/css/slider.css +240 -238
  36. package/css/surface.css +14 -12
  37. package/css/table.css +710 -708
  38. package/css/tabs.css +339 -337
  39. package/css/tag.css +142 -140
  40. package/css/text.css +102 -100
  41. package/css/tile.css +544 -542
  42. package/css/time-picker.css +125 -123
  43. package/css/toast-notification.css +301 -299
  44. package/css/toggle-switch.css +237 -235
  45. package/css/tooltip.css +53 -51
  46. package/css/tree.css +137 -135
  47. package/css/user-icon.css +242 -240
  48. package/css/wizard.css +182 -180
  49. package/package.json +1 -1
  50. package/scss/alert/classes.scss +7 -5
  51. package/scss/anchor/classes.scss +6 -4
  52. package/scss/backdrop/classes.scss +4 -2
  53. package/scss/badge/classes.scss +4 -2
  54. package/scss/blockquote/classes.scss +4 -2
  55. package/scss/breadcrumbs/classes.scss +22 -20
  56. package/scss/button/classes.scss +47 -45
  57. package/scss/carousel/classes.scss +10 -8
  58. package/scss/classes.scss +46 -50
  59. package/scss/code/classes.scss +7 -5
  60. package/scss/color-picker/classes.scss +40 -38
  61. package/scss/date-picker/classes.scss +44 -42
  62. package/scss/dialog/classes.scss +45 -43
  63. package/scss/expandable-block/classes.scss +4 -2
  64. package/scss/fieldset/classes.scss +4 -2
  65. package/scss/file-upload/classes.scss +4 -2
  66. package/scss/footer/classes.scss +16 -14
  67. package/scss/header/classes.scss +7 -5
  68. package/scss/icon/classes.scss +19 -17
  69. package/scss/information-panel/classes.scss +18 -16
  70. package/scss/inputs/classes.scss +62 -60
  71. package/scss/keyboard/classes.scss +4 -2
  72. package/scss/location-marker/classes.scss +10 -8
  73. package/scss/menu/classes.scss +14 -12
  74. package/scss/non-ideal-state/classes.scss +4 -2
  75. package/scss/notification-marker/classes.scss +5 -3
  76. package/scss/popover/classes.scss +4 -2
  77. package/scss/progress-indicator/classes.scss +22 -20
  78. package/scss/radio-tile/classes.scss +22 -20
  79. package/scss/reset-global-styles.scss +25 -23
  80. package/scss/side-navigation/classes.scss +10 -8
  81. package/scss/skip-to-content/classes.scss +4 -2
  82. package/scss/slider/classes.scss +37 -35
  83. package/scss/style/global.scss +49 -47
  84. package/scss/surface/classes.scss +4 -2
  85. package/scss/table/classes.scss +45 -43
  86. package/scss/tabs/classes.scss +31 -29
  87. package/scss/tag/classes.scss +20 -18
  88. package/scss/text/classes.scss +36 -34
  89. package/scss/tile/classes.scss +36 -34
  90. package/scss/time-picker/classes.scss +11 -9
  91. package/scss/toast-notification/classes.scss +71 -69
  92. package/scss/toggle-switch/classes.scss +7 -5
  93. package/scss/tooltip/classes.scss +17 -15
  94. package/scss/tree/classes.scss +13 -11
  95. package/scss/user-icon/classes.scss +18 -16
  96. package/scss/wizard/classes.scss +18 -16
package/css/user-icon.css CHANGED
@@ -2,245 +2,247 @@
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-user-icon{
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-user-icon > .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-sizing:border-box;
30
- box-shadow:inset 0 0 0 2px rgba(0, 0, 0, 0.1);
31
- box-shadow:inset 0 0 0 2px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
32
- }
33
- .iui-user-icon > .iui-initials{
34
- display:flex;
35
- justify-content:center;
36
- align-items:center;
37
- position:absolute;
38
- left:0;
39
- top:0;
40
- width:100%;
41
- height:100%;
42
- margin:0;
43
- border-radius:50%;
44
- font-style:normal;
45
- font-weight:600;
46
- text-align:center;
47
- text-decoration:none;
48
- text-transform:uppercase;
49
- background-color:#b1c856;
50
- overflow:hidden;
51
- color:white;
52
- color:var(--iui-color-foreground-accessory);
53
- }
54
- .iui-user-icon > .iui-icon{
55
- display:inline-flex;
56
- width:50%;
57
- height:50%;
58
- position:absolute;
59
- fill:white;
60
- fill:var(--iui-color-foreground-accessory);
61
- }
62
- .iui-user-icon > img{
63
- display:block;
64
- position:absolute;
65
- -o-object-fit:cover;
66
- object-fit:cover;
67
- left:0;
68
- top:0;
69
- width:100%;
70
- height:100%;
71
- border-width:0;
72
- border-radius:50%;
73
- background-color:white;
74
- background-color:var(--iui-color-background-1);
75
- }
76
- .iui-user-icon > .iui-status{
77
- display:flex;
78
- align-items:center;
79
- justify-content:center;
80
- position:absolute;
81
- right:-2px;
82
- bottom:-2px;
83
- width:25%;
84
- height:25%;
85
- border-radius:50%;
86
- border:2px solid white;
87
- background-color:#c7ccd1;
88
- border:2px solid var(--iui-color-background-1);
89
- background-color:var(--iui-color-background-5);
90
- }
91
- .iui-user-icon > .iui-status::after{
92
- content:"";
93
- width:var(--_iui-user-icon-status-size, 8px);
94
- height:var(--_iui-user-icon-status-size, 8px);
95
- }
96
- .iui-user-icon > .iui-status.iui-online{
97
- background-color:#53a21a;
98
- background-color:var(--iui-color-background-positive);
99
- }
100
- .iui-user-icon > .iui-status.iui-online::after{
101
- -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>");
102
- 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>");
103
- background-color:white;
104
- background-color:var(--iui-color-foreground-accessory);
105
- }
106
- .iui-user-icon > .iui-status.iui-away{
107
- background-color:#f18d13;
108
- background-color:var(--iui-color-background-warning);
109
- }
110
- .iui-user-icon > .iui-status.iui-away::after{
111
- -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>");
112
- 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>");
113
- background-color:white;
114
- background-color:var(--iui-color-foreground-accessory);
115
- }
116
- .iui-user-icon > .iui-status.iui-busy{
117
- background-color:#d10a0a;
118
- background-color:var(--iui-color-background-negative);
119
- }
120
- .iui-user-icon > .iui-status.iui-busy::after{
121
- -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>");
122
- 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>");
123
- background-color:white;
124
- background-color:var(--iui-color-foreground-accessory);
125
- }
126
- .iui-user-icon > .iui-status.iui-offline{
127
- background-color:white;
128
- box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.6);
129
- background-color:var(--iui-color-background-1);
130
- box-shadow:inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
131
- }
132
- .iui-user-icon > .iui-status.iui-offline::after{
133
- -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>");
134
- 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>");
135
- background-color:rgba(0, 0, 0, 0.4);
136
- background-color:var(--iui-icons-color);
137
- }
138
- .iui-user-icon.iui-user-icon-count > .iui-initials{
139
- background-color:#edeff2;
140
- color:rgba(0, 0, 0, 0.4);
141
- background-color:var(--iui-color-background-3);
142
- color:var(--iui-text-color-muted);
143
- }
144
- .iui-user-icon.iui-user-icon-count:focus{
145
- outline:none;
146
- }
147
- .iui-user-icon.iui-user-icon-count:focus > .iui-stroke{
148
- box-shadow:var(--iui-focus-box-shadow);
149
- }
150
- .iui-user-icon.iui-user-icon-count:focus-visible{
151
- outline:none;
152
- }
153
- .iui-user-icon.iui-user-icon-count:focus:not(:focus-visible) > .iui-stroke{
154
- box-shadow:inset 0 0 0 2px rgba(0, 0, 0, 0.1);
155
- box-shadow:inset 0 0 0 2px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
156
- }
157
- .iui-user-icon.iui-user-icon{
158
- width:32px;
159
- height:32px;
160
- --_iui-user-icon-status-size:6px;
161
- }
162
- .iui-user-icon.iui-user-icon > .iui-initials{
163
- line-height:32px;
164
- font-size:16px;
165
- }
166
- .iui-user-icon.iui-small{
167
- width:24px;
168
- height:24px;
169
- --_iui-user-icon-status-size:12px;
170
- }
171
- .iui-user-icon.iui-small > .iui-initials{
172
- line-height:24px;
173
- font-size:12px;
174
- }
175
- .iui-user-icon.iui-large{
176
- width:48px;
177
- height:48px;
178
- --_iui-user-icon-status-size:8px;
179
- }
180
- .iui-user-icon.iui-large > .iui-initials{
181
- line-height:48px;
182
- font-size:18px;
183
- }
184
- .iui-user-icon.iui-x-large{
185
- width:64px;
186
- height:64px;
187
- --_iui-user-icon-status-size:12px;
188
- }
189
- .iui-user-icon.iui-x-large > .iui-initials{
190
- line-height:64px;
191
- font-size:24px;
192
- }
5
+ @layer itwinui-v1{
6
+ .iui-user-icon{
7
+ margin:0;
8
+ padding:0;
9
+ border:none;
10
+ vertical-align:baseline;
11
+ display:inline-flex;
12
+ align-items:center;
13
+ justify-content:center;
14
+ position:relative;
15
+ margin:0;
16
+ -webkit-user-select:none;
17
+ -moz-user-select:none;
18
+ -ms-user-select:none;
19
+ user-select:none;
20
+ }
21
+ .iui-user-icon > .iui-stroke{
22
+ display:block;
23
+ position:absolute;
24
+ left:0;
25
+ top:0;
26
+ width:100%;
27
+ height:100%;
28
+ margin:0;
29
+ border-radius:50%;
30
+ box-sizing:border-box;
31
+ box-shadow:inset 0 0 0 2px rgba(0, 0, 0, 0.1);
32
+ box-shadow:inset 0 0 0 2px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
33
+ }
34
+ .iui-user-icon > .iui-initials{
35
+ display:flex;
36
+ justify-content:center;
37
+ align-items:center;
38
+ position:absolute;
39
+ left:0;
40
+ top:0;
41
+ width:100%;
42
+ height:100%;
43
+ margin:0;
44
+ border-radius:50%;
45
+ font-style:normal;
46
+ font-weight:600;
47
+ text-align:center;
48
+ text-decoration:none;
49
+ text-transform:uppercase;
50
+ background-color:#b1c856;
51
+ overflow:hidden;
52
+ color:white;
53
+ color:var(--iui-color-foreground-accessory);
54
+ }
55
+ .iui-user-icon > .iui-icon{
56
+ display:inline-flex;
57
+ width:50%;
58
+ height:50%;
59
+ position:absolute;
60
+ fill:white;
61
+ fill:var(--iui-color-foreground-accessory);
62
+ }
63
+ .iui-user-icon > img{
64
+ display:block;
65
+ position:absolute;
66
+ -o-object-fit:cover;
67
+ object-fit:cover;
68
+ left:0;
69
+ top:0;
70
+ width:100%;
71
+ height:100%;
72
+ border-width:0;
73
+ border-radius:50%;
74
+ background-color:white;
75
+ background-color:var(--iui-color-background-1);
76
+ }
77
+ .iui-user-icon > .iui-status{
78
+ display:flex;
79
+ align-items:center;
80
+ justify-content:center;
81
+ position:absolute;
82
+ right:-2px;
83
+ bottom:-2px;
84
+ width:25%;
85
+ height:25%;
86
+ border-radius:50%;
87
+ border:2px solid white;
88
+ background-color:#c7ccd1;
89
+ border:2px solid var(--iui-color-background-1);
90
+ background-color:var(--iui-color-background-5);
91
+ }
92
+ .iui-user-icon > .iui-status::after{
93
+ content:"";
94
+ width:var(--_iui-user-icon-status-size, 8px);
95
+ height:var(--_iui-user-icon-status-size, 8px);
96
+ }
97
+ .iui-user-icon > .iui-status.iui-online{
98
+ background-color:#53a21a;
99
+ background-color:var(--iui-color-background-positive);
100
+ }
101
+ .iui-user-icon > .iui-status.iui-online::after{
102
+ -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>");
103
+ 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>");
104
+ background-color:white;
105
+ background-color:var(--iui-color-foreground-accessory);
106
+ }
107
+ .iui-user-icon > .iui-status.iui-away{
108
+ background-color:#f18d13;
109
+ background-color:var(--iui-color-background-warning);
110
+ }
111
+ .iui-user-icon > .iui-status.iui-away::after{
112
+ -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>");
113
+ 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>");
114
+ background-color:white;
115
+ background-color:var(--iui-color-foreground-accessory);
116
+ }
117
+ .iui-user-icon > .iui-status.iui-busy{
118
+ background-color:#d10a0a;
119
+ background-color:var(--iui-color-background-negative);
120
+ }
121
+ .iui-user-icon > .iui-status.iui-busy::after{
122
+ -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>");
123
+ 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>");
124
+ background-color:white;
125
+ background-color:var(--iui-color-foreground-accessory);
126
+ }
127
+ .iui-user-icon > .iui-status.iui-offline{
128
+ background-color:white;
129
+ box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.6);
130
+ background-color:var(--iui-color-background-1);
131
+ box-shadow:inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
132
+ }
133
+ .iui-user-icon > .iui-status.iui-offline::after{
134
+ -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>");
135
+ 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>");
136
+ background-color:rgba(0, 0, 0, 0.4);
137
+ background-color:var(--iui-icons-color);
138
+ }
139
+ .iui-user-icon.iui-user-icon-count > .iui-initials{
140
+ background-color:#edeff2;
141
+ color:rgba(0, 0, 0, 0.4);
142
+ background-color:var(--iui-color-background-3);
143
+ color:var(--iui-text-color-muted);
144
+ }
145
+ .iui-user-icon.iui-user-icon-count:focus{
146
+ outline:none;
147
+ }
148
+ .iui-user-icon.iui-user-icon-count:focus > .iui-stroke{
149
+ box-shadow:var(--iui-focus-box-shadow);
150
+ }
151
+ .iui-user-icon.iui-user-icon-count:focus-visible{
152
+ outline:none;
153
+ }
154
+ .iui-user-icon.iui-user-icon-count:focus:not(:focus-visible) > .iui-stroke{
155
+ box-shadow:inset 0 0 0 2px rgba(0, 0, 0, 0.1);
156
+ box-shadow:inset 0 0 0 2px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
157
+ }
158
+ .iui-user-icon.iui-user-icon{
159
+ width:32px;
160
+ height:32px;
161
+ --_iui-user-icon-status-size:6px;
162
+ }
163
+ .iui-user-icon.iui-user-icon > .iui-initials{
164
+ line-height:32px;
165
+ font-size:16px;
166
+ }
167
+ .iui-user-icon.iui-small{
168
+ width:24px;
169
+ height:24px;
170
+ --_iui-user-icon-status-size:12px;
171
+ }
172
+ .iui-user-icon.iui-small > .iui-initials{
173
+ line-height:24px;
174
+ font-size:12px;
175
+ }
176
+ .iui-user-icon.iui-large{
177
+ width:48px;
178
+ height:48px;
179
+ --_iui-user-icon-status-size:8px;
180
+ }
181
+ .iui-user-icon.iui-large > .iui-initials{
182
+ line-height:48px;
183
+ font-size:18px;
184
+ }
185
+ .iui-user-icon.iui-x-large{
186
+ width:64px;
187
+ height:64px;
188
+ --_iui-user-icon-status-size:12px;
189
+ }
190
+ .iui-user-icon.iui-x-large > .iui-initials{
191
+ line-height:64px;
192
+ font-size:24px;
193
+ }
193
194
 
194
- .iui-user-icon-list{
195
- display:inline-flex;
196
- flex-wrap:wrap;
197
- }
198
- .iui-user-icon-list .iui-user-icon:not(:first-child){
199
- margin-left:4px;
200
- }
201
- .iui-user-icon-list .iui-user-icon:not(:first-child).iui-small{
202
- margin-left:2px;
203
- }
204
- .iui-user-icon-list .iui-user-icon:not(:first-child).iui-large{
205
- margin-left:8px;
206
- }
207
- .iui-user-icon-list .iui-user-icon:not(:first-child).iui-x-large{
208
- margin-left:12px;
209
- }
210
- .iui-user-icon-list.iui-stacked .iui-user-icon:not(:first-child){
211
- margin-left:-4px;
212
- }
213
- .iui-user-icon-list.iui-stacked .iui-user-icon:not(:first-child) .iui-initials{
214
- box-shadow:0 0 0 4px white;
215
- box-shadow:0 0 0 4px var(--iui-color-background-1);
216
- }
217
- .iui-user-icon-list.iui-stacked .iui-user-icon:not(:first-child).iui-small{
218
- margin-left:-2px;
219
- }
220
- .iui-user-icon-list.iui-stacked .iui-user-icon:not(:first-child).iui-small .iui-initials{
221
- box-shadow:0 0 0 2px white;
222
- box-shadow:0 0 0 2px var(--iui-color-background-1);
223
- }
224
- .iui-user-icon-list.iui-stacked .iui-user-icon:not(:first-child).iui-large{
225
- margin-left:-8px;
226
- }
227
- .iui-user-icon-list.iui-stacked .iui-user-icon:not(:first-child).iui-x-large{
228
- margin-left:-12px;
229
- }
230
- @media (prefers-reduced-motion: no-preference){
231
- .iui-user-icon-list.iui-stacked.iui-animated .iui-user-icon{
232
- transition:margin-left 0.4s ease-out;
233
- }
234
- }
235
- .iui-user-icon-list.iui-stacked.iui-animated:hover .iui-user-icon:not(:first-child){
236
- margin-left:4px;
237
- }
238
- .iui-user-icon-list.iui-stacked.iui-animated:hover .iui-user-icon:not(:first-child).iui-small{
239
- margin-left:2px;
240
- }
241
- .iui-user-icon-list.iui-stacked.iui-animated:hover .iui-user-icon:not(:first-child).iui-large{
242
- margin-left:8px;
243
- }
244
- .iui-user-icon-list.iui-stacked.iui-animated:hover .iui-user-icon:not(:first-child).iui-x-large{
245
- margin-left:12px;
195
+ .iui-user-icon-list{
196
+ display:inline-flex;
197
+ flex-wrap:wrap;
198
+ }
199
+ .iui-user-icon-list .iui-user-icon:not(:first-child){
200
+ margin-left:4px;
201
+ }
202
+ .iui-user-icon-list .iui-user-icon:not(:first-child).iui-small{
203
+ margin-left:2px;
204
+ }
205
+ .iui-user-icon-list .iui-user-icon:not(:first-child).iui-large{
206
+ margin-left:8px;
207
+ }
208
+ .iui-user-icon-list .iui-user-icon:not(:first-child).iui-x-large{
209
+ margin-left:12px;
210
+ }
211
+ .iui-user-icon-list.iui-stacked .iui-user-icon:not(:first-child){
212
+ margin-left:-4px;
213
+ }
214
+ .iui-user-icon-list.iui-stacked .iui-user-icon:not(:first-child) .iui-initials{
215
+ box-shadow:0 0 0 4px white;
216
+ box-shadow:0 0 0 4px var(--iui-color-background-1);
217
+ }
218
+ .iui-user-icon-list.iui-stacked .iui-user-icon:not(:first-child).iui-small{
219
+ margin-left:-2px;
220
+ }
221
+ .iui-user-icon-list.iui-stacked .iui-user-icon:not(:first-child).iui-small .iui-initials{
222
+ box-shadow:0 0 0 2px white;
223
+ box-shadow:0 0 0 2px var(--iui-color-background-1);
224
+ }
225
+ .iui-user-icon-list.iui-stacked .iui-user-icon:not(:first-child).iui-large{
226
+ margin-left:-8px;
227
+ }
228
+ .iui-user-icon-list.iui-stacked .iui-user-icon:not(:first-child).iui-x-large{
229
+ margin-left:-12px;
230
+ }
231
+ @media (prefers-reduced-motion: no-preference){
232
+ .iui-user-icon-list.iui-stacked.iui-animated .iui-user-icon{
233
+ transition:margin-left 0.4s ease-out;
234
+ }
235
+ }
236
+ .iui-user-icon-list.iui-stacked.iui-animated:hover .iui-user-icon:not(:first-child){
237
+ margin-left:4px;
238
+ }
239
+ .iui-user-icon-list.iui-stacked.iui-animated:hover .iui-user-icon:not(:first-child).iui-small{
240
+ margin-left:2px;
241
+ }
242
+ .iui-user-icon-list.iui-stacked.iui-animated:hover .iui-user-icon:not(:first-child).iui-large{
243
+ margin-left:8px;
244
+ }
245
+ .iui-user-icon-list.iui-stacked.iui-animated:hover .iui-user-icon:not(:first-child).iui-x-large{
246
+ margin-left:12px;
247
+ }
246
248
  }