@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/color-picker.css CHANGED
@@ -4,14 +4,13 @@
4
4
  *--------------------------------------------------------------------------------------------*/
5
5
  .iui-color-picker{
6
6
  --iui-color-picker-selected-color:initial;
7
- margin:0;
8
- padding:0;
9
- border:none;
10
- vertical-align:baseline;
11
- box-shadow:0 1px 5px rgba(0, 0, 0, 0.25);
12
- background-color:#FFF;
13
- color:rgba(0, 0, 0, 0.8);
14
- background-color:var(--iui-color-background-1);
7
+ --iui-surface-background-color:var(--iui-color-background-1);
8
+ --iui-surface-border-radius:0;
9
+ --iui-surface-elevation:0 1px 5px rgba(0, 0, 0, 0.25);
10
+ background-color:var(--iui-surface-background-color);
11
+ border-radius:var(--iui-surface-border-radius);
12
+ box-shadow:var(--iui-surface-elevation);
13
+ box-sizing:border-box;
15
14
  color:var(--iui-text-color);
16
15
  box-sizing:border-box;
17
16
  border-radius:3px;
@@ -23,65 +22,95 @@
23
22
  user-select:none;
24
23
  overflow-y:auto;
25
24
  flex-direction:column;
26
- max-height:495px; }
27
- @supports (overflow-y: overlay){
28
- .iui-color-picker{
29
- overflow-y:overlay; } }
30
- @supports (row-gap: 11px){
31
- .iui-color-picker{
32
- row-gap:11px; } }
25
+ max-height:495px;
26
+ }
27
+ @media (forced-colors: active){
28
+ .iui-color-picker{
29
+ border:1px solid transparent;
30
+ }
31
+ }
32
+ @supports (overflow-y: overlay){
33
+ .iui-color-picker{
34
+ overflow-y:overlay;
35
+ }
36
+ }
37
+ @supports (row-gap: 11px){
38
+ .iui-color-picker{
39
+ row-gap:11px;
40
+ }
41
+ }
42
+ .iui-color-picker > div:not(:last-child){
43
+ margin-bottom:11px;
44
+ }
45
+ @supports (row-gap: 11px){
33
46
  .iui-color-picker > div:not(:last-child){
34
- margin-bottom:11px; }
35
- @supports (row-gap: 11px){
36
- .iui-color-picker > div:not(:last-child){
37
- margin-bottom:0; } }
47
+ margin-bottom:0;
48
+ }
49
+ }
38
50
 
39
51
  .iui-color-palette{
40
52
  display:flex;
41
53
  flex-wrap:wrap;
42
54
  align-content:flex-start;
43
55
  min-height:24px;
44
- min-width:24px; }
45
- @supports (gap: 8px){
46
- .iui-color-palette{
47
- gap:8px; } }
48
- .iui-color-palette button.iui-button.iui-borderless{
49
- height:24px;
50
- width:24px;
51
- padding:0; }
52
- .iui-color-palette-wrapper{
53
- max-width:280px; }
54
- .iui-color-palette-wrapper:only-child{
55
- max-width:312px; }
56
+ min-width:24px;
57
+ }
58
+ @supports (gap: 8px){
59
+ .iui-color-palette{
60
+ gap:8px;
61
+ }
62
+ }
63
+ .iui-color-palette button.iui-button.iui-borderless{
64
+ height:24px;
65
+ width:24px;
66
+ padding:0;
67
+ }
68
+ .iui-color-palette-wrapper{
69
+ max-width:280px;
70
+ }
71
+ .iui-color-palette-wrapper:only-child{
72
+ max-width:312px;
73
+ }
56
74
 
57
75
  .iui-color-input{
58
76
  display:flex;
59
- align-items:center; }
60
- .iui-color-input-wrapper{
61
- max-width:280px; }
62
- .iui-color-input .iui-button{
63
- margin-right:4px; }
64
- .iui-color-input-fields{
65
- display:flex;
66
- width:100%;
67
- gap:2px; }
68
- .iui-color-input-fields > *{
69
- flex-grow:1; }
70
- .iui-color-input-fields > *:not(:last-child){
71
- margin-right:2px; }
72
- @supports (gap: 2px){
73
- .iui-color-input-fields > *:not(:last-child){
74
- margin-right:0; } }
75
- .iui-color-input-fields input{
76
- text-transform:uppercase; }
77
- .iui-color-input-fields input[type='number']{
78
- -webkit-appearance:textfield;
79
- -moz-appearance:textfield;
80
- appearance:textfield;
81
- text-align:right; }
82
- .iui-color-input-fields input[type='number']::-webkit-inner-spin-button{
83
- -webkit-appearance:none;
84
- appearance:none; }
77
+ align-items:center;
78
+ }
79
+ .iui-color-input-wrapper{
80
+ max-width:280px;
81
+ }
82
+ .iui-color-input .iui-button{
83
+ margin-right:4px;
84
+ }
85
+ .iui-color-input-fields{
86
+ display:flex;
87
+ width:100%;
88
+ gap:2px;
89
+ }
90
+ .iui-color-input-fields > *{
91
+ flex-grow:1;
92
+ }
93
+ .iui-color-input-fields > *:not(:last-child){
94
+ margin-right:2px;
95
+ }
96
+ @supports (gap: 2px){
97
+ .iui-color-input-fields > *:not(:last-child){
98
+ margin-right:0;
99
+ }
100
+ }
101
+ .iui-color-input-fields input{
102
+ text-transform:uppercase;
103
+ }
104
+ .iui-color-input-fields input[type=number]{
105
+ -webkit-appearance:textfield;
106
+ -moz-appearance:textfield;
107
+ appearance:textfield;
108
+ text-align:right;
109
+ }
110
+ .iui-color-input-fields input[type=number]::-webkit-inner-spin-button{
111
+ -webkit-appearance:none;
112
+ appearance:none;
113
+ }
85
114
 
