@itwin/itwinui-css 1.0.0-dev.5 → 1.0.0-dev.7

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 (7) hide show
  1. package/css/all.css +46 -45
  2. package/css/checkbox.css +3 -1
  3. package/css/dialog.css +4 -6
  4. package/css/radio.css +3 -1
  5. package/css/table.css +17 -11
  6. package/css/tile.css +19 -26
  7. package/package.json +1 -1
package/css/all.css CHANGED
@@ -1722,7 +1722,8 @@ a.iui-breadcrumbs-text:focus{
1722
1722
  gap:var(--iui-size-xs);
1723
1723
  }
1724
1724
  .iui-checkbox-wrapper.iui-loading{
1725
- cursor:wait;
1725
+ cursor:progress;
1726
+ font-style:italic;
1726
1727
  color:var(--iui-color-foreground-4);
1727
1728
  }
1728
1729
  .iui-checkbox-wrapper > .iui-checkbox-label,
@@ -1809,6 +1810,7 @@ a.iui-breadcrumbs-text:focus{
1809
1810
  --_iui-checkbox-unchecked-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m1.70671 12.879 11.17218-11.17219 1.4142 1.4142-11.17218 11.17218zm.99329-1.679 1.1-1.1a5.06317 5.06317 0 0 1 -2-2.1 7.48268 7.48268 0 0 1 6.2-3.5 4.86877 4.86877 0 0 1 1.2.1l1.3-1.3a10.07431 10.07431 0 0 0 -2.5-.3 8.84129 8.84129 0 0 0 -8 5 8.42455 8.42455 0 0 0 2.7 3.2zm10.7-6.4-1.1 1.1a7.08625 7.08625 0 0 1 2 2.1 7.50323 7.50323 0 0 1 -6.2 3.5 8.31665 8.31665 0 0 1 -1.3-.2l-1.3 1.3a8.909 8.909 0 0 0 6.4-.5 9.04344 9.04344 0 0 0 4.1-4.1 9.168 9.168 0 0 0 -2.6-3.2z" /></svg>');
1810
1811
  --_iui-checkbox-border-color:transparent;
1811
1812
  --_iui-checkbox-background-color:transparent;
1813
+ outline-width:1px;
1812
1814
  }
