@itwin/itwinui-css 0.63.2-dev.0 → 0.63.2

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/side-navigation.css CHANGED
@@ -2,225 +2,227 @@
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-side-navigation{
6
- display:inline-flex;
7
- flex:0 0 auto;
8
- flex-direction:column;
9
- height:100%;
10
- background-color:#edeff2;
11
- border-right:1px solid #c7ccd1;
12
- background-color:var(--iui-color-background-3);
13
- border-right:1px solid var(--iui-color-background-border);
14
- }
15
- @media (prefers-reduced-motion: no-preference){
5
+ @layer itwinui-v1{
16
6
  .iui-side-navigation{
17
- transition:max-width 0.2s ease-out;
7
+ display:inline-flex;
8
+ flex:0 0 auto;
9
+ flex-direction:column;
10
+ height:100%;
11
+ background-color:#edeff2;
12
+ border-right:1px solid #c7ccd1;
13
+ background-color:var(--iui-color-background-3);
14
+ border-right:1px solid var(--iui-color-background-border);
18
15
  }
19
- }
20
- .iui-side-navigation > .iui-sidenav-content{
21
- display:flex;
22
- flex-direction:column;
23
- flex-grow:1;
24
- width:100%;
25
- }
26
- .iui-side-navigation > .iui-sidenav-content > .iui-top,
27
- .iui-side-navigation > .iui-sidenav-content > .iui-bottom{
28
- flex-grow:1;
29
- display:flex;
30
- flex-direction:column;
31
- }
32
- .iui-side-navigation > .iui-sidenav-content > .iui-top .iui-sidenav-button:first-of-type{
33
- border-top:none;
34
- }
35
- .iui-side-navigation > .iui-sidenav-content > .iui-top .iui-sidenav-button:not(:last-of-type){
36
- border-bottom:none;
37
- }
16
+ @media (prefers-reduced-motion: no-preference){
17
+ .iui-side-navigation{
18
+ transition:max-width 0.2s ease-out;
19
+ }
20
+ }
21
+ .iui-side-navigation > .iui-sidenav-content{
22
+ display:flex;
23
+ flex-direction:column;
24
+ flex-grow:1;
25
+ width:100%;
26
+ }
27
+ .iui-side-navigation > .iui-sidenav-content > .iui-top,
38
28
  .iui-side-navigation > .iui-sidenav-content > .iui-bottom{
39
- justify-content:flex-end;
40
- }
41
- .iui-side-navigation > .iui-sidenav-content > .iui-bottom .iui-sidenav-button{
42
- border-bottom:none;
43
- }
44
- .iui-side-navigation > .iui-sidenav-content + .iui-sidenav-button.iui-expand{
45
- border:none;
46
- border-top:1px solid #c7ccd1;
47
- border-top:1px solid var(--iui-color-background-border);
48
- }
49
- .iui-side-navigation.iui-collapsed{
50
- min-width:72px;
51
- max-width:72px;
52
- }
53
- @supports (min-width: max(0px)){
29
+ flex-grow:1;
30
+ display:flex;
31
+ flex-direction:column;
32
+ }
33
+ .iui-side-navigation > .iui-sidenav-content > .iui-top .iui-sidenav-button:first-of-type{
34
+ border-top:none;
35
+ }
36
+ .iui-side-navigation > .iui-sidenav-content > .iui-top .iui-sidenav-button:not(:last-of-type){
37
+ border-bottom:none;
38
+ }
39
+ .iui-side-navigation > .iui-sidenav-content > .iui-bottom{
40
+ justify-content:flex-end;
41
+ }
42
+ .iui-side-navigation > .iui-sidenav-content > .iui-bottom .iui-sidenav-button{
43
+ border-bottom:none;
44
+ }
45
+ .iui-side-navigation > .iui-sidenav-content + .iui-sidenav-button.iui-expand{
46
+ border:none;
47
+ border-top:1px solid #c7ccd1;
48
+ border-top:1px solid var(--iui-color-background-border);
49
+ }
54
50
  .iui-side-navigation.iui-collapsed{
55
- min-width:max(24px * 3, 24px * 3 + env(safe-area-inset-left));
56
- max-width:max(24px * 3, 24px * 3 + env(safe-area-inset-left));
51
+ min-width:72px;
52
+ max-width:72px;
53
+ }
54
+ @supports (min-width: max(0px)){
55
+ .iui-side-navigation.iui-collapsed{
56
+ min-width:max(24px * 3, 24px * 3 + env(safe-area-inset-left));
57
+ max-width:max(24px * 3, 24px * 3 + env(safe-area-inset-left));
58
+ }
57
59
  }
58
- }
59
- .iui-side-navigation.iui-expanded,
60
+ .iui-side-navigation.iui-expanded,
60
61
  .iui-side-navigation > .iui-sidenav-content{
61
- max-width:288px;
62
- }
63
- .iui-side-navigation.iui-expanded > .iui-sidenav-button.iui-expand > .iui-button-icon,
62
+ max-width:288px;
63
+ }
64
+ .iui-side-navigation.iui-expanded > .iui-sidenav-button.iui-expand > .iui-button-icon,
64
65
  .iui-side-navigation > .iui-sidenav-content > .iui-sidenav-button.iui-expand > .iui-button-icon{
65
- transform:scaleX(-1);
66
- }
67
- .iui-side-navigation .iui-sidenav-button{
68
- gap:24px;
69
- border-radius:0;
70
- border-left:none;
71
- border-right:none;
72
- overflow:hidden;
73
- justify-content:flex-start;
74
- --_iui-button-active-stripe-inset:0 0 0 calc(100% - 2px);
75
- }
76
- .iui-side-navigation .iui-sidenav-button:not(.iui-expand){
77
- height:55px;
78
- }
79
- @supports (padding: max(0px)){
66
+ transform:scaleX(-1);
67
+ }
68
+ .iui-side-navigation .iui-sidenav-button{
69
+ gap:24px;
70
+ border-radius:0;
71
+ border-left:none;
72
+ border-right:none;
73
+ overflow:hidden;
74
+ justify-content:flex-start;
75
+ --_iui-button-active-stripe-inset:0 0 0 calc(100% - 2px);
76
+ }
80
77
  .iui-side-navigation .iui-sidenav-button:not(.iui-expand){
81
- padding-left:max(24px, 24px + env(safe-area-inset-left));
82
- }
83
- }
84
- .iui-side-navigation .iui-sidenav-button > .iui-button-label{
85
- white-space:nowrap;
86
- overflow:hidden;
87
- text-overflow:ellipsis;
88
- }
89
- .iui-side-navigation .iui-sidenav-button, .iui-side-navigation .iui-sidenav-button:hover, .iui-side-navigation .iui-sidenav-button[disabled]{
90
- border-color:#c7ccd1;
91
- border-color:var(--iui-color-background-border);
92
- }
93
- .iui-side-navigation .iui-sidenav-button > .iui-button-icon:not(.iui-user-icon){
94
- width:24px;
95
- height:24px;
96
- flex-shrink:0;
97
- }
98
- .iui-side-navigation .iui-sidenav-button.iui-submenu-open .iui-button-icon{
99
- fill:#008ae0;
100
- fill:var(--iui-color-foreground-primary);
101
- }
102
- .iui-side-navigation .iui-sidenav-button[disabled], .iui-side-navigation .iui-sidenav-button:disabled{
103
- background-color:#f9f9fb;
104
- background-color:var(--iui-color-background-2);
105
- }
106
- .iui-side-navigation .iui-sidenav-button.iui-expand{
107
- height:22px;
108
- justify-content:center;
109
- border:none;
110
- border-bottom:1px solid #c7ccd1;
111
- border-bottom:1px solid var(--iui-color-background-border);
112
- }
113
- .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon{
114
- fill:rgba(0, 0, 0, 0.4);
115
- fill:var(--iui-icons-color);
116
- display:inline-flex;
117
- width:12px;
118
- height:12px;
119
- }
120
- @media (forced-colors: active){
121
- .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon{
122
- fill:CanvasText;
123
- }
124
- }
125
- .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-informational{
126
- fill:#008ae0;
127
- fill:var(--iui-icons-color-primary);
128
- }
129
- .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-positive{
130
- fill:#53a21a;
131
- fill:var(--iui-icons-color-positive);
132
- }
133
- .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-warning{
134
- fill:#f18d13;
135
- fill:var(--iui-icons-color-warning);
136
- }
137
- .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-negative{
138
- fill:#d10a0a;
139
- fill:var(--iui-icons-color-negative);
140
- }
141
- @media (prefers-reduced-motion: no-preference){
78
+ height:55px;
79
+ }
80
+ @supports (padding: max(0px)){
81
+ .iui-side-navigation .iui-sidenav-button:not(.iui-expand){
82
+ padding-left:max(24px, 24px + env(safe-area-inset-left));
83
+ }
84
+ }
85
+ .iui-side-navigation .iui-sidenav-button > .iui-button-label{
86
+ white-space:nowrap;
87
+ overflow:hidden;
88
+ text-overflow:ellipsis;
89
+ }
90
+ .iui-side-navigation .iui-sidenav-button, .iui-side-navigation .iui-sidenav-button:hover, .iui-side-navigation .iui-sidenav-button[disabled]{
91
+ border-color:#c7ccd1;
92
+ border-color:var(--iui-color-background-border);
93
+ }
94
+ .iui-side-navigation .iui-sidenav-button > .iui-button-icon:not(.iui-user-icon){
95
+ width:24px;
96
+ height:24px;
97
+ flex-shrink:0;
98
+ }
99
+ .iui-side-navigation .iui-sidenav-button.iui-submenu-open .iui-button-icon{
100
+ fill:#008ae0;
101
+ fill:var(--iui-color-foreground-primary);
102
+ }
103
+ .iui-side-navigation .iui-sidenav-button[disabled], .iui-side-navigation .iui-sidenav-button:disabled{
104
+ background-color:#f9f9fb;
105
+ background-color:var(--iui-color-background-2);
106
+ }
107
+ .iui-side-navigation .iui-sidenav-button.iui-expand{
108
+ height:22px;
109
+ justify-content:center;
110
+ border:none;
111
+ border-bottom:1px solid #c7ccd1;
112
+ border-bottom:1px solid var(--iui-color-background-border);
113
+ }
142
114
  .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon{
143
- transition:transform 0.4s ease-out;
115
+ fill:rgba(0, 0, 0, 0.4);
116
+ fill:var(--iui-icons-color);
117
+ display:inline-flex;
118
+ width:12px;
119
+ height:12px;
120
+ }
121
+ @media (forced-colors: active){
122
+ .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon{
123
+ fill:CanvasText;
124
+ }
125
+ }
126
+ .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-informational{
127
+ fill:#008ae0;
128
+ fill:var(--iui-icons-color-primary);
129
+ }
130
+ .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-positive{
131
+ fill:#53a21a;
132
+ fill:var(--iui-icons-color-positive);
133
+ }
134
+ .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-warning{
135
+ fill:#f18d13;
136
+ fill:var(--iui-icons-color-warning);
137
+ }
138
+ .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-negative{
139
+ fill:#d10a0a;
140
+ fill:var(--iui-icons-color-negative);
141
+ }
142
+ @media (prefers-reduced-motion: no-preference){
143
+ .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon{
144
+ transition:transform 0.4s ease-out;
145
+ }
144
146
  }
