@itwin/itwinui-css 0.63.1 → 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 (95) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/css/alert.css +250 -248
  3. package/css/all.css +9975 -9928
  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/code/classes.scss +7 -5
  59. package/scss/color-picker/classes.scss +40 -38
  60. package/scss/date-picker/classes.scss +44 -42
  61. package/scss/dialog/classes.scss +45 -43
  62. package/scss/expandable-block/classes.scss +4 -2
  63. package/scss/fieldset/classes.scss +4 -2
  64. package/scss/file-upload/classes.scss +4 -2
  65. package/scss/footer/classes.scss +16 -14
  66. package/scss/header/classes.scss +7 -5
  67. package/scss/icon/classes.scss +19 -17
  68. package/scss/information-panel/classes.scss +18 -16
  69. package/scss/inputs/classes.scss +62 -60
  70. package/scss/keyboard/classes.scss +4 -2
  71. package/scss/location-marker/classes.scss +10 -8
  72. package/scss/menu/classes.scss +14 -12
  73. package/scss/non-ideal-state/classes.scss +4 -2
  74. package/scss/notification-marker/classes.scss +5 -3
  75. package/scss/popover/classes.scss +4 -2
  76. package/scss/progress-indicator/classes.scss +22 -20
  77. package/scss/radio-tile/classes.scss +22 -20
  78. package/scss/reset-global-styles.scss +25 -23
  79. package/scss/side-navigation/classes.scss +10 -8
  80. package/scss/skip-to-content/classes.scss +4 -2
  81. package/scss/slider/classes.scss +37 -35
  82. package/scss/style/global.scss +49 -47
  83. package/scss/surface/classes.scss +4 -2
  84. package/scss/table/classes.scss +45 -43
  85. package/scss/tabs/classes.scss +31 -29
  86. package/scss/tag/classes.scss +20 -18
  87. package/scss/text/classes.scss +36 -34
  88. package/scss/tile/classes.scss +36 -34
  89. package/scss/time-picker/classes.scss +11 -9
  90. package/scss/toast-notification/classes.scss +71 -69
  91. package/scss/toggle-switch/classes.scss +7 -5
  92. package/scss/tooltip/classes.scss +17 -15
  93. package/scss/tree/classes.scss +13 -11
  94. package/scss/user-icon/classes.scss +18 -16
  95. package/scss/wizard/classes.scss +18 -16
package/css/slider.css CHANGED
@@ -2,277 +2,279 @@
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-slider-horizontal{
6
- min-height:22px;
7
- }
8
- .iui-slider-horizontal .iui-slider-rail{
9
- width:100%;
10
- height:4px;
11
- top:12px;
12
- }
13
- .iui-slider-horizontal .iui-slider-thumb{
14
- top:5px;
15
- transform:translateX(-50%);
16
- }
17
- .iui-slider-horizontal .iui-slider-track{
18
- height:4px;
19
- left:0;
20
- }
21
- .iui-slider-horizontal .iui-slider-ticks{
22
- padding-top:16px;
23
- }
24
- .iui-slider-horizontal .iui-slider-ticks .iui-slider-tick{
25
- flex-direction:column;
26
- width:1px;
27
- }
28
- .iui-slider-horizontal .iui-slider-ticks .iui-slider-tick::before{
29
- content:"";
30
- width:1px;
31
- height:11px;
32
- }
33
- .iui-slider-horizontal .iui-slider-min,
34
- .iui-slider-horizontal .iui-slider-max{
35
- margin-top:2px;
36
- }
37
- .iui-slider-horizontal .iui-slider-min{
38
- margin-right:12px;
39
- text-align:right;
40
- }
5
+ @layer itwinui-v1{
6
+ .iui-slider-horizontal{
7
+ min-height:22px;
8
+ }
9
+ .iui-slider-horizontal .iui-slider-rail{
10
+ width:100%;
11
+ height:4px;
12
+ top:12px;
13
+ }
14
+ .iui-slider-horizontal .iui-slider-thumb{
15
+ top:5px;
16
+ transform:translateX(-50%);
17
+ }
18
+ .iui-slider-horizontal .iui-slider-track{
19
+ height:4px;
20
+ left:0;
21
+ }
22
+ .iui-slider-horizontal .iui-slider-ticks{
23
+ padding-top:16px;
24
+ }
25
+ .iui-slider-horizontal .iui-slider-ticks .iui-slider-tick{
26
+ flex-direction:column;
27
+ width:1px;
28
+ }
29
+ .iui-slider-horizontal .iui-slider-ticks .iui-slider-tick::before{
30
+ content:"";
31
+ width:1px;
32
+ height:11px;
33
+ }
34
+ .iui-slider-horizontal .iui-slider-min,
41
35
  .iui-slider-horizontal .iui-slider-max{
42
- margin-left:12px;
43
- }
36
+ margin-top:2px;
37
+ }
38
+ .iui-slider-horizontal .iui-slider-min{
39
+ margin-right:12px;
40
+ text-align:right;
41
+ }
42
+ .iui-slider-horizontal .iui-slider-max{
43
+ margin-left:12px;
44
+ }
44
45
 
