@itwin/itwinui-css 0.50.1 → 0.53.0

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 (89) hide show
  1. package/css/alert.css +234 -176
  2. package/css/all.css +8324 -5880
  3. package/css/badge.css +3 -2
  4. package/css/blockquote.css +12 -9
  5. package/css/breadcrumbs.css +110 -87
  6. package/css/button.css +441 -345
  7. package/css/carousel.css +110 -91
  8. package/css/code.css +70 -57
  9. package/css/color-picker.css +164 -113
  10. package/css/date-picker.css +454 -80
  11. package/css/expandable-block.css +213 -161
  12. package/css/fieldset.css +25 -21
  13. package/css/file-upload.css +93 -79
  14. package/css/footer.css +64 -53
  15. package/css/global.css +550 -197
  16. package/css/header.css +485 -367
  17. package/css/icon.css +108 -78
  18. package/css/information-panel.css +181 -137
  19. package/css/inputs.css +1137 -945
  20. package/css/keyboard.css +14 -10
  21. package/css/location-marker.css +69 -59
  22. package/css/menu.css +124 -86
  23. package/css/modal.css +114 -44
  24. package/css/non-ideal-state.css +47 -40
  25. package/css/notification-marker.css +275 -200
  26. package/css/popover.css +10 -8
  27. package/css/progress-indicator.css +316 -238
  28. package/css/reset-global-styles.css +10 -5
  29. package/css/side-navigation.css +193 -144
  30. package/css/skip-to-content.css +42 -28
  31. package/css/slider.css +116 -91
  32. package/css/surface.css +19 -0
  33. package/css/table.css +578 -430
  34. package/css/tabs.css +324 -238
  35. package/css/tag.css +112 -85
  36. package/css/text.css +47 -28
  37. package/css/tile.css +389 -313
  38. package/css/time-picker.css +114 -87
  39. package/css/toast-notification.css +234 -175
  40. package/css/toggle-switch.css +176 -111
  41. package/css/tooltip.css +24 -17
  42. package/css/tree.css +123 -93
  43. package/css/user-icon.css +222 -162
  44. package/css/wizard.css +158 -133
  45. package/package.json +5 -6
  46. package/scss/alert/alert.scss +1 -5
  47. package/scss/carousel/carousel.scss +24 -27
  48. package/scss/classes.scss +1 -0
  49. package/scss/code/codeblock.scss +1 -1
  50. package/scss/color-picker/color-picker.scss +2 -2
  51. package/scss/date-picker/classes.scss +20 -0
  52. package/scss/date-picker/date-picker.scss +194 -33
  53. package/scss/fieldset/fieldset.scss +1 -1
  54. package/scss/header/header.scss +15 -10
  55. package/scss/index.scss +1 -0
  56. package/scss/information-panel/information-panel.scss +10 -3
  57. package/scss/inputs/checkbox.scss +1 -0
  58. package/scss/inputs/labeled-inputs.scss +8 -8
  59. package/scss/inputs/radio.scss +0 -4
  60. package/scss/location-marker/data-rich.scss +1 -1
  61. package/scss/location-marker/me.scss +4 -4
  62. package/scss/menu/classes.scss +2 -1
  63. package/scss/menu/menu.scss +8 -11
  64. package/scss/modal/classes.scss +4 -0
  65. package/scss/modal/modal.scss +82 -7
  66. package/scss/popover/popover.scss +1 -2
  67. package/scss/progress-indicator/linear.scss +3 -11
  68. package/scss/progress-indicator/radial.scss +1 -1
  69. package/scss/side-navigation/side-navigation.scss +5 -5
  70. package/scss/slider/slider.scss +2 -2
  71. package/scss/style/elevation.scss +5 -5
  72. package/scss/style/global.scss +33 -26
  73. package/scss/style/mixins.scss +9 -0
  74. package/scss/style/ripple.scss +1 -1
  75. package/scss/style/speed.scss +1 -0
  76. package/scss/style/theme.scss +248 -65
  77. package/scss/surface/classes.scss +7 -0
  78. package/scss/surface/index.scss +3 -0
  79. package/scss/surface/surface.scss +18 -0
  80. package/scss/table/column-filter.scss +2 -2
  81. package/scss/table/table.scss +26 -17
  82. package/scss/tile/tile.scss +5 -5
  83. package/scss/time-picker/time-picker.scss +2 -2
  84. package/scss/toast-notification/categories.scss +1 -5
  85. package/scss/toggle-switch/classes.scss +4 -0
  86. package/scss/toggle-switch/toggle-switch.scss +141 -162
  87. package/scss/tooltip/tooltip.scss +2 -1
  88. package/scss/user-icon/user-icon.scss +38 -19
  89. package/scss/wizard/wizard.scss +1 -1