145
- }
146
147
 
147
- .iui-side-navigation-submenu{
148
- min-width:192px;
149
- max-width:50vw;
150
- height:100%;
151
- box-sizing:border-box;
152
- overflow-x:hidden;
153
- overflow-y:auto;
154
- overflow-y:overlay;
155
- resize:horizontal;
156
- background-color:white;
157
- border-right:1px solid #c7ccd1;
158
- background-color:var(--iui-color-background-1);
159
- border-right:1px solid var(--iui-color-background-border);
160
- }
161
- .iui-side-navigation-submenu.iui-enter{
162
- opacity:0;
163
- }
164
- .iui-side-navigation-submenu.iui-enter-active{
165
- opacity:1;
166
- }
167
- @media (prefers-reduced-motion: no-preference){
148
+ .iui-side-navigation-submenu{
149
+ min-width:192px;
150
+ max-width:50vw;
151
+ height:100%;
152
+ box-sizing:border-box;
153
+ overflow-x:hidden;
154
+ overflow-y:auto;
155
+ overflow-y:overlay;
156
+ resize:horizontal;
157
+ background-color:white;
158
+ border-right:1px solid #c7ccd1;
159
+ background-color:var(--iui-color-background-1);
160
+ border-right:1px solid var(--iui-color-background-border);
161
+ }
162
+ .iui-side-navigation-submenu.iui-enter{
163
+ opacity:0;
164
+ }
168
165
  .iui-side-navigation-submenu.iui-enter-active{
169
- transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out;
170
- }
171
- }
172
- .iui-side-navigation-submenu.iui-exit{
173
- opacity:1;
174
- }
175
- .iui-side-navigation-submenu.iui-exit-active{
176
- opacity:0;
177
- }
178
- @media (prefers-reduced-motion: no-preference){
166
+ opacity:1;
167
+ }
168
+ @media (prefers-reduced-motion: no-preference){
169
+ .iui-side-navigation-submenu.iui-enter-active{
170
+ transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out;
171
+ }
172
+ }
173
+ .iui-side-navigation-submenu.iui-exit{
174
+ opacity:1;
175
+ }
179
176
  .iui-side-navigation-submenu.iui-exit-active{
180
- transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out;
181
- }
182
- }
183
- .iui-side-navigation-submenu.iui-enter-active, .iui-side-navigation-submenu.iui-exit-active{
184
- display:flex;
185
- }
186
- .iui-side-navigation-submenu-content{
187
- padding:0 12px 11px;
188
- flex-shrink:0;
189
- box-sizing:border-box;
190
- }
191
- .iui-side-navigation-submenu-header{
192
- height:55px;
193
- display:flex;
194
- align-items:center;
195
- justify-content:space-between;
196
- }
197
- .iui-side-navigation-submenu-header-label{
198
- margin:0;
199
- padding:0;
200
- border:none;
201
- vertical-align:baseline;
202
- font-size:24px;
203
- font-weight:300;
204
- line-height:33px;
205
- display:flex;
206
- align-items:center;
207
- overflow:hidden;
208
- }
209
- .iui-side-navigation-submenu-header-label .iui-button{
210
- flex-shrink:0;
211
- }
212
- .iui-side-navigation-submenu-header-label > *{
213
- white-space:nowrap;
214
- overflow:hidden;
215
- text-overflow:ellipsis;
216
- }
217
- .iui-side-navigation-submenu-header-actions{
218
- flex-shrink:0;
219
- margin-left:8px;
220
- }
177
+ opacity:0;
178
+ }
179
+ @media (prefers-reduced-motion: no-preference){
180
+ .iui-side-navigation-submenu.iui-exit-active{
181
+ transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out;
182
+ }
183
+ }
184
+ .iui-side-navigation-submenu.iui-enter-active, .iui-side-navigation-submenu.iui-exit-active{
185
+ display:flex;
186
+ }
187
+ .iui-side-navigation-submenu-content{
188
+ padding:0 12px 11px;
189
+ flex-shrink:0;
190
+ box-sizing:border-box;
191
+ }
192
+ .iui-side-navigation-submenu-header{
193
+ height:55px;
194
+ display:flex;
195
+ align-items:center;
196
+ justify-content:space-between;
197
+ }
198
+ .iui-side-navigation-submenu-header-label{
199
+ margin:0;
200
+ padding:0;
201
+ border:none;
202
+ vertical-align:baseline;
203
+ font-size:24px;
204
+ font-weight:300;
205
+ line-height:33px;
206
+ display:flex;
207
+ align-items:center;
208
+ overflow:hidden;
209
+ }
210
+ .iui-side-navigation-submenu-header-label .iui-button{
211
+ flex-shrink:0;
212
+ }
213
+ .iui-side-navigation-submenu-header-label > *{
214
+ white-space:nowrap;
215
+ overflow:hidden;
216
+ text-overflow:ellipsis;
217
+ }
218
+ .iui-side-navigation-submenu-header-actions{
219
+ flex-shrink:0;
220
+ margin-left:8px;
221
+ }
221
222
 
