@vsn-ux/gaia-styles 0.6.3 → 0.6.4
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/all-10pt.css +282 -0
- package/dist/all-no-reset-10pt.css +282 -0
- package/dist/all-no-reset.css +282 -0
- package/dist/all.css +282 -0
- package/dist/components/breadcrumbs.css +301 -0
- package/dist/components.css +282 -0
- package/dist/docs/Breadcrumbs.md +712 -0
- package/package.json +1 -1
- package/src/styles/components/breadcrumbs.css +158 -0
- package/src/styles/components.css +1 -0
package/package.json
CHANGED
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
.ga-breadcrumb {
|
|
2
|
+
@apply flex flex-wrap content-start items-start gap-6;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.ga-breadcrumb-item {
|
|
6
|
+
@apply relative inline-flex items-center gap-6;
|
|
7
|
+
|
|
8
|
+
/* Explorer button: mouse-only target for sibling navigation menu.
|
|
9
|
+
tabindex="-1" must be set on the element to remove it from tab order.
|
|
10
|
+
Focus ring is handled by the parent __group via :focus-within. */
|
|
11
|
+
.ga-breadcrumb-item__explorer {
|
|
12
|
+
@apply animate-hover cursor-pointer rounded text-lg transition-colors outline-none;
|
|
13
|
+
|
|
14
|
+
.ga-icon {
|
|
15
|
+
@apply text-(--ga-color-icon-action);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
&:hover .ga-icon {
|
|
19
|
+
@apply text-(--ga-color-icon-action-hover);
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
&.ga-breadcrumb-item--overflow {
|
|
24
|
+
@apply items-center gap-3;
|
|
25
|
+
|
|
26
|
+
.ga-breadcrumb-item__menu {
|
|
27
|
+
@apply -left-(--ga-size-spacing-02);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.ga-breadcrumb-item__trigger {
|
|
31
|
+
@apply animate-hover flex cursor-pointer items-center justify-center gap-2 rounded text-lg font-normal text-(--ga-color-text-action) transition-colors;
|
|
32
|
+
|
|
33
|
+
.ga-breadcrumb-item__label {
|
|
34
|
+
@apply max-w-80 truncate text-(--ga-color-text-action);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.ga-icon {
|
|
38
|
+
@apply text-(--ga-color-icon-action);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
&:hover {
|
|
42
|
+
.ga-breadcrumb-item__label {
|
|
43
|
+
@apply underline;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
&:focus-visible {
|
|
48
|
+
@apply outline-none;
|
|
49
|
+
|
|
50
|
+
.ga-breadcrumb-item__label {
|
|
51
|
+
@apply rounded-[2px] no-underline outline-2 outline-offset-2 outline-(--ga-color-border-focus);
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
&[aria-expanded='true'] {
|
|
56
|
+
@apply outline-none;
|
|
57
|
+
|
|
58
|
+
.ga-breadcrumb-item__label {
|
|
59
|
+
@apply rounded-[2px] no-underline outline-2 outline-offset-2 outline-(--ga-color-border-focus);
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.ga-breadcrumb-item__separator {
|
|
65
|
+
@apply text-lg text-(--ga-color-text-body);
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
&.ga-breadcrumb-item--current-page {
|
|
70
|
+
@apply gap-3;
|
|
71
|
+
|
|
72
|
+
.ga-breadcrumb-item__trigger {
|
|
73
|
+
@apply pr-1 text-lg font-semibold text-(--ga-color-text-body);
|
|
74
|
+
|
|
75
|
+
.ga-breadcrumb-item__label {
|
|
76
|
+
@apply max-w-80 truncate;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
&.ga-breadcrumb-item--back {
|
|
82
|
+
@apply items-center gap-2;
|
|
83
|
+
|
|
84
|
+
.ga-breadcrumb-item__trigger {
|
|
85
|
+
@apply animate-hover inline-flex cursor-pointer items-center rounded text-lg transition-colors;
|
|
86
|
+
|
|
87
|
+
.ga-icon {
|
|
88
|
+
@apply text-(--ga-color-icon-action);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
&:hover {
|
|
92
|
+
.ga-icon {
|
|
93
|
+
@apply text-(--ga-color-icon-action-hover);
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
&:focus-visible {
|
|
98
|
+
@apply outline-2 outline-offset-2 outline-(--ga-color-border-focus);
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.ga-breadcrumb-item__label {
|
|
103
|
+
@apply text-lg font-semibold text-(--ga-color-text-body);
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
&.ga-breadcrumb-item--link {
|
|
108
|
+
@apply gap-3;
|
|
109
|
+
|
|
110
|
+
.ga-breadcrumb-item__trigger {
|
|
111
|
+
@apply animate-hover inline-flex cursor-pointer items-center rounded pr-1 text-lg font-normal text-(--ga-color-text-action) transition-colors;
|
|
112
|
+
|
|
113
|
+
.ga-breadcrumb-item__label {
|
|
114
|
+
@apply max-w-80 truncate text-(--ga-color-text-action);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
&:hover {
|
|
118
|
+
@apply text-(--ga-color-text-action-hover) underline;
|
|
119
|
+
|
|
120
|
+
.ga-breadcrumb-item__label {
|
|
121
|
+
@apply text-(--ga-color-text-action-hover) underline;
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
&:active {
|
|
126
|
+
@apply text-(--ga-color-text-action-hover);
|
|
127
|
+
|
|
128
|
+
.ga-breadcrumb-item__label {
|
|
129
|
+
@apply text-(--ga-color-text-action-hover);
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
&:focus-visible {
|
|
134
|
+
@apply outline-2 outline-offset-2 outline-(--ga-color-border-focus);
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.ga-breadcrumb-item__explorer {
|
|
139
|
+
@apply pr-1;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.ga-breadcrumb-item__separator {
|
|
143
|
+
@apply text-lg text-(--ga-color-text-body);
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.ga-breadcrumb-item__group {
|
|
148
|
+
@apply inline-flex items-center rounded;
|
|
149
|
+
|
|
150
|
+
&:focus-within {
|
|
151
|
+
@apply outline-2 outline-offset-2 outline-(--ga-color-border-focus);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.ga-breadcrumb-item__trigger:focus-visible {
|
|
155
|
+
@apply outline-none;
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
}
|