@itwin/itwinui-css 0.63.2-dev.0 → 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 (96) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/css/alert.css +250 -248
  3. package/css/all.css +969 -925
  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/classes.scss +46 -50
  59. package/scss/code/classes.scss +7 -5
  60. package/scss/color-picker/classes.scss +40 -38
  61. package/scss/date-picker/classes.scss +44 -42
  62. package/scss/dialog/classes.scss +45 -43
  63. package/scss/expandable-block/classes.scss +4 -2
  64. package/scss/fieldset/classes.scss +4 -2
  65. package/scss/file-upload/classes.scss +4 -2
  66. package/scss/footer/classes.scss +16 -14
  67. package/scss/header/classes.scss +7 -5
  68. package/scss/icon/classes.scss +19 -17
  69. package/scss/information-panel/classes.scss +18 -16
  70. package/scss/inputs/classes.scss +62 -60
  71. package/scss/keyboard/classes.scss +4 -2
  72. package/scss/location-marker/classes.scss +10 -8
  73. package/scss/menu/classes.scss +14 -12
  74. package/scss/non-ideal-state/classes.scss +4 -2
  75. package/scss/notification-marker/classes.scss +5 -3
  76. package/scss/popover/classes.scss +4 -2
  77. package/scss/progress-indicator/classes.scss +22 -20
  78. package/scss/radio-tile/classes.scss +22 -20
  79. package/scss/reset-global-styles.scss +25 -23
  80. package/scss/side-navigation/classes.scss +10 -8
  81. package/scss/skip-to-content/classes.scss +4 -2
  82. package/scss/slider/classes.scss +37 -35
  83. package/scss/style/global.scss +49 -47
  84. package/scss/surface/classes.scss +4 -2
  85. package/scss/table/classes.scss +45 -43
  86. package/scss/tabs/classes.scss +31 -29
  87. package/scss/tag/classes.scss +20 -18
  88. package/scss/text/classes.scss +36 -34
  89. package/scss/tile/classes.scss +36 -34
  90. package/scss/time-picker/classes.scss +11 -9
  91. package/scss/toast-notification/classes.scss +71 -69
  92. package/scss/toggle-switch/classes.scss +7 -5
  93. package/scss/tooltip/classes.scss +17 -15
  94. package/scss/tree/classes.scss +13 -11
  95. package/scss/user-icon/classes.scss +18 -16
  96. package/scss/wizard/classes.scss +18 -16
