@itwin/itwinui-css 1.0.0-dev.10 → 1.0.0-dev.11

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 (11) hide show
  1. package/css/alert.css +2 -3
  2. package/css/all.css +23 -20
  3. package/css/breadcrumbs.css +1 -1
  4. package/css/button.css +2 -3
  5. package/css/dialog.css +2 -0
  6. package/css/input.css +2 -1
  7. package/css/select.css +5 -4
  8. package/css/side-navigation.css +5 -5
  9. package/css/table.css +2 -2
  10. package/css/utils.css +2 -1
  11. package/package.json +1 -1
package/css/alert.css CHANGED
@@ -316,7 +316,7 @@
316
316
  justify-content:center;
317
317
  position:relative;
318
318
  border-radius:var(--iui-border-radius-1);
319
- line-height:var(--iui-size-l);
319
+ line-height:1.2;
320
320
  font-size:var(--iui-font-size-1);
321
321
  font-weight:var(--iui-font-weight-normal);
322
322
  -webkit-user-select:none;
@@ -380,12 +380,11 @@
380
380
  --_iui-button-border-color:transparent;
381
381
  }
382
382
 
383
- .iui-alert-button-icon{
383
+ .iui-alert-button-icon svg{
384
384
  display:flex;
385
385
  flex-shrink:0;
386
386
  width:var(--iui-size-m);
387
387
  height:var(--iui-size-m);
388
388
  transition:fill var(--iui-duration-1) ease-out;
389
389
  fill:currentColor;
390
- margin-block:var(--iui-size-2xs);
391
390
  }
package/css/all.css CHANGED
@@ -1,8 +1,8 @@
1
+ @charset "UTF-8";
1
2
  /*---------------------------------------------------------------------------------------------
2
3
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
3
4
  * See LICENSE.md in the project root for license terms and full copyright notice.
4
5
  *--------------------------------------------------------------------------------------------*/
5
- @charset "UTF-8";
6
6
  :where(.iui-root){
7
7
  color:var(--iui-color-foreground-2);
8
8
  font-size:var(--iui-font-size-1);
@@ -376,7 +376,7 @@
376
376
  justify-content:center;
377
377
  position:relative;
378
378
  border-radius:var(--iui-border-radius-1);
379
- line-height:var(--iui-size-l);
379
+ line-height:1.2;
380
380
  font-size:var(--iui-font-size-1);
381
381
  font-weight:var(--iui-font-weight-normal);
382
382
  -webkit-user-select:none;
@@ -440,14 +440,13 @@
440
440
  --_iui-button-border-color:transparent;
441
441
  }
442
442
 
443
- .iui-alert-button-icon{
443
+ .iui-alert-button-icon svg{
444
444
  display:flex;
445
445
  flex-shrink:0;
446
446
  width:var(--iui-size-m);
447
447
  height:var(--iui-size-m);
448
448
  transition:fill var(--iui-duration-1) ease-out;
449
449
  fill:currentColor;
450
- margin-block:var(--iui-size-2xs);
451
450
  }
452
451
  .iui-anchor{
453
452
  color:var(--iui-color-foreground-primary);
@@ -1093,7 +1092,7 @@ a.iui-breadcrumbs-text:focus{
1093
1092
  justify-content:center;
1094
1093
  position:relative;
1095
1094
  border-radius:var(--iui-border-radius-1);
1096
- line-height:var(--iui-size-l);
1095
+ line-height:1.2;
1097
1096
  font-size:var(--iui-font-size-1);
1098
1097
  font-weight:var(--iui-font-weight-normal);
1099
1098
  -webkit-user-select:none;
@@ -1190,7 +1189,7 @@ a.iui-breadcrumbs-text:focus{
1190
1189
  justify-content:center;
1191
1190
  position:relative;
1192
1191
  border-radius:var(--iui-border-radius-1);
1193
- line-height:var(--iui-size-l);
1192
+ line-height:1.2;
1194
1193
  font-size:var(--iui-font-size-1);
1195
1194
  font-weight:var(--iui-font-weight-normal);
1196
1195
  -webkit-user-select:none;
@@ -1394,14 +1393,13 @@ a.iui-breadcrumbs-text:focus{
1394
1393
  outline-color:var(--iui-color-foreground-primary);
1395
1394
  }
1396
1395
 
1397
- .iui-button-icon{
1396
+ .iui-button-icon svg{
1398
1397
  display:flex;
1399
1398
  flex-shrink:0;
1400
1399
  width:var(--iui-size-m);
1401
1400
  height:var(--iui-size-m);
1402
1401
  transition:fill var(--iui-duration-1) ease-out;
1403
1402
  fill:currentColor;
1404
- margin-block:var(--iui-size-2xs);
1405
1403
  }
1406
1404
 
1407
1405
  .iui-button-dropdown{
@@ -2521,6 +2519,8 @@ a.iui-breadcrumbs-text:focus{
2521
2519
  height:100%;
2522
2520
  pointer-events:none;
2523
2521
  transform:translateX(0);
2522
+ z-index:999;
2523
+ isolation:isolate;
2524
2524
  }
2525
2525
  .iui-dialog-wrapper[data-iui-relative=true]{
2526
2526
  position:absolute;
@@ -3797,7 +3797,8 @@ div.iui-header-breadcrumb-button-icon{
3797
3797
  .iui-end-icon.iui-actionable{
3798
3798
  align-items:center;
3799
3799
  height:calc(100% - 4px);
3800
- margin-right:1px;
3800
+ margin-right:2px;
3801
+ border-radius:var(--iui-border-radius-1);
3801
3802
  padding-inline:calc(var(--iui-size-xs) + 1px);
3802
3803
  cursor:pointer;
3803
3804
  box-sizing:content-box;
@@ -4993,7 +4994,7 @@ div.iui-header-breadcrumb-button-icon{
4993
4994
  justify-content:center;
4994
4995
  position:relative;
4995
4996
  border-radius:var(--iui-border-radius-1);
4996
- line-height:var(--iui-size-l);
4997
+ line-height:1.2;
4997
4998
  font-size:var(--iui-font-size-1);
4998
4999
  font-weight:var(--iui-font-weight-normal);
4999
5000
  -webkit-user-select:none;
@@ -5061,16 +5062,17 @@ div.iui-header-breadcrumb-button-icon{
5061
5062
  }
5062
5063
 
5063
5064
  .iui-select-tag-button-icon{
5065
+ flex-shrink:0;
5066
+ }
5067
+ .iui-select-tag-button-icon svg{
5064
5068
  display:flex;
5065
5069
  flex-shrink:0;
5066
5070
  width:var(--iui-size-m);
5067
5071
  height:var(--iui-size-m);
5068
5072
  transition:fill var(--iui-duration-1) ease-out;
5069
5073
  fill:currentColor;
5070
- margin-block:var(--iui-size-2xs);
5071
- flex-shrink:0;
5072
5074
  }
5073
- .iui-select-button[data-iui-size=small] .iui-select-tag-button-icon{
5075
+ .iui-select-button[data-iui-size=small] .iui-select-tag-button-icon svg{
5074
5076
  display:flex;
5075
5077
  flex-shrink:0;
5076
5078
  width:var(--iui-size-s);
@@ -5161,13 +5163,13 @@ div.iui-header-breadcrumb-button-icon{
5161
5163
  .iui-side-navigation .iui-sidenav-button, .iui-side-navigation .iui-sidenav-button:hover, .iui-side-navigation .iui-sidenav-button[disabled]{
5162
5164
  border-color:var(--iui-color-background-border);
5163
5165
  }
5164
- .iui-side-navigation .iui-sidenav-button > .iui-button-icon:not(.iui-avatar){
5166
+ .iui-side-navigation .iui-sidenav-button > .iui-button-icon:not(.iui-avatar) svg{
5165
5167
  display:flex;
5166
5168
  flex-shrink:0;
5167
5169
  width:calc(1.5 * var(--iui-size-m));
5168
5170
  height:calc(1.5 * var(--iui-size-m));
5169
5171
  }
5170
- .iui-side-navigation .iui-sidenav-button.iui-submenu-open .iui-button-icon{
5172
+ .iui-side-navigation .iui-sidenav-button.iui-submenu-open .iui-button-icon svg{
5171
5173
  fill:var(--iui-color-foreground-primary);
5172
5174
  }
5173
5175
  .iui-side-navigation .iui-sidenav-button[disabled], .iui-side-navigation .iui-sidenav-button:disabled{
@@ -5180,7 +5182,7 @@ div.iui-header-breadcrumb-button-icon{
5180
5182
  border:none;
5181
5183
  border-bottom:1px solid var(--iui-color-background-border);
5182
5184
  }
5183
- .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon{
5185
+ .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon svg{
5184
5186
  display:flex;
5185
5187
  flex-shrink:0;
5186
5188
  width:var(--iui-size-s);
@@ -5188,12 +5190,12 @@ div.iui-header-breadcrumb-button-icon{
5188
5190
  fill:var(--iui-color-foreground-4);
5189
5191
  }
5190
5192
  @media (forced-colors: active){
5191
- .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon{
5193
+ .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon svg{
5192
5194
  fill:CanvasText;
5193
5195
  }
5194
5196
  }
5195
5197
  @media (prefers-reduced-motion: no-preference){
5196
- .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon{
5198
+ .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon svg{
5197
5199
  transition:transform var(--iui-duration-2) ease-out;
5198
5200
  }
5199
5201
  }
@@ -6346,7 +6348,7 @@ div.iui-header-breadcrumb-button-icon{
6346
6348
  justify-content:center;
6347
6349
  position:relative;
6348
6350
  border-radius:var(--iui-border-radius-1);
6349
- line-height:var(--iui-size-l);
6351
+ line-height:1.2;
6350
6352
  font-size:var(--iui-font-size-1);
6351
6353
  font-weight:var(--iui-font-weight-normal);
6352
6354
  -webkit-user-select:none;
@@ -8510,7 +8512,8 @@ label.iui-input-container.iui-disabled{
8510
8512
  .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable{
8511
8513
  align-items:center;
8512
8514
  height:calc(100% - 4px);
8513
- margin-right:1px;
8515
+ margin-right:2px;
8516
+ border-radius:var(--iui-border-radius-1);
8514
8517
  padding-inline:calc(var(--iui-size-xs) + 1px);
8515
8518
  cursor:pointer;
8516
8519
  box-sizing:content-box;
package/css/breadcrumbs.css CHANGED
@@ -290,7 +290,7 @@ a.iui-breadcrumbs-text:focus{
290
290
  justify-content:center;
291
291
  position:relative;
292
292
  border-radius:var(--iui-border-radius-1);
293
- line-height:var(--iui-size-l);
293
+ line-height:1.2;
294
294
  font-size:var(--iui-font-size-1);
295
295
  font-weight:var(--iui-font-weight-normal);
296
296
  -webkit-user-select:none;
package/css/button.css CHANGED
@@ -15,7 +15,7 @@
15
15
  justify-content:center;
16
16
  position:relative;
17
17
  border-radius:var(--iui-border-radius-1);
18
- line-height:var(--iui-size-l);
18
+ line-height:1.2;
19
19
  font-size:var(--iui-font-size-1);
20
20
  font-weight:var(--iui-font-weight-normal);
21
21
  -webkit-user-select:none;
@@ -219,14 +219,13 @@
219
219
  outline-color:var(--iui-color-foreground-primary);
220
220
  }
221
221
 
222
- .iui-button-icon{
222
+ .iui-button-icon svg{
223
223
  display:flex;
224
224
  flex-shrink:0;
225
225
  width:var(--iui-size-m);
226
226
  height:var(--iui-size-m);
227
227
  transition:fill var(--iui-duration-1) ease-out;
228
228
  fill:currentColor;
229
- margin-block:var(--iui-size-2xs);
230
229
  }
231
230
 
232
231
  .iui-button-dropdown{
package/css/dialog.css CHANGED
@@ -11,6 +11,8 @@
11
11
  height:100%;
12
12
  pointer-events:none;
13
13
  transform:translateX(0);
14
+ z-index:999;
15
+ isolation:isolate;
14
16
  }
15
17
  .iui-dialog-wrapper[data-iui-relative=true]{
16
18
  position:absolute;
package/css/input.css CHANGED
@@ -140,7 +140,8 @@
140
140
  .iui-end-icon.iui-actionable{
141
141
  align-items:center;
142
142
  height:calc(100% - 4px);
143
- margin-right:1px;
143
+ margin-right:2px;
144
+ border-radius:var(--iui-border-radius-1);
144
145
  padding-inline:calc(var(--iui-size-xs) + 1px);
145
146
  cursor:pointer;
146
147
  box-sizing:content-box;
package/css/select.css CHANGED
@@ -154,7 +154,7 @@
154
154
  justify-content:center;
155
155
  position:relative;
156
156
  border-radius:var(--iui-border-radius-1);
157
- line-height:var(--iui-size-l);
157
+ line-height:1.2;
158
158
  font-size:var(--iui-font-size-1);
159
159
  font-weight:var(--iui-font-weight-normal);
160
160
  -webkit-user-select:none;
@@ -222,16 +222,17 @@
222
222
  }
223
223
 
224
224
  .iui-select-tag-button-icon{
225
+ flex-shrink:0;
226
+ }
227
+ .iui-select-tag-button-icon svg{
225
228
  display:flex;
226
229
  flex-shrink:0;
227
230
  width:var(--iui-size-m);
228
231
  height:var(--iui-size-m);
229
232
  transition:fill var(--iui-duration-1) ease-out;
230
233
  fill:currentColor;
231
- margin-block:var(--iui-size-2xs);
232
- flex-shrink:0;
233
234
  }
234
- .iui-select-button[data-iui-size=small] .iui-select-tag-button-icon{
235
+ .iui-select-button[data-iui-size=small] .iui-select-tag-button-icon svg{
235
236
  display:flex;
236
237
  flex-shrink:0;
237
238
  width:var(--iui-size-s);
package/css/side-navigation.css CHANGED
@@ -87,13 +87,13 @@
87
87
  .iui-side-navigation .iui-sidenav-button, .iui-side-navigation .iui-sidenav-button:hover, .iui-side-navigation .iui-sidenav-button[disabled]{
88
88
  border-color:var(--iui-color-background-border);
89
89
  }
90
- .iui-side-navigation .iui-sidenav-button > .iui-button-icon:not(.iui-avatar){
90
+ .iui-side-navigation .iui-sidenav-button > .iui-button-icon:not(.iui-avatar) svg{
91
91
  display:flex;
92
92
  flex-shrink:0;
93
93
  width:calc(1.5 * var(--iui-size-m));
94
94
  height:calc(1.5 * var(--iui-size-m));
95
95
  }
96
- .iui-side-navigation .iui-sidenav-button.iui-submenu-open .iui-button-icon{
96
+ .iui-side-navigation .iui-sidenav-button.iui-submenu-open .iui-button-icon svg{
97
97
  fill:var(--iui-color-foreground-primary);
98
98
  }
99
99
  .iui-side-navigation .iui-sidenav-button[disabled], .iui-side-navigation .iui-sidenav-button:disabled{
@@ -106,7 +106,7 @@
106
106
  border:none;
107
107
  border-bottom:1px solid var(--iui-color-background-border);
108
108
  }
109
- .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon{
109
+ .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon svg{
110
110
  display:flex;
111
111
  flex-shrink:0;
112
112
  width:var(--iui-size-s);
@@ -114,12 +114,12 @@
114
114
  fill:var(--iui-color-foreground-4);
115
115
  }
116
116
  @media (forced-colors: active){
117
- .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon{
117
+ .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon svg{
118
118
  fill:CanvasText;
119
119
  }
120
120
  }
121
121
  @media (prefers-reduced-motion: no-preference){
122
- .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon{
122
+ .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon svg{
123
123
  transition:transform var(--iui-duration-2) ease-out;
124
124
  }
125
125
  }
package/css/table.css CHANGED
@@ -1,8 +1,8 @@
1
+ @charset "UTF-8";
1
2
  /*---------------------------------------------------------------------------------------------
2
3
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
3
4
  * See LICENSE.md in the project root for license terms and full copyright notice.
4
5
  *--------------------------------------------------------------------------------------------*/
5
- @charset "UTF-8";
6
6
  .iui-table{
7
7
  margin:0;
8
8
  padding:0;
@@ -604,7 +604,7 @@
604
604
  justify-content:center;
605
605
  position:relative;
606
606
  border-radius:var(--iui-border-radius-1);
607
- line-height:var(--iui-size-l);
607
+ line-height:1.2;
608
608
  font-size:var(--iui-font-size-1);
609
609
  font-weight:var(--iui-font-weight-normal);
610
610
  -webkit-user-select:none;
package/css/utils.css CHANGED
@@ -191,7 +191,8 @@ label.iui-input-container.iui-disabled{
191
191
  .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable{
192
192
  align-items:center;
193
193
  height:calc(100% - 4px);
194
- margin-right:1px;
194
+ margin-right:2px;
195
+ border-radius:var(--iui-border-radius-1);
195
196
  padding-inline:calc(var(--iui-size-xs) + 1px);
196
197
  cursor:pointer;
197
198
  box-sizing:content-box;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itwin/itwinui-css",
3
- "version": "1.0.0-dev.10",
3
+ "version": "1.0.0-dev.11",
4
4
  "author": "Bentley Systems",
5
5
  "license": "MIT",
6
6
  "main": "css/all.css",