@auronui/styles 1.0.5 → 1.0.6
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/components/tabs.css +221 -1
- package/package.json +1 -1
package/components/tabs.css
CHANGED
|
@@ -14,7 +14,192 @@
|
|
|
14
14
|
|
|
15
15
|
/* Tab list container */
|
|
16
16
|
.tabs__list-container {
|
|
17
|
-
@apply relative;
|
|
17
|
+
@apply relative flex items-center;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
/* Dropdown mode — pill background lifts to the container (same pattern as --arrows) so the
|
|
21
|
+
in-flow more button appears visually inside the pill. Flat selector avoids nesting issues. */
|
|
22
|
+
.tabs__list-container--dropdown {
|
|
23
|
+
@apply bg-default;
|
|
24
|
+
border-radius: calc(var(--radius-2xl) + 0.25rem);
|
|
25
|
+
padding: 0.25rem;
|
|
26
|
+
gap: 0.25rem;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
/* Inner TabsList in dropdown mode: strip background/radius/padding (now on the container),
|
|
30
|
+
flex:1 fills remaining width, overflow:hidden clips tabs that don't fit. */
|
|
31
|
+
.tabs__list--clipped {
|
|
32
|
+
flex: 1;
|
|
33
|
+
min-width: 0;
|
|
34
|
+
overflow: hidden;
|
|
35
|
+
background-color: transparent !important;
|
|
36
|
+
border-radius: 0 !important;
|
|
37
|
+
padding: 0 !important;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
/* Arrows mode: background lifts here; arrows are absolutely positioned (no layout impact).
|
|
41
|
+
Written as a flat selector (not nested &--arrows) to avoid CSS nesting compile issues. */
|
|
42
|
+
.tabs__list-container--arrows {
|
|
43
|
+
/* Primary variant: pill background on the container, not the inner list */
|
|
44
|
+
@apply bg-default;
|
|
45
|
+
border-radius: calc(var(--radius-2xl) + 0.25rem);
|
|
46
|
+
padding: 0.25rem;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/* Scroll wrapper for arrows mode — fills the container width, clips overflow */
|
|
50
|
+
.tabs__scroll-wrapper {
|
|
51
|
+
flex: 1;
|
|
52
|
+
min-width: 0;
|
|
53
|
+
overflow-x: auto;
|
|
54
|
+
scrollbar-width: none;
|
|
55
|
+
|
|
56
|
+
&::-webkit-scrollbar {
|
|
57
|
+
display: none;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
/* Gradient fade edges — pseudo-elements on the container that fade the pill
|
|
63
|
+
background color over the outermost tabs, making arrows easy to read. */
|
|
64
|
+
/* .tabs__list-container--arrows::before,
|
|
65
|
+
.tabs__list-container--arrows::after {
|
|
66
|
+
content: '';
|
|
67
|
+
position: absolute;
|
|
68
|
+
top: 0.25rem;
|
|
69
|
+
bottom: 0.25rem;
|
|
70
|
+
width: 2.5rem;
|
|
71
|
+
z-index: 1;
|
|
72
|
+
pointer-events: none;
|
|
73
|
+
border-radius: inherit;
|
|
74
|
+
opacity: 0;
|
|
75
|
+
transition: opacity 200ms var(--ease-smooth);
|
|
76
|
+
} */
|
|
77
|
+
|
|
78
|
+
/* .tabs__list-container--arrows::before {
|
|
79
|
+
left: 0.25rem;
|
|
80
|
+
background: linear-gradient(to right, var(--color-default), transparent);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.tabs__list-container--arrows::after {
|
|
84
|
+
right: 0.25rem;
|
|
85
|
+
background: linear-gradient(to left, var(--color-default), transparent);
|
|
86
|
+
} */
|
|
87
|
+
|
|
88
|
+
.tabs__list-container--arrows.has-left::before { opacity: 1; }
|
|
89
|
+
.tabs__list-container--arrows.has-right::after { opacity: 1; }
|
|
90
|
+
|
|
91
|
+
/* Arrow buttons — absolutely positioned, float over the fade gradient.
|
|
92
|
+
Button component handles sizing, color, hover, focus, and cursor.
|
|
93
|
+
Only positioning and opacity-based show/hide live here. */
|
|
94
|
+
.tabs__arrow {
|
|
95
|
+
position: absolute !important;
|
|
96
|
+
top: 50%;
|
|
97
|
+
transform: translateY(-50%) !important;
|
|
98
|
+
z-index: 2;
|
|
99
|
+
/* Hidden by default — shown via .is-visible */
|
|
100
|
+
opacity: 0;
|
|
101
|
+
pointer-events: none;
|
|
102
|
+
transition: opacity 200ms var(--ease-smooth);
|
|
103
|
+
background: var(--segment) !important;
|
|
104
|
+
@apply motion-reduce:transition-none;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.tabs__arrow--left { left: 0.375rem; }
|
|
108
|
+
.tabs__arrow--right { right: 0.375rem; }
|
|
109
|
+
|
|
110
|
+
.tabs__arrow.is-visible {
|
|
111
|
+
opacity: 1;
|
|
112
|
+
pointer-events: auto;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
/* "More" button — in-flow flex sibling, hidden with display:none so it takes no space when
|
|
116
|
+
there is no overflow. The container (not position:absolute) provides the pill background,
|
|
117
|
+
so when --visible the button appears naturally inside the pill. */
|
|
118
|
+
.tabs__more {
|
|
119
|
+
display: none;
|
|
120
|
+
flex-shrink: 0;
|
|
121
|
+
align-items: center;
|
|
122
|
+
position: relative;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.tabs__more--visible {
|
|
126
|
+
display: flex;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.tabs__more-btn {
|
|
130
|
+
background: var(--segment) !important;
|
|
131
|
+
transition: color 150ms var(--ease-smooth), background 150ms var(--ease-smooth);
|
|
132
|
+
@apply motion-reduce:transition-none;
|
|
133
|
+
|
|
134
|
+
@media (hover: hover) {
|
|
135
|
+
&:hover {
|
|
136
|
+
color: theme('colors.foreground');
|
|
137
|
+
@apply bg-default;
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
&:focus-visible {
|
|
142
|
+
@apply status-focused;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
&[aria-expanded="true"] {
|
|
146
|
+
@apply bg-default text-foreground;
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.tabs__overflow-menu {
|
|
151
|
+
position: absolute;
|
|
152
|
+
top: calc(100% + 0.375rem);
|
|
153
|
+
right: 0;
|
|
154
|
+
min-width: 10rem;
|
|
155
|
+
padding: 0.25rem;
|
|
156
|
+
border-radius: var(--radius-xl);
|
|
157
|
+
border: 1px solid theme('colors.border');
|
|
158
|
+
background: theme('colors.background');
|
|
159
|
+
box-shadow: var(--shadow-lg);
|
|
160
|
+
z-index: 50;
|
|
161
|
+
display: flex;
|
|
162
|
+
flex-direction: column;
|
|
163
|
+
gap: 0.125rem;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.tabs__overflow-item {
|
|
167
|
+
display: flex;
|
|
168
|
+
align-items: center;
|
|
169
|
+
width: 100% !important;
|
|
170
|
+
padding: 0.375rem 0.625rem;
|
|
171
|
+
border-radius: var(--radius-lg);
|
|
172
|
+
border: none;
|
|
173
|
+
background: transparent;
|
|
174
|
+
cursor: var(--cursor-interactive);
|
|
175
|
+
font-size: 0.875rem;
|
|
176
|
+
font-weight: 500;
|
|
177
|
+
color: theme('colors.foreground / 75%');
|
|
178
|
+
text-align: left;
|
|
179
|
+
outline: none;
|
|
180
|
+
transition: color 150ms var(--ease-smooth), background 150ms var(--ease-smooth);
|
|
181
|
+
@apply motion-reduce:transition-none;
|
|
182
|
+
|
|
183
|
+
@media (hover: hover) {
|
|
184
|
+
&:hover {
|
|
185
|
+
@apply bg-default text-foreground;
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
&:focus-visible {
|
|
190
|
+
@apply status-focused;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
&:disabled {
|
|
194
|
+
@apply status-disabled;
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
/* Hide tabs that overflow in dropdown mode.
|
|
199
|
+
!important is required: .tabs__tab uses `@apply flex` which is declared later in this file
|
|
200
|
+
at equal specificity, so without !important the flex display wins and tabs stay visible. */
|
|
201
|
+
[data-overflow-hidden] {
|
|
202
|
+
display: none !important;
|
|
18
203
|
}
|
|
19
204
|
|
|
20
205
|
/* Tab list */
|
|
@@ -38,6 +223,16 @@
|
|
|
38
223
|
}
|
|
39
224
|
}
|
|
40
225
|
|
|
226
|
+
/* Inner TabsList in arrows mode — must come AFTER .tabs__list so these declarations
|
|
227
|
+
win the cascade. All four use !important as an extra guard against secondary-variant
|
|
228
|
+
rules that use higher-specificity selectors. */
|
|
229
|
+
.tabs__list--scroll {
|
|
230
|
+
background-color: transparent !important;
|
|
231
|
+
padding: 0 !important;
|
|
232
|
+
border-radius: 0 !important;
|
|
233
|
+
width: max-content !important;
|
|
234
|
+
}
|
|
235
|
+
|
|
41
236
|
/* Individual tab */
|
|
42
237
|
.tabs__tab {
|
|
43
238
|
position: relative;
|
|
@@ -196,6 +391,31 @@
|
|
|
196
391
|
========================================================================== */
|
|
197
392
|
|
|
198
393
|
.tabs--secondary {
|
|
394
|
+
/* In arrows mode the border-b moves to the container and scroll is handled by the wrapper */
|
|
395
|
+
.tabs__list-container--arrows {
|
|
396
|
+
@apply border-b border-border bg-transparent;
|
|
397
|
+
border-radius: 0;
|
|
398
|
+
padding: 0;
|
|
399
|
+
|
|
400
|
+
/* No pill padding, so flush-mount the arrows to the edges */
|
|
401
|
+
.tabs__arrow--left { left: 0; }
|
|
402
|
+
.tabs__arrow--right { right: 0; }
|
|
403
|
+
|
|
404
|
+
.tabs__list--scroll[data-orientation="horizontal"] {
|
|
405
|
+
border-bottom: none;
|
|
406
|
+
overflow-x: visible;
|
|
407
|
+
max-width: none;
|
|
408
|
+
}
|
|
409
|
+
}
|
|
410
|
+
|
|
411
|
+
/* In dropdown mode the border-b moves to the container; no pill background */
|
|
412
|
+
.tabs__list-container--dropdown {
|
|
413
|
+
@apply border-b border-border bg-transparent;
|
|
414
|
+
border-radius: 0;
|
|
415
|
+
padding: 0;
|
|
416
|
+
gap: 0;
|
|
417
|
+
}
|
|
418
|
+
|
|
199
419
|
/* Tab list - remove background, add bottom/left border */
|
|
200
420
|
.tabs__list {
|
|
201
421
|
@apply bg-transparent p-0;
|