@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/radio-tile.css CHANGED
@@ -2,216 +2,218 @@
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-radio-tile{
6
- cursor:pointer;
7
- -webkit-tap-highlight-color:rgba(0, 138, 224, 0.1);
8
- -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
9
- }
10
- .iui-radio-tile:first-of-type > .iui-radio-tile-content{
11
- border-radius:4px 0 0 4px;
12
- }
13
- .iui-radio-tile:last-of-type > .iui-radio-tile-content{
14
- border-radius:0 4px 4px 0;
15
- }
16
- .iui-radio-tile:not(:first-of-type) > .iui-radio-tile-content{
17
- margin-left:-1px;
18
- }
5
+ @layer itwinui-v1{
6
+ .iui-radio-tile{
7
+ cursor:pointer;
8
+ -webkit-tap-highlight-color:rgba(0, 138, 224, 0.1);
9
+ -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
10
+ }
11
+ .iui-radio-tile:first-of-type > .iui-radio-tile-content{
12
+ border-radius:4px 0 0 4px;
13
+ }
14
+ .iui-radio-tile:last-of-type > .iui-radio-tile-content{
15
+ border-radius:0 4px 4px 0;
16
+ }
17
+ .iui-radio-tile:not(:first-of-type) > .iui-radio-tile-content{
18
+ margin-left:-1px;
19
+ }
19
20
 
20
- .iui-radio-tile-content{
21
- width:160px;
22
- height:100%;
23
- box-sizing:border-box;
24
- padding:8px;
25
- position:relative;
26
- z-index:1;
27
- border:1px solid rgba(0, 0, 0, 0.4);
28
- background-color:white;
29
- border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
30
- background-color:var(--iui-color-background-1);
31
- }
32
- @media (prefers-reduced-motion: no-preference){
33
21
  .iui-radio-tile-content{
34
- transition:border-color 0.2s ease-out;
35
- }
36
- }
37
- .iui-radio-tile-content:hover{
38
- z-index:2;
39
- border-color:rgba(0, 0, 0, 0.8);
40
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
41
- }
42
- .iui-radio-tile-content:hover .iui-radio-tile-icon{
43
- fill:rgba(0, 0, 0, 0.8);
44
- fill:var(--iui-icons-color-actionable);
45
- }
46
- @media (forced-colors: active){
22
+ width:160px;
23
+ height:100%;
24
+ box-sizing:border-box;
25
+ padding:8px;
26
+ position:relative;
27
+ z-index:1;
28
+ border:1px solid rgba(0, 0, 0, 0.4);
29
+ background-color:white;
30
+ border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
31
+ background-color:var(--iui-color-background-1);
32
+ }
33
+ @media (prefers-reduced-motion: no-preference){
34
+ .iui-radio-tile-content{
35
+ transition:border-color 0.2s ease-out;
36
+ }
37
+ }
38
+ .iui-radio-tile-content:hover{
39
+ z-index:2;
40
+ border-color:rgba(0, 0, 0, 0.8);
41
+ border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
42
+ }
47
43
  .iui-radio-tile-content:hover .iui-radio-tile-icon{
48
- fill:CanvasText;
44
+ fill:rgba(0, 0, 0, 0.8);
45
+ fill:var(--iui-icons-color-actionable);
46
+ }
47
+ @media (forced-colors: active){
48
+ .iui-radio-tile-content:hover .iui-radio-tile-icon{
49
+ fill:CanvasText;
50
+ }
49
51
  }
50
- }
51
52
 
52
- .iui-radio-tile-container{
53
- display:inline-flex;
54
- flex-wrap:wrap;
55
- -webkit-user-select:none;
56
- -moz-user-select:none;
57
- -ms-user-select:none;
58
- user-select:none;
59
- position:relative;
60
- z-index:0;
61
- }
53
+ .iui-radio-tile-container{
54
+ display:inline-flex;
55
+ flex-wrap:wrap;
56
+ -webkit-user-select:none;
57
+ -moz-user-select:none;
58
+ -ms-user-select:none;
59
+ user-select:none;
60
+ position:relative;
61
+ z-index:0;
62
+ }
62
63
 
