@itwin/itwinui-css 0.50.1 → 0.51.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (60) hide show
  1. package/css/alert.css +232 -174
  2. package/css/all.css +7242 -5607
  3. package/css/badge.css +2 -1
  4. package/css/blockquote.css +10 -7
  5. package/css/breadcrumbs.css +110 -87
  6. package/css/button.css +441 -345
  7. package/css/carousel.css +119 -88
  8. package/css/code.css +69 -56
  9. package/css/color-picker.css +150 -103
  10. package/css/date-picker.css +73 -55
  11. package/css/expandable-block.css +212 -160
  12. package/css/fieldset.css +22 -18
  13. package/css/file-upload.css +93 -79
  14. package/css/footer.css +64 -53
  15. package/css/global.css +100 -78
  16. package/css/header.css +471 -364
  17. package/css/icon.css +108 -78
  18. package/css/information-panel.css +174 -137
  19. package/css/inputs.css +1134 -942
  20. package/css/keyboard.css +11 -7
  21. package/css/location-marker.css +68 -58
  22. package/css/menu.css +105 -80
  23. package/css/modal.css +54 -43
  24. package/css/non-ideal-state.css +47 -40
  25. package/css/notification-marker.css +275 -200
  26. package/css/popover.css +10 -8
  27. package/css/progress-indicator.css +315 -237
  28. package/css/reset-global-styles.css +10 -5
  29. package/css/side-navigation.css +189 -140
  30. package/css/skip-to-content.css +41 -27
  31. package/css/slider.css +112 -87
  32. package/css/table.css +563 -419
  33. package/css/tabs.css +324 -238
  34. package/css/tag.css +111 -84
  35. package/css/text.css +46 -27
  36. package/css/tile.css +387 -311
  37. package/css/time-picker.css +113 -86
  38. package/css/toast-notification.css +232 -173
  39. package/css/toggle-switch.css +176 -111
  40. package/css/tooltip.css +21 -16
  41. package/css/tree.css +123 -93
  42. package/css/user-icon.css +204 -162
  43. package/css/wizard.css +156 -131
  44. package/package.json +5 -6
  45. package/scss/alert/alert.scss +1 -5
  46. package/scss/carousel/carousel.scss +4 -1
  47. package/scss/code/codeblock.scss +1 -1
  48. package/scss/inputs/checkbox.scss +1 -0
  49. package/scss/inputs/labeled-inputs.scss +8 -8
  50. package/scss/inputs/radio.scss +0 -4
  51. package/scss/location-marker/data-rich.scss +1 -1
  52. package/scss/location-marker/me.scss +4 -4
  53. package/scss/popover/popover.scss +1 -2
  54. package/scss/progress-indicator/linear.scss +2 -10
  55. package/scss/style/global.scss +1 -5
  56. package/scss/style/mixins.scss +9 -0
  57. package/scss/table/table.scss +23 -14
  58. package/scss/toast-notification/categories.scss +1 -5
  59. package/scss/toggle-switch/classes.scss +4 -0
  60. package/scss/toggle-switch/toggle-switch.scss +141 -162
package/css/user-icon.css CHANGED
@@ -15,168 +15,210 @@
15
15
  -webkit-user-select:none;
16
16
  -moz-user-select:none;
17
17
  -ms-user-select:none;
