@itwin/itwinui-css 0.50.1 → 0.53.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 (89) hide show
  1. package/css/alert.css +234 -176
  2. package/css/all.css +8324 -5880
  3. package/css/badge.css +3 -2
  4. package/css/blockquote.css +12 -9
  5. package/css/breadcrumbs.css +110 -87
  6. package/css/button.css +441 -345
  7. package/css/carousel.css +110 -91
  8. package/css/code.css +70 -57
  9. package/css/color-picker.css +164 -113
  10. package/css/date-picker.css +454 -80
  11. package/css/expandable-block.css +213 -161
  12. package/css/fieldset.css +25 -21
  13. package/css/file-upload.css +93 -79
  14. package/css/footer.css +64 -53
  15. package/css/global.css +550 -197
  16. package/css/header.css +485 -367
  17. package/css/icon.css +108 -78
  18. package/css/information-panel.css +181 -137
  19. package/css/inputs.css +1137 -945
  20. package/css/keyboard.css +14 -10
  21. package/css/location-marker.css +69 -59
  22. package/css/menu.css +124 -86
  23. package/css/modal.css +114 -44
  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 +316 -238
  28. package/css/reset-global-styles.css +10 -5
  29. package/css/side-navigation.css +193 -144
  30. package/css/skip-to-content.css +42 -28
  31. package/css/slider.css +116 -91
  32. package/css/surface.css +19 -0
  33. package/css/table.css +578 -430
  34. package/css/tabs.css +324 -238
  35. package/css/tag.css +112 -85
  36. package/css/text.css +47 -28
  37. package/css/tile.css +389 -313
  38. package/css/time-picker.css +114 -87
  39. package/css/toast-notification.css +234 -175
  40. package/css/toggle-switch.css +176 -111
  41. package/css/tooltip.css +24 -17
  42. package/css/tree.css +123 -93
  43. package/css/user-icon.css +222 -162
  44. package/css/wizard.css +158 -133
  45. package/package.json +5 -6
  46. package/scss/alert/alert.scss +1 -5
  47. package/scss/carousel/carousel.scss +24 -27
  48. package/scss/classes.scss +1 -0
  49. package/scss/code/codeblock.scss +1 -1
  50. package/scss/color-picker/color-picker.scss +2 -2
  51. package/scss/date-picker/classes.scss +20 -0
  52. package/scss/date-picker/date-picker.scss +194 -33
  53. package/scss/fieldset/fieldset.scss +1 -1
  54. package/scss/header/header.scss +15 -10
  55. package/scss/index.scss +1 -0
  56. package/scss/information-panel/information-panel.scss +10 -3
  57. package/scss/inputs/checkbox.scss +1 -0
  58. package/scss/inputs/labeled-inputs.scss +8 -8
  59. package/scss/inputs/radio.scss +0 -4
  60. package/scss/location-marker/data-rich.scss +1 -1
  61. package/scss/location-marker/me.scss +4 -4
  62. package/scss/menu/classes.scss +2 -1
  63. package/scss/menu/menu.scss +8 -11
  64. package/scss/modal/classes.scss +4 -0
  65. package/scss/modal/modal.scss +82 -7
  66. package/scss/popover/popover.scss +1 -2
  67. package/scss/progress-indicator/linear.scss +3 -11
  68. package/scss/progress-indicator/radial.scss +1 -1
  69. package/scss/side-navigation/side-navigation.scss +5 -5
  70. package/scss/slider/slider.scss +2 -2
  71. package/scss/style/elevation.scss +5 -5
  72. package/scss/style/global.scss +33 -26
  73. package/scss/style/mixins.scss +9 -0
  74. package/scss/style/ripple.scss +1 -1
  75. package/scss/style/speed.scss +1 -0
  76. package/scss/style/theme.scss +248 -65
  77. package/scss/surface/classes.scss +7 -0
  78. package/scss/surface/index.scss +3 -0
  79. package/scss/surface/surface.scss +18 -0
  80. package/scss/table/column-filter.scss +2 -2
  81. package/scss/table/table.scss +26 -17
  82. package/scss/tile/tile.scss +5 -5
  83. package/scss/time-picker/time-picker.scss +2 -2
  84. package/scss/toast-notification/categories.scss +1 -5
  85. package/scss/toggle-switch/classes.scss +4 -0
  86. package/scss/toggle-switch/toggle-switch.scss +141 -162
  87. package/scss/tooltip/tooltip.scss +2 -1
  88. package/scss/user-icon/user-icon.scss +38 -19
  89. package/scss/wizard/wizard.scss +1 -1