45
- .iui-slider-vertical{
46
- flex-direction:column-reverse;
47
- min-width:22px;
48
- height:100%;
49
- }
50
- .iui-slider-vertical .iui-slider-rail{
51
- width:4px;
52
- height:100%;
53
- left:12px;
54
- }
55
- .iui-slider-vertical .iui-slider-thumb{
56
- transform:translateY(50%);
57
- left:5px;
58
- }
59
- .iui-slider-vertical .iui-slider-track{
60
- width:4px;
61
- bottom:0;
62
- left:12px;
63
- }
64
- .iui-slider-vertical .iui-slider-ticks{
65
- padding-left:16px;
66
- flex-direction:column-reverse;
67
- align-items:flex-start;
68
- height:100%;
69
- }
70
- .iui-slider-vertical .iui-slider-ticks .iui-slider-tick{
71
- flex:row;
72
- height:1px;
73
- }
74
- .iui-slider-vertical .iui-slider-ticks .iui-slider-tick::before{
75
- content:"";
76
- width:11px;
77
- height:1px;
78
- margin-right:11px;
79
- }
80
- .iui-slider-vertical .iui-slider-min,
81
- .iui-slider-vertical .iui-slider-max{
82
- margin-left:2px;
83
- text-align:center;
84
- }
85
- .iui-slider-vertical .iui-slider-min{
86
- margin-top:12px;
87
- }
46
+ .iui-slider-vertical{
47
+ flex-direction:column-reverse;
48
+ min-width:22px;
49
+ height:100%;
50
+ }
51
+ .iui-slider-vertical .iui-slider-rail{
52
+ width:4px;
53
+ height:100%;
54
+ left:12px;
55
+ }
56
+ .iui-slider-vertical .iui-slider-thumb{
57
+ transform:translateY(50%);
58
+ left:5px;
59
+ }
60
+ .iui-slider-vertical .iui-slider-track{
61
+ width:4px;
62
+ bottom:0;
63
+ left:12px;
64
+ }
65
+ .iui-slider-vertical .iui-slider-ticks{
66
+ padding-left:16px;
67
+ flex-direction:column-reverse;
68
+ align-items:flex-start;
69
+ height:100%;
70
+ }
71
+ .iui-slider-vertical .iui-slider-ticks .iui-slider-tick{
72
+ flex:row;
73
+ height:1px;
74
+ }
75
+ .iui-slider-vertical .iui-slider-ticks .iui-slider-tick::before{
76
+ content:"";
77
+ width:11px;
78
+ height:1px;
79
+ margin-right:11px;
80
+ }
81
+ .iui-slider-vertical .iui-slider-min,
88
82
  .iui-slider-vertical .iui-slider-max{
89
- margin-bottom:12px;
90
- }
83
+ margin-left:2px;
84
+ text-align:center;
85
+ }
86
+ .iui-slider-vertical .iui-slider-min{
87
+ margin-top:12px;
88
+ }
89
+ .iui-slider-vertical .iui-slider-max{
90
+ margin-bottom:12px;
91
+ }
91
92
 