package/css/side-navigation.css CHANGED
@@ -7,105 +7,137 @@
7
7
  flex:0 0 auto;
8
8
  flex-direction:column;
9
9
  height:100%;
10
- background-color:#EEF0F3;
11
- border-right:1px solid #C7CCD1;
10
+ background-color:#edeff2;
11
+ border-right:1px solid #c7ccd1;
12
12
  background-color:var(--iui-color-background-3);
13
- border-right:1px solid var(--iui-color-background-5); }
14
- @media (prefers-reduced-motion: no-preference){
15
- .iui-side-navigation{
16
- transition:max-width 0.2s ease-out; } }
17
- .iui-side-navigation > .iui-sidenav-content{
18
- display:flex;
19
- flex-direction:column;
20
- flex-grow:1;
21
- width:100%; }
22
- .iui-side-navigation > .iui-sidenav-content > .iui-top,
23
- .iui-side-navigation > .iui-sidenav-content > .iui-bottom{
24
- flex-grow:1;
25
- display:flex;
26
- flex-direction:column; }
27
- .iui-side-navigation > .iui-sidenav-content > .iui-top .iui-sidenav-button:first-of-type{
28
- border-top:none; }
29
- .iui-side-navigation > .iui-sidenav-content > .iui-top .iui-sidenav-button:not(:last-of-type){
30
- border-bottom:none; }
31
- .iui-side-navigation > .iui-sidenav-content > .iui-bottom{
32
- justify-content:flex-end; }
33
- .iui-side-navigation > .iui-sidenav-content > .iui-bottom .iui-sidenav-button{
34
- border-bottom:none; }
35
- .iui-side-navigation > .iui-sidenav-content + .iui-sidenav-button.iui-expand{
36
- border:none;
37
- border-top:1px solid #C7CCD1;
38
- border-top:1px solid var(--iui-color-background-5); }
13
+ border-right:1px solid var(--iui-color-background-border);
14
+ }
15
+ @media (prefers-reduced-motion: no-preference){
16
+ .iui-side-navigation{
17
+ transition:max-width 0.2s ease-out;
18
+ }
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
+ }
38
+ .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)){
39
54
  .iui-side-navigation.iui-collapsed{
40
- min-width:72px;
41
- max-width:72px; }
42
- @supports (min-width: max(0px)){
43
- .iui-side-navigation.iui-collapsed{
44
- min-width:max(24px * 3, 24px * 3 + env(safe-area-inset-left));
45
- max-width:max(24px * 3, 24px * 3 + env(safe-area-inset-left)); } }
46
- .iui-side-navigation.iui-expanded,
47
- .iui-side-navigation > .iui-sidenav-content{
48
- max-width:288px; }
49
- .iui-side-navigation.iui-expanded > .iui-sidenav-button.iui-expand > .iui-button-icon,
50
- .iui-side-navigation > .iui-sidenav-content > .iui-sidenav-button.iui-expand > .iui-button-icon{
51
- transform:scaleX(-1); }
52
- .iui-side-navigation .iui-sidenav-button{
53
- gap:24px;
54
- border-radius:0;
55
- border-left:none;
56
- border-right:none;
57
- overflow:hidden;
58
- justify-content:flex-start;
59
- --_iui-button-active-stripe-inset:0 calc(100% - 2px) 0 0; }
60
- .iui-side-navigation .iui-sidenav-button:not(.iui-expand){
61
- height:55px; }
62
- @supports (padding: max(0px)){
63
- .iui-side-navigation .iui-sidenav-button:not(.iui-expand){
64
- padding-left:max(24px, 24px + env(safe-area-inset-left)); } }
65
- .iui-side-navigation .iui-sidenav-button > .iui-button-label{
66
- white-space:nowrap;
67
- overflow:hidden;
68
- text-overflow:ellipsis; }
69
- .iui-side-navigation .iui-sidenav-button, .iui-side-navigation .iui-sidenav-button:hover, .iui-side-navigation .iui-sidenav-button[disabled]{
70
- border-color:#C7CCD1;
71
- border-color:var(--iui-color-background-5); }
72
- .iui-side-navigation .iui-sidenav-button > .iui-button-icon:not(.iui-user-icon){
73
- width:24px;
74
- height:24px;
75
- flex-shrink:0; }
76
- .iui-side-navigation .iui-sidenav-button.iui-submenu-open .iui-button-icon{
77
- fill:#008BE1;
78
- fill:var(--iui-color-foreground-primary); }
79
- .iui-side-navigation .iui-sidenav-button[disabled], .iui-side-navigation .iui-sidenav-button:disabled{
80
- background-color:#F8F9FB;
81
- background-color:var(--iui-color-background-2); }
82
- .iui-side-navigation .iui-sidenav-button.iui-expand{
83
- height:22px;
84
- justify-content:center;
85
- border:none;
86
- border-bottom:1px solid #C7CCD1;
87
- border-bottom:1px solid var(--iui-color-background-5); }
88
- .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon{
89
- fill:rgba(0, 0, 0, 0.4);
90
- fill:var(--iui-icons-color);
91
- display:inline-flex;
92
- width:12px;
93
- height:12px; }
94
- .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-informational{
95
- fill:#008BE1;
96
- fill:var(--iui-icons-color-primary); }
97
- .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-positive{
98
- fill:#53A21A;
99
- fill:var(--iui-icons-color-positive); }
100
- .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-warning{
101
- fill:#F18B12;
102
- fill:var(--iui-icons-color-warning); }
103
- .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-negative{
104
- fill:#D30A0A;
105
- fill:var(--iui-icons-color-negative); }
106
- @media (prefers-reduced-motion: no-preference){
107
- .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon{
108
- transition:transform 0.4s ease-out; } }
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));
57
+ }
58
+ }
59
+ .iui-side-navigation.iui-expanded,
60
+ .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,
64
+ .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 calc(100% - 2px) 0 0;
75
+ }
76
+ .iui-side-navigation .iui-sidenav-button:not(.iui-expand){
77
+ height:55px;
78
+ }
79
+ @supports (padding: max(0px)){
80
+ .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
+ .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-informational{
121
+ fill:#008ae0;
122
+ fill:var(--iui-icons-color-primary);
123
+ }
124
+ .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-positive{
125
+ fill:#53a21a;
126
+ fill:var(--iui-icons-color-positive);
127
+ }
128
+ .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-warning{
129
+ fill:#f18d13;
130
+ fill:var(--iui-icons-color-warning);
131
+ }
132
+ .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-negative{
133
+ fill:#d10a0a;
134
+ fill:var(--iui-icons-color-negative);
135
+ }
136
+ @media (prefers-reduced-motion: no-preference){
137
+ .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon{
138
+ transition:transform 0.4s ease-out;
139
+ }
140
+ }
109
141
 
110
142
  .iui-side-navigation-submenu{
111
143
  min-width:192px;
@@ -116,57 +148,74 @@
116
148
  overflow-y:auto;
117
149
  overflow-y:overlay;
118
150
  resize:horizontal;
119
- background-color:#FFF;
120
- border-right:1px solid #C7CCD1;
151
+ background-color:white;
152
+ border-right:1px solid #c7ccd1;
121
153
  background-color:var(--iui-color-background-1);
122
- border-right:1px solid var(--iui-color-background-5); }
123
- .iui-side-navigation-submenu.iui-enter{
124
- opacity:0; }
154
+ border-right:1px solid var(--iui-color-background-border);
155
+ }
156
+ .iui-side-navigation-submenu.iui-enter{
157
+ opacity:0;
158
+ }
159
+ .iui-side-navigation-submenu.iui-enter-active{
160
+ opacity:1;
161
+ }
162
+ @media (prefers-reduced-motion: no-preference){
125
163
  .iui-side-navigation-submenu.iui-enter-active{
126
- opacity:1; }
127
- @media (prefers-reduced-motion: no-preference){
128
- .iui-side-navigation-submenu.iui-enter-active{
129
- transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out; } }
130
- .iui-side-navigation-submenu.iui-exit{
131
- opacity:1; }
164
+ transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out;
165
+ }
166
+ }
167
+ .iui-side-navigation-submenu.iui-exit{
168
+ opacity:1;
169
+ }
170
+ .iui-side-navigation-submenu.iui-exit-active{
171
+ opacity:0;
172
+ }
173
+ @media (prefers-reduced-motion: no-preference){
132
174
  .iui-side-navigation-submenu.iui-exit-active{
133
- opacity:0; }
134
- @media (prefers-reduced-motion: no-preference){
135
- .iui-side-navigation-submenu.iui-exit-active{
136
- transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out; } }
137
- .iui-side-navigation-submenu.iui-enter-active, .iui-side-navigation-submenu.iui-exit-active{
138
- display:flex; }
139
- .iui-side-navigation-submenu-content{
140
- padding:0 12px 11px;
141
- flex-shrink:0;
142
- box-sizing:border-box; }
143
- .iui-side-navigation-submenu-header{
144
- height:55px;
145
- display:flex;
146
- align-items:center;
147
- justify-content:space-between; }
148
- .iui-side-navigation-submenu-header-label{
149
- margin:0;
150
- padding:0;
151
- border:none;
152
- vertical-align:baseline;
153
- font-size:24px;
154
- font-weight:300;
155
- line-height:33px;
156
- display:flex;
157
- align-items:center;
158
- overflow:hidden; }
159
- .iui-side-navigation-submenu-header-label .iui-button{
160
- flex-shrink:0; }
161
- .iui-side-navigation-submenu-header-label > *{
162
- white-space:nowrap;
163
- overflow:hidden;
164
- text-overflow:ellipsis; }
165
- .iui-side-navigation-submenu-header-actions{
166
- flex-shrink:0;
167
- margin-left:8px; }
175
+ transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out;
176
+ }
177
+ }
178
+ .iui-side-navigation-submenu.iui-enter-active, .iui-side-navigation-submenu.iui-exit-active{
179
+ display:flex;
180
+ }
181
+ .iui-side-navigation-submenu-content{
182
+ padding:0 12px 11px;
183
+ flex-shrink:0;
184
+ box-sizing:border-box;
185
+ }
186
+ .iui-side-navigation-submenu-header{
187
+ height:55px;
188
+ display:flex;
189
+ align-items:center;
190
+ justify-content:space-between;
191
+ }
192
+ .iui-side-navigation-submenu-header-label{
193
+ margin:0;
194
+ padding:0;
195
+ border:none;
196
+ vertical-align:baseline;
197
+ font-size:24px;
198
+ font-weight:300;
199
+ line-height:33px;
200
+ display:flex;
201
+ align-items:center;
202
+ overflow:hidden;
203
+ }
204
+ .iui-side-navigation-submenu-header-label .iui-button{
205
+ flex-shrink:0;
206
+ }
207
+ .iui-side-navigation-submenu-header-label > *{
208
+ white-space:nowrap;
209
+ overflow:hidden;
210
+ text-overflow:ellipsis;
211
+ }
212
+ .iui-side-navigation-submenu-header-actions{
213
+ flex-shrink:0;
214
+ margin-left:8px;
215
+ }
168
216
 