63
- .iui-radio-tile-input{
64
- width:0;
65
- height:0;
66
- -webkit-appearance:none;
67
- -moz-appearance:none;
68
- appearance:none;
69
- opacity:0;
70
- position:absolute;
71
- }
72
- .iui-radio-tile-input:focus-visible + *{
73
- outline-offset:-4px;
74
- outline:2px solid #008ae0;
75
- outline:2px solid var(--iui-color-foreground-primary);
76
- }
77
- @media (forced-colors: active){
78
- .iui-radio-tile-input:focus-visible + *{
79
- outline-color:Highlight;
64
+ .iui-radio-tile-input{
65
+ width:0;
66
+ height:0;
67
+ -webkit-appearance:none;
68
+ -moz-appearance:none;
69
+ appearance:none;
70
+ opacity:0;
71
+ position:absolute;
80
72
  }
81
- }
82
- @supports not selector(*:focus-visible){
83
- .iui-radio-tile-input:focus + *{
73
+ .iui-radio-tile-input:focus-visible + *{
84
74
  outline-offset:-4px;
85
75
  outline:2px solid #008ae0;
86
76
  outline:2px solid var(--iui-color-foreground-primary);
87
77
  }
88
78
  @media (forced-colors: active){
89
- .iui-radio-tile-input:focus + *{
79
+ .iui-radio-tile-input:focus-visible + *{
90
80
  outline-color:Highlight;
91
81
  }
92
82
  }
93
- }
94
- .iui-radio-tile-input:checked + *{
95
- padding:7px;
96
- z-index:3;
97
- border:2px solid #008ae0;
98
- border:2px solid var(--iui-color-foreground-primary);
99
- }
100
- @media (forced-colors: active){
83
+ @supports not selector(*:focus-visible){
84
+ .iui-radio-tile-input:focus + *{
85
+ outline-offset:-4px;
86
+ outline:2px solid #008ae0;
87
+ outline:2px solid var(--iui-color-foreground-primary);
88
+ }
89
+ @media (forced-colors: active){
90
+ .iui-radio-tile-input:focus + *{
91
+ outline-color:Highlight;
92
+ }
93
+ }
94
+ }
101
95
  .iui-radio-tile-input:checked + *{
102
- border-color:Highlight;
103
- }
104
- }
105
- .iui-radio-tile-input:checked + * .iui-radio-tile-icon{
106
- fill:#008ae0;
107
- fill:var(--iui-icons-color-primary);
108
- }
109
- @media (forced-colors: active){
96
+ padding:7px;
97
+ z-index:3;
98
+ border:2px solid #008ae0;
99
+ border:2px solid var(--iui-color-foreground-primary);
100
+ }
101
+ @media (forced-colors: active){
102
+ .iui-radio-tile-input:checked + *{
103
+ border-color:Highlight;
104
+ }
105
+ }
110
106
  .iui-radio-tile-input:checked + * .iui-radio-tile-icon{
111
- fill:Highlight;
112
- }
113
- }
114
- .iui-radio-tile-input:checked + *::after{
115
- content:"";
116
- width:16px;
117
- height:16px;
118
- position:absolute;
119
- top:8px;
120
- right:8px;
121
- -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6,14L0,8l2-2l4,4l8-8l2,2L6,14z" /></svg>');
122
- mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6,14L0,8l2-2l4,4l8-8l2,2L6,14z" /></svg>');
123
- background-color:#008ae0;
124
- background-color:var(--iui-color-foreground-primary);
125
- }
126
- @media (forced-colors: active){
107
+ fill:#008ae0;
108
+ fill:var(--iui-icons-color-primary);
109
+ }
110
+ @media (forced-colors: active){
111
+ .iui-radio-tile-input:checked + * .iui-radio-tile-icon{
112
+ fill:Highlight;
113
+ }
114
+ }
127
115
  .iui-radio-tile-input:checked + *::after{
128
- background-color:Highlight;
129
- }
130
- }
131
- .iui-radio-tile-input:disabled + *{
132
- cursor:not-allowed;
133
- z-index:0;
134
- border-color:#edeff2;
135
- background-color:#edeff2;
136
- border-color:var(--iui-color-background-disabled);
137
- background-color:var(--iui-color-background-disabled);
138
- }
139
- .iui-radio-tile-input:disabled + *::after{
140
- background-color:rgba(0, 0, 0, 0.2);
141
- background-color:var(--iui-icons-color-actionable-disabled);
142
- }
143
- @media (forced-colors: active){
116
+ content:"";
117
+ width:16px;
118
+ height:16px;
119
+ position:absolute;
120
+ top:8px;
121
+ right:8px;
122
+ -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6,14L0,8l2-2l4,4l8-8l2,2L6,14z" /></svg>');
123
+ mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6,14L0,8l2-2l4,4l8-8l2,2L6,14z" /></svg>');
124
+ background-color:#008ae0;
125
+ background-color:var(--iui-color-foreground-primary);
126
+ }
127
+ @media (forced-colors: active){
128
+ .iui-radio-tile-input:checked + *::after{
129
+ background-color:Highlight;
130
+ }
131
+ }
132
+ .iui-radio-tile-input:disabled + *{
133
+ cursor:not-allowed;
134
+ z-index:0;
135
+ border-color:#edeff2;
136
+ background-color:#edeff2;
137
+ border-color:var(--iui-color-background-disabled);
138
+ background-color:var(--iui-color-background-disabled);
139
+ }
144
140
  .iui-radio-tile-input:disabled + *::after{
145
- background-color:GrayText;
146
- }
147
- }
148
- .iui-radio-tile-input:disabled + * .iui-radio-tile-icon{
149
- filter:grayscale(100%);
150
- fill:rgba(0, 0, 0, 0.2);
151
- fill:var(--iui-icons-color-actionable-disabled);
152
- }
153
- @media (forced-colors: active){
141
+ background-color:rgba(0, 0, 0, 0.2);
142
+ background-color:var(--iui-icons-color-actionable-disabled);
143
+ }
144
+ @media (forced-colors: active){
145
+ .iui-radio-tile-input:disabled + *::after{
146
+ background-color:GrayText;
147
+ }
148
+ }
154
149
  .iui-radio-tile-input:disabled + * .iui-radio-tile-icon{
155
- fill:GrayText;
150
+ filter:grayscale(100%);
151
+ fill:rgba(0, 0, 0, 0.2);
152
+ fill:var(--iui-icons-color-actionable-disabled);
153
+ }
154
+ @media (forced-colors: active){
155
+ .iui-radio-tile-input:disabled + * .iui-radio-tile-icon{
156
+ fill:GrayText;
157
+ }
156
158
  }