92
- .iui-slider-component-container{
93
- display:flex;
94
- }
95
- .iui-slider-component-container.iui-disabled{
96
- cursor:not-allowed;
97
- }
98
- .iui-slider-component-container.iui-disabled .iui-slider-container{
99
- cursor:not-allowed;
100
- pointer-events:none;
101
- }
102
- .iui-slider-component-container.iui-disabled .iui-slider-thumb{
103
- cursor:not-allowed;
104
- background-color:#dde1e4;
105
- border-color:#dde1e4;
106
- background-color:var(--iui-color-background-4);
107
- border-color:var(--iui-color-background-4);
108
- }
109
- @media (forced-colors: active){
93
+ .iui-slider-component-container{
94
+ display:flex;
95
+ }
96
+ .iui-slider-component-container.iui-disabled{
97
+ cursor:not-allowed;
98
+ }
99
+ .iui-slider-component-container.iui-disabled .iui-slider-container{
100
+ cursor:not-allowed;
101
+ pointer-events:none;
102
+ }
110
103
  .iui-slider-component-container.iui-disabled .iui-slider-thumb{
111
- background-color:GrayText;
112
- border-color:GrayText;
113
- }
114
- }
115
- .iui-slider-component-container.iui-disabled .iui-slider-track{
116
- background-color:rgba(0, 0, 0, 0.4);
117
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
118
- }
119
- @media (forced-colors: active){
104
+ cursor:not-allowed;
105
+ background-color:#dde1e4;
106
+ border-color:#dde1e4;
107
+ background-color:var(--iui-color-background-4);
108
+ border-color:var(--iui-color-background-4);
109
+ }
110
+ @media (forced-colors: active){
111
+ .iui-slider-component-container.iui-disabled .iui-slider-thumb{
112
+ background-color:GrayText;
113
+ border-color:GrayText;
114
+ }
115
+ }
120
116
  .iui-slider-component-container.iui-disabled .iui-slider-track{
121
- background-color:GrayText;
117
+ background-color:rgba(0, 0, 0, 0.4);
118
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
119
+ }
120
+ @media (forced-colors: active){
121
+ .iui-slider-component-container.iui-disabled .iui-slider-track{
122
+ background-color:GrayText;
123
+ }
122
124
  }
123
- }
124
- .iui-slider-component-container.iui-disabled .iui-slider-min,
125
+ .iui-slider-component-container.iui-disabled .iui-slider-min,
125
126
  .iui-slider-component-container.iui-disabled .iui-slider-max,
126
127
  .iui-slider-component-container.iui-disabled .iui-slider-tick{
127
- -webkit-user-select:none;
128
- -moz-user-select:none;
129
- -ms-user-select:none;
130
- user-select:none;
131
- color:rgba(0, 0, 0, 0.4);
132
- color:var(--iui-text-color-muted);
133
- }
134
- @media (forced-colors: active){
135
- .iui-slider-component-container.iui-disabled .iui-slider-min,
128
+ -webkit-user-select:none;
129
+ -moz-user-select:none;
130
+ -ms-user-select:none;
131
+ user-select:none;
132
+ color:rgba(0, 0, 0, 0.4);
133
+ color:var(--iui-text-color-muted);
134
+ }
135
+ @media (forced-colors: active){
136
+ .iui-slider-component-container.iui-disabled .iui-slider-min,
136
137
  .iui-slider-component-container.iui-disabled .iui-slider-max,
137
138
  .iui-slider-component-container.iui-disabled .iui-slider-tick{
138
- color:GrayText;
139
+ color:GrayText;
140
+ }
139
141
  }
140
- }
141
142
 
142
- .iui-slider-container{
143
- position:relative;
144
- flex-grow:1;
145
- cursor:pointer;
146
- touch-action:pan-y;
147
- }
148
- .iui-slider-container.iui-grabbing{
149
- cursor:-webkit-grabbing;
150
- cursor:grabbing;
151
- }
143
+ .iui-slider-container{
144
+ position:relative;
145
+ flex-grow:1;
146
+ cursor:pointer;
147
+ touch-action:pan-y;
148
+ }
149
+ .iui-slider-container.iui-grabbing{
150
+ cursor:-webkit-grabbing;
151
+ cursor:grabbing;
152
+ }
152
153
 
