@itwin/itwinui-css 0.53.2 → 0.54.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 (31) hide show
  1. package/css/alert.css +61 -43
  2. package/css/all.css +427 -102
  3. package/css/anchor.css +68 -0
  4. package/css/breadcrumbs.css +48 -5
  5. package/css/color-picker.css +4 -0
  6. package/css/footer.css +48 -5
  7. package/css/global.css +47 -5
  8. package/css/skip-to-content.css +2 -1
  9. package/css/table.css +9 -9
  10. package/css/tag.css +47 -5
  11. package/css/toast-notification.css +94 -27
  12. package/css/tree.css +2 -2
  13. package/package.json +1 -1
  14. package/scss/alert/alert.scss +5 -25
  15. package/scss/anchor/anchor.scss +3 -0
  16. package/scss/anchor/classes.scss +7 -0
  17. package/scss/anchor/index.scss +3 -0
  18. package/scss/breadcrumbs/breadcrumbs.scss +2 -1
  19. package/scss/classes.scss +1 -0
  20. package/scss/color-picker/color-picker.scss +4 -0
  21. package/scss/footer/footer.scss +1 -0
  22. package/scss/index.scss +1 -0
  23. package/scss/skip-to-content/skip-to-content.scss +2 -1
  24. package/scss/style/anchor.scss +79 -0
  25. package/scss/style/global.scss +1 -0
  26. package/scss/style/mixins.scss +0 -17
  27. package/scss/table/table.scss +5 -5
  28. package/scss/tag/classes.scss +1 -0
  29. package/scss/toast-notification/categories.scss +3 -20
  30. package/scss/toast-notification/toast.scss +5 -6
  31. package/scss/tree/tree.scss +2 -2
package/css/anchor.css ADDED
@@ -0,0 +1,68 @@
1
+ /*---------------------------------------------------------------------------------------------
2
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
3
+ * See LICENSE.md in the project root for license terms and full copyright notice.
4
+ *--------------------------------------------------------------------------------------------*/
5
+ .iui-anchor{
6
+ --_iui-anchor-external-svg:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='m16 0v5.4l-1.9-2-8.4 8.4-1.5-1.5 8.3-8.4-1.9-1.9m5.4 16v-9h-1v8h-14v-14h8v-1h-9v16z' /></svg>");
7
+ color:#008ae0;
8
+ -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
9
+ color:var(--iui-color-foreground-primary);
10
+ -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
11
+ border-radius:3px;
12
+ cursor:pointer;
13
+ text-decoration:none;
14
+ }
15
+ .iui-anchor:focus-visible{
16
+ outline:1px solid var(--iui-color-foreground-primary);
17
+ outline-offset:1px;
18
+ }
19
+ @supports not selector(*:focus-visible){
20
+ .iui-anchor:focus{
21
+ outline:1px solid var(--iui-color-foreground-primary);
22
+ outline-offset:1px;
23
+ }
24
+ }
25
+ .iui-anchor:hover{
26
+ color:#006bad;
27
+ color:var(--iui-color-foreground-primary-overlay);
28
+ }
29
+ .iui-anchor-external::after{
30
+ content:"";
31
+ display:inline-block;
32
+ width:1.5ch;
33
+ height:1.5ch;
34
+ margin-left:0.5ch;
35
+ vertical-align:-0.1ch;
36
+ background-color:currentColor;
37
+ -webkit-mask:var(--_iui-anchor-external-svg);
38
+ mask:var(--_iui-anchor-external-svg);
39
+ }
40
+ @media (forced-colors: active){
41
+ .iui-anchor-external::after{
42
+ background-color:LinkText;
43
+ }
44
+ }
45
+ .iui-anchor:hover{
46
+ text-decoration:underline;
47
+ }
48
+ @media (prefers-contrast: more){
49
+ .iui-anchor{
50
+ text-decoration:underline;
51
+ }
52
+ .iui-anchor:hover{
53
+ text-decoration:none;
54
+ }
55
+ }
56
+ .iui-theme-light .iui-anchor, .iui-theme-dark .iui-anchor{
57
+ text-decoration:none;
58
+ }
59
+ .iui-theme-light .iui-anchor:hover, .iui-theme-dark .iui-anchor:hover{
60
+ text-decoration:underline;
61
+ }
62
+
63
+ .iui-theme-light-hc .iui-anchor, .iui-theme-dark-hc .iui-anchor{
64
+ text-decoration:underline;
65
+ }
66
+ .iui-theme-light-hc .iui-anchor:hover, .iui-theme-dark-hc .iui-anchor:hover{
67
+ text-decoration:none;
68
+ }
package/css/breadcrumbs.css CHANGED
@@ -33,27 +33,70 @@
33
33
  margin:0 12px;
