@vifui/styles 0.4.0-alpha.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/README.md +224 -0
- package/base/base.css +154 -0
- package/components/accordion.css +240 -0
- package/components/alert.css +213 -0
- package/components/avatar.css +140 -0
- package/components/badge.css +297 -0
- package/components/breadcrumb.css +250 -0
- package/components/button.css +564 -0
- package/components/card.css +393 -0
- package/components/checkbox.css +293 -0
- package/components/divider.css +282 -0
- package/components/index.css +10 -0
- package/components/spinner.css +594 -0
- package/index.css +24 -0
- package/package.json +99 -0
- package/themes/default.css +335 -0
- package/utilities/index.css +488 -0
|
@@ -0,0 +1,250 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Breadcrumb Component
|
|
3
|
+
*
|
|
4
|
+
* Built with modern Tailwind CSS and CSS variables
|
|
5
|
+
* Inspired by Vuesax v3 breadcrumb design
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
/* ============================================ */
|
|
9
|
+
/* Base Breadcrumb */
|
|
10
|
+
/* ============================================ */
|
|
11
|
+
|
|
12
|
+
.vif-breadcrumb {
|
|
13
|
+
/* Layout */
|
|
14
|
+
@apply flex items-center;
|
|
15
|
+
|
|
16
|
+
/* Transitions */
|
|
17
|
+
transition: all 150ms var(--ease-smooth);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
/* ============================================ */
|
|
21
|
+
/* Breadcrumb List */
|
|
22
|
+
/* ============================================ */
|
|
23
|
+
|
|
24
|
+
.vif-breadcrumb__list {
|
|
25
|
+
/* Layout */
|
|
26
|
+
@apply flex flex-wrap items-center gap-0;
|
|
27
|
+
@apply list-none;
|
|
28
|
+
@apply p-0 m-0;
|
|
29
|
+
|
|
30
|
+
/* Spacing */
|
|
31
|
+
padding: 0.75rem 1rem;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/* ============================================ */
|
|
35
|
+
/* Breadcrumb Item */
|
|
36
|
+
/* ============================================ */
|
|
37
|
+
|
|
38
|
+
.vif-breadcrumb__item {
|
|
39
|
+
@apply inline-flex items-center;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
/* ============================================ */
|
|
43
|
+
/* Breadcrumb Link */
|
|
44
|
+
/* ============================================ */
|
|
45
|
+
|
|
46
|
+
.vif-breadcrumb__link {
|
|
47
|
+
/* Base styles */
|
|
48
|
+
@apply inline-flex items-center gap-1.5;
|
|
49
|
+
@apply text-sm font-medium;
|
|
50
|
+
@apply no-underline;
|
|
51
|
+
|
|
52
|
+
/* Colors */
|
|
53
|
+
color: var(--muted);
|
|
54
|
+
|
|
55
|
+
/* Cursor */
|
|
56
|
+
cursor: var(--cursor-interactive);
|
|
57
|
+
|
|
58
|
+
/* Transitions */
|
|
59
|
+
transition:
|
|
60
|
+
color 200ms var(--ease-smooth),
|
|
61
|
+
opacity 150ms var(--ease-smooth);
|
|
62
|
+
|
|
63
|
+
/* Hover state */
|
|
64
|
+
&:hover,
|
|
65
|
+
&:focus {
|
|
66
|
+
color: var(--foreground);
|
|
67
|
+
text-decoration: none;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
/* Focus visible */
|
|
71
|
+
&:focus-visible {
|
|
72
|
+
outline: 2px solid var(--focus);
|
|
73
|
+
outline-offset: 2px;
|
|
74
|
+
border-radius: var(--radius-sm);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
/* Icon styles */
|
|
78
|
+
& svg {
|
|
79
|
+
@apply size-4 shrink-0;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
/* ============================================ */
|
|
84
|
+
/* Current Link (Active) */
|
|
85
|
+
/* ============================================ */
|
|
86
|
+
|
|
87
|
+
.vif-breadcrumb__current-link {
|
|
88
|
+
@apply inline-flex items-center gap-1.5;
|
|
89
|
+
@apply text-sm font-medium;
|
|
90
|
+
@apply no-underline;
|
|
91
|
+
|
|
92
|
+
/* Active color */
|
|
93
|
+
color: var(--foreground);
|
|
94
|
+
|
|
95
|
+
/* Not clickable */
|
|
96
|
+
cursor: default;
|
|
97
|
+
pointer-events: none;
|
|
98
|
+
|
|
99
|
+
/* Icon styles */
|
|
100
|
+
& svg {
|
|
101
|
+
@apply size-4 shrink-0;
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
/* ============================================ */
|
|
106
|
+
/* Separator */
|
|
107
|
+
/* ============================================ */
|
|
108
|
+
|
|
109
|
+
.vif-breadcrumb__separator {
|
|
110
|
+
@apply inline-flex items-center justify-center;
|
|
111
|
+
@apply px-2;
|
|
112
|
+
|
|
113
|
+
/* Color */
|
|
114
|
+
color: var(--muted);
|
|
115
|
+
|
|
116
|
+
/* Not selectable */
|
|
117
|
+
@apply select-none;
|
|
118
|
+
user-select: none;
|
|
119
|
+
|
|
120
|
+
/* Icon styles */
|
|
121
|
+
& svg {
|
|
122
|
+
@apply size-4 shrink-0;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
/* ============================================ */
|
|
127
|
+
/* Alignment Variants */
|
|
128
|
+
/* ============================================ */
|
|
129
|
+
|
|
130
|
+
.vif-breadcrumb--left {
|
|
131
|
+
@apply justify-start;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.vif-breadcrumb--center {
|
|
135
|
+
@apply justify-center;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.vif-breadcrumb--right {
|
|
139
|
+
@apply justify-end;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
/* ============================================ */
|
|
143
|
+
/* Size Variants */
|
|
144
|
+
/* ============================================ */
|
|
145
|
+
|
|
146
|
+
.vif-breadcrumb--sm {
|
|
147
|
+
.vif-breadcrumb__link,
|
|
148
|
+
.vif-breadcrumb__current-link {
|
|
149
|
+
@apply text-[12px];
|
|
150
|
+
|
|
151
|
+
& svg {
|
|
152
|
+
@apply size-3.5;
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.vif-breadcrumb__separator {
|
|
157
|
+
@apply px-1.5;
|
|
158
|
+
|
|
159
|
+
& svg {
|
|
160
|
+
@apply size-3.5;
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.vif-breadcrumb--lg {
|
|
166
|
+
.vif-breadcrumb__link,
|
|
167
|
+
.vif-breadcrumb__current-link {
|
|
168
|
+
@apply text-base;
|
|
169
|
+
|
|
170
|
+
& svg {
|
|
171
|
+
@apply size-5;
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.vif-breadcrumb__separator {
|
|
176
|
+
@apply px-2.5;
|
|
177
|
+
|
|
178
|
+
& svg {
|
|
179
|
+
@apply size-5;
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
/* ============================================ */
|
|
185
|
+
/* Color Variants */
|
|
186
|
+
/* ============================================ */
|
|
187
|
+
|
|
188
|
+
/* Neutral (Default) - uses --muted and --foreground */
|
|
189
|
+
.vif-breadcrumb--neutral {
|
|
190
|
+
/* Inherits default colors */
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
/* Brand */
|
|
194
|
+
.vif-breadcrumb--brand {
|
|
195
|
+
.vif-breadcrumb__link:hover,
|
|
196
|
+
.vif-breadcrumb__link:focus {
|
|
197
|
+
color: var(--primary);
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
.vif-breadcrumb__current-link {
|
|
201
|
+
color: var(--primary);
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
/* Success */
|
|
206
|
+
.vif-breadcrumb--success {
|
|
207
|
+
.vif-breadcrumb__link:hover,
|
|
208
|
+
.vif-breadcrumb__link:focus {
|
|
209
|
+
color: var(--success);
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
.vif-breadcrumb__current-link {
|
|
213
|
+
color: var(--success);
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
/* Warning */
|
|
218
|
+
.vif-breadcrumb--warning {
|
|
219
|
+
.vif-breadcrumb__link:hover,
|
|
220
|
+
.vif-breadcrumb__link:focus {
|
|
221
|
+
color: var(--warning);
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
.vif-breadcrumb__current-link {
|
|
225
|
+
color: var(--warning);
|
|
226
|
+
}
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
/* Danger */
|
|
230
|
+
.vif-breadcrumb--danger {
|
|
231
|
+
.vif-breadcrumb__link:hover,
|
|
232
|
+
.vif-breadcrumb__link:focus {
|
|
233
|
+
color: var(--danger);
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
.vif-breadcrumb__current-link {
|
|
237
|
+
color: var(--danger);
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
/* ============================================ */
|
|
242
|
+
/* Disabled State */
|
|
243
|
+
/* ============================================ */
|
|
244
|
+
|
|
245
|
+
.vif-breadcrumb__link[aria-disabled="true"],
|
|
246
|
+
.vif-breadcrumb__link:disabled {
|
|
247
|
+
opacity: var(--disabled-opacity);
|
|
248
|
+
pointer-events: none;
|
|
249
|
+
cursor: var(--cursor-disabled);
|
|
250
|
+
}
|