169
217
  .iui-side-navigation-wrapper{
170
218
  display:flex;
171
219
  position:relative;
172
- height:100%; }
220
+ height:100%;
221
+ }
package/css/skip-to-content.css CHANGED
@@ -5,7 +5,7 @@
5
5
  .iui-skip-to-content-link{
6
6
  background-color:rgba(0, 0, 0, 0.8);
7
7
  background-color:rgba(0, 0, 0, var(--iui-opacity-2));
8
- color:#FFF;
8
+ color:white;
9
9
  color:var(--iui-color-foreground-accessory);
10
10
  border-radius:9999px;
11
11
  text-decoration:none;
@@ -19,33 +19,47 @@
19
19
  left:50%;
20
20
  top:22px;
21
21
  transform:translateX(-50%) translateY(-170%);
22
- transition:background-color 0.2s ease-in-out; }
23
- @supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
24
- .iui-skip-to-content-link{
25
- background-color:rgba(0, 0, 0, var(--iui-opacity-3));
26
- -webkit-backdrop-filter:blur(5px);
27
- backdrop-filter:blur(5px); } }
28
- .iui-skip-to-content-link:focus-visible{
22
+ transition:background-color 0.2s ease-in-out;
23
+ }
24
+ @supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
25
+ .iui-skip-to-content-link{
26
+ background-color:rgba(0, 0, 0, var(--iui-opacity-3));
27
+ -webkit-backdrop-filter:blur(5px);
28
+ backdrop-filter:blur(5px);
29
+ }
30
+ }
31
+ .iui-skip-to-content-link:focus-visible{
32
+ outline:2px solid var(--iui-color-foreground-primary);
33
+ outline-offset:2px;
34
+ }
35
+ @supports not selector(*:focus-visible){
36
+ .iui-skip-to-content-link:focus{
29
37
  outline:2px solid var(--iui-color-foreground-primary);
30
- outline-offset:2px; }
31
- @supports not selector(*:focus-visible){
32
- .iui-skip-to-content-link:focus{
33
- outline:2px solid var(--iui-color-foreground-primary);
34
- outline-offset:2px; } }
35
- @media (prefers-reduced-motion: no-preference){
36
- .iui-skip-to-content-link{
37
- transition:background-color 0.2s ease-in-out, transform 0.8s ease-in-out, box-shadow 0.2s ease-in-out; } }
38
+ outline-offset:2px;
39
+ }
40
+ }
41
+ @media (prefers-reduced-motion: no-preference){
42
+ .iui-skip-to-content-link{
43
+ transition:background-color 0.2s ease-in-out, transform 0.8s ease-in-out, box-shadow 0.2s ease-in-out;
44
+ }
45
+ }
46
+ .iui-skip-to-content-link:hover{
47
+ background-color:black;
48
+ background-color:rgba(0, 0, 0, var(--iui-opacity-1));
49
+ }
50
+ @supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
38
51
  .iui-skip-to-content-link:hover{
39
- background-color:black;
40
- background-color:rgba(0, 0, 0, var(--iui-opacity-1)); }
41
- @supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
42
- .iui-skip-to-content-link:hover{
43
- background-color:rgba(0, 0, 0, var(--iui-opacity-2));
44
- -webkit-backdrop-filter:blur(5px);
45
- backdrop-filter:blur(5px); } }
52
+ background-color:rgba(0, 0, 0, var(--iui-opacity-2));
53
+ -webkit-backdrop-filter:blur(5px);
54
+ backdrop-filter:blur(5px);
55
+ }
56
+ }
57
+ .iui-skip-to-content-link:focus{
58
+ transform:translateX(-50%) translateY(0);
59
+ box-shadow:0 6px 30px rgba(0, 0, 0, 0.25);
60
+ }
61
+ @media (prefers-reduced-motion: no-preference){
46
62
  .iui-skip-to-content-link:focus{
47
- transform:translateX(-50%) translateY(0);
48
- box-shadow:0 6px 30px rgba(0, 0, 0, 0.25); }
49
- @media (prefers-reduced-motion: no-preference){
50
- .iui-skip-to-content-link:focus{
51
- transition:transform 0.2s ease-in-out; } }
63
+ transition:transform 0.2s ease-in-out;
64
+ }
65
+ }