86
115
  .iui-color-swatch{
87
116
  --iui-color-swatch-background:initial;
@@ -95,47 +124,59 @@
95
124
  background-color:var(--iui-color-swatch-background);
96
125
  background-position:0 0, 8px 8px;
97
126
  background-size:16px 16px;
98
- background-image:repeating-linear-gradient(45deg, #EEF0F3 25%, transparent 25%, transparent 75%, #EEF0F3 75%, #EEF0F3), repeating-linear-gradient(45deg, #EEF0F3 25%, #C7CCD1 25%, #C7CCD1 75%, #EEF0F3 75%, #EEF0F3);
99
- background-image:repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, transparent 25%, transparent 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3)), repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, var(--iui-color-background-5) 25%, var(--iui-color-background-5) 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3)); }
100
- @supports (gap: 8px){
101
- .iui-color-swatch{
102
- margin-bottom:0;
103
- margin-right:0; } }
104
- .iui-color-swatch::after{
105
- content:'';
106
- position:absolute;
107
- left:0;
108
- top:0;
109
- width:inherit;
110
- height:inherit;
111
- border-radius:inherit;
112
- background-color:inherit;
113
- box-shadow:inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
114
- .iui-color-swatch:hover{
115
- box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
116
- .iui-color-swatch:focus-visible{
127
+ background-image:repeating-linear-gradient(45deg, #edeff2 25%, transparent 25%, transparent 75%, #edeff2 75%, #edeff2), repeating-linear-gradient(45deg, #edeff2 25%, #c7ccd1 25%, #c7ccd1 75%, #edeff2 75%, #edeff2);
128
+ background-image:repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, transparent 25%, transparent 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3)), repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, var(--iui-color-background-5) 25%, var(--iui-color-background-5) 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3));
129
+ }
130
+ @supports (gap: 8px){
131
+ .iui-color-swatch{
132
+ margin-bottom:0;
133
+ margin-right:0;
134
+ }
135
+ }
136
+ .iui-color-swatch::after{
137
+ content:"";
138
+ position:absolute;
139
+ left:0;
140
+ top:0;
141
+ width:inherit;
142
+ height:inherit;
143
+ border-radius:inherit;
144
+ background-color:inherit;
145
+ box-shadow:inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
146
+ }
147
+ .iui-color-swatch:hover{
148
+ box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
149
+ }
150
+ .iui-color-swatch:focus-visible{
151
+ outline:2px solid var(--iui-color-foreground-primary);
152
+ outline-offset:1px;
153
+ }
154
+ @supports not selector(*:focus-visible){
155
+ .iui-color-swatch:focus{
117
156
  outline:2px solid var(--iui-color-foreground-primary);
118
- outline-offset:1px; }
119
- @supports not selector(*:focus-visible){
120
- .iui-color-swatch:focus{
121
- outline:2px solid var(--iui-color-foreground-primary);
122
- outline-offset:1px; } }
123
- .iui-color-swatch.iui-active{
124
- box-shadow:0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
125
- .iui-color-swatch.iui-active:hover{
126
- box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), 0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)); }
157
+ outline-offset:1px;
158
+ }
159
+ }
160
+ .iui-color-swatch.iui-active{
161
+ box-shadow:0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
162
+ }
163
+ .iui-color-swatch.iui-active:hover{
164
+ box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), 0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3));
165
+ }
127
166
 
128
167
  .iui-color-picker-section-label{
129
168
  margin-bottom:5.5px;
130
169
  overflow:hidden;
131
170
  text-overflow:ellipsis;
132
171
  white-space:nowrap;
133
- flex-shrink:0; }
172
+ flex-shrink:0;
173
+ }
134
174
 