157
- }
158
- @media (forced-colors: active){
159
- .iui-radio-tile-input:disabled + * .iui-radio-tile-label,
159
+ @media (forced-colors: active){
160
+ .iui-radio-tile-input:disabled + * .iui-radio-tile-label,
160
161
  .iui-radio-tile-input:disabled + * .iui-radio-tile-sublabel{
161
- color:GrayText;
162
- }
163
- }
164
- .iui-radio-tile-input:disabled + * .iui-radio-tile-label{
165
- color:rgba(0, 0, 0, 0.4);
166
- color:var(--iui-text-color-muted);
167
- }
168
- .iui-radio-tile-input:disabled:checked + *{
169
- z-index:3;
170
- border:2px solid rgba(0, 0, 0, 0.4);
171
- border:2px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
172
- }
173
- @media (forced-colors: active){
162
+ color:GrayText;
163
+ }
164
+ }
165
+ .iui-radio-tile-input:disabled + * .iui-radio-tile-label{
166
+ color:rgba(0, 0, 0, 0.4);
167
+ color:var(--iui-text-color-muted);
168
+ }
174
169
  .iui-radio-tile-input:disabled:checked + *{
175
- border-color:GrayText;
170
+ z-index:3;
171
+ border:2px solid rgba(0, 0, 0, 0.4);
172
+ border:2px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
173
+ }
174
+ @media (forced-colors: active){
175
+ .iui-radio-tile-input:disabled:checked + *{
176
+ border-color:GrayText;
177
+ }
176
178
  }
177
- }
178
179
 