18
- user-select:none; }
19
- .iui-user-icon > .iui-stroke{
20
- display:block;
21
- position:absolute;
22
- left:0;
23
- top:0;
24
- width:100%;
25
- height:100%;
26
- margin:0;
27
- border-radius:50%;
28
- box-sizing:border-box;
29
- box-shadow:inset 0 0 0 2px rgba(0, 0, 0, 0.1);
30
- box-shadow:inset 0 0 0 2px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6)); }
31
- .iui-user-icon > .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:600;
44
- text-align:center;
45
- text-decoration:none;
46
- text-transform:uppercase;
47
- background-color:#b1c856;
48
- overflow:hidden;
49
- color:#FFF;
50
- color:var(--iui-color-foreground-accessory); }
51
- .iui-user-icon > .iui-icon{
52
- display:inline-flex;
53
- width:50%;
54
- height:50%;
55
- position:absolute;
56
- fill:#FFF;
57
- fill:var(--iui-color-foreground-accessory); }
58
- .iui-user-icon > 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:#FFF;
70
- background-color:var(--iui-color-background-1); }
71
- .iui-user-icon > .iui-status{
72
- display:flex;
73
- align-items:center;
74
- justify-content:center;
75
- position:absolute;
76
- right:-2px;
77
- bottom:-2px;
78
- width:25%;
79
- height:25%;
80
- border-radius:50%;
81
- border:2px solid #FFF;
82
- background-color:#FFF;
83
- box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.6);
84
- border:2px solid var(--iui-color-background-1);
85
- background-color:var(--iui-color-background-1);
86
- box-shadow:inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3)); }
87
- .iui-user-icon > .iui-status > .iui-status-symbol{
88
- display:inline-flex;
89
- fill:rgba(0, 0, 0, 0.4);
90
- fill:var(--iui-icons-color);
91
- width:calc(100% / 1.5);
92
- height:calc(100% / 1.5); }
93
- .iui-user-icon > .iui-status.iui-online, .iui-user-icon > .iui-status.iui-away, .iui-user-icon > .iui-status.iui-busy{
94
- box-shadow:none; }
95
- .iui-user-icon > .iui-status.iui-online > .iui-status-symbol, .iui-user-icon > .iui-status.iui-away > .iui-status-symbol, .iui-user-icon > .iui-status.iui-busy > .iui-status-symbol{
96
- fill:#FFF;
97
- fill:var(--iui-color-foreground-accessory); }
98
- .iui-user-icon > .iui-status.iui-online{
99
- background-color:#53A21A;
100
- background-color:var(--iui-color-background-positive); }
101
- .iui-user-icon > .iui-status.iui-away{
102
- background-color:#F18B12;
103
- background-color:var(--iui-color-background-warning); }
104
- .iui-user-icon > .iui-status.iui-busy{
105
- background-color:#D30A0A;
106
- background-color:var(--iui-color-background-negative); }
107
- .iui-user-icon.iui-user-icon-count > .iui-initials{
108
- background-color:#EEF0F3;
109
- color:rgba(0, 0, 0, 0.4);
110
- background-color:var(--iui-color-background-3);
111
- color:var(--iui-text-color-muted); }
112
- .iui-user-icon.iui-user-icon-count:focus{
113
- outline:none; }
114
- .iui-user-icon.iui-user-icon-count:focus > .iui-stroke{
115
- box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
116
- box-shadow:var(--iui-focus-box-shadow); }
117
- .iui-user-icon.iui-user-icon-count:focus-visible{
118
- outline:none; }
119
- .iui-user-icon.iui-user-icon-count:focus:not(:focus-visible) > .iui-stroke{
120
- box-shadow:inset 0 0 0 2px rgba(0, 0, 0, 0.1);
121
- box-shadow:inset 0 0 0 2px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6)); }
122
- .iui-user-icon.iui-user-icon{
123
- width:32px;
124
- height:32px; }
125
- .iui-user-icon.iui-user-icon > .iui-initials{
126
- line-height:32px;
127
- font-size:16px; }
128
- .iui-user-icon.iui-small{
129
- width:24px;
130
- height:24px; }
131
- .iui-user-icon.iui-small > .iui-initials{
132
- line-height:24px;
133
- font-size:12px; }
134
- .iui-user-icon.iui-large{
135
- width:48px;
136
- height:48px; }
137
- .iui-user-icon.iui-large > .iui-initials{
138
- line-height:48px;
139
- font-size:18px; }
140
- .iui-user-icon.iui-x-large{
141
- width:64px;
142
- height:64px; }
143
- .iui-user-icon.iui-x-large > .iui-initials{
144
- line-height:64px;
145
- font-size:24px; }
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:#FFF;
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:#FFF;
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:#FFF;
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 #FFF;
87
+ background-color:#FFF;
88
+ box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.6);
89
+ border:2px solid var(--iui-color-background-1);
90
+ background-color:var(--iui-color-background-1);
91
+ box-shadow:inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
92
+ }
93
+ .iui-user-icon > .iui-status > .iui-status-symbol{
94
+ display:inline-flex;
95
+ fill:rgba(0, 0, 0, 0.4);
96
+ fill:var(--iui-icons-color);
97
+ width:66.6666666667%;
98
+ height:66.6666666667%;
99
+ }
100
+ .iui-user-icon > .iui-status.iui-online, .iui-user-icon > .iui-status.iui-away, .iui-user-icon > .iui-status.iui-busy{
101
+ box-shadow:none;
102
+ }
103
+ .iui-user-icon > .iui-status.iui-online > .iui-status-symbol, .iui-user-icon > .iui-status.iui-away > .iui-status-symbol, .iui-user-icon > .iui-status.iui-busy > .iui-status-symbol{
104
+ fill:#FFF;
105
+ fill:var(--iui-color-foreground-accessory);
106
+ }
107
+ .iui-user-icon > .iui-status.iui-online{
108
+ background-color:#53A21A;
109
+ background-color:var(--iui-color-background-positive);
110
+ }
111
+ .iui-user-icon > .iui-status.iui-away{
112
+ background-color:#F18B12;
113
+ background-color:var(--iui-color-background-warning);
114
+ }
115
+ .iui-user-icon > .iui-status.iui-busy{
116
+ background-color:#D30A0A;
117
+ background-color:var(--iui-color-background-negative);
118
+ }
119
+ .iui-user-icon.iui-user-icon-count > .iui-initials{
120
+ background-color:#EEF0F3;
121
+ color:rgba(0, 0, 0, 0.4);
122
+ background-color:var(--iui-color-background-3);
123
+ color:var(--iui-text-color-muted);
124
+ }
125
+ .iui-user-icon.iui-user-icon-count:focus{
126
+ outline:none;
127
+ }
128
+ .iui-user-icon.iui-user-icon-count:focus > .iui-stroke{
129
+ box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
130
+ box-shadow:var(--iui-focus-box-shadow);
131
+ }
132
+ .iui-user-icon.iui-user-icon-count:focus-visible{
133
+ outline:none;
134
+ }
135
+ .iui-user-icon.iui-user-icon-count:focus:not(:focus-visible) > .iui-stroke{
136
+ box-shadow:inset 0 0 0 2px rgba(0, 0, 0, 0.1);
137
+ box-shadow:inset 0 0 0 2px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
138
+ }
139
+ .iui-user-icon.iui-user-icon{
140
+ width:32px;
141
+ height:32px;
142
+ }
143
+ .iui-user-icon.iui-user-icon > .iui-initials{
144
+ line-height:32px;
145
+ font-size:16px;
146
+ }
147
+ .iui-user-icon.iui-small{
148
+ width:24px;
149
+ height:24px;
150
+ }
151
+ .iui-user-icon.iui-small > .iui-initials{
152
+ line-height:24px;
153
+ font-size:12px;
154
+ }
155
+ .iui-user-icon.iui-large{
156
+ width:48px;
157
+ height:48px;
158
+ }
159
+ .iui-user-icon.iui-large > .iui-initials{
160
+ line-height:48px;
161
+ font-size:18px;
162
+ }
163
+ .iui-user-icon.iui-x-large{
164
+ width:64px;
165
+ height:64px;
166
+ }
167
+ .iui-user-icon.iui-x-large > .iui-initials{
168
+ line-height:64px;
169
+ font-size:24px;
170
+ }
146
171
 