package/css/breadcrumbs.css CHANGED
@@ -2,437 +2,439 @@
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-breadcrumbs{
6
- margin:0;
7
- padding:0;
8
- border:none;
9
- vertical-align:baseline;
10
- display:flex;
11
- align-items:center;
12
- }
5
+ @layer itwinui-v1{
6
+ .iui-breadcrumbs{
7
+ margin:0;
8
+ padding:0;
9
+ border:none;
10
+ vertical-align:baseline;
11
+ display:flex;
12
+ align-items:center;
13
+ }
13
14
 
14
- .iui-breadcrumbs-list{
15
- margin:0;
16
- padding:0;
17
- border:none;
18
- vertical-align:baseline;
19
- display:flex;
20
- align-items:center;
21
- list-style-type:none;
22
- -webkit-user-select:none;
23
- -moz-user-select:none;
24
- -ms-user-select:none;
25
- user-select:none;
26
- }
15
+ .iui-breadcrumbs-list{
16
+ margin:0;
17
+ padding:0;
18
+ border:none;
19
+ vertical-align:baseline;
20
+ display:flex;
21
+ align-items:center;
22
+ list-style-type:none;
23
+ -webkit-user-select:none;
24
+ -moz-user-select:none;
25
+ -ms-user-select:none;
26
+ user-select:none;
27
+ }
27
28
 
28
- .iui-breadcrumbs-item{
29
- display:flex;
30
- align-items:center;
31
- line-height:38px;
32
- height:38px;
33
- }
34
- .iui-breadcrumbs-item > *{
35
- max-width:26ch;
36
- }
29
+ .iui-breadcrumbs-item{
30
+ display:flex;
31
+ align-items:center;
32
+ line-height:38px;
33
+ height:38px;
34
+ }
35
+ .iui-breadcrumbs-item > *{
36
+ max-width:26ch;
37
+ }
37
38
 
38
- .iui-breadcrumbs-item-overrides > *{
39
- padding:0 8px;
40
- overflow:hidden;
41
- white-space:nowrap;
42
- text-overflow:ellipsis;
43
- }
44
- .iui-breadcrumbs-item-overrides > *:not(.iui-button){
45
- color:rgba(0, 0, 0, 0.8);
46
- color:var(--iui-text-color);
47
- }
48
- .iui-breadcrumbs-item-overrides > :-webkit-any-link{
49
- color:#008ae0;
50
- -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
51
- color:var(--iui-color-foreground-primary);
52
- -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
53
- border-radius:4px;
54
- box-sizing:border-box;
55
- cursor:pointer;
56
- text-decoration:none;
57
- }
58
- .iui-breadcrumbs-item-overrides > :-moz-any-link{
59
- color:#008ae0;
60
- -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
61
- color:var(--iui-color-foreground-primary);
62
- -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
63
- border-radius:4px;
64
- box-sizing:border-box;
65
- cursor:pointer;
66
- text-decoration:none;
67
- }
68
- .iui-breadcrumbs-item-overrides > :any-link{
69
- color:#008ae0;
70
- -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
71
- color:var(--iui-color-foreground-primary);
72
- -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
73
- border-radius:4px;
74
- box-sizing:border-box;
75
- cursor:pointer;
76
- text-decoration:none;
77
- }
78
- .iui-breadcrumbs-item-overrides > :-webkit-any-link:focus-visible{
79
- outline:1px solid var(--iui-color-foreground-primary);
80
- outline-offset:1px;
81
- }
82
- .iui-breadcrumbs-item-overrides > :-moz-any-link:focus-visible{
83
- outline:1px solid var(--iui-color-foreground-primary);
84
- outline-offset:1px;
85
- }
86
- .iui-breadcrumbs-item-overrides > :any-link:focus-visible{
87
- outline:1px solid var(--iui-color-foreground-primary);
88
- outline-offset:1px;
89
- }
90
- @supports not selector(*:focus-visible){
91
- .iui-breadcrumbs-item-overrides > :-webkit-any-link:focus{
39
+ .iui-breadcrumbs-item-overrides > *{
40
+ padding:0 8px;
41
+ overflow:hidden;
42
+ white-space:nowrap;
43
+ text-overflow:ellipsis;
44
+ }
45
+ .iui-breadcrumbs-item-overrides > *:not(.iui-button){
46
+ color:rgba(0, 0, 0, 0.8);
47
+ color:var(--iui-text-color);
48
+ }
49
+ .iui-breadcrumbs-item-overrides > :-webkit-any-link{
50
+ color:#008ae0;
51
+ -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
52
+ color:var(--iui-color-foreground-primary);
53
+ -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
54
+ border-radius:4px;
55
+ box-sizing:border-box;
56
+ cursor:pointer;
57
+ text-decoration:none;
58
+ }
59
+ .iui-breadcrumbs-item-overrides > :-moz-any-link{
60
+ color:#008ae0;
61
+ -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
62
+ color:var(--iui-color-foreground-primary);
63
+ -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
64
+ border-radius:4px;
65
+ box-sizing:border-box;
66
+ cursor:pointer;
67
+ text-decoration:none;
68
+ }
69
+ .iui-breadcrumbs-item-overrides > :any-link{
70
+ color:#008ae0;
71
+ -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
72
+ color:var(--iui-color-foreground-primary);
73
+ -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
74
+ border-radius:4px;
75
+ box-sizing:border-box;
76
+ cursor:pointer;
77
+ text-decoration:none;
78
+ }
79
+ .iui-breadcrumbs-item-overrides > :-webkit-any-link:focus-visible{
92
80
  outline:1px solid var(--iui-color-foreground-primary);
93
81
  outline-offset:1px;
94
82
  }
95
- .iui-breadcrumbs-item-overrides > :-moz-any-link:focus{
83
+ .iui-breadcrumbs-item-overrides > :-moz-any-link:focus-visible{
96
84
  outline:1px solid var(--iui-color-foreground-primary);
97
85
  outline-offset:1px;
98
86
  }
99
- .iui-breadcrumbs-item-overrides > :any-link:focus{
87
+ .iui-breadcrumbs-item-overrides > :any-link:focus-visible{
100
88
  outline:1px solid var(--iui-color-foreground-primary);
101
89
  outline-offset:1px;
102
90
  }
103
- }
104
- .iui-breadcrumbs-item-overrides > :-webkit-any-link:hover{
105
- color:#006bad;
106
- color:var(--iui-color-foreground-primary-overlay);
107
- }
108
- .iui-breadcrumbs-item-overrides > :-moz-any-link:hover{
109
- color:#006bad;
110
- color:var(--iui-color-foreground-primary-overlay);
111
- }
112
- .iui-breadcrumbs-item-overrides > :any-link:hover{
113
- color:#006bad;
114
- color:var(--iui-color-foreground-primary-overlay);
115
- }
116
- .iui-breadcrumbs-item-overrides > :-webkit-any-link:hover{
117
- text-decoration:underline;
118
- }
119
- .iui-breadcrumbs-item-overrides > :-moz-any-link:hover{
120
- text-decoration:underline;
121
- }
122
- .iui-breadcrumbs-item-overrides > :any-link:hover{
123
- text-decoration:underline;
124
- }
125
- @media (prefers-contrast: more){
126
- .iui-breadcrumbs-item-overrides > :-webkit-any-link{
91
+ @supports not selector(*:focus-visible){
92
+ .iui-breadcrumbs-item-overrides > :-webkit-any-link:focus{
93
+ outline:1px solid var(--iui-color-foreground-primary);
94
+ outline-offset:1px;
95
+ }
96
+ .iui-breadcrumbs-item-overrides > :-moz-any-link:focus{
97
+ outline:1px solid var(--iui-color-foreground-primary);
98
+ outline-offset:1px;
99
+ }
100
+ .iui-breadcrumbs-item-overrides > :any-link:focus{
101
+ outline:1px solid var(--iui-color-foreground-primary);
102
+ outline-offset:1px;
103
+ }
104
+ }
105
+ .iui-breadcrumbs-item-overrides > :-webkit-any-link:hover{
106
+ color:#006bad;
107
+ color:var(--iui-color-foreground-primary-overlay);
108
+ }
109
+ .iui-breadcrumbs-item-overrides > :-moz-any-link:hover{
110
+ color:#006bad;
111
+ color:var(--iui-color-foreground-primary-overlay);
112
+ }
113
+ .iui-breadcrumbs-item-overrides > :any-link:hover{
114
+ color:#006bad;
115
+ color:var(--iui-color-foreground-primary-overlay);
116
+ }
117
+ .iui-breadcrumbs-item-overrides > :-webkit-any-link:hover{
127
118
  text-decoration:underline;
128
119
  }
129
- .iui-breadcrumbs-item-overrides > :-moz-any-link{
120
+ .iui-breadcrumbs-item-overrides > :-moz-any-link:hover{
130
121
  text-decoration:underline;
131
122
  }
132
- .iui-breadcrumbs-item-overrides > :any-link{
123
+ .iui-breadcrumbs-item-overrides > :any-link:hover{
133
124
  text-decoration:underline;
134
125
  }
135
- .iui-breadcrumbs-item-overrides > :-webkit-any-link:hover{
126
+ @media (prefers-contrast: more){
127
+ .iui-breadcrumbs-item-overrides > :-webkit-any-link{
128
+ text-decoration:underline;
129
+ }
130
+ .iui-breadcrumbs-item-overrides > :-moz-any-link{
131
+ text-decoration:underline;
132
+ }
133
+ .iui-breadcrumbs-item-overrides > :any-link{
134
+ text-decoration:underline;
135
+ }
136
+ .iui-breadcrumbs-item-overrides > :-webkit-any-link:hover{
137
+ text-decoration:none;
138
+ }
139
+ .iui-breadcrumbs-item-overrides > :-moz-any-link:hover{
140
+ text-decoration:none;
141
+ }
142
+ .iui-breadcrumbs-item-overrides > :any-link:hover{
143
+ text-decoration:none;
144
+ }
145
+ }
146
+ .iui-theme-light .iui-breadcrumbs-item-overrides > :-webkit-any-link, .iui-theme-dark .iui-breadcrumbs-item-overrides > :-webkit-any-link{
136
147
  text-decoration:none;
137
148
  }
138
- .iui-breadcrumbs-item-overrides > :-moz-any-link:hover{
149
+ .iui-theme-light .iui-breadcrumbs-item-overrides > :-moz-any-link, .iui-theme-dark .iui-breadcrumbs-item-overrides > :-moz-any-link{
139
150
  text-decoration:none;
140
151
  }
141
- .iui-breadcrumbs-item-overrides > :any-link:hover{
152
+ .iui-theme-light .iui-breadcrumbs-item-overrides > :any-link, .iui-theme-dark .iui-breadcrumbs-item-overrides > :any-link{
142
153
  text-decoration:none;
143
154
  }
144
- }
145
- .iui-theme-light .iui-breadcrumbs-item-overrides > :-webkit-any-link, .iui-theme-dark .iui-breadcrumbs-item-overrides > :-webkit-any-link{
146
- text-decoration:none;
147
- }
148
- .iui-theme-light .iui-breadcrumbs-item-overrides > :-moz-any-link, .iui-theme-dark .iui-breadcrumbs-item-overrides > :-moz-any-link{
149
- text-decoration:none;
150
- }
151
- .iui-theme-light .iui-breadcrumbs-item-overrides > :any-link, .iui-theme-dark .iui-breadcrumbs-item-overrides > :any-link{
152
- text-decoration:none;
153
- }
154
- .iui-theme-light .iui-breadcrumbs-item-overrides > :-webkit-any-link:hover, .iui-theme-dark .iui-breadcrumbs-item-overrides > :-webkit-any-link:hover{
155
- text-decoration:underline;
156
- }
157
- .iui-theme-light .iui-breadcrumbs-item-overrides > :-moz-any-link:hover, .iui-theme-dark .iui-breadcrumbs-item-overrides > :-moz-any-link:hover{
158
- text-decoration:underline;
159
- }
160
- .iui-theme-light .iui-breadcrumbs-item-overrides > :any-link:hover, .iui-theme-dark .iui-breadcrumbs-item-overrides > :any-link:hover{
161
- text-decoration:underline;
162
- }
155
+ .iui-theme-light .iui-breadcrumbs-item-overrides > :-webkit-any-link:hover, .iui-theme-dark .iui-breadcrumbs-item-overrides > :-webkit-any-link:hover{
156
+ text-decoration:underline;
157
+ }
158
+ .iui-theme-light .iui-breadcrumbs-item-overrides > :-moz-any-link:hover, .iui-theme-dark .iui-breadcrumbs-item-overrides > :-moz-any-link:hover{
159
+ text-decoration:underline;
160
+ }
161
+ .iui-theme-light .iui-breadcrumbs-item-overrides > :any-link:hover, .iui-theme-dark .iui-breadcrumbs-item-overrides > :any-link:hover{
162
+ text-decoration:underline;
163
+ }
163
164
 
164
- .iui-theme-light-hc .iui-breadcrumbs-item-overrides > :-webkit-any-link, .iui-theme-dark-hc .iui-breadcrumbs-item-overrides > :-webkit-any-link{
165
- text-decoration:underline;
166
- }
165
+ .iui-theme-light-hc .iui-breadcrumbs-item-overrides > :-webkit-any-link, .iui-theme-dark-hc .iui-breadcrumbs-item-overrides > :-webkit-any-link{
166
+ text-decoration:underline;
167
+ }
167
168
 
168
- .iui-theme-light-hc .iui-breadcrumbs-item-overrides > :-moz-any-link, .iui-theme-dark-hc .iui-breadcrumbs-item-overrides > :-moz-any-link{
169
- text-decoration:underline;
170
- }
169
+ .iui-theme-light-hc .iui-breadcrumbs-item-overrides > :-moz-any-link, .iui-theme-dark-hc .iui-breadcrumbs-item-overrides > :-moz-any-link{
170
+ text-decoration:underline;
171
+ }
171
172
 
172
- .iui-theme-light-hc .iui-breadcrumbs-item-overrides > :any-link, .iui-theme-dark-hc .iui-breadcrumbs-item-overrides > :any-link{
173
- text-decoration:underline;
174
- }
175
- .iui-theme-light-hc .iui-breadcrumbs-item-overrides > :-webkit-any-link:hover, .iui-theme-dark-hc .iui-breadcrumbs-item-overrides > :-webkit-any-link:hover{
176
- text-decoration:none;
177
- }
178
- .iui-theme-light-hc .iui-breadcrumbs-item-overrides > :-moz-any-link:hover, .iui-theme-dark-hc .iui-breadcrumbs-item-overrides > :-moz-any-link:hover{
179
- text-decoration:none;
180
- }
181
- .iui-theme-light-hc .iui-breadcrumbs-item-overrides > :any-link:hover, .iui-theme-dark-hc .iui-breadcrumbs-item-overrides > :any-link:hover{
182
- text-decoration:none;
183
- }
173
+ .iui-theme-light-hc .iui-breadcrumbs-item-overrides > :any-link, .iui-theme-dark-hc .iui-breadcrumbs-item-overrides > :any-link{
174
+ text-decoration:underline;
175
+ }
176
+ .iui-theme-light-hc .iui-breadcrumbs-item-overrides > :-webkit-any-link:hover, .iui-theme-dark-hc .iui-breadcrumbs-item-overrides > :-webkit-any-link:hover{
177
+ text-decoration:none;
178
+ }
179
+ .iui-theme-light-hc .iui-breadcrumbs-item-overrides > :-moz-any-link:hover, .iui-theme-dark-hc .iui-breadcrumbs-item-overrides > :-moz-any-link:hover{
180
+ text-decoration:none;
181
+ }
182
+ .iui-theme-light-hc .iui-breadcrumbs-item-overrides > :any-link:hover, .iui-theme-dark-hc .iui-breadcrumbs-item-overrides > :any-link:hover{
183
+ text-decoration:none;
184
+ }
184
185
 
185
- .iui-breadcrumbs-item-overrides > :-webkit-any-link:focus{
186
- outline-offset:-1px;
187
- }
186
+ .iui-breadcrumbs-item-overrides > :-webkit-any-link:focus{
187
+ outline-offset:-1px;
188
+ }
188
189
 
189
- .iui-breadcrumbs-item-overrides > :-moz-any-link:focus{
190
- outline-offset:-1px;
191
- }
190
+ .iui-breadcrumbs-item-overrides > :-moz-any-link:focus{
191
+ outline-offset:-1px;
192
+ }
192
193
 
193
- .iui-breadcrumbs-item-overrides > :any-link:focus{
194
- outline-offset:-1px;
195
- }
196
- .iui-breadcrumbs-item-overrides .iui-button.iui-button{
197
- border-color:transparent;
198
- background-color:transparent;
199
- padding:0 8px;
200
- height:38px;
201
- gap:8px;
202
- border:none;
203
- }
204
- .iui-breadcrumbs-item-overrides .iui-button.iui-button > .iui-button-icon:only-child{
205
- margin-left:3px;
206
- margin-right:3px;
207
- }
208
- .iui-breadcrumbs-item-overrides .iui-button.iui-button:hover{
209
- background-color:rgba(0, 0, 0, 0.1);
210
- border-color:transparent;
211
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
212
- border-color:transparent;
213
- }
214
- .iui-breadcrumbs-item-overrides .iui-button.iui-button.iui-active{
215
- background-color:rgba(0, 138, 224, 0.1);
216
- color:#008ae0;
217
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
218
- color:var(--iui-color-foreground-primary);
219
- border-color:transparent;
220
- }
221
- .iui-breadcrumbs-item-overrides .iui-button.iui-button[disabled], .iui-breadcrumbs-item-overrides .iui-button.iui-button:disabled{
222
- cursor:not-allowed;
223
- background:#edeff2;
224
- border-color:#edeff2;
225
- color:rgba(0, 0, 0, 0.2);
226
- background:var(--iui-color-background-disabled);
227
- border-color:var(--iui-color-background-disabled);
228
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
229
- background-color:transparent;
230
- border-color:transparent;
231
- background-color:transparent;
232
- border-color:transparent;
233
- }
234
- .iui-breadcrumbs-item-overrides .iui-button.iui-button[disabled].iui-active, .iui-breadcrumbs-item-overrides .iui-button.iui-button:disabled.iui-active{
235
- background-color:rgba(0, 0, 0, 0.05);
236
- background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
237
- }
238
- .iui-breadcrumbs-item-overrides .iui-button.iui-button:focus-visible{
239
- outline:1px solid var(--iui-color-foreground-primary);
240
- outline-offset:-1px;
241
- }
242
- @supports not selector(*:focus-visible){
243
- .iui-breadcrumbs-item-overrides .iui-button.iui-button:focus{
194
+ .iui-breadcrumbs-item-overrides > :any-link:focus{
195
+ outline-offset:-1px;
196
+ }
197
+ .iui-breadcrumbs-item-overrides .iui-button.iui-button{
198
+ border-color:transparent;
199
+ background-color:transparent;
200
+ padding:0 8px;
201
+ height:38px;
202
+ gap:8px;
203
+ border:none;
204
+ }
205
+ .iui-breadcrumbs-item-overrides .iui-button.iui-button > .iui-button-icon:only-child{
206
+ margin-left:3px;
207
+ margin-right:3px;
208
+ }
209
+ .iui-breadcrumbs-item-overrides .iui-button.iui-button:hover{
210
+ background-color:rgba(0, 0, 0, 0.1);
211
+ border-color:transparent;
212
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
213
+ border-color:transparent;
214
+ }
215
+ .iui-breadcrumbs-item-overrides .iui-button.iui-button.iui-active{
216
+ background-color:rgba(0, 138, 224, 0.1);
217
+ color:#008ae0;
218
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
219
+ color:var(--iui-color-foreground-primary);
220
+ border-color:transparent;
221
+ }
222
+ .iui-breadcrumbs-item-overrides .iui-button.iui-button[disabled], .iui-breadcrumbs-item-overrides .iui-button.iui-button:disabled{
223
+ cursor:not-allowed;
224
+ background:#edeff2;
225
+ border-color:#edeff2;
226
+ color:rgba(0, 0, 0, 0.2);
227
+ background:var(--iui-color-background-disabled);
228
+ border-color:var(--iui-color-background-disabled);
229
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
230
+ background-color:transparent;
231
+ border-color:transparent;
232
+ background-color:transparent;
233
+ border-color:transparent;
234
+ }
235
+ .iui-breadcrumbs-item-overrides .iui-button.iui-button[disabled].iui-active, .iui-breadcrumbs-item-overrides .iui-button.iui-button:disabled.iui-active{
236
+ background-color:rgba(0, 0, 0, 0.05);
237
+ background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
238
+ }
239
+ .iui-breadcrumbs-item-overrides .iui-button.iui-button:focus-visible{
244
240
  outline:1px solid var(--iui-color-foreground-primary);
245
241
  outline-offset:-1px;
246
242
  }
247
- }
248
- .iui-breadcrumbs-item-overrides .iui-button-label{
249
- overflow:hidden;
250
- white-space:nowrap;
251
- text-overflow:ellipsis;
252
- }
253
- .iui-breadcrumbs-item-overrides .iui-button:not([aria-current]), .iui-breadcrumbs-item-overrides .iui-button:not([aria-current]):hover, .iui-breadcrumbs-item-overrides .iui-button:not([aria-current]):active{
254
- --_iui-button-text-color:var(--iui-color-foreground-primary);
255
- }
243
+ @supports not selector(*:focus-visible){
244
+ .iui-breadcrumbs-item-overrides .iui-button.iui-button:focus{
245
+ outline:1px solid var(--iui-color-foreground-primary);
246
+ outline-offset:-1px;
247
+ }
248
+ }
249
+ .iui-breadcrumbs-item-overrides .iui-button-label{
250
+ overflow:hidden;
251
+ white-space:nowrap;
252
+ text-overflow:ellipsis;
253
+ }
254
+ .iui-breadcrumbs-item-overrides .iui-button:not([aria-current]), .iui-breadcrumbs-item-overrides .iui-button:not([aria-current]):hover, .iui-breadcrumbs-item-overrides .iui-button:not([aria-current]):active{
255
+ --_iui-button-text-color:var(--iui-color-foreground-primary);
256
+ }
256
257
 
257
- .iui-breadcrumbs-text{
258
- padding:0 8px;
259
- overflow:hidden;
260
- white-space:nowrap;
261
- text-overflow:ellipsis;
262
- }
263
- a.iui-breadcrumbs-text{
264
- color:#008ae0;
265
- -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
266
- color:var(--iui-color-foreground-primary);
267
- -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
268
- border-radius:4px;
269
- box-sizing:border-box;
270
- cursor:pointer;
271
- text-decoration:none;
272
- }
273
- a.iui-breadcrumbs-text:focus-visible{
274
- outline:1px solid var(--iui-color-foreground-primary);
275
- outline-offset:1px;
276
- }
277
- @supports not selector(*:focus-visible){
278
- a.iui-breadcrumbs-text:focus{
258
+ .iui-breadcrumbs-text{
259
+ padding:0 8px;
260
+ overflow:hidden;
261
+ white-space:nowrap;
262
+ text-overflow:ellipsis;
263
+ }
264
+ a.iui-breadcrumbs-text{
265
+ color:#008ae0;
266
+ -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
267
+ color:var(--iui-color-foreground-primary);
268
+ -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
269
+ border-radius:4px;
270
+ box-sizing:border-box;
271
+ cursor:pointer;
272
+ text-decoration:none;
273
+ }
274
+ a.iui-breadcrumbs-text:focus-visible{
279
275
  outline:1px solid var(--iui-color-foreground-primary);
280
276
  outline-offset:1px;
281
277
  }
282
- }
283
- a.iui-breadcrumbs-text:hover{
284
- color:#006bad;
285
- color:var(--iui-color-foreground-primary-overlay);
286
- }
287
- a.iui-breadcrumbs-text:hover{
288
- text-decoration:underline;
289
- }
290
- @media (prefers-contrast: more){
291
- a.iui-breadcrumbs-text{
292
- text-decoration:underline;
278
+ @supports not selector(*:focus-visible){
279
+ a.iui-breadcrumbs-text:focus{
280
+ outline:1px solid var(--iui-color-foreground-primary);
281
+ outline-offset:1px;
282
+ }
293
283
  }
294
284
  a.iui-breadcrumbs-text:hover{
285
+ color:#006bad;
286
+ color:var(--iui-color-foreground-primary-overlay);
287
+ }
288
+ a.iui-breadcrumbs-text:hover{
289
+ text-decoration:underline;
290
+ }
291
+ @media (prefers-contrast: more){
292
+ a.iui-breadcrumbs-text{
293
+ text-decoration:underline;
294
+ }
295
+ a.iui-breadcrumbs-text:hover{
296
+ text-decoration:none;
297
+ }
298
+ }
299
+ .iui-theme-light a.iui-breadcrumbs-text, .iui-theme-dark a.iui-breadcrumbs-text{
295
300
  text-decoration:none;
296
301
  }
297
- }
298
- .iui-theme-light a.iui-breadcrumbs-text, .iui-theme-dark a.iui-breadcrumbs-text{
299
- text-decoration:none;
300
- }
301
- .iui-theme-light a.iui-breadcrumbs-text:hover, .iui-theme-dark a.iui-breadcrumbs-text:hover{
302
- text-decoration:underline;
303
- }
302
+ .iui-theme-light a.iui-breadcrumbs-text:hover, .iui-theme-dark a.iui-breadcrumbs-text:hover{
303
+ text-decoration:underline;
304
+ }
304
305
 
305
- .iui-theme-light-hc a.iui-breadcrumbs-text, .iui-theme-dark-hc a.iui-breadcrumbs-text{
306
- text-decoration:underline;
307
- }
308
- .iui-theme-light-hc a.iui-breadcrumbs-text:hover, .iui-theme-dark-hc a.iui-breadcrumbs-text:hover{
309
- text-decoration:none;
310
- }
306
+ .iui-theme-light-hc a.iui-breadcrumbs-text, .iui-theme-dark-hc a.iui-breadcrumbs-text{
307
+ text-decoration:underline;
308
+ }
309
+ .iui-theme-light-hc a.iui-breadcrumbs-text:hover, .iui-theme-dark-hc a.iui-breadcrumbs-text:hover{
310
+ text-decoration:none;
311
+ }
311
312
 
312
- a.iui-breadcrumbs-text:focus{
313
- outline-offset:-1px;
314
- }
313
+ a.iui-breadcrumbs-text:focus{
314
+ outline-offset:-1px;
315
+ }
315
316
 
316
- .iui-breadcrumbs-button{
317
- --_iui-button-active-stripe-inset:initial;
318
- --_iui-button-text-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
319
- margin:0;
320
- padding:0;
321
- border:none;
322
- vertical-align:baseline;
323
- font-family:inherit;
324
- display:inline-flex;
325
- align-items:center;
326
- vertical-align:middle;
327
- justify-content:center;
328
- position:relative;
329
- box-sizing:border-box;
330
- border-radius:4px;
331
- line-height:22px;
332
- box-shadow:none;
333
- font-size:14px;
334
- font-weight:400;
335
- text-decoration:none;
336
- -webkit-user-select:none;
337
- -moz-user-select:none;
338
- -ms-user-select:none;
339
- user-select:none;
340
- cursor:pointer;
341
- white-space:nowrap;
342
- border:1px solid transparent;
343
- color:rgba(0, 0, 0, 0.8);
344
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
345
- color:var(--_iui-button-text-color);
346
- border-color:transparent;
347
- background-color:transparent;
348
- padding:0 8px;
349
- height:38px;
350
- gap:8px;
351
- padding:0;
352
- border:none;
353
- color:#008ae0;
354
- color:var(--iui-color-foreground-primary);
355
- }
356
- @media (prefers-reduced-motion: no-preference){
357
317
  .iui-breadcrumbs-button{
358
- transition:color 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out;
359
- }
360
- }
361
- .iui-breadcrumbs-button:hover{
362
- --_iui-button-text-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
363
- text-decoration:none;
364
- }
365
- .iui-breadcrumbs-button:focus-visible{
366
- outline:1px solid var(--iui-color-foreground-primary);
367
- outline-offset:-1px;
368
- }
369
- @supports not selector(*:focus-visible){
370
- .iui-breadcrumbs-button:focus{
318
+ --_iui-button-active-stripe-inset:initial;
319
+ --_iui-button-text-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
320
+ margin:0;
321
+ padding:0;
322
+ border:none;
323
+ vertical-align:baseline;
324
+ font-family:inherit;
325
+ display:inline-flex;
326
+ align-items:center;
327
+ vertical-align:middle;
328
+ justify-content:center;
329
+ position:relative;
330
+ box-sizing:border-box;
331
+ border-radius:4px;
332
+ line-height:22px;
333
+ box-shadow:none;
334
+ font-size:14px;
335
+ font-weight:400;
336
+ text-decoration:none;
337
+ -webkit-user-select:none;
338
+ -moz-user-select:none;
339
+ -ms-user-select:none;
340
+ user-select:none;
341
+ cursor:pointer;
342
+ white-space:nowrap;
343
+ border:1px solid transparent;
344
+ color:rgba(0, 0, 0, 0.8);
345
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
346
+ color:var(--_iui-button-text-color);
347
+ border-color:transparent;
348
+ background-color:transparent;
349
+ padding:0 8px;
350
+ height:38px;
351
+ gap:8px;
352
+ padding:0;
353
+ border:none;
354
+ color:#008ae0;
355
+ color:var(--iui-color-foreground-primary);
356
+ }
357
+ @media (prefers-reduced-motion: no-preference){
358
+ .iui-breadcrumbs-button{
359
+ transition:color 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out;
360
+ }
361
+ }
362
+ .iui-breadcrumbs-button:hover{
363
+ --_iui-button-text-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
364
+ text-decoration:none;
365
+ }
366
+ .iui-breadcrumbs-button:focus-visible{
371
367
  outline:1px solid var(--iui-color-foreground-primary);
372
368
  outline-offset:-1px;
373
369
  }
374
- }
375
- .iui-breadcrumbs-button[disabled], .iui-breadcrumbs-button:disabled{
376
- cursor:not-allowed;
377
- background:#edeff2;
378
- border-color:#edeff2;
379
- color:rgba(0, 0, 0, 0.2);
380
- background:var(--iui-color-background-disabled);
381
- border-color:var(--iui-color-background-disabled);
382
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
383
- }
384
- .iui-breadcrumbs-button > .iui-button-icon:only-child{
385
- margin-left:3px;
386
- margin-right:3px;
387
- }
388
- .iui-breadcrumbs-button:hover{
389
- background-color:rgba(0, 0, 0, 0.1);
390
- border-color:transparent;
391
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
392
- border-color:transparent;
393
- }
394
- .iui-breadcrumbs-button.iui-active{
395
- background-color:rgba(0, 138, 224, 0.1);
396
- color:#008ae0;
397
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
398
- color:var(--iui-color-foreground-primary);
399
- border-color:transparent;
400
- }
401
- .iui-breadcrumbs-button[disabled], .iui-breadcrumbs-button:disabled{
402
- cursor:not-allowed;
403
- background:#edeff2;
404
- border-color:#edeff2;
405
- color:rgba(0, 0, 0, 0.2);
406
- background:var(--iui-color-background-disabled);
407
- border-color:var(--iui-color-background-disabled);
408
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
409
- background-color:transparent;
410
- border-color:transparent;
411
- background-color:transparent;
412
- border-color:transparent;
413
- }
414
- .iui-breadcrumbs-button[disabled].iui-active, .iui-breadcrumbs-button:disabled.iui-active{
415
- background-color:rgba(0, 0, 0, 0.05);
416
- background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
417
- }
418
- .iui-breadcrumbs-button[aria-current]{
419
- color:rgba(0, 0, 0, 0.8);
420
- color:var(--iui-text-color);
421
- }
370
+ @supports not selector(*:focus-visible){
371
+ .iui-breadcrumbs-button:focus{
372
+ outline:1px solid var(--iui-color-foreground-primary);
373
+ outline-offset:-1px;
374
+ }
375
+ }
376
+ .iui-breadcrumbs-button[disabled], .iui-breadcrumbs-button:disabled{
377
+ cursor:not-allowed;
378
+ background:#edeff2;
379
+ border-color:#edeff2;
380
+ color:rgba(0, 0, 0, 0.2);
381
+ background:var(--iui-color-background-disabled);
382
+ border-color:var(--iui-color-background-disabled);
383
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
384
+ }
385
+ .iui-breadcrumbs-button > .iui-button-icon:only-child{
386
+ margin-left:3px;
387
+ margin-right:3px;
388
+ }
389
+ .iui-breadcrumbs-button:hover{
390
+ background-color:rgba(0, 0, 0, 0.1);
391
+ border-color:transparent;
392
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
393
+ border-color:transparent;
394
+ }
395
+ .iui-breadcrumbs-button.iui-active{
396
+ background-color:rgba(0, 138, 224, 0.1);
397
+ color:#008ae0;
398
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
399
+ color:var(--iui-color-foreground-primary);
400
+ border-color:transparent;
401
+ }
402
+ .iui-breadcrumbs-button[disabled], .iui-breadcrumbs-button:disabled{
403
+ cursor:not-allowed;
404
+ background:#edeff2;
405
+ border-color:#edeff2;
406
+ color:rgba(0, 0, 0, 0.2);
407
+ background:var(--iui-color-background-disabled);
408
+ border-color:var(--iui-color-background-disabled);
409
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
410
+ background-color:transparent;
411
+ border-color:transparent;
412
+ background-color:transparent;
413
+ border-color:transparent;
414
+ }
415
+ .iui-breadcrumbs-button[disabled].iui-active, .iui-breadcrumbs-button:disabled.iui-active{
416
+ background-color:rgba(0, 0, 0, 0.05);
417
+ background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
418
+ }
419
+ .iui-breadcrumbs-button[aria-current]{
420
+ color:rgba(0, 0, 0, 0.8);
421
+ color:var(--iui-text-color);
422
+ }
422
423
 
423
- .iui-breadcrumbs-separator{
424
- display:flex;
425
- margin:0 2px;
426
- }
427
- .iui-breadcrumbs-separator svg{
428
- width:12px;
429
- height:12px;
430
- display:flex;
431
- fill:rgba(0, 0, 0, 0.4);
432
- fill:var(--iui-icons-color);
433
- }
434
- @media (forced-colors: active){
424
+ .iui-breadcrumbs-separator{
425
+ display:flex;
426
+ margin:0 2px;
427
+ }
435
428
  .iui-breadcrumbs-separator svg{
436
- fill:CanvasText;
429
+ width:12px;
430
+ height:12px;
431
+ display:flex;
432
+ fill:rgba(0, 0, 0, 0.4);
433
+ fill:var(--iui-icons-color);
434
+ }
435
+ @media (forced-colors: active){
436
+ .iui-breadcrumbs-separator svg{
437
+ fill:CanvasText;
438
+ }
437
439
  }
438
440
  }