135
175
  .iui-color-selection-wrapper{
136
176
  display:flex;
137
177
  flex-direction:column;
138
- min-width:280px; }
178
+ min-width:280px;
179
+ }
139
180
 
140
181
  .iui-color-field{
141
182
  --iui-color-field-hue:initial;
@@ -143,33 +184,38 @@
143
184
  cursor:crosshair;
144
185
  width:100%;
145
186
  height:209px;
146
- background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--iui-color-field-hue)); }
147
- .iui-color-field:not(:last-child){
148
- margin-bottom:6px; }
187
+ background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--iui-color-field-hue));
188
+ }
189
+ .iui-color-field:not(:last-child){
190
+ margin-bottom:6px;
191
+ }
149
192
 
150
193
  .iui-hue-slider .iui-slider-rail{
151
194
  height:8px;
152
- background:linear-gradient(to right, #F00 0%, #FF0 17%, lime 33%, cyan 50%, #03F 67%, #C3F 83%, #F00 100%);
153
- background:linear-gradient(to right, #F00 0%, #FF0 17%, lime 33%, cyan 50%, #03F 67%, #C3F 83%, #F00 100%); }
154
-
195
+ background:linear-gradient(to right, #F00 0%, #FF0 17%, lime 33%, aqua 50%, #03F 67%, #C3F 83%, #F00 100%);
196
+ background:linear-gradient(to right, #F00 0%, #FF0 17%, lime 33%, aqua 50%, #03F 67%, #C3F 83%, #F00 100%);
197
+ }
155
198
  .iui-hue-slider .iui-slider-thumb{
156
- top:7px; }
199
+ top:7px;
200
+ }
157
201
 
158
202
  .iui-opacity-slider .iui-slider-rail{
159
203
  height:8px;
160
204
  background-position:0 0, 4px 4px;
161
205
  background-size:8px 8px;
162
- background-image:repeating-linear-gradient(45deg, #EEF0F3 25%, transparent 25%, transparent 75%, #EEF0F3 75%, #EEF0F3), repeating-linear-gradient(45deg, #EEF0F3 25%, #C7CCD1 25%, #C7CCD1 75%, #EEF0F3 75%, #EEF0F3);
163
- background-image:repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, transparent 25%, transparent 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3)), repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, var(--iui-color-background-5) 25%, var(--iui-color-background-5) 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3)); }
164
- .iui-opacity-slider .iui-slider-rail::before{
165
- display:block;
166
- content:'';
167
- width:100%;
168
- height:100%;
169
- background-image:linear-gradient(to right, transparent 0%, var(--iui-color-picker-selected-color) 100%); }
170
-
206
+ background-image:repeating-linear-gradient(45deg, #edeff2 25%, transparent 25%, transparent 75%, #edeff2 75%, #edeff2), repeating-linear-gradient(45deg, #edeff2 25%, #c7ccd1 25%, #c7ccd1 75%, #edeff2 75%, #edeff2);
207
+ background-image:repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, transparent 25%, transparent 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3)), repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, var(--iui-color-background-5) 25%, var(--iui-color-background-5) 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3));
208
+ }
209
+ .iui-opacity-slider .iui-slider-rail::before{
210
+ display:block;
211
+ content:"";
212
+ width:100%;
213
+ height:100%;
214
+ background-image:linear-gradient(to right, transparent 0%, var(--iui-color-picker-selected-color) 100%);
215
+ }
171
216
  .iui-opacity-slider .iui-slider-thumb{
172
- top:7px; }
217
+ top:7px;
218
+ }
173
219
 
174
220
  .iui-color-dot{
175
221
  --iui-color-dot-inset:initial;
@@ -181,13 +227,18 @@
181
227
  transform:translate(-8px, -8px);
182
228
  cursor:crosshair;
183
229
  box-shadow:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-1)) 0 0 0 1px, inset 0 0 0 1px rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-6));
184
- background-color:var(--iui-color-picker-selected-color); }
185
- .iui-color-dot:hover{
186
- box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
187
- .iui-color-dot:focus-visible{
230
+ background-color:var(--iui-color-picker-selected-color);
231
+ }
232
+ .iui-color-dot:hover{
233
+ box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
234
+ }
235
+ .iui-color-dot:focus-visible{
236
+ outline:2px solid var(--iui-color-foreground-primary);
237
+ outline-offset:0;
238
+ }
239
+ @supports not selector(*:focus-visible){
240
+ .iui-color-dot:focus{
188
241
  outline:2px solid var(--iui-color-foreground-primary);
189
- outline-offset:0; }
190
- @supports not selector(*:focus-visible){
191
- .iui-color-dot:focus{
192
- outline:2px solid var(--iui-color-foreground-primary);
193
- outline-offset:0; } }
242
+ outline-offset:0;
243
+ }
244
+ }