34
34
  }
35
35
  .iui-breadcrumbs-item a{
36
- border-radius:3px;
37
- text-decoration:none;
38
- cursor:pointer;
36
+ --_iui-anchor-external-svg:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='m16 0v5.4l-1.9-2-8.4 8.4-1.5-1.5 8.3-8.4-1.9-1.9m5.4 16v-9h-1v8h-14v-14h8v-1h-9v16z' /></svg>");
39
37
  color:#008ae0;
38
+ -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
40
39
  color:var(--iui-color-foreground-primary);
40
+ -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
41
+ border-radius:3px;
42
+ cursor:pointer;
43
+ text-decoration:none;
41
44
  }
42
45
  .iui-breadcrumbs-item a:focus-visible{
43
46
  outline:1px solid var(--iui-color-foreground-primary);
44
- outline-offset:2px;
47
+ outline-offset:1px;
45
48
  }
46
49
  @supports not selector(*:focus-visible){
47
50
  .iui-breadcrumbs-item a:focus{
48
51
  outline:1px solid var(--iui-color-foreground-primary);
49
- outline-offset:2px;
52
+ outline-offset:1px;
50
53
  }
51
54
  }
52
55
  .iui-breadcrumbs-item a:hover{
53
56
  color:#006bad;
54
57
  color:var(--iui-color-foreground-primary-overlay);
58
+ }
59
+ .iui-breadcrumbs-item a-external::after{
60
+ content:"";
61
+ display:inline-block;
62
+ width:1.5ch;
63
+ height:1.5ch;
64
+ margin-left:0.5ch;
65
+ vertical-align:-0.1ch;
66
+ background-color:currentColor;
67
+ -webkit-mask:var(--_iui-anchor-external-svg);
68
+ mask:var(--_iui-anchor-external-svg);
69
+ }
70
+ @media (forced-colors: active){
71
+ .iui-breadcrumbs-item a-external::after{
72
+ background-color:LinkText;
73
+ }
74
+ }
75
+ .iui-breadcrumbs-item a:hover{
55
76
  text-decoration:underline;
56
77
  }
78
+ @media (prefers-contrast: more){
79
+ .iui-breadcrumbs-item a{
80
+ text-decoration:underline;
81
+ }
82
+ .iui-breadcrumbs-item a:hover{
83
+ text-decoration:none;
84
+ }
85
+ }
86
+ .iui-theme-light .iui-breadcrumbs-item a, .iui-theme-dark .iui-breadcrumbs-item a{
87
+ text-decoration:none;
88
+ }
89
+ .iui-theme-light .iui-breadcrumbs-item a:hover, .iui-theme-dark .iui-breadcrumbs-item a:hover{
90
+ text-decoration:underline;
91
+ }
92
+
93
+ .iui-theme-light-hc .iui-breadcrumbs-item a, .iui-theme-dark-hc .iui-breadcrumbs-item a{
94
+ text-decoration:underline;
95
+ }
96
+ .iui-theme-light-hc .iui-breadcrumbs-item a:hover, .iui-theme-dark-hc .iui-breadcrumbs-item a:hover{
97
+ text-decoration:none;
98
+ }
99
+
57
100
  .iui-breadcrumbs-item .iui-button{
58
101
  border-color:transparent;
59
102
  background-color:transparent;
package/css/color-picker.css CHANGED
@@ -122,6 +122,7 @@
122
122
  margin-right:4px;
123
123
  position:relative;
124
124
  background-color:var(--iui-color-swatch-background);
125
+ forced-color-adjust:none;
125
126
  background-position:0 0, 8px 8px;
126
127
  background-size:16px 16px;
127
128
  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);
