vue3-router-tab 1.1.4 → 1.1.5
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.
- package/dist/vue3-router-tab.css +1 -1
- package/lib/components/RouterTab.vue +1 -0
- package/lib/scss/index.scss +273 -8
- package/package.json +1 -1
package/dist/vue3-router-tab.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.router-tab{display:flex;flex-direction:column;min-height:300px;background-color:
|
|
1
|
+
.router-tab{display:flex;flex-direction:column;min-height:300px;background-color:transparent;color:inherit}.router-tab__header{position:relative;z-index:9;display:flex;flex:none;box-sizing:border-box;height:40px;border-bottom:1px solid var(--router-tab-border, var(--theme-border, rgba(15, 23, 42, .08)));background-color:var(--router-tab-header-bg, var(--router-tab-background, var(--theme-background, #ffffff)));transition:all .2s ease-in-out}.router-tab__scroll{position:relative;flex:1 1 0px;height:40px;overflow:hidden}.router-tab__scroll-container{width:100%;height:100%;overflow:hidden}.router-tab__scroll-container.is-mobile{overflow-x:auto;overflow-y:hidden}.router-tab__scrollbar{position:absolute;right:0;bottom:0;left:0;height:3px;background-color:#0000001a;border-radius:3px;opacity:0;transition:opacity .3s ease-in-out}.router-tab__scroll:hover .router-tab__scrollbar,.router-tab__scrollbar.is-dragging{opacity:1}.router-tab__scrollbar-thumb{position:absolute;top:0;left:0;height:100%;background-color:#0000001a;border-radius:3px;transition:background-color .3s ease-in-out}.router-tab__scrollbar-thumb:hover,.router-tab__scrollbar.is-dragging .router-tab__scrollbar-thumb{background-color:#0003}.router-tab__nav{position:relative;display:inline-flex;flex-wrap:nowrap;height:100%;margin:0;padding:0;list-style:none}.router-tab__item{position:relative;display:flex;flex:none;align-items:center;padding:0 20px;color:inherit;font-size:14px;border:1px solid var(--router-tab-border, var(--theme-border, rgba(15, 23, 42, .08)));border-left:none;transform-origin:left bottom;cursor:pointer;transition:all .3s ease-in-out;-webkit-user-select:none;user-select:none;background-color:transparent}.router-tab__item:first-child{border-left:1px solid var(--router-tab-border, var(--theme-border, rgba(15, 23, 42, .08)))}.router-tab__item.is-contextmenu{color:var(--router-tab-primary, var(--theme-primary, #635bff))}.router-tab__item.is-drag-over{background:#0000000d;transition:background .15s ease}.router-tab__item-title{min-width:30px;max-width:120px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.router-tab__item-icon{margin-right:5px;font-size:16px}.router-tab__item:hover,.router-tab__item.is-active{color:var(--router-tab-primary, var(--theme-primary, #635bff))}.router-tab__item:hover.is-closable,.router-tab__item.is-active.is-closable{padding:0 11.5px}.router-tab__item:hover .router-tab__item-close,.router-tab__item.is-active .router-tab__item-close{width:13px;margin-left:4px}.router-tab__item:hover .router-tab__item-close:before,.router-tab__item:hover .router-tab__item-close:after,.router-tab__item.is-active .router-tab__item-close:before,.router-tab__item.is-active .router-tab__item-close:after{background-color:#fff}.router-tab__item.is-active{border-bottom-color:var(--router-tab-background, var(--theme-background, #ffffff));background:color-mix(in srgb,var(--router-tab-primary, var(--theme-primary, #635bff)) 12%,var(--router-tab-background, var(--theme-background, #ffffff)) 88%);box-shadow:inset 0 -2px color-mix(in srgb,var(--router-tab-primary, var(--theme-primary, #635bff)) 65%,transparent);color:color-mix(in srgb,var(--router-tab-primary, var(--theme-primary, #635bff)) 80%,var(--router-tab-foreground, var(--theme-foreground, #1e293b)) 20%)}.router-tab__item.is-active:after{content:"";position:absolute;left:16px;right:16px;bottom:6px;height:2px;border-radius:999px;background:var(--router-tab-primary, var(--theme-primary, #635bff));opacity:.6;pointer-events:none}.router-tab__item-close{position:relative;display:block;width:0;height:13px;margin-left:0;overflow:hidden;border-radius:50%;cursor:pointer;transition:all .3s ease-in-out;background:transparent;border:none}.router-tab__item-close:before,.router-tab__item-close:after{position:absolute;top:6px;left:50%;display:block;width:8px;height:1px;margin-left:-4px;background-color:currentColor;transition:background-color .2s ease-in-out;content:""}.router-tab__item-close:before{transform:rotate(-45deg)}.router-tab__item-close:after{transform:rotate(45deg)}.router-tab__item-close:hover{background-color:color-mix(in srgb,var(--router-tab-primary, var(--theme-primary, #635bff)) 40%,#ffffff 60%)}.router-tab__item-close:hover:before,.router-tab__item-close:hover:after{background-color:#fff}.router-tab__contextmenu{position:fixed;z-index:1000;min-width:140px;padding:8px 0;font-size:14px;background:var(--router-tab-background, var(--theme-background, #ffffff));border:1px solid var(--router-tab-border, var(--theme-border, rgba(15, 23, 42, .08)));box-shadow:0 10px 30px #0f172a26;border-radius:8px}.router-tab__contextmenu a,.router-tab__contextmenu button{display:block;width:100%;padding:0 16px;line-height:30px;text-align:left;background:transparent;border:none;color:inherit;cursor:pointer;font:inherit;transition:background-color .2s ease-in-out}.router-tab__contextmenu a[aria-disabled=true],.router-tab__contextmenu button[aria-disabled=true]{color:#94a3b899;pointer-events:none}.router-tab__contextmenu a:hover,.router-tab__contextmenu a:focus-visible,.router-tab__contextmenu button:hover,.router-tab__contextmenu button:focus-visible{background:color-mix(in srgb,var(--router-tab-primary, var(--theme-primary, #635bff)) 20%,#ffffff 80%);color:var(--router-tab-primary, var(--theme-primary, #635bff))}.router-tab__container{padding:1rem;position:relative;flex:1 1 auto;background-color:transparent}.router-tab__item.is-active+.router-tab__item{border-left-color:var(--router-tab-border, var(--theme-border, rgba(15, 23, 42, .08)))}
|
package/lib/scss/index.scss
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
@use "sass:math";
|
|
2
|
+
@use "sass:string";
|
|
2
3
|
|
|
3
4
|
// Fallback palette (overridden by CSS vars when present)
|
|
4
5
|
$primary-fallback: #635bff;
|
|
@@ -6,6 +7,11 @@ $light-bg: #ffffff;
|
|
|
6
7
|
$light-text: #1e293b;
|
|
7
8
|
$light-border: rgba(15, 23, 42, 0.08);
|
|
8
9
|
|
|
10
|
+
// Dark mode fallbacks
|
|
11
|
+
$dark-bg: #0f172a;
|
|
12
|
+
$dark-text: #e2e8f0;
|
|
13
|
+
$dark-border: rgba(226, 232, 240, 0.12);
|
|
14
|
+
|
|
9
15
|
$font-size: 14px;
|
|
10
16
|
$tab-trans: all 0.3s ease-in-out;
|
|
11
17
|
$hd-height: 40px;
|
|
@@ -15,7 +21,21 @@ $close-icon-size: 13px;
|
|
|
15
21
|
|
|
16
22
|
/// Utility to fetch a CSS variable with a graceful fallback.
|
|
17
23
|
@function css-var($name, $fallback) {
|
|
18
|
-
|
|
24
|
+
@return string.unquote("var(#{$name}, #{$fallback})");
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
/// Mixin for reduced motion preferences
|
|
28
|
+
@mixin reduced-motion {
|
|
29
|
+
@media (prefers-reduced-motion: reduce) {
|
|
30
|
+
@content;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/// Mixin for dark theme styles - works with data-theme="dark"
|
|
35
|
+
@mixin dark-theme {
|
|
36
|
+
:root[data-theme="dark"] & {
|
|
37
|
+
@content;
|
|
38
|
+
}
|
|
19
39
|
}
|
|
20
40
|
|
|
21
41
|
.router-tab {
|
|
@@ -24,12 +44,25 @@ $close-icon-size: 13px;
|
|
|
24
44
|
$border: css-var(--router-tab-border, css-var(--theme-border, $light-border));
|
|
25
45
|
$primary: css-var(--router-tab-primary, css-var(--theme-primary, $primary-fallback));
|
|
26
46
|
$header-bg: css-var(--router-tab-header-bg, $bg);
|
|
47
|
+
$tooltip-bg: css-var(--router-tab-tooltip-background, rgba(15, 23, 42, 0.88));
|
|
48
|
+
$tooltip-fg: css-var(--router-tab-tooltip-foreground, #ffffff);
|
|
49
|
+
$tooltip-shadow: css-var(--router-tab-tooltip-shadow, 0 8px 24px rgba(15, 23, 42, 0.18));
|
|
27
50
|
|
|
28
51
|
display: flex;
|
|
29
52
|
flex-direction: column;
|
|
30
53
|
min-height: 300px;
|
|
31
|
-
background-color:
|
|
32
|
-
color:
|
|
54
|
+
background-color: transparent;
|
|
55
|
+
color: inherit;
|
|
56
|
+
|
|
57
|
+
// Dark theme default values
|
|
58
|
+
@include dark-theme {
|
|
59
|
+
--router-tab-background: #{$dark-bg};
|
|
60
|
+
--router-tab-foreground: #{$dark-text};
|
|
61
|
+
--router-tab-border: #{$dark-border};
|
|
62
|
+
--router-tab-tooltip-background: rgba(226, 232, 240, 0.95);
|
|
63
|
+
--router-tab-tooltip-foreground: #{$dark-bg};
|
|
64
|
+
--router-tab-tooltip-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
|
|
65
|
+
}
|
|
33
66
|
|
|
34
67
|
&__header {
|
|
35
68
|
position: relative;
|
|
@@ -41,6 +74,10 @@ $close-icon-size: 13px;
|
|
|
41
74
|
border-bottom: 1px solid $border;
|
|
42
75
|
background-color: $header-bg;
|
|
43
76
|
transition: all 0.2s ease-in-out;
|
|
77
|
+
|
|
78
|
+
@include reduced-motion {
|
|
79
|
+
transition: none;
|
|
80
|
+
}
|
|
44
81
|
}
|
|
45
82
|
|
|
46
83
|
&__scroll {
|
|
@@ -57,6 +94,7 @@ $close-icon-size: 13px;
|
|
|
57
94
|
&.is-mobile {
|
|
58
95
|
overflow-x: auto;
|
|
59
96
|
overflow-y: hidden;
|
|
97
|
+
-webkit-overflow-scrolling: touch;
|
|
60
98
|
}
|
|
61
99
|
}
|
|
62
100
|
}
|
|
@@ -74,6 +112,10 @@ $close-icon-size: 13px;
|
|
|
74
112
|
opacity: 0;
|
|
75
113
|
transition: opacity 0.3s ease-in-out;
|
|
76
114
|
|
|
115
|
+
@include reduced-motion {
|
|
116
|
+
transition: none;
|
|
117
|
+
}
|
|
118
|
+
|
|
77
119
|
.router-tab__scroll:hover &,
|
|
78
120
|
&.is-dragging {
|
|
79
121
|
opacity: 1;
|
|
@@ -88,11 +130,29 @@ $close-icon-size: 13px;
|
|
|
88
130
|
border-radius: $h;
|
|
89
131
|
transition: background-color 0.3s ease-in-out;
|
|
90
132
|
|
|
133
|
+
@include reduced-motion {
|
|
134
|
+
transition: none;
|
|
135
|
+
}
|
|
136
|
+
|
|
91
137
|
&:hover,
|
|
92
138
|
.router-tab__scrollbar.is-dragging & {
|
|
93
139
|
background-color: rgba(0, 0, 0, 0.2);
|
|
94
140
|
}
|
|
95
141
|
}
|
|
142
|
+
|
|
143
|
+
// Dark theme scrollbar
|
|
144
|
+
@include dark-theme {
|
|
145
|
+
background-color: rgba(255, 255, 255, 0.15);
|
|
146
|
+
|
|
147
|
+
.router-tab__scrollbar-thumb {
|
|
148
|
+
background-color: rgba(255, 255, 255, 0.2);
|
|
149
|
+
|
|
150
|
+
&:hover,
|
|
151
|
+
&.is-dragging {
|
|
152
|
+
background-color: rgba(255, 255, 255, 0.35);
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
}
|
|
96
156
|
}
|
|
97
157
|
|
|
98
158
|
&__nav {
|
|
@@ -121,10 +181,21 @@ $close-icon-size: 13px;
|
|
|
121
181
|
user-select: none;
|
|
122
182
|
background-color: transparent;
|
|
123
183
|
|
|
184
|
+
@include reduced-motion {
|
|
185
|
+
transition: none;
|
|
186
|
+
}
|
|
187
|
+
|
|
124
188
|
&:first-child {
|
|
125
189
|
border-left: 1px solid $border;
|
|
126
190
|
}
|
|
127
191
|
|
|
192
|
+
// Keyboard focus styles
|
|
193
|
+
&:focus-visible {
|
|
194
|
+
outline: 2px solid $primary;
|
|
195
|
+
outline-offset: -2px;
|
|
196
|
+
z-index: 1;
|
|
197
|
+
}
|
|
198
|
+
|
|
128
199
|
&.is-contextmenu {
|
|
129
200
|
color: $primary;
|
|
130
201
|
}
|
|
@@ -132,19 +203,37 @@ $close-icon-size: 13px;
|
|
|
132
203
|
&.is-drag-over {
|
|
133
204
|
background: rgba(0, 0, 0, 0.05);
|
|
134
205
|
transition: background 0.15s ease;
|
|
206
|
+
|
|
207
|
+
@include dark-theme {
|
|
208
|
+
background: rgba(255, 255, 255, 0.08);
|
|
209
|
+
}
|
|
135
210
|
}
|
|
136
211
|
|
|
137
212
|
&-title {
|
|
138
|
-
|
|
139
|
-
|
|
213
|
+
position: relative;
|
|
214
|
+
display: inline-flex;
|
|
215
|
+
align-items: center;
|
|
216
|
+
gap: var(--router-tab-title-gap, 0);
|
|
217
|
+
min-width: var(--router-tab-title-min-width, 30px);
|
|
218
|
+
max-width: var(--router-tab-title-max-width, 120px);
|
|
219
|
+
color: var(--router-tab-title-color, inherit);
|
|
220
|
+
font-weight: var(--router-tab-title-font-weight, inherit);
|
|
221
|
+
letter-spacing: var(--router-tab-title-letter-spacing, normal);
|
|
222
|
+
text-transform: var(--router-tab-title-transform, none);
|
|
140
223
|
overflow: hidden;
|
|
141
224
|
white-space: nowrap;
|
|
142
225
|
text-overflow: ellipsis;
|
|
226
|
+
transition: max-width 0.3s ease-in-out;
|
|
227
|
+
|
|
228
|
+
@include reduced-motion {
|
|
229
|
+
transition: none;
|
|
230
|
+
}
|
|
143
231
|
}
|
|
144
232
|
|
|
145
233
|
&-icon {
|
|
146
234
|
margin-right: 5px;
|
|
147
235
|
font-size: 16px;
|
|
236
|
+
flex-shrink: 0;
|
|
148
237
|
}
|
|
149
238
|
|
|
150
239
|
&:hover,
|
|
@@ -166,8 +255,94 @@ $close-icon-size: 13px;
|
|
|
166
255
|
}
|
|
167
256
|
}
|
|
168
257
|
|
|
258
|
+
&:hover {
|
|
259
|
+
.router-tab__item-title {
|
|
260
|
+
max-width: var(--router-tab-title-hover-max-width, 220px);
|
|
261
|
+
}
|
|
262
|
+
}
|
|
263
|
+
|
|
169
264
|
&.is-active {
|
|
170
265
|
border-bottom-color: $bg;
|
|
266
|
+
// Fallback for browsers without color-mix support
|
|
267
|
+
background: rgba(99, 91, 255, 0.12);
|
|
268
|
+
background: color-mix(in srgb, $primary 12%, $bg 88%);
|
|
269
|
+
box-shadow: inset 0 -2px 0 rgba(99, 91, 255, 0.65);
|
|
270
|
+
box-shadow: inset 0 -2px 0 color-mix(in srgb, $primary 65%, transparent);
|
|
271
|
+
color: color-mix(in srgb, $primary 80%, $fg 20%);
|
|
272
|
+
|
|
273
|
+
&::after {
|
|
274
|
+
content: '';
|
|
275
|
+
position: absolute;
|
|
276
|
+
left: 16px;
|
|
277
|
+
right: 16px;
|
|
278
|
+
bottom: 6px;
|
|
279
|
+
height: 2px;
|
|
280
|
+
border-radius: 999px;
|
|
281
|
+
background: $primary;
|
|
282
|
+
opacity: 0.6;
|
|
283
|
+
pointer-events: none;
|
|
284
|
+
}
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
&[data-title] {
|
|
288
|
+
&::after {
|
|
289
|
+
content: attr(data-title);
|
|
290
|
+
position: absolute;
|
|
291
|
+
left: 50%;
|
|
292
|
+
bottom: calc(100% + 8px);
|
|
293
|
+
display: inline-block;
|
|
294
|
+
max-width: 320px;
|
|
295
|
+
padding: 4px 10px;
|
|
296
|
+
border-radius: 6px;
|
|
297
|
+
background: $tooltip-bg;
|
|
298
|
+
color: $tooltip-fg;
|
|
299
|
+
font-size: 12px;
|
|
300
|
+
line-height: 1.3;
|
|
301
|
+
text-align: center;
|
|
302
|
+
white-space: normal;
|
|
303
|
+
word-break: break-word;
|
|
304
|
+
transform: translate(-50%, 4px);
|
|
305
|
+
box-shadow: $tooltip-shadow;
|
|
306
|
+
opacity: 0;
|
|
307
|
+
pointer-events: none;
|
|
308
|
+
transition: opacity 0.2s ease, transform 0.2s ease;
|
|
309
|
+
z-index: 10;
|
|
310
|
+
|
|
311
|
+
@include reduced-motion {
|
|
312
|
+
transition: opacity 0.2s ease;
|
|
313
|
+
transform: translate(-50%, 0);
|
|
314
|
+
}
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
&::before {
|
|
318
|
+
content: '';
|
|
319
|
+
position: absolute;
|
|
320
|
+
left: 50%;
|
|
321
|
+
bottom: calc(100% + 4px);
|
|
322
|
+
width: 8px;
|
|
323
|
+
height: 8px;
|
|
324
|
+
background: $tooltip-bg;
|
|
325
|
+
transform: translate(-50%, 6px) rotate(45deg);
|
|
326
|
+
opacity: 0;
|
|
327
|
+
pointer-events: none;
|
|
328
|
+
transition: opacity 0.2s ease, transform 0.2s ease;
|
|
329
|
+
z-index: 9;
|
|
330
|
+
|
|
331
|
+
@include reduced-motion {
|
|
332
|
+
transition: opacity 0.2s ease;
|
|
333
|
+
transform: translate(-50%, 0) rotate(45deg);
|
|
334
|
+
}
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
&:hover::after {
|
|
338
|
+
opacity: 1;
|
|
339
|
+
transform: translate(-50%, 0);
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
&:hover::before {
|
|
343
|
+
opacity: 1;
|
|
344
|
+
transform: translate(-50%, 0) rotate(45deg);
|
|
345
|
+
}
|
|
171
346
|
}
|
|
172
347
|
|
|
173
348
|
&-close {
|
|
@@ -184,6 +359,17 @@ $close-icon-size: 13px;
|
|
|
184
359
|
transition: $tab-trans;
|
|
185
360
|
background: transparent;
|
|
186
361
|
border: none;
|
|
362
|
+
flex-shrink: 0;
|
|
363
|
+
|
|
364
|
+
@include reduced-motion {
|
|
365
|
+
transition: none;
|
|
366
|
+
}
|
|
367
|
+
|
|
368
|
+
// Keyboard focus
|
|
369
|
+
&:focus-visible {
|
|
370
|
+
outline: 2px solid $primary;
|
|
371
|
+
outline-offset: 2px;
|
|
372
|
+
}
|
|
187
373
|
|
|
188
374
|
&::before,
|
|
189
375
|
&::after {
|
|
@@ -197,6 +383,10 @@ $close-icon-size: 13px;
|
|
|
197
383
|
background-color: currentColor;
|
|
198
384
|
transition: background-color 0.2s ease-in-out;
|
|
199
385
|
content: '';
|
|
386
|
+
|
|
387
|
+
@include reduced-motion {
|
|
388
|
+
transition: none;
|
|
389
|
+
}
|
|
200
390
|
}
|
|
201
391
|
|
|
202
392
|
&::before {
|
|
@@ -208,6 +398,8 @@ $close-icon-size: 13px;
|
|
|
208
398
|
}
|
|
209
399
|
|
|
210
400
|
&:hover {
|
|
401
|
+
// Fallback for browsers without color-mix
|
|
402
|
+
background-color: rgba(99, 91, 255, 0.4);
|
|
211
403
|
background-color: color-mix(in srgb, $primary 40%, #ffffff 60%);
|
|
212
404
|
|
|
213
405
|
&::before,
|
|
@@ -215,6 +407,14 @@ $close-icon-size: 13px;
|
|
|
215
407
|
background-color: #fff;
|
|
216
408
|
}
|
|
217
409
|
}
|
|
410
|
+
|
|
411
|
+
// Dark theme close button
|
|
412
|
+
@include dark-theme {
|
|
413
|
+
&:hover {
|
|
414
|
+
background-color: rgba(99, 91, 255, 0.6);
|
|
415
|
+
background-color: color-mix(in srgb, $primary 60%, transparent 40%);
|
|
416
|
+
}
|
|
417
|
+
}
|
|
218
418
|
}
|
|
219
419
|
}
|
|
220
420
|
|
|
@@ -229,6 +429,11 @@ $close-icon-size: 13px;
|
|
|
229
429
|
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
|
|
230
430
|
border-radius: 8px;
|
|
231
431
|
|
|
432
|
+
// Dark theme context menu
|
|
433
|
+
@include dark-theme {
|
|
434
|
+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
|
|
435
|
+
}
|
|
436
|
+
|
|
232
437
|
a,
|
|
233
438
|
button {
|
|
234
439
|
display: block;
|
|
@@ -243,15 +448,36 @@ $close-icon-size: 13px;
|
|
|
243
448
|
font: inherit;
|
|
244
449
|
transition: background-color 0.2s ease-in-out;
|
|
245
450
|
|
|
451
|
+
@include reduced-motion {
|
|
452
|
+
transition: none;
|
|
453
|
+
}
|
|
454
|
+
|
|
455
|
+
// Keyboard focus
|
|
456
|
+
&:focus-visible {
|
|
457
|
+
outline: 2px solid $primary;
|
|
458
|
+
outline-offset: -2px;
|
|
459
|
+
}
|
|
460
|
+
|
|
246
461
|
&[aria-disabled='true'] {
|
|
247
462
|
color: rgba(148, 163, 184, 0.6);
|
|
248
463
|
pointer-events: none;
|
|
464
|
+
cursor: not-allowed;
|
|
465
|
+
|
|
466
|
+
@include dark-theme {
|
|
467
|
+
color: rgba(226, 232, 240, 0.3);
|
|
468
|
+
}
|
|
249
469
|
}
|
|
250
470
|
|
|
251
|
-
&:hover,
|
|
252
|
-
&:focus-visible {
|
|
471
|
+
&:hover:not([aria-disabled='true']),
|
|
472
|
+
&:focus-visible:not([aria-disabled='true']) {
|
|
473
|
+
// Fallback for browsers without color-mix
|
|
474
|
+
background: rgba(99, 91, 255, 0.2);
|
|
253
475
|
background: color-mix(in srgb, $primary 20%, #ffffff 80%);
|
|
254
476
|
color: $primary;
|
|
477
|
+
|
|
478
|
+
@include dark-theme {
|
|
479
|
+
background: color-mix(in srgb, $primary 25%, transparent 75%);
|
|
480
|
+
}
|
|
255
481
|
}
|
|
256
482
|
}
|
|
257
483
|
}
|
|
@@ -261,9 +487,48 @@ $close-icon-size: 13px;
|
|
|
261
487
|
padding: 1rem;
|
|
262
488
|
position: relative;
|
|
263
489
|
flex: 1 1 auto;
|
|
264
|
-
background-color:
|
|
490
|
+
background-color: transparent;
|
|
265
491
|
}
|
|
266
492
|
|
|
267
493
|
.router-tab__item.is-active + .router-tab__item {
|
|
268
494
|
border-left-color: css-var(--router-tab-border, css-var(--theme-border, $light-border));
|
|
269
495
|
}
|
|
496
|
+
|
|
497
|
+
// Container query support (progressive enhancement)
|
|
498
|
+
@supports (container-type: inline-size) {
|
|
499
|
+
.router-tab {
|
|
500
|
+
container-type: inline-size;
|
|
501
|
+
container-name: router-tab;
|
|
502
|
+
}
|
|
503
|
+
|
|
504
|
+
@container router-tab (max-width: 600px) {
|
|
505
|
+
.router-tab__item {
|
|
506
|
+
padding: 0 12px;
|
|
507
|
+
|
|
508
|
+
&-title {
|
|
509
|
+
max-width: var(--router-tab-title-max-width, 80px);
|
|
510
|
+
}
|
|
511
|
+
|
|
512
|
+
&:hover .router-tab__item-title {
|
|
513
|
+
max-width: var(--router-tab-title-hover-max-width, 150px);
|
|
514
|
+
}
|
|
515
|
+
}
|
|
516
|
+
}
|
|
517
|
+
}
|
|
518
|
+
|
|
519
|
+
// High contrast mode support
|
|
520
|
+
@media (prefers-contrast: high) {
|
|
521
|
+
.router-tab {
|
|
522
|
+
&__item {
|
|
523
|
+
border-width: 2px;
|
|
524
|
+
|
|
525
|
+
&.is-active {
|
|
526
|
+
border-bottom-width: 3px;
|
|
527
|
+
}
|
|
528
|
+
|
|
529
|
+
&:focus-visible {
|
|
530
|
+
outline-width: 3px;
|
|
531
|
+
}
|
|
532
|
+
}
|
|
533
|
+
}
|
|
534
|
+
}
|