153
- .iui-slider-ticks{
154
- position:relative;
155
- display:flex;
156
- pointer-events:none;
157
- justify-content:space-between;
158
- -webkit-user-select:none;
159
- -moz-user-select:none;
160
- -ms-user-select:none;
161
- user-select:none;
162
- }
163
- .iui-slider-ticks .iui-slider-tick{
164
- position:relative;
165
- display:flex;
166
- pointer-events:none;
167
- justify-content:center;
168
- align-items:center;
169
- }
170
- .iui-slider-ticks .iui-slider-tick::before{
171
- background-color:#dde1e4;
172
- background-color:var(--iui-color-background-4);
173
- }
174
- @media (forced-colors: active){
154
+ .iui-slider-ticks{
155
+ position:relative;
156
+ display:flex;
157
+ pointer-events:none;
158
+ justify-content:space-between;
159
+ -webkit-user-select:none;
160
+ -moz-user-select:none;
161
+ -ms-user-select:none;
162
+ user-select:none;
163
+ }
164
+ .iui-slider-ticks .iui-slider-tick{
165
+ position:relative;
166
+ display:flex;
167
+ pointer-events:none;
168
+ justify-content:center;
169
+ align-items:center;
170
+ }
175
171
  .iui-slider-ticks .iui-slider-tick::before{
176
- background-color:CanvasText;
172
+ background-color:#dde1e4;
173
+ background-color:var(--iui-color-background-4);
174
+ }
175
+ @media (forced-colors: active){
176
+ .iui-slider-ticks .iui-slider-tick::before{
177
+ background-color:CanvasText;
178
+ }
177
179
  }
178
- }
179
180
 
180
- .iui-slider-rail{
181
- position:absolute;
182
- background-color:#c7ccd1;
183
- background-color:var(--iui-color-background-border);
184
- }
185
- @media (forced-colors: active){
186
181
  .iui-slider-rail{
187
- background-color:CanvasText;
182
+ position:absolute;
183
+ background-color:#c7ccd1;
184
+ background-color:var(--iui-color-background-border);
185
+ }
186
+ @media (forced-colors: active){
187
+ .iui-slider-rail{
188
+ background-color:CanvasText;
189
+ }
188
190
  }
189
- }
190
191
 