147
172
  .iui-user-icon-list{
148
173
  display:inline-flex;
149
- flex-wrap:wrap; }
150
- .iui-user-icon-list .iui-user-icon:not(:first-child){
151
- margin-left:4px; }
152
- .iui-user-icon-list .iui-user-icon:not(:first-child).iui-small{
153
- margin-left:2px; }
154
- .iui-user-icon-list .iui-user-icon:not(:first-child).iui-large{
155
- margin-left:8px; }
156
- .iui-user-icon-list .iui-user-icon:not(:first-child).iui-x-large{
157
- margin-left:12px; }
158
- .iui-user-icon-list.iui-stacked .iui-user-icon:not(:first-child){
159
- margin-left:-4px; }
160
- .iui-user-icon-list.iui-stacked .iui-user-icon:not(:first-child) .iui-initials{
161
- box-shadow:0 0 0 4px #FFF;
162
- box-shadow:0 0 0 4px var(--iui-color-background-1); }
163
- .iui-user-icon-list.iui-stacked .iui-user-icon:not(:first-child).iui-small{
164
- margin-left:-2px; }
165
- .iui-user-icon-list.iui-stacked .iui-user-icon:not(:first-child).iui-small .iui-initials{
166
- box-shadow:0 0 0 2px #FFF;
167
- box-shadow:0 0 0 2px var(--iui-color-background-1); }
168
- .iui-user-icon-list.iui-stacked .iui-user-icon:not(:first-child).iui-large{
169
- margin-left:-8px; }
170
- .iui-user-icon-list.iui-stacked .iui-user-icon:not(:first-child).iui-x-large{
171
- margin-left:-12px; }
172
- @media (prefers-reduced-motion: no-preference){
173
- .iui-user-icon-list.iui-stacked.iui-animated .iui-user-icon{
174
- transition:margin-left 0.4s ease-out; } }
175
- .iui-user-icon-list.iui-stacked.iui-animated:hover .iui-user-icon:not(:first-child){
176
- margin-left:4px; }
177
- .iui-user-icon-list.iui-stacked.iui-animated:hover .iui-user-icon:not(:first-child).iui-small{
178
- margin-left:2px; }
179
- .iui-user-icon-list.iui-stacked.iui-animated:hover .iui-user-icon:not(:first-child).iui-large{
180
- margin-left:8px; }
181
- .iui-user-icon-list.iui-stacked.iui-animated:hover .iui-user-icon:not(:first-child).iui-x-large{
182
- margin-left:12px; }
174
+ flex-wrap:wrap;
175
+ }
176
+ .iui-user-icon-list .iui-user-icon:not(:first-child){
177
+ margin-left:4px;
178
+ }
179
+ .iui-user-icon-list .iui-user-icon:not(:first-child).iui-small{
180
+ margin-left:2px;
181
+ }
182
+ .iui-user-icon-list .iui-user-icon:not(:first-child).iui-large{
183
+ margin-left:8px;
184
+ }
185
+ .iui-user-icon-list .iui-user-icon:not(:first-child).iui-x-large{
186
+ margin-left:12px;
187
+ }
188
+ .iui-user-icon-list.iui-stacked .iui-user-icon:not(:first-child){
189
+ margin-left:-4px;
190
+ }
191
+ .iui-user-icon-list.iui-stacked .iui-user-icon:not(:first-child) .iui-initials{
192
+ box-shadow:0 0 0 4px #FFF;
193
+ box-shadow:0 0 0 4px var(--iui-color-background-1);
194
+ }
195
+ .iui-user-icon-list.iui-stacked .iui-user-icon:not(:first-child).iui-small{
196
+ margin-left:-2px;
197
+ }
198
+ .iui-user-icon-list.iui-stacked .iui-user-icon:not(:first-child).iui-small .iui-initials{
199
+ box-shadow:0 0 0 2px #FFF;
200
+ box-shadow:0 0 0 2px var(--iui-color-background-1);
201
+ }
202
+ .iui-user-icon-list.iui-stacked .iui-user-icon:not(:first-child).iui-large{
203
+ margin-left:-8px;
204
+ }
205
+ .iui-user-icon-list.iui-stacked .iui-user-icon:not(:first-child).iui-x-large{
206
+ margin-left:-12px;
207
+ }
208
+ @media (prefers-reduced-motion: no-preference){
209
+ .iui-user-icon-list.iui-stacked.iui-animated .iui-user-icon{
210
+ transition:margin-left 0.4s ease-out;
211
+ }
212
+ }
213
+ .iui-user-icon-list.iui-stacked.iui-animated:hover .iui-user-icon:not(:first-child){
214
+ margin-left:4px;
215
+ }
216
+ .iui-user-icon-list.iui-stacked.iui-animated:hover .iui-user-icon:not(:first-child).iui-small{
217
+ margin-left:2px;
218
+ }
219
+ .iui-user-icon-list.iui-stacked.iui-animated:hover .iui-user-icon:not(:first-child).iui-large{
220
+ margin-left:8px;
221
+ }
222
+ .iui-user-icon-list.iui-stacked.iui-animated:hover .iui-user-icon:not(:first-child).iui-x-large{
223
+ margin-left:12px;
224
+ }