package/css/user-icon.css CHANGED
@@ -15,168 +15,228 @@
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: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:66.6666666667%;
94
+ height:66.6666666667%;
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
+ }
161
+ .iui-user-icon.iui-user-icon > .iui-initials{
162
+ line-height:32px;
163
+ font-size:16px;
164
+ }
165
+ .iui-user-icon.iui-small{
166
+ width:24px;
167
+ height:24px;
168
+ }
169
+ .iui-user-icon.iui-small > .iui-initials{
170
+ line-height:24px;
171
+ font-size:12px;
172
+ }
173
+ .iui-user-icon.iui-large{
174
+ width:48px;
175
+ height:48px;
176
+ }
177
+ .iui-user-icon.iui-large > .iui-initials{
178
+ line-height:48px;
179
+ font-size:18px;
180
+ }
181
+ .iui-user-icon.iui-x-large{
182
+ width:64px;
183
+ height:64px;
184
+ }
185
+ .iui-user-icon.iui-x-large > .iui-initials{
186
+ line-height:64px;
187
+ font-size:24px;
188
+ }
146
189
 
147
190
  .iui-user-icon-list{
148
191
  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; }
192
+ flex-wrap:wrap;
193
+ }
194
+ .iui-user-icon-list .iui-user-icon:not(:first-child){
195
+ margin-left:4px;
196
+ }
197
+ .iui-user-icon-list .iui-user-icon:not(:first-child).iui-small{
198
+ margin-left:2px;
199
+ }
200
+ .iui-user-icon-list .iui-user-icon:not(:first-child).iui-large{
201
+ margin-left:8px;
202
+ }
203
+ .iui-user-icon-list .iui-user-icon:not(:first-child).iui-x-large{
204
+ margin-left:12px;
205
+ }
206
+ .iui-user-icon-list.iui-stacked .iui-user-icon:not(:first-child){
207
+ margin-left:-4px;
208
+ }
209
+ .iui-user-icon-list.iui-stacked .iui-user-icon:not(:first-child) .iui-initials{
210
+ box-shadow:0 0 0 4px white;
211
+ box-shadow:0 0 0 4px var(--iui-color-background-1);
212
+ }
213
+ .iui-user-icon-list.iui-stacked .iui-user-icon:not(:first-child).iui-small{
214
+ margin-left:-2px;
215
+ }
216
+ .iui-user-icon-list.iui-stacked .iui-user-icon:not(:first-child).iui-small .iui-initials{
217
+ box-shadow:0 0 0 2px white;
218
+ box-shadow:0 0 0 2px var(--iui-color-background-1);
219
+ }
220
+ .iui-user-icon-list.iui-stacked .iui-user-icon:not(:first-child).iui-large{
221
+ margin-left:-8px;
222
+ }
223
+ .iui-user-icon-list.iui-stacked .iui-user-icon:not(:first-child).iui-x-large{
224
+ margin-left:-12px;
225
+ }
226
+ @media (prefers-reduced-motion: no-preference){
227
+ .iui-user-icon-list.iui-stacked.iui-animated .iui-user-icon{
228
+ transition:margin-left 0.4s ease-out;
229
+ }
230
+ }
231
+ .iui-user-icon-list.iui-stacked.iui-animated:hover .iui-user-icon:not(:first-child){
232
+ margin-left:4px;
233
+ }
234
+ .iui-user-icon-list.iui-stacked.iui-animated:hover .iui-user-icon:not(:first-child).iui-small{
235
+ margin-left:2px;
236
+ }
237
+ .iui-user-icon-list.iui-stacked.iui-animated:hover .iui-user-icon:not(:first-child).iui-large{
238
+ margin-left:8px;
239
+ }
240
+ .iui-user-icon-list.iui-stacked.iui-animated:hover .iui-user-icon:not(:first-child).iui-x-large{
241
+ margin-left:12px;
242
+ }