222
- .iui-side-navigation-wrapper{
223
- display:flex;
224
- position:relative;
225
- height:100%;
223
+ .iui-side-navigation-wrapper{
224
+ display:flex;
225
+ position:relative;
226
+ height:100%;
227
+ }
226
228
  }
package/css/skip-to-content.css CHANGED
@@ -2,67 +2,69 @@
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-skip-to-content-link{
6
- background-color:rgba(0, 0, 0, 0.8);
7
- background-color:rgba(0, 0, 0, var(--iui-opacity-2));
8
- color:white;
9
- color:var(--iui-color-foreground-accessory);
10
- border-radius:9999px;
11
- text-decoration:none;
12
- -webkit-user-select:none;
13
- -moz-user-select:none;
14
- -ms-user-select:none;
15
- user-select:none;
16
- padding:8.25px 16px;
17
- position:fixed;
18
- text-align:center;
19
- left:50%;
20
- top:22px;
21
- opacity:0;
22
- z-index:99;
23
- transform:translateX(-50%) translateY(-170%);
24
- transition:background-color 0.2s ease-in-out;
25
- }
26
- @supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
5
+ @layer itwinui-v1{
27
6
  .iui-skip-to-content-link{
28
- background-color:rgba(0, 0, 0, var(--iui-opacity-3));
29
- -webkit-backdrop-filter:blur(5px);
30
- backdrop-filter:blur(5px);
7
+ background-color:rgba(0, 0, 0, 0.8);
8
+ background-color:rgba(0, 0, 0, var(--iui-opacity-2));
9
+ color:white;
10
+ color:var(--iui-color-foreground-accessory);
11
+ border-radius:9999px;
12
+ text-decoration:none;
13
+ -webkit-user-select:none;
14
+ -moz-user-select:none;
15
+ -ms-user-select:none;
16
+ user-select:none;
17
+ padding:8.25px 16px;
18
+ position:fixed;
19
+ text-align:center;
20
+ left:50%;
21
+ top:22px;
22
+ opacity:0;
23
+ z-index:99;
24
+ transform:translateX(-50%) translateY(-170%);
25
+ transition:background-color 0.2s ease-in-out;
31
26
  }
32
- }
33
- .iui-skip-to-content-link:focus-visible{
34
- outline:2px solid var(--iui-color-foreground-primary);
35
- outline-offset:2px;
36
- }
37
- @supports not selector(*:focus-visible){
38
- .iui-skip-to-content-link:focus{
27
+ @supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
28
+ .iui-skip-to-content-link{
29
+ background-color:rgba(0, 0, 0, var(--iui-opacity-3));
30
+ -webkit-backdrop-filter:blur(5px);
31
+ backdrop-filter:blur(5px);
32
+ }
33
+ }
34
+ .iui-skip-to-content-link:focus-visible{
39
35
  outline:2px solid var(--iui-color-foreground-primary);
40
36
  outline-offset:2px;
41
37
  }
42
- }
43
- @media (prefers-reduced-motion: no-preference){
44
- .iui-skip-to-content-link{
45
- transition:opacity 0.8s ease-in-out, background-color 0.8s ease-in-out, transform 0.8s ease-in-out, box-shadow 0.8s ease-in-out;
38
+ @supports not selector(*:focus-visible){
39
+ .iui-skip-to-content-link:focus{
40
+ outline:2px solid var(--iui-color-foreground-primary);
41
+ outline-offset:2px;
42
+ }
43
+ }
44
+ @media (prefers-reduced-motion: no-preference){
45
+ .iui-skip-to-content-link{
46
+ transition:opacity 0.8s ease-in-out, background-color 0.8s ease-in-out, transform 0.8s ease-in-out, box-shadow 0.8s ease-in-out;
47
+ }
46
48
  }
47
- }
48
- .iui-skip-to-content-link:hover{
49
- background-color:black;
50
- background-color:rgba(0, 0, 0, var(--iui-opacity-1));
51
- }
52
- @supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
53
49
  .iui-skip-to-content-link:hover{
54
- background-color:rgba(0, 0, 0, var(--iui-opacity-2));
55
- -webkit-backdrop-filter:blur(5px);
56
- backdrop-filter:blur(5px);
50
+ background-color:black;
51
+ background-color:rgba(0, 0, 0, var(--iui-opacity-1));
52
+ }
53
+ @supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
54
+ .iui-skip-to-content-link:hover{
55
+ background-color:rgba(0, 0, 0, var(--iui-opacity-2));
56
+ -webkit-backdrop-filter:blur(5px);
57
+ backdrop-filter:blur(5px);
58
+ }
57
59
  }
58
- }
59
- .iui-skip-to-content-link:focus{
60
- opacity:1;
61
- transform:translateX(-50%) translateY(0);
62
- box-shadow:0 6px 30px rgba(0, 0, 0, 0.25);
63
- }
64
- @media (prefers-reduced-motion: no-preference){
65
60
  .iui-skip-to-content-link:focus{
66
- transition:opacity 0s ease-in-out, background-color 0.2s ease-in-out, transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
61
+ opacity:1;
62
+ transform:translateX(-50%) translateY(0);
63
+ box-shadow:0 6px 30px rgba(0, 0, 0, 0.25);
64
+ }
65
+ @media (prefers-reduced-motion: no-preference){
66
+ .iui-skip-to-content-link:focus{
67
+ transition:opacity 0s ease-in-out, background-color 0.2s ease-in-out, transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
68
+ }
67
69
  }
68
70
  }