179
- .iui-radio-tile-icon{
180
- width:32px;
181
- height:32px;
182
- display:block;
183
- margin:0 auto;
184
- padding-top:6px;
185
- padding-bottom:11px;
186
- fill:rgba(0, 0, 0, 0.4);
187
- fill:var(--iui-icons-color);
188
- }
189
- @media (prefers-reduced-motion: no-preference){
190
180
  .iui-radio-tile-icon{
191
- transition:fill 0.2s ease-out;
181
+ width:32px;
182
+ height:32px;
183
+ display:block;
184
+ margin:0 auto;
185
+ padding-top:6px;
186
+ padding-bottom:11px;
187
+ fill:rgba(0, 0, 0, 0.4);
188
+ fill:var(--iui-icons-color);
192
189
  }
193
- }
194
- @media (forced-colors: active){
195
- .iui-radio-tile-icon{
196
- fill:CanvasText;
190
+ @media (prefers-reduced-motion: no-preference){
191
+ .iui-radio-tile-icon{
192
+ transition:fill 0.2s ease-out;
193
+ }
194
+ }
195
+ @media (forced-colors: active){
196
+ .iui-radio-tile-icon{
197
+ fill:CanvasText;
198
+ }
197
199
  }
198
- }
199
200
 
200
- .iui-radio-tile-label{
201
- font-size:14px;
202
- font-weight:600;
203
- line-height:22px;
204
- text-align:center;
205
- word-break:break-word;
206
- color:rgba(0, 0, 0, 0.8);
207
- color:var(--iui-text-color);
208
- }
201
+ .iui-radio-tile-label{
202
+ font-size:14px;
203
+ font-weight:600;
204
+ line-height:22px;
205
+ text-align:center;
206
+ word-break:break-word;
207
+ color:rgba(0, 0, 0, 0.8);
208
+ color:var(--iui-text-color);
209
+ }
209
210
 
210
- .iui-radio-tile-sublabel{
211
- font-size:12px;
212
- line-height:15px;
213
- text-align:center;
214
- word-break:break-word;
215
- color:rgba(0, 0, 0, 0.4);
216
- color:var(--iui-text-color-muted);
211
+ .iui-radio-tile-sublabel{
212
+ font-size:12px;
213
+ line-height:15px;
214
+ text-align:center;
215
+ word-break:break-word;
216
+ color:rgba(0, 0, 0, 0.4);
217
+ color:var(--iui-text-color-muted);
218
+ }
217
219
  }
package/css/reset-global-styles.css CHANGED
@@ -2,49 +2,51 @@
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
- html,
5
+ @layer itwinui-v1{
6
+ html,
6
7
  body{
7
- font-family:"Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
8
- margin:0;
9
- padding:0;
10
- border:none;
11
- vertical-align:baseline;
12
- font-size:14px;
13
- font-weight:400;
14
- line-height:22px;
15
- }
8
+ font-family:"Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
9
+ margin:0;
10
+ padding:0;
11
+ border:none;
12
+ vertical-align:baseline;
13
+ font-size:14px;
14
+ font-weight:400;
15
+ line-height:22px;
16
+ }
16
17
 
17
- b,
18
+ b,
18
19
  strong{
19
- font-weight:700;
20
- }
20
+ font-weight:700;
21
+ }
21
22
 
22
- caption,
23
+ caption,
23
24
  small{
24
- margin:0;
25
- padding:0;
26
- border:none;
27
- vertical-align:baseline;
28
- font-size:12px;
29
- font-weight:400;
30
- line-height:22px;
31
- }
25
+ margin:0;
26
+ padding:0;
27
+ border:none;
28
+ vertical-align:baseline;
29
+ font-size:12px;
30
+ font-weight:400;
31
+ line-height:22px;
32
+ }
32
33
 
33
- p{
34
- margin-bottom:22px;
35
- }
34
+ p{
35
+ margin-bottom:22px;
36
+ }
36
37
 
37
- h1,
38
+ h1,
38
39
  h2,
39
40
  h3,
40
41
  h4,
41
42
  h5,
42
43
  h6{
43
- margin:0;
44
- padding:0;
45
- border:none;
46
- vertical-align:baseline;
47
- font-size:14px;
48
- font-weight:400;
49
- line-height:22px;
44
+ margin:0;
45
+ padding:0;
46
+ border:none;
47
+ vertical-align:baseline;
48
+ font-size:14px;
49
+ font-weight:400;
50
+ line-height:22px;
51
+ }
50
52
  }