191
- .iui-slider-thumb{
192
- position:absolute;
193
- height:16px;
194
- width:16px;
195
- border-radius:100%;
196
- z-index:1;
197
- cursor:-webkit-grab;
198
- cursor:grab;
199
- background:white;
200
- border:1px solid #c7ccd1;
201
- background:var(--iui-color-background-1);
202
- border:1px solid var(--iui-color-background-border);
203
- }
204
- .iui-slider-thumb:focus-visible{
205
- outline:2px solid var(--iui-color-foreground-primary);
206
- outline-offset:-1px;
207
- }
208
- @supports not selector(*:focus-visible){
209
- .iui-slider-thumb:focus{
192
+ .iui-slider-thumb{
193
+ position:absolute;
194
+ height:16px;
195
+ width:16px;
196
+ border-radius:100%;
197
+ z-index:1;
198
+ cursor:-webkit-grab;
199
+ cursor:grab;
200
+ background:white;
201
+ border:1px solid #c7ccd1;
202
+ background:var(--iui-color-background-1);
203
+ border:1px solid var(--iui-color-background-border);
204
+ }
205
+ .iui-slider-thumb:focus-visible{
210
206
  outline:2px solid var(--iui-color-foreground-primary);
211
207
  outline-offset:-1px;
212
208
  }
213
- }
214
- @media (forced-colors: active){
215
- .iui-slider-thumb{
216
- background:Canvas;
217
- border:1px solid CanvasText;
218
- }
219
- }
220
- .iui-slider-thumb:active{
221
- cursor:-webkit-grabbing;
222
- cursor:grabbing;
223
- }
209
+ @supports not selector(*:focus-visible){
210
+ .iui-slider-thumb:focus{
211
+ outline:2px solid var(--iui-color-foreground-primary);
212
+ outline-offset:-1px;
213
+ }
214
+ }
215
+ @media (forced-colors: active){
216
+ .iui-slider-thumb{
217
+ background:Canvas;
218
+ border:1px solid CanvasText;
219
+ }
220
+ }
221
+ .iui-slider-thumb:active{
222
+ cursor:-webkit-grabbing;
223
+ cursor:grabbing;
224
+ }
224
225
 
225
- .iui-slider-track{
226
- pointer-events:none;
227
- position:absolute;
228
- top:12px;
229
- background-color:#008ae0;
230
- background-color:var(--iui-color-foreground-primary);
231
- }
232
- @media (forced-colors: active){
233
226
  .iui-slider-track{
234
- background-color:Highlight;
227
+ pointer-events:none;
228
+ position:absolute;
229
+ top:12px;
230
+ background-color:#008ae0;
231
+ background-color:var(--iui-color-foreground-primary);
232
+ }
233
+ @media (forced-colors: active){
234
+ .iui-slider-track{
235
+ background-color:Highlight;
236
+ }
235
237
  }
236
- }
237
238
 
238
- .iui-slider-min,
239
+ .iui-slider-min,
239
240
  .iui-slider-max{
240
- -webkit-user-select:all;
241
- -moz-user-select:all;
242
- user-select:all;
243
- }
244
- .iui-slider-min svg,
245
- .iui-slider-max svg{
246
- fill:rgba(0, 0, 0, 0.4);
247
- fill:var(--iui-icons-color);
248
- display:inline-flex;
249
- width:16px;
250
- height:16px;
251
- margin-top:4px;
252
- }
253
- @media (forced-colors: active){
241
+ -webkit-user-select:all;
242
+ -moz-user-select:all;
243
+ user-select:all;
244
+ }
254
245
  .iui-slider-min svg,
255
246
  .iui-slider-max svg{
256
- fill:CanvasText;
247
+ fill:rgba(0, 0, 0, 0.4);
248
+ fill:var(--iui-icons-color);
249
+ display:inline-flex;
250
+ width:16px;
251
+ height:16px;
252
+ margin-top:4px;
257
253
  }
258
- }
259
- .iui-slider-min svg.iui-informational,
254
+ @media (forced-colors: active){
255
+ .iui-slider-min svg,
256
+ .iui-slider-max svg{
257
+ fill:CanvasText;
258
+ }
259
+ }
260
+ .iui-slider-min svg.iui-informational,
260
261
  .iui-slider-max svg.iui-informational{
261
- fill:#008ae0;
262
- fill:var(--iui-icons-color-primary);
263
- }
264
- .iui-slider-min svg.iui-positive,
262
+ fill:#008ae0;
263
+ fill:var(--iui-icons-color-primary);
264
+ }
265
+ .iui-slider-min svg.iui-positive,
265
266
  .iui-slider-max svg.iui-positive{
266
- fill:#53a21a;
267
- fill:var(--iui-icons-color-positive);
268
- }
269
- .iui-slider-min svg.iui-warning,
267
+ fill:#53a21a;
268
+ fill:var(--iui-icons-color-positive);
269
+ }
270
+ .iui-slider-min svg.iui-warning,
270
271
  .iui-slider-max svg.iui-warning{
271
- fill:#f18d13;
272
- fill:var(--iui-icons-color-warning);
273
- }
274
- .iui-slider-min svg.iui-negative,
272
+ fill:#f18d13;
273
+ fill:var(--iui-icons-color-warning);
274
+ }
275
+ .iui-slider-min svg.iui-negative,
275
276
  .iui-slider-max svg.iui-negative{
276
- fill:#d10a0a;
277
- fill:var(--iui-icons-color-negative);
277
+ fill:#d10a0a;
278
+ fill:var(--iui-icons-color-negative);
279
+ }
278
280
  }
package/css/surface.css CHANGED
@@ -2,18 +2,20 @@
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-surface{
6
- --iui-surface-background-color:var(--iui-color-background-1);
7
- --iui-surface-border-radius:0;
8
- --iui-surface-elevation:0 1px 5px rgba(0, 0, 0, 0.25);
9
- background-color:var(--iui-surface-background-color);
10
- border-radius:var(--iui-surface-border-radius);
11
- box-shadow:var(--iui-surface-elevation);
12
- box-sizing:border-box;
13
- color:var(--iui-text-color);
14
- }
15
- @media (forced-colors: active){
5
+ @layer itwinui-v1{
16
6
  .iui-surface{
17
- border:1px solid transparent;
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;
14
+ color:var(--iui-text-color);
15
+ }
16
+ @media (forced-colors: active){
17
+ .iui-surface{
18
+ border:1px solid transparent;
19
+ }
18
20
  }
19
21
  }