1813
1815
  .iui-checkbox.iui-checkbox-visibility:where(:not(:checked):not(:indeterminate)){
1814
1816
  --_iui-checkbox-svg-color:var(--iui-color-foreground-2);
@@ -2512,7 +2514,7 @@ a.iui-breadcrumbs-text:focus{
2512
2514
  border-color:var(--iui-color-foreground-primary);
2513
2515
  }
2514
2516
  .iui-dialog-wrapper{
2515
- position:relative;
2517
+ position:fixed;
2516
2518
  overflow:hidden;
2517
2519
  top:0;
2518
2520
  left:0;
@@ -2521,6 +2523,9 @@ a.iui-breadcrumbs-text:focus{
2521
2523
  pointer-events:none;
2522
2524
  transform:translateX(0);
2523
2525
  }
2526
+ .iui-dialog-wrapper[data-iui-relative=true]{
2527
+ position:absolute;
2528
+ }
2524
2529
 
2525
2530
  .iui-dialog{
2526
2531
  z-index:999;
@@ -2529,7 +2534,6 @@ a.iui-breadcrumbs-text:focus{
2529
2534
  box-shadow:var(--iui-shadow-5);
2530
2535
  position:fixed;
2531
2536
  padding:var(--iui-size-s) var(--iui-size-m);
2532
- overflow:hidden;
2533
2537
  pointer-events:auto;
2534
2538
  background-color:var(--iui-color-background-1);
2535
2539
  transition:visibility var(--iui-duration-0) linear, opacity var(--iui-duration-1) ease-out;
@@ -2607,10 +2611,6 @@ a.iui-breadcrumbs-text:focus{
2607
2611
  }
2608
2612
 
2609
2613
  .iui-dialog-draggable{
2610
- max-width:100%;
2611
- max-height:100vh;
2612
- min-width:380px;
2613
- min-height:144px;
2614
2614
  display:flex;
2615
2615
  flex-direction:column;
2616
2616
  border:1px solid var(--iui-color-background-border);
@@ -4541,7 +4541,8 @@ div.iui-header-breadcrumb-button-icon{
4541
4541
  gap:var(--iui-size-xs);
4542
4542
  }
4543
4543
  .iui-radio-wrapper.iui-loading{
4544
- cursor:wait;
4544
+ cursor:progress;
4545
+ font-style:italic;
4545
4546
  color:var(--iui-color-foreground-4);
4546
4547
  }
4547
4548
  .iui-radio-wrapper > .iui-checkbox-label,
@@ -4628,6 +4629,7 @@ div.iui-header-breadcrumb-button-icon{
4628
4629
  --_iui-checkbox-unchecked-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m1.70671 12.879 11.17218-11.17219 1.4142 1.4142-11.17218 11.17218zm.99329-1.679 1.1-1.1a5.06317 5.06317 0 0 1 -2-2.1 7.48268 7.48268 0 0 1 6.2-3.5 4.86877 4.86877 0 0 1 1.2.1l1.3-1.3a10.07431 10.07431 0 0 0 -2.5-.3 8.84129 8.84129 0 0 0 -8 5 8.42455 8.42455 0 0 0 2.7 3.2zm10.7-6.4-1.1 1.1a7.08625 7.08625 0 0 1 2 2.1 7.50323 7.50323 0 0 1 -6.2 3.5 8.31665 8.31665 0 0 1 -1.3-.2l-1.3 1.3a8.909 8.909 0 0 0 6.4-.5 9.04344 9.04344 0 0 0 4.1-4.1 9.168 9.168 0 0 0 -2.6-3.2z" /></svg>');
4629
4630
  --_iui-checkbox-border-color:transparent;
4630
4631
  --_iui-checkbox-background-color:transparent;
4632
+ outline-width:1px;
4631
4633
  }
4632
4634
  .iui-radio.iui-checkbox-visibility:where(:not(:checked):not(:indeterminate)){
4633
4635
  --_iui-checkbox-svg-color:var(--iui-color-foreground-2);
@@ -5930,14 +5932,11 @@ div.iui-header-breadcrumb-button-icon{
5930
5932
  .iui-table-body .iui-table-row > .iui-slot > .iui-table-more-options{
5931
5933
  opacity:0;
5932
5934
  }
5933
- .iui-table-body .iui-table-row:where(:hover:not([aria-disabled="true"])) .iui-table-cell{
5934
- background-color:var(--iui-color-background-transparent-hover);
5935
- }
5936
- .iui-table-body .iui-table-row:where(:hover:not([aria-disabled="true"])) > .iui-slot:not([aria-disabled=true]) > .iui-table-more-options{
5935
+ .iui-table-body .iui-table-row:where(:hover, :focus-within) > .iui-slot > .iui-table-more-options{
5937
5936
  opacity:1;
5938
5937
  }
5939
- .iui-table-body .iui-table-row:focus-within > .iui-slot:not([aria-disabled=true]) > .iui-table-more-options{
5940
- opacity:1;
5938
+ .iui-table-body .iui-table-row:where(:hover:not(.iui-loading):not([aria-disabled="true"])) .iui-table-cell{
5939
+ background-color:var(--iui-color-background-transparent-hover);
5941
5940
  }
5942
5941
  @media (prefers-reduced-motion: no-preference){
5943
5942
  .iui-table-body .iui-table-row .iui-table-row-expander > .iui-button-icon{
@@ -6021,14 +6020,13 @@ div.iui-header-breadcrumb-button-icon{
6021
6020
  font-size:var(--iui-font-size-4);
6022
6021
  color:var(--iui-color-foreground-positive);
6023
6022
  }
6023
+ .iui-table-body .iui-table-row.iui-loading,
6024
6024
  .iui-table-body .iui-table-row .iui-table-cell[aria-disabled=true], .iui-table-body .iui-table-row.iui-table-expanded-content[aria-disabled=true]{
6025
- font-style:italic;
6026
- cursor:not-allowed;
6027
6025
  color:var(--iui-color-foreground-4);
6028
6026
  }
6029
- .iui-table-body .iui-table-row .iui-table-cell[aria-disabled=true].iui-slot:hover > .iui-table-more-options, .iui-table-body .iui-table-row.iui-table-expanded-content[aria-disabled=true].iui-slot:hover > .iui-table-more-options{
6030
- opacity:0;
6031
- }
6027
+ .iui-table-body .iui-table-row.iui-loading img,
6028
+ .iui-table-body .iui-table-row.iui-loading svg:not(.iui-radial),
6029
+ .iui-table-body .iui-table-row.iui-loading .iui-avatar,
6032
6030
  .iui-table-body .iui-table-row .iui-table-cell[aria-disabled=true] img,
6033
6031
  .iui-table-body .iui-table-row .iui-table-cell[aria-disabled=true] svg:not(.iui-radial),
6034
6032
  .iui-table-body .iui-table-row .iui-table-cell[aria-disabled=true] .iui-avatar, .iui-table-body .iui-table-row.iui-table-expanded-content[aria-disabled=true] img,
@@ -6036,6 +6034,16 @@ div.iui-header-breadcrumb-button-icon{
6036
6034
  .iui-table-body .iui-table-row.iui-table-expanded-content[aria-disabled=true] .iui-avatar{
6037
6035
  filter:grayscale(100%);
6038
6036
  }
6037
+ .iui-table-body .iui-table-row.iui-loading{
6038
+ font-style:italic;
6039
+ }
6040
+ .iui-table-body .iui-table-row.iui-loading,
6041
+ .iui-table-body .iui-table-row.iui-loading .iui-checkbox{
6042
+ cursor:progress;
6043
+ }
6044
+ .iui-table-body .iui-table-row .iui-table-cell[aria-disabled=true], .iui-table-body .iui-table-row.iui-table-expanded-content[aria-disabled=true]{
6045
+ cursor:not-allowed;
6046
+ }
6039
6047
  .iui-table-body .iui-table-row[data-iui-status=positive] .iui-table-cell:first-of-type,
6040
6048
  .iui-table-body .iui-table-row[data-iui-status=positive] + .iui-table-expanded-content{
6041
6049
  box-shadow:inset var(--iui-size-3xs) 0 0 0 var(--iui-color-foreground-positive);
@@ -7019,6 +7027,8 @@ a.iui-tag-basic:focus-visible{
7019
7027
  margin:0 0 var(--iui-size-l);
7020
7028
  }
7021
7029
  .iui-tile{
7030
+ --_iui-tile-title-text-color:var(--iui-color-foreground-2);
7031
+ --_iui-tile-body-text-color:var(--iui-color-foreground-4);
7022
7032
  margin:0;
7023
7033
  padding:0;
7024
7034
  border:none;
@@ -7134,28 +7144,27 @@ a.iui-tag-basic:focus-visible{
7134
7144
  margin-bottom:0;
7135
7145
  -webkit-line-clamp:2;
7136
7146
  }
7137
- .iui-tile.iui-progress{
7138
- cursor:progress;
7139
- font-style:italic;
7140
- }
7141
- .iui-tile[aria-disabled=true]{
7142
- cursor:not-allowed;
7143
- }
7144
- .iui-tile[aria-disabled=true] .iui-tile-name-label{
7145
- color:var(--iui-color-foreground-4);
7147
+ .iui-tile.iui-loading, .iui-tile[aria-disabled=true]{
7148
+ --_iui-tile-title-text-color:var(--iui-color-foreground-4);
7146
7149
  }
7147
- .iui-tile[aria-disabled=true] .iui-thumbnail-icon,
7150
+ .iui-tile.iui-loading .iui-thumbnail-icon,
7151
+ .iui-tile.iui-loading .iui-tile-thumbnail-picture, .iui-tile[aria-disabled=true] .iui-thumbnail-icon,
7148
7152
  .iui-tile[aria-disabled=true] .iui-tile-thumbnail-picture{
7149
7153
  filter:grayscale(100%);
7150
7154
  }
7151
- .iui-tile[aria-disabled=true]:hover .iui-tile-thumbnail-picture, .iui-tile[aria-disabled=true]:focus-within .iui-tile-thumbnail-picture{
7155
+ .iui-tile.iui-loading:hover .iui-tile-thumbnail-picture, .iui-tile.iui-loading:focus-within .iui-tile-thumbnail-picture, .iui-tile[aria-disabled=true]:hover .iui-tile-thumbnail-picture, .iui-tile[aria-disabled=true]:focus-within .iui-tile-thumbnail-picture{
7152
7156
  transform:none;
7153
7157
  }
7154
- .iui-tile[aria-disabled=true] .iui-tile-more-options{
7155
- display:none;
7158
+ .iui-tile.iui-loading{
7159
+ cursor:progress;
7160
+ font-style:italic;
7161
+ }
7162
+ .iui-tile[aria-disabled=true]{
7163
+ cursor:not-allowed;
7156
7164
  }
7157
7165
  .iui-tile.iui-positive{
7158
7166
  --_iui-tile-status-icon-fill:var(--iui-color-foreground-positive);
7167
+ --_iui-tile-title-text-color:var(--iui-color-foreground-positive);
7159
7168
  }
7160
7169
  .iui-tile.iui-positive::-moz-selection, .iui-tile.iui-positive *::-moz-selection{
7161
7170
  background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
@@ -7171,11 +7180,9 @@ a.iui-tag-basic:focus-visible{
7171
7180
  box-shadow:var(--iui-size-2xs) 0 0 var(--iui-color-foreground-positive);
7172
7181
  }
7173
7182
 
7174
- .iui-tile.iui-positive .iui-tile-name-label{
7175
- color:var(--iui-color-foreground-positive);
7176
- }
7177
7183
  .iui-tile.iui-warning{
7178
7184
  --_iui-tile-status-icon-fill:var(--iui-color-foreground-warning);
7185
+ --_iui-tile-title-text-color:var(--iui-color-foreground-warning);
7179
7186
  }
7180
7187
  .iui-tile.iui-warning::-moz-selection, .iui-tile.iui-warning *::-moz-selection{
7181
7188
  background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
@@ -7191,11 +7198,9 @@ a.iui-tag-basic:focus-visible{
7191
7198
  box-shadow:var(--iui-size-2xs) 0 0 var(--iui-color-foreground-warning);
7192
7199
  }
7193
7200
 
7194
- .iui-tile.iui-warning .iui-tile-name-label{
7195
- color:var(--iui-color-foreground-warning);
7196
- }
7197
7201
  .iui-tile.iui-negative{
7198
7202
  --_iui-tile-status-icon-fill:var(--iui-color-foreground-negative);
7203
+ --_iui-tile-title-text-color:var(--iui-color-foreground-negative);
7199
7204
  }
7200
7205
  .iui-tile.iui-negative::-moz-selection, .iui-tile.iui-negative *::-moz-selection{
7201
7206
  background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
@@ -7211,10 +7216,6 @@ a.iui-tag-basic:focus-visible{
7211
7216
  box-shadow:var(--iui-size-2xs) 0 0 var(--iui-color-foreground-negative);
7212
7217
  }
7213
7218
 
7214
- .iui-tile.iui-negative .iui-tile-name-label{
7215
- color:var(--iui-color-foreground-negative);
7216
- }
7217
-
7218
7219
  .iui-tile-thumbnail-type-indicator{
7219
7220
  --_iui-button-text-color:var(--iui-color-foreground-2);
7220
7221
  --_iui-button-background-color:transparent;
@@ -7436,7 +7437,7 @@ div.iui-tile-thumbnail-picture{
7436
7437
  -moz-user-select:all;
7437
7438
  user-select:all;
7438
7439
  margin-bottom:calc(var(--iui-size-s) * 0.5);
7439
- color:var(--iui-color-foreground-2);
7440
+ color:var(--_iui-tile-title-text-color);
7440
7441
  }
7441
7442
  .iui-tile-content .iui-tile-status-icon{
7442
7443
  display:flex;
@@ -7461,7 +7462,7 @@ div.iui-tile-thumbnail-picture{
7461
7462
  display:-webkit-box;
7462
7463
  -webkit-line-clamp:3;
7463
7464
  -webkit-box-orient:vertical;
7464
- color:var(--iui-color-foreground-4);
7465
+ color:var(--_iui-tile-body-text-color);
7465
7466
  }
7466
7467
  .iui-tile-content .iui-tile-metadata{
7467
7468
  font-size:var(--iui-font-size-0);
@@ -7473,7 +7474,7 @@ div.iui-tile-thumbnail-picture{
7473
7474
  display:flex;
7474
7475
  align-items:center;
7475
7476
  margin-top:auto;
7476
- color:var(--iui-color-foreground-4);
7477
+ color:var(--_iui-tile-body-text-color);
7477
7478
  }
7478
7479
  .iui-tile-content .iui-tile-metadata > svg,
7479
7480
  .iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon{
package/css/checkbox.css CHANGED
@@ -44,7 +44,8 @@
44
44
  gap:var(--iui-size-xs);
45
45
  }
46
46
  .iui-checkbox-wrapper.iui-loading{
47
- cursor:wait;
47
+ cursor:progress;
48
+ font-style:italic;
48
49
  color:var(--iui-color-foreground-4);
49
50
  }
50
51
  .iui-checkbox-wrapper > .iui-checkbox-label,
@@ -131,6 +132,7 @@
131
132
  --_iui-checkbox-unchecked-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m1.70671 12.879 11.17218-11.17219 1.4142 1.4142-11.17218 11.17218zm.99329-1.679 1.1-1.1a5.06317 5.06317 0 0 1 -2-2.1 7.48268 7.48268 0 0 1 6.2-3.5 4.86877 4.86877 0 0 1 1.2.1l1.3-1.3a10.07431 10.07431 0 0 0 -2.5-.3 8.84129 8.84129 0 0 0 -8 5 8.42455 8.42455 0 0 0 2.7 3.2zm10.7-6.4-1.1 1.1a7.08625 7.08625 0 0 1 2 2.1 7.50323 7.50323 0 0 1 -6.2 3.5 8.31665 8.31665 0 0 1 -1.3-.2l-1.3 1.3a8.909 8.909 0 0 0 6.4-.5 9.04344 9.04344 0 0 0 4.1-4.1 9.168 9.168 0 0 0 -2.6-3.2z" /></svg>');
132
133
  --_iui-checkbox-border-color:transparent;
133
134
  --_iui-checkbox-background-color:transparent;
135
+ outline-width:1px;
134
136
  }
135
137
  .iui-checkbox.iui-checkbox-visibility:where(:not(:checked):not(:indeterminate)){
136
138
  --_iui-checkbox-svg-color:var(--iui-color-foreground-2);
package/css/dialog.css CHANGED
@@ -3,7 +3,7 @@
3
3
  * See LICENSE.md in the project root for license terms and full copyright notice.
4
4
  *--------------------------------------------------------------------------------------------*/
5
5
  .iui-dialog-wrapper{
6
- position:relative;
6
+ position:fixed;
7
7
  overflow:hidden;
8
8
  top:0;
9
9
  left:0;
@@ -12,6 +12,9 @@
12
12
  pointer-events:none;
13
13
  transform:translateX(0);
14
14
  }
15
+ .iui-dialog-wrapper[data-iui-relative=true]{
16
+ position:absolute;
17
+ }
15
18
 
16
19
  .iui-dialog{
17
20
  z-index:999;
@@ -20,7 +23,6 @@
20
23
  box-shadow:var(--iui-shadow-5);
21
24
  position:fixed;
22
25
  padding:var(--iui-size-s) var(--iui-size-m);
23
- overflow:hidden;
24
26
  pointer-events:auto;
25
27
  background-color:var(--iui-color-background-1);
26
28
  transition:visibility var(--iui-duration-0) linear, opacity var(--iui-duration-1) ease-out;
@@ -98,10 +100,6 @@
98
100
  }
99
101
 
100
102
  .iui-dialog-draggable{
101
- max-width:100%;
102
- max-height:100vh;
103
- min-width:380px;
104
- min-height:144px;
105
103
  display:flex;
106
104
  flex-direction:column;
107
105
  border:1px solid var(--iui-color-background-border);
package/css/radio.css CHANGED
@@ -45,7 +45,8 @@
45
45
  gap:var(--iui-size-xs);
46
46
  }
47
47
  .iui-radio-wrapper.iui-loading{
48
- cursor:wait;
48
+ cursor:progress;
49
+ font-style:italic;
49
50
  color:var(--iui-color-foreground-4);
50
51
  }
51
52
  .iui-radio-wrapper > .iui-checkbox-label,
@@ -132,6 +133,7 @@
132
133
  --_iui-checkbox-unchecked-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m1.70671 12.879 11.17218-11.17219 1.4142 1.4142-11.17218 11.17218zm.99329-1.679 1.1-1.1a5.06317 5.06317 0 0 1 -2-2.1 7.48268 7.48268 0 0 1 6.2-3.5 4.86877 4.86877 0 0 1 1.2.1l1.3-1.3a10.07431 10.07431 0 0 0 -2.5-.3 8.84129 8.84129 0 0 0 -8 5 8.42455 8.42455 0 0 0 2.7 3.2zm10.7-6.4-1.1 1.1a7.08625 7.08625 0 0 1 2 2.1 7.50323 7.50323 0 0 1 -6.2 3.5 8.31665 8.31665 0 0 1 -1.3-.2l-1.3 1.3a8.909 8.909 0 0 0 6.4-.5 9.04344 9.04344 0 0 0 4.1-4.1 9.168 9.168 0 0 0 -2.6-3.2z" /></svg>');
133
134
  --_iui-checkbox-border-color:transparent;
134
135
  --_iui-checkbox-background-color:transparent;
136
+ outline-width:1px;
135
137
  }
136
138
  .iui-radio.iui-checkbox-visibility:where(:not(:checked):not(:indeterminate)){
137
139
  --_iui-checkbox-svg-color:var(--iui-color-foreground-2);
package/css/table.css CHANGED
@@ -189,14 +189,11 @@
189
189
  .iui-table-body .iui-table-row > .iui-slot > .iui-table-more-options{
190
190
  opacity:0;
191
191
  }
192
- .iui-table-body .iui-table-row:where(:hover:not([aria-disabled="true"])) .iui-table-cell{
193
- background-color:var(--iui-color-background-transparent-hover);
194
- }
195
- .iui-table-body .iui-table-row:where(:hover:not([aria-disabled="true"])) > .iui-slot:not([aria-disabled=true]) > .iui-table-more-options{
192
+ .iui-table-body .iui-table-row:where(:hover, :focus-within) > .iui-slot > .iui-table-more-options{
196
193
  opacity:1;
197
194
  }
198
- .iui-table-body .iui-table-row:focus-within > .iui-slot:not([aria-disabled=true]) > .iui-table-more-options{
199
- opacity:1;
195
+ .iui-table-body .iui-table-row:where(:hover:not(.iui-loading):not([aria-disabled="true"])) .iui-table-cell{
196
+ background-color:var(--iui-color-background-transparent-hover);
200
197
  }
201
198
  @media (prefers-reduced-motion: no-preference){
202
199
  .iui-table-body .iui-table-row .iui-table-row-expander > .iui-button-icon{
@@ -280,14 +277,13 @@
280
277
  font-size:var(--iui-font-size-4);
281
278
  color:var(--iui-color-foreground-positive);
282
279
  }
280
+ .iui-table-body .iui-table-row.iui-loading,
283
281
  .iui-table-body .iui-table-row .iui-table-cell[aria-disabled=true], .iui-table-body .iui-table-row.iui-table-expanded-content[aria-disabled=true]{
284
- font-style:italic;
285
- cursor:not-allowed;
286
282
  color:var(--iui-color-foreground-4);
287
283
  }
288
- .iui-table-body .iui-table-row .iui-table-cell[aria-disabled=true].iui-slot:hover > .iui-table-more-options, .iui-table-body .iui-table-row.iui-table-expanded-content[aria-disabled=true].iui-slot:hover > .iui-table-more-options{
289
- opacity:0;
290
- }
284
+ .iui-table-body .iui-table-row.iui-loading img,
285
+ .iui-table-body .iui-table-row.iui-loading svg:not(.iui-radial),
286
+ .iui-table-body .iui-table-row.iui-loading .iui-avatar,
291
287
  .iui-table-body .iui-table-row .iui-table-cell[aria-disabled=true] img,
292
288
  .iui-table-body .iui-table-row .iui-table-cell[aria-disabled=true] svg:not(.iui-radial),
293
289
  .iui-table-body .iui-table-row .iui-table-cell[aria-disabled=true] .iui-avatar, .iui-table-body .iui-table-row.iui-table-expanded-content[aria-disabled=true] img,
@@ -295,6 +291,16 @@
295
291
  .iui-table-body .iui-table-row.iui-table-expanded-content[aria-disabled=true] .iui-avatar{
296
292
  filter:grayscale(100%);
297
293
  }
294
+ .iui-table-body .iui-table-row.iui-loading{
295
+ font-style:italic;
296
+ }
297
+ .iui-table-body .iui-table-row.iui-loading,
298
+ .iui-table-body .iui-table-row.iui-loading .iui-checkbox{
299
+ cursor:progress;
300
+ }
301
+ .iui-table-body .iui-table-row .iui-table-cell[aria-disabled=true], .iui-table-body .iui-table-row.iui-table-expanded-content[aria-disabled=true]{
302
+ cursor:not-allowed;
303
+ }
298
304
  .iui-table-body .iui-table-row[data-iui-status=positive] .iui-table-cell:first-of-type,
299
305
  .iui-table-body .iui-table-row[data-iui-status=positive] + .iui-table-expanded-content{
300
306
  box-shadow:inset var(--iui-size-3xs) 0 0 0 var(--iui-color-foreground-positive);
package/css/tile.css CHANGED
@@ -3,6 +3,8 @@
3
3
  * See LICENSE.md in the project root for license terms and full copyright notice.
4
4
  *--------------------------------------------------------------------------------------------*/
5
5
  .iui-tile{
6
+ --_iui-tile-title-text-color:var(--iui-color-foreground-2);
7
+ --_iui-tile-body-text-color:var(--iui-color-foreground-4);
6
8
  margin:0;
7
9
  padding:0;
8
10
  border:none;
@@ -118,28 +120,27 @@
118
120
  margin-bottom:0;
119
121
  -webkit-line-clamp:2;
120
122
  }
121
- .iui-tile.iui-progress{
122
- cursor:progress;
123
- font-style:italic;
124
- }
125
- .iui-tile[aria-disabled=true]{
126
- cursor:not-allowed;
127
- }
128
- .iui-tile[aria-disabled=true] .iui-tile-name-label{
129
- color:var(--iui-color-foreground-4);
123
+ .iui-tile.iui-loading, .iui-tile[aria-disabled=true]{
124
+ --_iui-tile-title-text-color:var(--iui-color-foreground-4);
130
125
  }
131
- .iui-tile[aria-disabled=true] .iui-thumbnail-icon,
126
+ .iui-tile.iui-loading .iui-thumbnail-icon,
127
+ .iui-tile.iui-loading .iui-tile-thumbnail-picture, .iui-tile[aria-disabled=true] .iui-thumbnail-icon,
132
128
  .iui-tile[aria-disabled=true] .iui-tile-thumbnail-picture{
133
129
  filter:grayscale(100%);
134
130
  }
135
- .iui-tile[aria-disabled=true]:hover .iui-tile-thumbnail-picture, .iui-tile[aria-disabled=true]:focus-within .iui-tile-thumbnail-picture{
131
+ .iui-tile.iui-loading:hover .iui-tile-thumbnail-picture, .iui-tile.iui-loading:focus-within .iui-tile-thumbnail-picture, .iui-tile[aria-disabled=true]:hover .iui-tile-thumbnail-picture, .iui-tile[aria-disabled=true]:focus-within .iui-tile-thumbnail-picture{
136
132
  transform:none;
137
133
  }
138
- .iui-tile[aria-disabled=true] .iui-tile-more-options{
139
- display:none;
134
+ .iui-tile.iui-loading{
135
+ cursor:progress;
136
+ font-style:italic;
137
+ }
138
+ .iui-tile[aria-disabled=true]{
139
+ cursor:not-allowed;
140
140
  }
141
141
  .iui-tile.iui-positive{
142
142
  --_iui-tile-status-icon-fill:var(--iui-color-foreground-positive);
143
+ --_iui-tile-title-text-color:var(--iui-color-foreground-positive);
143
144
  }
144
145
  .iui-tile.iui-positive::-moz-selection, .iui-tile.iui-positive *::-moz-selection{
145
146
  background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
@@ -155,11 +156,9 @@
155
156
  box-shadow:var(--iui-size-2xs) 0 0 var(--iui-color-foreground-positive);
156
157
  }
157
158
 
158
- .iui-tile.iui-positive .iui-tile-name-label{
159
- color:var(--iui-color-foreground-positive);
160
- }
161
159
  .iui-tile.iui-warning{
162
160
  --_iui-tile-status-icon-fill:var(--iui-color-foreground-warning);
161
+ --_iui-tile-title-text-color:var(--iui-color-foreground-warning);
163
162
  }
164
163
  .iui-tile.iui-warning::-moz-selection, .iui-tile.iui-warning *::-moz-selection{
165
164
  background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
@@ -175,11 +174,9 @@
175
174
  box-shadow:var(--iui-size-2xs) 0 0 var(--iui-color-foreground-warning);
176
175
  }
177
176
 
178
- .iui-tile.iui-warning .iui-tile-name-label{
179
- color:var(--iui-color-foreground-warning);
180
- }
181
177
  .iui-tile.iui-negative{
182
178
  --_iui-tile-status-icon-fill:var(--iui-color-foreground-negative);
179
+ --_iui-tile-title-text-color:var(--iui-color-foreground-negative);
183
180
  }
184
181
  .iui-tile.iui-negative::-moz-selection, .iui-tile.iui-negative *::-moz-selection{
185
182
  background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
@@ -195,10 +192,6 @@
195
192
  box-shadow:var(--iui-size-2xs) 0 0 var(--iui-color-foreground-negative);
196
193
  }
197
194
 
198
- .iui-tile.iui-negative .iui-tile-name-label{
199
- color:var(--iui-color-foreground-negative);
200
- }
201
-
202
195
  .iui-tile-thumbnail-type-indicator{
203
196
  --_iui-button-text-color:var(--iui-color-foreground-2);
204
197
  --_iui-button-background-color:transparent;
@@ -420,7 +413,7 @@ div.iui-tile-thumbnail-picture{
420
413
  -moz-user-select:all;
421
414
  user-select:all;
422
415
  margin-bottom:calc(var(--iui-size-s) * 0.5);
423
- color:var(--iui-color-foreground-2);
416
+ color:var(--_iui-tile-title-text-color);
424
417
  }
425
418
  .iui-tile-content .iui-tile-status-icon{
426
419
  display:flex;
@@ -445,7 +438,7 @@ div.iui-tile-thumbnail-picture{
445
438
  display:-webkit-box;
446
439
  -webkit-line-clamp:3;
447
440
  -webkit-box-orient:vertical;
448
- color:var(--iui-color-foreground-4);
441
+ color:var(--_iui-tile-body-text-color);
449
442
  }
450
443
  .iui-tile-content .iui-tile-metadata{
451
444
  font-size:var(--iui-font-size-0);
@@ -457,7 +450,7 @@ div.iui-tile-thumbnail-picture{
457
450
  display:flex;
458
451
  align-items:center;
459
452
  margin-top:auto;
460
- color:var(--iui-color-foreground-4);
453
+ color:var(--_iui-tile-body-text-color);
461
454
  }
462
455
  .iui-tile-content .iui-tile-metadata > svg,
463
456
  .iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon{
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itwin/itwinui-css",
3
- "version": "1.0.0-dev.5",
3
+ "version": "1.0.0-dev.7",
4
4
  "author": "Bentley Systems",
5
5
  "license": "MIT",
6
6
  "main": "css/all.css",