@@ -184,6 +185,7 @@
184
185
  cursor:crosshair;
185
186
  width:100%;
186
187
  height:209px;
188
+ forced-color-adjust:none;
187
189
  background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--iui-color-field-hue));
188
190
  }
189
191
  .iui-color-field:not(:last-child){
@@ -192,6 +194,7 @@
192
194
 
193
195
  .iui-hue-slider .iui-slider-rail{
194
196
  height:8px;
197
+ forced-color-adjust:none;
195
198
  background:linear-gradient(to right, #F00 0%, #FF0 17%, lime 33%, aqua 50%, #03F 67%, #C3F 83%, #F00 100%);
196
199
  background:linear-gradient(to right, #F00 0%, #FF0 17%, lime 33%, aqua 50%, #03F 67%, #C3F 83%, #F00 100%);
197
200
  }
@@ -201,6 +204,7 @@
201
204
 
202
205
  .iui-opacity-slider .iui-slider-rail{
203
206
  height:8px;
207
+ forced-color-adjust:none;
204
208
  background-position:0 0, 4px 4px;
205
209
  background-size:8px 8px;
206
210
  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);
package/css/footer.css CHANGED
@@ -41,27 +41,70 @@
41
41
  background-color:var(--iui-text-color-muted);
42
42
  }
43
43
  .iui-legal-footer > ul > li > a{
44
- border-radius:3px;
45
- text-decoration:none;
46
- cursor:pointer;
44
+ --_iui-anchor-external-svg:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='m16 0v5.4l-1.9-2-8.4 8.4-1.5-1.5 8.3-8.4-1.9-1.9m5.4 16v-9h-1v8h-14v-14h8v-1h-9v16z' /></svg>");
47
45
  color:#008ae0;
46
+ -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
48
47
  color:var(--iui-color-foreground-primary);
48
+ -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
49
+ border-radius:3px;
50
+ cursor:pointer;
51
+ text-decoration:none;
49
52
  }
50
53
  .iui-legal-footer > ul > li > a:focus-visible{
51
54
  outline:1px solid var(--iui-color-foreground-primary);
52
- outline-offset:2px;
55
+ outline-offset:1px;
53
56
  }
54
57
  @supports not selector(*:focus-visible){
55
58
  .iui-legal-footer > ul > li > a:focus{
56
59
  outline:1px solid var(--iui-color-foreground-primary);
57
- outline-offset:2px;
60
+ outline-offset:1px;
58
61
  }
59
62
  }
60
63
  .iui-legal-footer > ul > li > a:hover{
61
64
  color:#006bad;
62
65
  color:var(--iui-color-foreground-primary-overlay);
66
+ }
67
+ .iui-legal-footer > ul > li > a-external::after{
68
+ content:"";
69
+ display:inline-block;
70
+ width:1.5ch;
71
+ height:1.5ch;
72
+ margin-left:0.5ch;
73
+ vertical-align:-0.1ch;
74
+ background-color:currentColor;
75
+ -webkit-mask:var(--_iui-anchor-external-svg);
76
+ mask:var(--_iui-anchor-external-svg);
77
+ }
78
+ @media (forced-colors: active){
79
+ .iui-legal-footer > ul > li > a-external::after{
80
+ background-color:LinkText;
81
+ }
82
+ }
83
+ .iui-legal-footer > ul > li > a:hover{
63
84
  text-decoration:underline;
64
85
  }
86
+ @media (prefers-contrast: more){
87
+ .iui-legal-footer > ul > li > a{
88
+ text-decoration:underline;
89
+ }
90
+ .iui-legal-footer > ul > li > a:hover{
91
+ text-decoration:none;
92
+ }
93
+ }
94
+ .iui-theme-light .iui-legal-footer > ul > li > a, .iui-theme-dark .iui-legal-footer > ul > li > a{
95
+ text-decoration:none;
96
+ }
97
+ .iui-theme-light .iui-legal-footer > ul > li > a:hover, .iui-theme-dark .iui-legal-footer > ul > li > a:hover{
98
+ text-decoration:underline;
99
+ }
100
+
101
+ .iui-theme-light-hc .iui-legal-footer > ul > li > a, .iui-theme-dark-hc .iui-legal-footer > ul > li > a{
102
+ text-decoration:underline;
103
+ }
104
+ .iui-theme-light-hc .iui-legal-footer > ul > li > a:hover, .iui-theme-dark-hc .iui-legal-footer > ul > li > a:hover{
105
+ text-decoration:none;
106
+ }
107
+
65
108
  .iui-legal-footer > ul > li > a, .iui-legal-footer > ul > li > a:hover{
66
109
  color:rgba(0, 0, 0, 0.4);
67
110
  color:var(--iui-text-color-muted);
package/css/global.css CHANGED
@@ -583,27 +583,69 @@ html.iui-theme-dark-hc{
583
583
  }
584
584
 
585
585
  .iui-anchor{
586
- border-radius:3px;
587
- text-decoration:none;
588
- cursor:pointer;
586
+ --_iui-anchor-external-svg:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='m16 0v5.4l-1.9-2-8.4 8.4-1.5-1.5 8.3-8.4-1.9-1.9m5.4 16v-9h-1v8h-14v-14h8v-1h-9v16z' /></svg>");
589
587
  color:#008ae0;
588
+ -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
590
589
  color:var(--iui-color-foreground-primary);
590
+ -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
591
+ border-radius:3px;
592
+ cursor:pointer;
593
+ text-decoration:none;
591
594
  }
592
595
  .iui-anchor:focus-visible{
593
596
  outline:1px solid var(--iui-color-foreground-primary);
594
- outline-offset:2px;
597
+ outline-offset:1px;
595
598
  }
596
599
  @supports not selector(*:focus-visible){
597
600
  .iui-anchor:focus{
598
601
  outline:1px solid var(--iui-color-foreground-primary);
599
- outline-offset:2px;
602
+ outline-offset:1px;
600
603
  }
601
604
  }
602
605
  .iui-anchor:hover{
603
606
  color:#006bad;
604
607
  color:var(--iui-color-foreground-primary-overlay);
608
+ }
609
+ .iui-anchor-external::after{
610
+ content:"";
611
+ display:inline-block;
612
+ width:1.5ch;
613
+ height:1.5ch;
614
+ margin-left:0.5ch;
615
+ vertical-align:-0.1ch;
616
+ background-color:currentColor;
617
+ -webkit-mask:var(--_iui-anchor-external-svg);
618
+ mask:var(--_iui-anchor-external-svg);
619
+ }
620
+ @media (forced-colors: active){
621
+ .iui-anchor-external::after{
622
+ background-color:LinkText;
623
+ }
624
+ }
625
+ .iui-anchor:hover{
605
626
  text-decoration:underline;
606
627
  }
628
+ @media (prefers-contrast: more){
629
+ .iui-anchor{
630
+ text-decoration:underline;
631
+ }
632
+ .iui-anchor:hover{
633
+ text-decoration:none;
634
+ }
635
+ }
636
+ .iui-theme-light .iui-anchor, .iui-theme-dark .iui-anchor{
637
+ text-decoration:none;
638
+ }
639
+ .iui-theme-light .iui-anchor:hover, .iui-theme-dark .iui-anchor:hover{
640
+ text-decoration:underline;
641
+ }
642
+
643
+ .iui-theme-light-hc .iui-anchor, .iui-theme-dark-hc .iui-anchor{
644
+ text-decoration:underline;
645
+ }
646
+ .iui-theme-light-hc .iui-anchor:hover, .iui-theme-dark-hc .iui-anchor:hover{
647
+ text-decoration:none;
648
+ }
607
649
 
608
650
  [class*=iui-],
609
651
  [class*=iui-] *{
package/css/skip-to-content.css CHANGED
@@ -17,8 +17,9 @@
17
17
  position:fixed;
18
18
  text-align:center;
19
19
  left:50%;
20
- opacity:0;
21
20
  top:22px;
21
+ opacity:0;
22
+ z-index:99;
22
23
  transform:translateX(-50%) translateY(-170%);
23
24
  transition:background-color 0.2s ease-in-out;
24
25
  }
package/css/table.css CHANGED
@@ -205,10 +205,10 @@
205
205
  background-color:rgba(0, 138, 224, 0.1);
206
206
  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
207
207
  }
208
- .iui-table-body .iui-row:hover:not(.iui-disabled) > .iui-slot > .iui-more-options{
208
+ .iui-table-body .iui-row:hover:not(.iui-disabled) > .iui-slot:not(.iui-disabled) > .iui-more-options{
209
209
  visibility:visible;
210
210
  }
211
- .iui-table-body .iui-row:not(.iui-disabled):focus-within > .iui-slot > .iui-more-options{
211
+ .iui-table-body .iui-row:focus-within > .iui-slot:not(.iui-disabled) > .iui-more-options{
212
212
  visibility:visible;
213
213
  }
214
214
  @media (prefers-reduced-motion: no-preference){
@@ -303,20 +303,20 @@
303
303
  color:#53a21a;
304
304
  color:var(--iui-color-foreground-positive);
305
305
  }
306
- .iui-table-body .iui-row.iui-disabled, .iui-table-body .iui-row.iui-disabled + .iui-expanded-content{
306
+ .iui-table-body .iui-row .iui-cell.iui-disabled, .iui-table-body .iui-row.iui-expanded-content.iui-disabled{
307
307
  font-style:italic;
308
308
  cursor:not-allowed;
309
309
  color:rgba(0, 0, 0, 0.4);
310
310
  color:var(--iui-text-color-muted);
311
311
  }
312
- .iui-table-body .iui-row.iui-disabled:hover > .iui-slot > .iui-more-options, .iui-table-body .iui-row.iui-disabled + .iui-expanded-content:hover > .iui-slot > .iui-more-options{
312
+ .iui-table-body .iui-row .iui-cell.iui-disabled.iui-slot:hover > .iui-more-options, .iui-table-body .iui-row.iui-expanded-content.iui-disabled.iui-slot:hover > .iui-more-options{
313
313
  visibility:hidden;
314
314
  }
315
- .iui-table-body .iui-row.iui-disabled img,
316
- .iui-table-body .iui-row.iui-disabled svg:not(.iui-radial),
317
- .iui-table-body .iui-row.iui-disabled .iui-user-icon, .iui-table-body .iui-row.iui-disabled + .iui-expanded-content img,
318
- .iui-table-body .iui-row.iui-disabled + .iui-expanded-content svg:not(.iui-radial),
319
- .iui-table-body .iui-row.iui-disabled + .iui-expanded-content .iui-user-icon{
315
+ .iui-table-body .iui-row .iui-cell.iui-disabled img,
316
+ .iui-table-body .iui-row .iui-cell.iui-disabled svg:not(.iui-radial),
317
+ .iui-table-body .iui-row .iui-cell.iui-disabled .iui-user-icon, .iui-table-body .iui-row.iui-expanded-content.iui-disabled img,
318
+ .iui-table-body .iui-row.iui-expanded-content.iui-disabled svg:not(.iui-radial),
319
+ .iui-table-body .iui-row.iui-expanded-content.iui-disabled .iui-user-icon{
320
320
  filter:grayscale(100%);
321
321
  }
322
322
  .iui-table-body .iui-row.iui-positive,
package/css/tag.css CHANGED
@@ -77,27 +77,69 @@
77
77
  }
78
78
 
79
79
  a.iui-tag{
80
- border-radius:3px;
81
- text-decoration:none;
82
- cursor:pointer;
80
+ --_iui-anchor-external-svg:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='m16 0v5.4l-1.9-2-8.4 8.4-1.5-1.5 8.3-8.4-1.9-1.9m5.4 16v-9h-1v8h-14v-14h8v-1h-9v16z' /></svg>");
83
81
  color:#008ae0;
82
+ -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
84
83
  color:var(--iui-color-foreground-primary);
84
+ -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
85
+ border-radius:3px;
86
+ cursor:pointer;
87
+ text-decoration:none;
85
88
  }
86
89
  a.iui-tag:focus-visible{
87
90
  outline:1px solid var(--iui-color-foreground-primary);
88
- outline-offset:2px;
91
+ outline-offset:1px;
89
92
  }
90
93
  @supports not selector(*:focus-visible){
91
94
  a.iui-tag:focus{
92
95
  outline:1px solid var(--iui-color-foreground-primary);
93
- outline-offset:2px;
96
+ outline-offset:1px;
94
97
  }
95
98
  }
96
99
  a.iui-tag:hover{
97
100
  color:#006bad;
98
101
  color:var(--iui-color-foreground-primary-overlay);
102
+ }
103
+ a.iui-tag-external::after{
104
+ content:"";
105
+ display:inline-block;
106
+ width:1.5ch;
107
+ height:1.5ch;
108
+ margin-left:0.5ch;
109
+ vertical-align:-0.1ch;
110
+ background-color:currentColor;
111
+ -webkit-mask:var(--_iui-anchor-external-svg);
112
+ mask:var(--_iui-anchor-external-svg);
113
+ }
114
+ @media (forced-colors: active){
115
+ a.iui-tag-external::after{
116
+ background-color:LinkText;
117
+ }
118
+ }
119
+ a.iui-tag:hover{
99
120
  text-decoration:underline;
100
121
  }
122
+ @media (prefers-contrast: more){
123
+ a.iui-tag{
124
+ text-decoration:underline;
125
+ }
126
+ a.iui-tag:hover{
127
+ text-decoration:none;
128
+ }
129
+ }
130
+ .iui-theme-light a.iui-tag, .iui-theme-dark a.iui-tag{
131
+ text-decoration:none;
132
+ }
133
+ .iui-theme-light a.iui-tag:hover, .iui-theme-dark a.iui-tag:hover{
134
+ text-decoration:underline;
135
+ }
136
+
137
+ .iui-theme-light-hc a.iui-tag, .iui-theme-dark-hc a.iui-tag{
138
+ text-decoration:underline;
139
+ }
140
+ .iui-theme-light-hc a.iui-tag:hover, .iui-theme-dark-hc a.iui-tag:hover{
141
+ text-decoration:none;
142
+ }
101
143
 
102
144
  .iui-tag-container{
103
145
  color:rgba(0, 0, 0, 0.4);
package/css/toast-notification.css CHANGED
@@ -122,17 +122,19 @@
122
122
  color:rgba(0, 0, 0, 0.8);
123
123
  color:var(--iui-text-color);
124
124
  }
125
- .iui-toast > .iui-anchor{
125
+ .iui-toast-anchor{
126
+ text-decoration:underline;
127
+ border-radius:3px;
128
+ cursor:pointer;
126
129
  font-size:12px;
127
130
  margin-right:16px;
128
131
  -webkit-user-select:none;
129
132
  -moz-user-select:none;
130
133
  -ms-user-select:none;
131
134
  user-select:none;
132
- text-decoration:underline;
133
135
  white-space:nowrap;
134
136
  }
135
- .iui-toast > .iui-anchor:hover{
137
+ .iui-toast-anchor:hover{
136
138
  text-decoration:none;
137
139
  }
138
140
  .iui-toast > .iui-button{
@@ -166,6 +168,26 @@
166
168
  background-color:#008ae0;
167
169
  background-color:var(--iui-color-background-primary);
168
170
  }
171
+ .iui-toast.iui-informational > .iui-toast-anchor{
172
+ color:#008ae0;
173
+ -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
174
+ color:var(--iui-color-foreground-primary);
175
+ -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
176
+ }
177
+ .iui-toast.iui-informational > .iui-toast-anchor:focus-visible{
178
+ outline:1px solid var(--iui-color-foreground-primary);
179
+ outline-offset:1px;
180
+ }
181
+ @supports not selector(*:focus-visible){
182
+ .iui-toast.iui-informational > .iui-toast-anchor:focus{
183
+ outline:1px solid var(--iui-color-foreground-primary);
184
+ outline-offset:1px;
185
+ }
186
+ }
187
+ .iui-toast.iui-informational > .iui-toast-anchor:hover{
188
+ color:#006bad;
189
+ color:var(--iui-color-foreground-primary-overlay);
190
+ }
169
191
  .iui-toast.iui-positive{
170
192
  border-color:#53a21a;
171
193
  border-color:var(--iui-color-foreground-positive);
@@ -183,19 +205,34 @@
183
205
  background-color:#53a21a;
184
206
  background-color:var(--iui-color-background-positive);
185
207
  }
186
- .iui-toast.iui-positive > .iui-anchor{
208
+ .iui-toast.iui-positive > .iui-toast-anchor{
187
209
  color:#53a21a;
210
+ -webkit-tap-highlight-color:rgba(83, 162, 26, 0.2);
188
211
  color:var(--iui-color-foreground-positive);
212
+ -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
189
213
  }
190
- .iui-toast.iui-positive > .iui-anchor:hover{
191
- color:#3d7613;
192
- color:var(--iui-color-foreground-positive-overlay);
214
+ .iui-toast.iui-positive > .iui-toast-anchor:focus-visible{
215
+ outline:1px solid var(--iui-color-foreground-positive);
216
+ outline-offset:1px;
193
217
  }
194
- .iui-toast.iui-positive > .iui-anchor{
195
- outline-color:var(--iui-color-foreground-positive);
218
+ @supports not selector(*:focus-visible){
219
+ .iui-toast.iui-positive > .iui-toast-anchor:focus{
220
+ outline:1px solid var(--iui-color-foreground-positive);
221
+ outline-offset:1px;
222
+ }
196
223
  }
197
- .iui-toast.iui-positive > .iui-button{
198
- outline-color:var(--iui-color-foreground-positive);
224
+ .iui-toast.iui-positive > .iui-toast-anchor::-moz-selection, .iui-toast.iui-positive > .iui-toast-anchor *::-moz-selection{
225
+ background-color:rgba(83, 162, 26, 0.2);
226
+ background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
227
+ }
228
+ .iui-toast.iui-positive > .iui-toast-anchor::selection,
229
+ .iui-toast.iui-positive > .iui-toast-anchor *::selection{
230
+ background-color:rgba(83, 162, 26, 0.2);
231
+ background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
232
+ }
233
+ .iui-toast.iui-positive > .iui-toast-anchor:hover{
234
+ color:#3d7613;
235
+ color:var(--iui-color-foreground-positive-overlay);
199
236
  }
200
237
  .iui-toast.iui-negative{
201
238
  border-color:#d10a0a;
@@ -214,19 +251,34 @@
214
251
  background-color:#d10a0a;
215
252
  background-color:var(--iui-color-background-negative);
216
253
  }
217
- .iui-toast.iui-negative > .iui-anchor{
254
+ .iui-toast.iui-negative > .iui-toast-anchor{
218
255
  color:#d10a0a;
256
+ -webkit-tap-highlight-color:rgba(209, 10, 10, 0.2);
219
257
  color:var(--iui-color-foreground-negative);
258
+ -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
220
259
  }
221
- .iui-toast.iui-negative > .iui-anchor:hover{
222
- color:#a10808;
223
- color:var(--iui-color-foreground-negative-overlay);
260
+ .iui-toast.iui-negative > .iui-toast-anchor:focus-visible{
261
+ outline:1px solid var(--iui-color-foreground-negative);
262
+ outline-offset:1px;
224
263
  }
225
- .iui-toast.iui-negative > .iui-anchor{
226
- outline-color:var(--iui-color-foreground-negative);
264
+ @supports not selector(*:focus-visible){
265
+ .iui-toast.iui-negative > .iui-toast-anchor:focus{
266
+ outline:1px solid var(--iui-color-foreground-negative);
267
+ outline-offset:1px;
268
+ }
269
+ }
270
+ .iui-toast.iui-negative > .iui-toast-anchor::-moz-selection, .iui-toast.iui-negative > .iui-toast-anchor *::-moz-selection{
271
+ background-color:rgba(209, 10, 10, 0.2);
272
+ background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
273
+ }
274
+ .iui-toast.iui-negative > .iui-toast-anchor::selection,
275
+ .iui-toast.iui-negative > .iui-toast-anchor *::selection{
276
+ background-color:rgba(209, 10, 10, 0.2);
277
+ background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
227
278
  }
228
- .iui-toast.iui-negative > .iui-button{
229
- outline-color:var(--iui-color-foreground-negative);
279
+ .iui-toast.iui-negative > .iui-toast-anchor:hover{
280
+ color:#a10808;
281
+ color:var(--iui-color-foreground-negative-overlay);
230
282
  }
231
283
  .iui-toast.iui-warning{
232
284
  border-color:#f18d13;
@@ -245,17 +297,32 @@
245
297
  background-color:#f18d13;
246
298
  background-color:var(--iui-color-background-warning);
247
299
  }
248
- .iui-toast.iui-warning > .iui-anchor{
300
+ .iui-toast.iui-warning > .iui-toast-anchor{
249
301
  color:#f18d13;
302
+ -webkit-tap-highlight-color:rgba(241, 141, 19, 0.2);
250
303
  color:var(--iui-color-foreground-warning);
304
+ -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
251
305
  }
252
- .iui-toast.iui-warning > .iui-anchor:hover{
253
- color:#c6720c;
254
- color:var(--iui-color-foreground-warning-overlay);
306
+ .iui-toast.iui-warning > .iui-toast-anchor:focus-visible{
307
+ outline:1px solid var(--iui-color-foreground-warning);
308
+ outline-offset:1px;
309
+ }
310
+ @supports not selector(*:focus-visible){
311
+ .iui-toast.iui-warning > .iui-toast-anchor:focus{
312
+ outline:1px solid var(--iui-color-foreground-warning);
313
+ outline-offset:1px;
314
+ }
315
+ }
316
+ .iui-toast.iui-warning > .iui-toast-anchor::-moz-selection, .iui-toast.iui-warning > .iui-toast-anchor *::-moz-selection{
317
+ background-color:rgba(241, 141, 19, 0.2);
318
+ background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
255
319
  }
256
- .iui-toast.iui-warning > .iui-anchor{
257
- outline-color:var(--iui-color-foreground-warning);
320
+ .iui-toast.iui-warning > .iui-toast-anchor::selection,
321
+ .iui-toast.iui-warning > .iui-toast-anchor *::selection{
322
+ background-color:rgba(241, 141, 19, 0.2);
323
+ background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
258
324
  }
259
- .iui-toast.iui-warning > .iui-button{
260
- outline-color:var(--iui-color-foreground-warning);
325
+ .iui-toast.iui-warning > .iui-toast-anchor:hover{
326
+ color:#c6720c;
327
+ color:var(--iui-color-foreground-warning-overlay);
261
328
  }
package/css/tree.css CHANGED
@@ -67,7 +67,7 @@
67
67
  display:inline-flex;
68
68
  width:16px;
69
69
  height:16px;
70
- padding:0 6px;
70
+ margin:0 6px;
71
71
  flex-shrink:0;
72
72
  }
73
73
  .iui-tree-node-content-icon.iui-informational{
@@ -87,7 +87,7 @@
87
87
  fill:var(--iui-icons-color-negative);
88
88
  }
89
89
  .iui-tree-node-content-icon:first-child{
90
- margin-left:28px;
90
+ margin-left:34px;
91
91
  }
92
92
  @media (prefers-reduced-motion: no-preference){
93
93
  .iui-tree-node-content-expander-icon{
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itwin/itwinui-css",
3
- "version": "0.53.2",
3
+ "version": "0.54.1",
4
4
  "author": "Bentley Systems",
5
5
  "license": "MIT",
6
6
  "main": "src/index.scss",