@vsn-ux/gaia-styles 0.6.2 → 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 +997 -0
- package/dist/all-no-reset-10pt.css +997 -0
- package/dist/all-no-reset.css +997 -0
- package/dist/all.css +997 -0
- package/dist/components/breadcrumbs.css +301 -0
- package/dist/components/side-navigation.css +842 -0
- package/dist/components.css +997 -0
- package/dist/docs/Breadcrumbs.md +712 -0
- package/dist/docs/SideNavigation.md +524 -0
- package/package.json +1 -1
- package/src/styles/components/breadcrumbs.css +158 -0
- package/src/styles/components/side-navigation.css +351 -0
- package/src/styles/components.css +2 -0
|
@@ -0,0 +1,524 @@
|
|
|
1
|
+
# Side Navigation
|
|
2
|
+
|
|
3
|
+
A persistent sidebar navigation component with three sections: header (module switcher), scrollable body (tree menu), and footer (user context).
|
|
4
|
+
|
|
5
|
+
## Visual Structure
|
|
6
|
+
|
|
7
|
+
```
|
|
8
|
+
ga-side-navigation
|
|
9
|
+
├── ga-side-navigation__header
|
|
10
|
+
│ ├── ga-side-navigation__switcher [--active]
|
|
11
|
+
│ │ ├── ga-side-navigation__switcher-title
|
|
12
|
+
│ │ └── ga-side-navigation__switcher-action
|
|
13
|
+
│ ├── ga-side-navigation__switcher-dropdown (optional, shown when switcher is active)
|
|
14
|
+
│ │ ├── ga-side-navigation__switcher-dropdown-header (optional)
|
|
15
|
+
│ │ └── ga-side-navigation__switcher-dropdown-item
|
|
16
|
+
│ │ ├── ga-side-navigation__switcher-dropdown-title
|
|
17
|
+
│ │ └── ga-side-navigation__switcher-dropdown-external (optional)
|
|
18
|
+
│ └── ga-input.ga-side-navigation__search (optional, uses ga-input with custom overrides)
|
|
19
|
+
│ └── ga-side-navigation__search-shortcut (optional, keyboard shortcut badge)
|
|
20
|
+
├── ga-side-navigation__body
|
|
21
|
+
│ ├── ga-side-navigation__item [--active|--disabled|--level-2|--level-3|--level-4]
|
|
22
|
+
│ │ ├── ga-side-navigation__item-icon (optional, expand/collapse chevron for parents or decorative icon)
|
|
23
|
+
│ │ ├── ga-side-navigation__item-content
|
|
24
|
+
│ │ │ ├── ga-side-navigation__item-label
|
|
25
|
+
│ │ │ └── ga-side-navigation__item-description (optional)
|
|
26
|
+
│ │ └── ga-side-navigation__item-external (optional)
|
|
27
|
+
│ ├── ga-side-navigation__recent-title (optional)
|
|
28
|
+
│ ├── ga-side-navigation__recent-item
|
|
29
|
+
│ │ ├── ga-side-navigation__recent-item-icon (optional)
|
|
30
|
+
│ │ └── ga-side-navigation__recent-item-content
|
|
31
|
+
│ │ ├── ga-side-navigation__recent-item-label
|
|
32
|
+
│ │ └── ga-side-navigation__recent-item-description (optional)
|
|
33
|
+
│ ├── ga-side-navigation__search-results-title (optional)
|
|
34
|
+
│ └── ga-side-navigation__search-results-item
|
|
35
|
+
│ ├── ga-side-navigation__search-results-item-content
|
|
36
|
+
│ │ ├── ga-side-navigation__search-results-item-label
|
|
37
|
+
│ │ └── ga-side-navigation__search-results-item-description (optional)
|
|
38
|
+
│ └── ga-side-navigation__search-results-item-external (optional)
|
|
39
|
+
└── ga-side-navigation__footer
|
|
40
|
+
├── ga-side-navigation__footer-dropdown (optional, shown when user is active)
|
|
41
|
+
│ └── ga-side-navigation__footer-dropdown-item [--disabled]
|
|
42
|
+
│ ├── ga-side-navigation__footer-dropdown-icon (optional)
|
|
43
|
+
│ └── ga-side-navigation__footer-dropdown-title
|
|
44
|
+
└── ga-side-navigation__user [--active]
|
|
45
|
+
├── ga-side-navigation__user-avatar
|
|
46
|
+
├── ga-side-navigation__user-name
|
|
47
|
+
└── ga-side-navigation__user-action
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
## Elements Hierarchy
|
|
51
|
+
|
|
52
|
+
### Core Block
|
|
53
|
+
|
|
54
|
+
- `ga-side-navigation` - Main container, full-height sidebar layout
|
|
55
|
+
|
|
56
|
+
### Header
|
|
57
|
+
|
|
58
|
+
- `ga-side-navigation__header` - Top section, vertical stack for switcher and other elements (e.g., search)
|
|
59
|
+
- `ga-side-navigation__switcher` - Module switcher row
|
|
60
|
+
- `ga-side-navigation__switcher-title` - Module name
|
|
61
|
+
- `ga-side-navigation__switcher-action` - Chevron icon indicating the switcher can be toggled
|
|
62
|
+
- `ga-side-navigation__switcher-dropdown` - Dropdown container, absolutely positioned below the switcher
|
|
63
|
+
- `ga-side-navigation__switcher-dropdown-header` - Dropdown heading (e.g., "Choose a service")
|
|
64
|
+
- `ga-side-navigation__switcher-dropdown-item` - Individual module option
|
|
65
|
+
- `ga-side-navigation__switcher-dropdown-title` - Module name
|
|
66
|
+
- `ga-side-navigation__switcher-dropdown-external` - External link icon (optional)
|
|
67
|
+
- `ga-side-navigation__search` - Modifier applied alongside `ga-input` to override styles. Uses standard `ga-input` structure internally.
|
|
68
|
+
- `ga-side-navigation__search-shortcut` - Keyboard shortcut badge inside the search input
|
|
69
|
+
|
|
70
|
+
### Body - Navigation Items
|
|
71
|
+
|
|
72
|
+
- `ga-side-navigation__body` - Scrollable content area for navigation items
|
|
73
|
+
- `ga-side-navigation__item` - Individual navigation item
|
|
74
|
+
- `ga-side-navigation__item-icon` - Icon for the item (expand/collapse chevron for parents, or decorative icon; not both)
|
|
75
|
+
- `ga-side-navigation__item-content` - Wrapper for text content
|
|
76
|
+
- `ga-side-navigation__item-label` - Primary text
|
|
77
|
+
- `ga-side-navigation__item-description` - Secondary text
|
|
78
|
+
- `ga-side-navigation__item-external` - External link icon, positioned far right (optional)
|
|
79
|
+
|
|
80
|
+
### Body - Recently Viewed
|
|
81
|
+
|
|
82
|
+
- `ga-side-navigation__recent-title` - Section heading (e.g., "Recently viewed")
|
|
83
|
+
- `ga-side-navigation__recent-item` - Individual recently viewed item
|
|
84
|
+
- `ga-side-navigation__recent-item-icon` - Icon for the item
|
|
85
|
+
- `ga-side-navigation__recent-item-content` - Wrapper for text content
|
|
86
|
+
- `ga-side-navigation__recent-item-label` - Primary text
|
|
87
|
+
- `ga-side-navigation__recent-item-description` - Secondary text (e.g., breadcrumb path)
|
|
88
|
+
|
|
89
|
+
### Body - Search Results
|
|
90
|
+
|
|
91
|
+
- `ga-side-navigation__search-results-title` - Section heading (e.g., "Search results")
|
|
92
|
+
- `ga-side-navigation__search-results-item` - Individual search result item
|
|
93
|
+
- `ga-side-navigation__search-results-item-content` - Wrapper for text content
|
|
94
|
+
- `ga-side-navigation__search-results-item-label` - Primary text
|
|
95
|
+
- `ga-side-navigation__search-results-item-description` - Secondary text (e.g., breadcrumb path)
|
|
96
|
+
- `ga-side-navigation__search-results-item-external` - External link icon, positioned far right (optional)
|
|
97
|
+
|
|
98
|
+
### Footer
|
|
99
|
+
|
|
100
|
+
- `ga-side-navigation__footer` - Positioning container for user row and its dropdown
|
|
101
|
+
- `ga-side-navigation__user` - User context row, tabbable and hoverable
|
|
102
|
+
- `ga-side-navigation__user-avatar` - User avatar image
|
|
103
|
+
- `ga-side-navigation__user-name` - User display name
|
|
104
|
+
- `ga-side-navigation__user-action` - Chevron icon
|
|
105
|
+
- `ga-side-navigation__footer-dropdown` - Dropdown container, positioned upward above the footer
|
|
106
|
+
- `ga-side-navigation__footer-dropdown-item` - Individual dropdown option
|
|
107
|
+
- `ga-side-navigation__footer-dropdown-icon` - Item icon (optional)
|
|
108
|
+
- `ga-side-navigation__footer-dropdown-title` - Option label
|
|
109
|
+
|
|
110
|
+
### Modifiers
|
|
111
|
+
|
|
112
|
+
- `ga-side-navigation__item--active` - Currently selected navigation item
|
|
113
|
+
- `ga-side-navigation__item--expanded` - Expanded parent item (shows children)
|
|
114
|
+
- `ga-side-navigation__item--disabled` - Non-interactive item
|
|
115
|
+
- `ga-side-navigation__item--level-2` - Second-level tree item
|
|
116
|
+
- `ga-side-navigation__item--level-3` - Third-level tree item
|
|
117
|
+
- `ga-side-navigation__item--level-4` - Fourth-level tree item
|
|
118
|
+
|
|
119
|
+
## Examples
|
|
120
|
+
|
|
121
|
+
### Default
|
|
122
|
+
|
|
123
|
+
```html
|
|
124
|
+
<div class="ga-side-navigation" style="height: 600px">
|
|
125
|
+
<div class="ga-side-navigation__header">
|
|
126
|
+
<div tabindex="0" class="ga-side-navigation__switcher">
|
|
127
|
+
<span class="ga-side-navigation__switcher-title">Dashboard</span>
|
|
128
|
+
<span class="ga-side-navigation__switcher-action">
|
|
129
|
+
<!-- icon: chevrons-up-down, size=16 -->
|
|
130
|
+
</span>
|
|
131
|
+
</div>
|
|
132
|
+
<div class="ga-input ga-side-navigation__search">
|
|
133
|
+
<!-- icon: search, size=16 -->
|
|
134
|
+
<input type="search" placeholder="Search" />
|
|
135
|
+
<kbd class="ga-side-navigation__search-shortcut">⌘ K</kbd>
|
|
136
|
+
</div>
|
|
137
|
+
</div>
|
|
138
|
+
<div class="ga-side-navigation__body">
|
|
139
|
+
<div class="ga-side-navigation__item ga-side-navigation__item--active">
|
|
140
|
+
<!-- icon: layout-grid, size=16, class="ga-side-navigation__item-icon" -->
|
|
141
|
+
<div class="ga-side-navigation__item-content">
|
|
142
|
+
<div class="ga-side-navigation__item-label">My overview</div>
|
|
143
|
+
</div>
|
|
144
|
+
</div>
|
|
145
|
+
<div class="ga-side-navigation__recent-title">Recently viewed</div>
|
|
146
|
+
<div class="ga-side-navigation__recent-item">
|
|
147
|
+
<!-- icon: history, size=16, class="ga-side-navigation__recent-item-icon" -->
|
|
148
|
+
<div class="ga-side-navigation__recent-item-content">
|
|
149
|
+
<div class="ga-side-navigation__recent-item-label">Insights</div>
|
|
150
|
+
<div class="ga-side-navigation__recent-item-description">
|
|
151
|
+
Business Intelligence › Analytics
|
|
152
|
+
</div>
|
|
153
|
+
</div>
|
|
154
|
+
</div>
|
|
155
|
+
<div class="ga-side-navigation__recent-item">
|
|
156
|
+
<!-- icon: history, size=16, class="ga-side-navigation__recent-item-icon" -->
|
|
157
|
+
<div class="ga-side-navigation__recent-item-content">
|
|
158
|
+
<div class="ga-side-navigation__recent-item-label">
|
|
159
|
+
Voucher registration
|
|
160
|
+
</div>
|
|
161
|
+
<div class="ga-side-navigation__recent-item-description">
|
|
162
|
+
Finance › Accounts
|
|
163
|
+
</div>
|
|
164
|
+
</div>
|
|
165
|
+
</div>
|
|
166
|
+
<div class="ga-side-navigation__recent-item">
|
|
167
|
+
<!-- icon: history, size=16, class="ga-side-navigation__recent-item-icon" -->
|
|
168
|
+
<div class="ga-side-navigation__recent-item-content">
|
|
169
|
+
<div class="ga-side-navigation__recent-item-label">Stock count</div>
|
|
170
|
+
<div class="ga-side-navigation__recent-item-description">
|
|
171
|
+
Warehouse › Inventory management › St...
|
|
172
|
+
</div>
|
|
173
|
+
</div>
|
|
174
|
+
</div>
|
|
175
|
+
<div class="ga-side-navigation__recent-item">
|
|
176
|
+
<!-- icon: history, size=16, class="ga-side-navigation__recent-item-icon" -->
|
|
177
|
+
<div class="ga-side-navigation__recent-item-content">
|
|
178
|
+
<div class="ga-side-navigation__recent-item-label">My approvals</div>
|
|
179
|
+
<div class="ga-side-navigation__recent-item-description">
|
|
180
|
+
Approval › My tasks
|
|
181
|
+
</div>
|
|
182
|
+
</div>
|
|
183
|
+
</div>
|
|
184
|
+
</div>
|
|
185
|
+
<div class="ga-side-navigation__footer">
|
|
186
|
+
<div tabindex="0" class="ga-side-navigation__user">
|
|
187
|
+
<img
|
|
188
|
+
class="ga-side-navigation__user-avatar"
|
|
189
|
+
src="https://i.pravatar.cc/40?img=49"
|
|
190
|
+
alt="Avatar"
|
|
191
|
+
/>
|
|
192
|
+
<span class="ga-side-navigation__user-name">Anna Andersson</span>
|
|
193
|
+
<span class="ga-side-navigation__user-action">
|
|
194
|
+
<!-- icon: chevrons-up-down, size=16 -->
|
|
195
|
+
</span>
|
|
196
|
+
</div>
|
|
197
|
+
</div>
|
|
198
|
+
</div>
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
### Search Results
|
|
202
|
+
|
|
203
|
+
```html
|
|
204
|
+
<div class="ga-side-navigation" style="height: 600px">
|
|
205
|
+
<div class="ga-side-navigation__header">
|
|
206
|
+
<div tabindex="0" class="ga-side-navigation__switcher">
|
|
207
|
+
<span class="ga-side-navigation__switcher-title">Dashboard</span>
|
|
208
|
+
<span class="ga-side-navigation__switcher-action">
|
|
209
|
+
<!-- icon: chevrons-up-down, size=16 -->
|
|
210
|
+
</span>
|
|
211
|
+
</div>
|
|
212
|
+
<div class="ga-input ga-side-navigation__search">
|
|
213
|
+
<!-- icon: search, size=16 -->
|
|
214
|
+
<input type="search" placeholder="Search" value="voucher" />
|
|
215
|
+
<kbd class="ga-side-navigation__search-shortcut">⌘ K</kbd>
|
|
216
|
+
</div>
|
|
217
|
+
</div>
|
|
218
|
+
<div class="ga-side-navigation__body">
|
|
219
|
+
<div class="ga-side-navigation__search-results-title">3 results</div>
|
|
220
|
+
<div tabindex="0" class="ga-side-navigation__search-results-item">
|
|
221
|
+
<div class="ga-side-navigation__search-results-item-content">
|
|
222
|
+
<div class="ga-side-navigation__search-results-item-label">
|
|
223
|
+
<strong>Voucher</strong>
|
|
224
|
+
registration
|
|
225
|
+
</div>
|
|
226
|
+
<div class="ga-side-navigation__search-results-item-description">
|
|
227
|
+
Finance › Accounts
|
|
228
|
+
</div>
|
|
229
|
+
</div>
|
|
230
|
+
</div>
|
|
231
|
+
<div tabindex="0" class="ga-side-navigation__search-results-item">
|
|
232
|
+
<div class="ga-side-navigation__search-results-item-content">
|
|
233
|
+
<div class="ga-side-navigation__search-results-item-label">
|
|
234
|
+
<strong>Voucher</strong>
|
|
235
|
+
overview
|
|
236
|
+
</div>
|
|
237
|
+
<div class="ga-side-navigation__search-results-item-description">
|
|
238
|
+
Finance › Reports
|
|
239
|
+
</div>
|
|
240
|
+
</div>
|
|
241
|
+
</div>
|
|
242
|
+
<div tabindex="0" class="ga-side-navigation__search-results-item">
|
|
243
|
+
<div class="ga-side-navigation__search-results-item-content">
|
|
244
|
+
<div class="ga-side-navigation__search-results-item-label">
|
|
245
|
+
Templates for
|
|
246
|
+
<strong>Voucher</strong>
|
|
247
|
+
</div>
|
|
248
|
+
<div class="ga-side-navigation__search-results-item-description">
|
|
249
|
+
Finance › Settings
|
|
250
|
+
</div>
|
|
251
|
+
</div>
|
|
252
|
+
<!-- icon: external-link, size=16, class="ga-side-navigation__search-results-item-external" -->
|
|
253
|
+
</div>
|
|
254
|
+
</div>
|
|
255
|
+
<div class="ga-side-navigation__footer">
|
|
256
|
+
<div tabindex="0" class="ga-side-navigation__user">
|
|
257
|
+
<img
|
|
258
|
+
class="ga-side-navigation__user-avatar"
|
|
259
|
+
src="https://i.pravatar.cc/40?img=49"
|
|
260
|
+
alt="Avatar"
|
|
261
|
+
/>
|
|
262
|
+
<span class="ga-side-navigation__user-name">Anna Andersson</span>
|
|
263
|
+
<span class="ga-side-navigation__user-action">
|
|
264
|
+
<!-- icon: chevrons-up-down, size=16 -->
|
|
265
|
+
</span>
|
|
266
|
+
</div>
|
|
267
|
+
</div>
|
|
268
|
+
</div>
|
|
269
|
+
```
|
|
270
|
+
|
|
271
|
+
### Minimal
|
|
272
|
+
|
|
273
|
+
```html
|
|
274
|
+
<div class="ga-side-navigation" style="height: 400px">
|
|
275
|
+
<div class="ga-side-navigation__header">
|
|
276
|
+
<div tabindex="0" class="ga-side-navigation__switcher">
|
|
277
|
+
<span class="ga-side-navigation__switcher-title">App</span>
|
|
278
|
+
<span class="ga-side-navigation__switcher-action">
|
|
279
|
+
<!-- icon: chevrons-up-down, size=16 -->
|
|
280
|
+
</span>
|
|
281
|
+
</div>
|
|
282
|
+
</div>
|
|
283
|
+
<div class="ga-side-navigation__body">
|
|
284
|
+
<div class="ga-side-navigation__item ga-side-navigation__item--active">
|
|
285
|
+
<span class="ga-side-navigation__item-icon"></span>
|
|
286
|
+
<div class="ga-side-navigation__item-content">
|
|
287
|
+
<div class="ga-side-navigation__item-label">Home</div>
|
|
288
|
+
</div>
|
|
289
|
+
</div>
|
|
290
|
+
<div class="ga-side-navigation__item">
|
|
291
|
+
<span class="ga-side-navigation__item-icon"></span>
|
|
292
|
+
<div class="ga-side-navigation__item-content">
|
|
293
|
+
<div class="ga-side-navigation__item-label">Settings</div>
|
|
294
|
+
</div>
|
|
295
|
+
</div>
|
|
296
|
+
</div>
|
|
297
|
+
<div class="ga-side-navigation__footer">
|
|
298
|
+
<div tabindex="0" class="ga-side-navigation__user">
|
|
299
|
+
<img
|
|
300
|
+
class="ga-side-navigation__user-avatar"
|
|
301
|
+
src="https://i.pravatar.cc/40?img=49"
|
|
302
|
+
alt="Avatar"
|
|
303
|
+
/>
|
|
304
|
+
<span class="ga-side-navigation__user-name">Anna Andersson</span>
|
|
305
|
+
<span class="ga-side-navigation__user-action">
|
|
306
|
+
<!-- icon: chevrons-up-down, size=16 -->
|
|
307
|
+
</span>
|
|
308
|
+
</div>
|
|
309
|
+
</div>
|
|
310
|
+
</div>
|
|
311
|
+
```
|
|
312
|
+
|
|
313
|
+
### With Tree Menu
|
|
314
|
+
|
|
315
|
+
```html
|
|
316
|
+
<div class="ga-side-navigation" style="height: 450px">
|
|
317
|
+
<div class="ga-side-navigation__header">
|
|
318
|
+
<div tabindex="0" class="ga-side-navigation__switcher">
|
|
319
|
+
<span class="ga-side-navigation__switcher-title">Finance</span>
|
|
320
|
+
<span class="ga-side-navigation__switcher-action">
|
|
321
|
+
<!-- icon: chevrons-up-down, size=16 -->
|
|
322
|
+
</span>
|
|
323
|
+
</div>
|
|
324
|
+
</div>
|
|
325
|
+
<div class="ga-side-navigation__body">
|
|
326
|
+
<div class="ga-side-navigation__item ga-side-navigation__item--expanded">
|
|
327
|
+
<span class="ga-side-navigation__item-icon">
|
|
328
|
+
<!-- icon: chevron-down, size=16 -->
|
|
329
|
+
</span>
|
|
330
|
+
<div class="ga-side-navigation__item-content">
|
|
331
|
+
<div class="ga-side-navigation__item-label">Accounts</div>
|
|
332
|
+
</div>
|
|
333
|
+
</div>
|
|
334
|
+
<div
|
|
335
|
+
class="ga-side-navigation__item ga-side-navigation__item--level-2 ga-side-navigation__item--expanded"
|
|
336
|
+
>
|
|
337
|
+
<span class="ga-side-navigation__item-icon">
|
|
338
|
+
<!-- icon: chevron-down, size=16 -->
|
|
339
|
+
</span>
|
|
340
|
+
<div class="ga-side-navigation__item-content">
|
|
341
|
+
<div class="ga-side-navigation__item-label">General ledger</div>
|
|
342
|
+
</div>
|
|
343
|
+
</div>
|
|
344
|
+
<div
|
|
345
|
+
class="ga-side-navigation__item ga-side-navigation__item--level-3 ga-side-navigation__item--active"
|
|
346
|
+
>
|
|
347
|
+
<span class="ga-side-navigation__item-icon"></span>
|
|
348
|
+
<div class="ga-side-navigation__item-content">
|
|
349
|
+
<div class="ga-side-navigation__item-label">Journal entries</div>
|
|
350
|
+
</div>
|
|
351
|
+
</div>
|
|
352
|
+
<div class="ga-side-navigation__item ga-side-navigation__item--level-3">
|
|
353
|
+
<span class="ga-side-navigation__item-icon"></span>
|
|
354
|
+
<div class="ga-side-navigation__item-content">
|
|
355
|
+
<div class="ga-side-navigation__item-label">Account balances</div>
|
|
356
|
+
</div>
|
|
357
|
+
</div>
|
|
358
|
+
<div class="ga-side-navigation__item ga-side-navigation__item--level-2">
|
|
359
|
+
<span class="ga-side-navigation__item-icon">
|
|
360
|
+
<!-- icon: chevron-right, size=16 -->
|
|
361
|
+
</span>
|
|
362
|
+
<div class="ga-side-navigation__item-content">
|
|
363
|
+
<div class="ga-side-navigation__item-label">Accounts payable</div>
|
|
364
|
+
</div>
|
|
365
|
+
</div>
|
|
366
|
+
<div class="ga-side-navigation__item">
|
|
367
|
+
<span class="ga-side-navigation__item-icon"></span>
|
|
368
|
+
<div class="ga-side-navigation__item-content">
|
|
369
|
+
<div class="ga-side-navigation__item-label">Reporting</div>
|
|
370
|
+
</div>
|
|
371
|
+
<!-- icon: external-link, size=16, class="ga-side-navigation__item-external" -->
|
|
372
|
+
</div>
|
|
373
|
+
<div class="ga-side-navigation__item">
|
|
374
|
+
<span class="ga-side-navigation__item-icon"></span>
|
|
375
|
+
<div class="ga-side-navigation__item-content">
|
|
376
|
+
<div class="ga-side-navigation__item-label">Settings</div>
|
|
377
|
+
</div>
|
|
378
|
+
</div>
|
|
379
|
+
<div class="ga-side-navigation__item ga-side-navigation__item--disabled">
|
|
380
|
+
<span class="ga-side-navigation__item-icon"></span>
|
|
381
|
+
<div class="ga-side-navigation__item-content">
|
|
382
|
+
<div class="ga-side-navigation__item-label">Archive</div>
|
|
383
|
+
</div>
|
|
384
|
+
</div>
|
|
385
|
+
</div>
|
|
386
|
+
<div class="ga-side-navigation__footer">
|
|
387
|
+
<div tabindex="0" class="ga-side-navigation__user">
|
|
388
|
+
<img
|
|
389
|
+
class="ga-side-navigation__user-avatar"
|
|
390
|
+
src="https://i.pravatar.cc/40?img=49"
|
|
391
|
+
alt="Avatar"
|
|
392
|
+
/>
|
|
393
|
+
<span class="ga-side-navigation__user-name">Anna Andersson</span>
|
|
394
|
+
<span class="ga-side-navigation__user-action">
|
|
395
|
+
<!-- icon: chevrons-up-down, size=16 -->
|
|
396
|
+
</span>
|
|
397
|
+
</div>
|
|
398
|
+
</div>
|
|
399
|
+
</div>
|
|
400
|
+
```
|
|
401
|
+
|
|
402
|
+
### Switcher Open
|
|
403
|
+
|
|
404
|
+
```html
|
|
405
|
+
<div class="ga-side-navigation" style="height: 400px">
|
|
406
|
+
<div class="ga-side-navigation__header">
|
|
407
|
+
<div
|
|
408
|
+
tabindex="0"
|
|
409
|
+
class="ga-side-navigation__switcher ga-side-navigation__switcher--active"
|
|
410
|
+
>
|
|
411
|
+
<span class="ga-side-navigation__switcher-title">Dashboard</span>
|
|
412
|
+
<span class="ga-side-navigation__switcher-action">
|
|
413
|
+
<!-- icon: chevron-down, size=16 -->
|
|
414
|
+
</span>
|
|
415
|
+
</div>
|
|
416
|
+
<div class="ga-side-navigation__switcher-dropdown">
|
|
417
|
+
<div class="ga-side-navigation__switcher-dropdown-header">
|
|
418
|
+
Choose a service
|
|
419
|
+
</div>
|
|
420
|
+
<div tabindex="0" class="ga-side-navigation__switcher-dropdown-item">
|
|
421
|
+
<span class="ga-side-navigation__switcher-dropdown-title">Finance</span>
|
|
422
|
+
</div>
|
|
423
|
+
<div tabindex="0" class="ga-side-navigation__switcher-dropdown-item">
|
|
424
|
+
<span class="ga-side-navigation__switcher-dropdown-title">
|
|
425
|
+
Analytics
|
|
426
|
+
</span>
|
|
427
|
+
</div>
|
|
428
|
+
<div tabindex="0" class="ga-side-navigation__switcher-dropdown-item">
|
|
429
|
+
<span class="ga-side-navigation__switcher-dropdown-title">HR</span>
|
|
430
|
+
<!-- icon: external-link, size=16, class="ga-side-navigation__switcher-dropdown-external" -->
|
|
431
|
+
</div>
|
|
432
|
+
</div>
|
|
433
|
+
</div>
|
|
434
|
+
<div class="ga-side-navigation__body">
|
|
435
|
+
<div class="ga-side-navigation__item ga-side-navigation__item--active">
|
|
436
|
+
<span class="ga-side-navigation__item-icon"></span>
|
|
437
|
+
<div class="ga-side-navigation__item-content">
|
|
438
|
+
<div class="ga-side-navigation__item-label">Home</div>
|
|
439
|
+
</div>
|
|
440
|
+
</div>
|
|
441
|
+
<div class="ga-side-navigation__item">
|
|
442
|
+
<span class="ga-side-navigation__item-icon"></span>
|
|
443
|
+
<div class="ga-side-navigation__item-content">
|
|
444
|
+
<div class="ga-side-navigation__item-label">Settings</div>
|
|
445
|
+
</div>
|
|
446
|
+
</div>
|
|
447
|
+
</div>
|
|
448
|
+
<div class="ga-side-navigation__footer">
|
|
449
|
+
<div tabindex="0" class="ga-side-navigation__user">
|
|
450
|
+
<img
|
|
451
|
+
class="ga-side-navigation__user-avatar"
|
|
452
|
+
src="https://i.pravatar.cc/40?img=49"
|
|
453
|
+
alt="Avatar"
|
|
454
|
+
/>
|
|
455
|
+
<span class="ga-side-navigation__user-name">Anna Andersson</span>
|
|
456
|
+
<span class="ga-side-navigation__user-action">
|
|
457
|
+
<!-- icon: chevrons-up-down, size=16 -->
|
|
458
|
+
</span>
|
|
459
|
+
</div>
|
|
460
|
+
</div>
|
|
461
|
+
</div>
|
|
462
|
+
```
|
|
463
|
+
|
|
464
|
+
### Footer Open
|
|
465
|
+
|
|
466
|
+
```html
|
|
467
|
+
<div class="ga-side-navigation" style="height: 400px">
|
|
468
|
+
<div class="ga-side-navigation__header">
|
|
469
|
+
<div tabindex="0" class="ga-side-navigation__switcher">
|
|
470
|
+
<span class="ga-side-navigation__switcher-title">Dashboard</span>
|
|
471
|
+
<span class="ga-side-navigation__switcher-action">
|
|
472
|
+
<!-- icon: chevrons-up-down, size=16 -->
|
|
473
|
+
</span>
|
|
474
|
+
</div>
|
|
475
|
+
</div>
|
|
476
|
+
<div class="ga-side-navigation__body">
|
|
477
|
+
<div class="ga-side-navigation__item ga-side-navigation__item--active">
|
|
478
|
+
<span class="ga-side-navigation__item-icon"></span>
|
|
479
|
+
<div class="ga-side-navigation__item-content">
|
|
480
|
+
<div class="ga-side-navigation__item-label">Home</div>
|
|
481
|
+
</div>
|
|
482
|
+
</div>
|
|
483
|
+
<div class="ga-side-navigation__item">
|
|
484
|
+
<span class="ga-side-navigation__item-icon"></span>
|
|
485
|
+
<div class="ga-side-navigation__item-content">
|
|
486
|
+
<div class="ga-side-navigation__item-label">Settings</div>
|
|
487
|
+
</div>
|
|
488
|
+
</div>
|
|
489
|
+
</div>
|
|
490
|
+
<div class="ga-side-navigation__footer">
|
|
491
|
+
<div class="ga-side-navigation__footer-dropdown">
|
|
492
|
+
<div tabindex="0" class="ga-side-navigation__footer-dropdown-item">
|
|
493
|
+
<!-- icon: user, size=16, class="ga-side-navigation__footer-dropdown-icon" -->
|
|
494
|
+
<span class="ga-side-navigation__footer-dropdown-title">Profile</span>
|
|
495
|
+
</div>
|
|
496
|
+
<div tabindex="0" class="ga-side-navigation__footer-dropdown-item">
|
|
497
|
+
<!-- icon: settings, size=16, class="ga-side-navigation__footer-dropdown-icon" -->
|
|
498
|
+
<span class="ga-side-navigation__footer-dropdown-title">Settings</span>
|
|
499
|
+
</div>
|
|
500
|
+
<div
|
|
501
|
+
tabindex="0"
|
|
502
|
+
class="ga-side-navigation__footer-dropdown-item ga-side-navigation__footer-dropdown-item--disabled"
|
|
503
|
+
>
|
|
504
|
+
<!-- icon: log-out, size=16, class="ga-side-navigation__footer-dropdown-icon" -->
|
|
505
|
+
<span class="ga-side-navigation__footer-dropdown-title">Log out</span>
|
|
506
|
+
</div>
|
|
507
|
+
</div>
|
|
508
|
+
<div
|
|
509
|
+
tabindex="0"
|
|
510
|
+
class="ga-side-navigation__user ga-side-navigation__user--active"
|
|
511
|
+
>
|
|
512
|
+
<img
|
|
513
|
+
class="ga-side-navigation__user-avatar"
|
|
514
|
+
src="https://i.pravatar.cc/40?img=49"
|
|
515
|
+
alt="Avatar"
|
|
516
|
+
/>
|
|
517
|
+
<span class="ga-side-navigation__user-name">Anna Andersson</span>
|
|
518
|
+
<span class="ga-side-navigation__user-action">
|
|
519
|
+
<!-- icon: chevron-up, size=16 -->
|
|
520
|
+
</span>
|
|
521
|
+
</div>
|
|
522
|
+
</div>
|
|
523
|
+
</div>
|
|
524
|
+
```
|
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
|
+
}
|