@vsn-ux/gaia-styles 0.6.5 → 0.6.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/dist/all-10pt.css +81 -0
- package/dist/all-no-reset-10pt.css +81 -0
- package/dist/all-no-reset.css +81 -0
- package/dist/all.css +81 -0
- package/dist/components/page-header.css +82 -0
- package/dist/components.css +81 -0
- package/dist/docs/PageHeader.md +355 -0
- package/package.json +1 -1
- package/src/styles/components/page-header.css +62 -0
- package/src/styles/components.css +1 -0
package/dist/all-10pt.css
CHANGED
|
@@ -2372,6 +2372,87 @@
|
|
|
2372
2372
|
margin-right: calc(0.4rem * -2);
|
|
2373
2373
|
}
|
|
2374
2374
|
}
|
|
2375
|
+
.ga-page-header {
|
|
2376
|
+
display: flex;
|
|
2377
|
+
width: 100%;
|
|
2378
|
+
flex-direction: column;
|
|
2379
|
+
align-items: flex-start;
|
|
2380
|
+
gap: calc(0.4rem * 1);
|
|
2381
|
+
padding: calc(0.4rem * 0);
|
|
2382
|
+
.ga-page-header__global-navigation {
|
|
2383
|
+
display: flex;
|
|
2384
|
+
width: 100%;
|
|
2385
|
+
align-items: center;
|
|
2386
|
+
justify-content: space-between;
|
|
2387
|
+
border-radius: var(--ga-radius);
|
|
2388
|
+
background-color: var(--ga-color-surface-primary);
|
|
2389
|
+
padding-inline: calc(0.4rem * 4);
|
|
2390
|
+
padding-block: calc(0.4rem * 3);
|
|
2391
|
+
}
|
|
2392
|
+
.ga-page-header__menu-breadcrumbs {
|
|
2393
|
+
display: flex;
|
|
2394
|
+
flex-shrink: 0;
|
|
2395
|
+
flex-grow: 1;
|
|
2396
|
+
flex-basis: calc(0.4rem * 0);
|
|
2397
|
+
align-items: center;
|
|
2398
|
+
gap: calc(0.4rem * 4);
|
|
2399
|
+
}
|
|
2400
|
+
.ga-page-header__header-actions {
|
|
2401
|
+
display: flex;
|
|
2402
|
+
align-items: center;
|
|
2403
|
+
gap: calc(0.4rem * 2);
|
|
2404
|
+
background-color: var(--ga-color-surface-primary);
|
|
2405
|
+
}
|
|
2406
|
+
.ga-page-header__page-navigation {
|
|
2407
|
+
display: flex;
|
|
2408
|
+
width: 100%;
|
|
2409
|
+
align-items: center;
|
|
2410
|
+
justify-content: space-between;
|
|
2411
|
+
align-self: stretch;
|
|
2412
|
+
padding-inline: calc(0.4rem * 4);
|
|
2413
|
+
padding-bottom: calc(0.4rem * 3);
|
|
2414
|
+
}
|
|
2415
|
+
.ga-page-header__page-nav-start {
|
|
2416
|
+
display: flex;
|
|
2417
|
+
align-items: center;
|
|
2418
|
+
gap: calc(0.4rem * 3);
|
|
2419
|
+
}
|
|
2420
|
+
.ga-page-header__page-nav-end {
|
|
2421
|
+
display: flex;
|
|
2422
|
+
align-items: center;
|
|
2423
|
+
gap: calc(0.4rem * 2);
|
|
2424
|
+
}
|
|
2425
|
+
}
|
|
2426
|
+
@media (max-width: 767px) {
|
|
2427
|
+
.ga-page-header .ga-page-header__global-navigation {
|
|
2428
|
+
flex-wrap: wrap;
|
|
2429
|
+
row-gap: calc(0.4rem * 2);
|
|
2430
|
+
}
|
|
2431
|
+
.ga-page-header .ga-page-header__header-actions {
|
|
2432
|
+
margin-left: auto;
|
|
2433
|
+
}
|
|
2434
|
+
.ga-page-header .ga-page-header__menu-breadcrumbs {
|
|
2435
|
+
display: contents;
|
|
2436
|
+
}
|
|
2437
|
+
.ga-page-header .ga-page-header__menu-breadcrumbs .ga-breadcrumb {
|
|
2438
|
+
order: 9999;
|
|
2439
|
+
flex-basis: 100%;
|
|
2440
|
+
}
|
|
2441
|
+
}
|
|
2442
|
+
@media (min-width: 768px) {
|
|
2443
|
+
.ga-page-header .ga-page-header__global-navigation {
|
|
2444
|
+
width: auto;
|
|
2445
|
+
align-self: stretch;
|
|
2446
|
+
}
|
|
2447
|
+
.ga-page-header .ga-page-header__page-navigation {
|
|
2448
|
+
width: auto;
|
|
2449
|
+
}
|
|
2450
|
+
}
|
|
2451
|
+
@media (min-width: 1440px) {
|
|
2452
|
+
.ga-page-header .ga-page-header__header-actions {
|
|
2453
|
+
background-color: transparent;
|
|
2454
|
+
}
|
|
2455
|
+
}
|
|
2375
2456
|
.ga-progress {
|
|
2376
2457
|
display: flex;
|
|
2377
2458
|
flex-direction: column;
|
|
@@ -2219,6 +2219,87 @@
|
|
|
2219
2219
|
margin-right: calc(0.4rem * -2);
|
|
2220
2220
|
}
|
|
2221
2221
|
}
|
|
2222
|
+
.ga-page-header {
|
|
2223
|
+
display: flex;
|
|
2224
|
+
width: 100%;
|
|
2225
|
+
flex-direction: column;
|
|
2226
|
+
align-items: flex-start;
|
|
2227
|
+
gap: calc(0.4rem * 1);
|
|
2228
|
+
padding: calc(0.4rem * 0);
|
|
2229
|
+
.ga-page-header__global-navigation {
|
|
2230
|
+
display: flex;
|
|
2231
|
+
width: 100%;
|
|
2232
|
+
align-items: center;
|
|
2233
|
+
justify-content: space-between;
|
|
2234
|
+
border-radius: var(--ga-radius);
|
|
2235
|
+
background-color: var(--ga-color-surface-primary);
|
|
2236
|
+
padding-inline: calc(0.4rem * 4);
|
|
2237
|
+
padding-block: calc(0.4rem * 3);
|
|
2238
|
+
}
|
|
2239
|
+
.ga-page-header__menu-breadcrumbs {
|
|
2240
|
+
display: flex;
|
|
2241
|
+
flex-shrink: 0;
|
|
2242
|
+
flex-grow: 1;
|
|
2243
|
+
flex-basis: calc(0.4rem * 0);
|
|
2244
|
+
align-items: center;
|
|
2245
|
+
gap: calc(0.4rem * 4);
|
|
2246
|
+
}
|
|
2247
|
+
.ga-page-header__header-actions {
|
|
2248
|
+
display: flex;
|
|
2249
|
+
align-items: center;
|
|
2250
|
+
gap: calc(0.4rem * 2);
|
|
2251
|
+
background-color: var(--ga-color-surface-primary);
|
|
2252
|
+
}
|
|
2253
|
+
.ga-page-header__page-navigation {
|
|
2254
|
+
display: flex;
|
|
2255
|
+
width: 100%;
|
|
2256
|
+
align-items: center;
|
|
2257
|
+
justify-content: space-between;
|
|
2258
|
+
align-self: stretch;
|
|
2259
|
+
padding-inline: calc(0.4rem * 4);
|
|
2260
|
+
padding-bottom: calc(0.4rem * 3);
|
|
2261
|
+
}
|
|
2262
|
+
.ga-page-header__page-nav-start {
|
|
2263
|
+
display: flex;
|
|
2264
|
+
align-items: center;
|
|
2265
|
+
gap: calc(0.4rem * 3);
|
|
2266
|
+
}
|
|
2267
|
+
.ga-page-header__page-nav-end {
|
|
2268
|
+
display: flex;
|
|
2269
|
+
align-items: center;
|
|
2270
|
+
gap: calc(0.4rem * 2);
|
|
2271
|
+
}
|
|
2272
|
+
}
|
|
2273
|
+
@media (max-width: 767px) {
|
|
2274
|
+
.ga-page-header .ga-page-header__global-navigation {
|
|
2275
|
+
flex-wrap: wrap;
|
|
2276
|
+
row-gap: calc(0.4rem * 2);
|
|
2277
|
+
}
|
|
2278
|
+
.ga-page-header .ga-page-header__header-actions {
|
|
2279
|
+
margin-left: auto;
|
|
2280
|
+
}
|
|
2281
|
+
.ga-page-header .ga-page-header__menu-breadcrumbs {
|
|
2282
|
+
display: contents;
|
|
2283
|
+
}
|
|
2284
|
+
.ga-page-header .ga-page-header__menu-breadcrumbs .ga-breadcrumb {
|
|
2285
|
+
order: 9999;
|
|
2286
|
+
flex-basis: 100%;
|
|
2287
|
+
}
|
|
2288
|
+
}
|
|
2289
|
+
@media (min-width: 768px) {
|
|
2290
|
+
.ga-page-header .ga-page-header__global-navigation {
|
|
2291
|
+
width: auto;
|
|
2292
|
+
align-self: stretch;
|
|
2293
|
+
}
|
|
2294
|
+
.ga-page-header .ga-page-header__page-navigation {
|
|
2295
|
+
width: auto;
|
|
2296
|
+
}
|
|
2297
|
+
}
|
|
2298
|
+
@media (min-width: 1440px) {
|
|
2299
|
+
.ga-page-header .ga-page-header__header-actions {
|
|
2300
|
+
background-color: transparent;
|
|
2301
|
+
}
|
|
2302
|
+
}
|
|
2222
2303
|
.ga-progress {
|
|
2223
2304
|
display: flex;
|
|
2224
2305
|
flex-direction: column;
|
package/dist/all-no-reset.css
CHANGED
|
@@ -2219,6 +2219,87 @@
|
|
|
2219
2219
|
margin-right: calc(0.25rem * -2);
|
|
2220
2220
|
}
|
|
2221
2221
|
}
|
|
2222
|
+
.ga-page-header {
|
|
2223
|
+
display: flex;
|
|
2224
|
+
width: 100%;
|
|
2225
|
+
flex-direction: column;
|
|
2226
|
+
align-items: flex-start;
|
|
2227
|
+
gap: calc(0.25rem * 1);
|
|
2228
|
+
padding: calc(0.25rem * 0);
|
|
2229
|
+
.ga-page-header__global-navigation {
|
|
2230
|
+
display: flex;
|
|
2231
|
+
width: 100%;
|
|
2232
|
+
align-items: center;
|
|
2233
|
+
justify-content: space-between;
|
|
2234
|
+
border-radius: var(--ga-radius);
|
|
2235
|
+
background-color: var(--ga-color-surface-primary);
|
|
2236
|
+
padding-inline: calc(0.25rem * 4);
|
|
2237
|
+
padding-block: calc(0.25rem * 3);
|
|
2238
|
+
}
|
|
2239
|
+
.ga-page-header__menu-breadcrumbs {
|
|
2240
|
+
display: flex;
|
|
2241
|
+
flex-shrink: 0;
|
|
2242
|
+
flex-grow: 1;
|
|
2243
|
+
flex-basis: calc(0.25rem * 0);
|
|
2244
|
+
align-items: center;
|
|
2245
|
+
gap: calc(0.25rem * 4);
|
|
2246
|
+
}
|
|
2247
|
+
.ga-page-header__header-actions {
|
|
2248
|
+
display: flex;
|
|
2249
|
+
align-items: center;
|
|
2250
|
+
gap: calc(0.25rem * 2);
|
|
2251
|
+
background-color: var(--ga-color-surface-primary);
|
|
2252
|
+
}
|
|
2253
|
+
.ga-page-header__page-navigation {
|
|
2254
|
+
display: flex;
|
|
2255
|
+
width: 100%;
|
|
2256
|
+
align-items: center;
|
|
2257
|
+
justify-content: space-between;
|
|
2258
|
+
align-self: stretch;
|
|
2259
|
+
padding-inline: calc(0.25rem * 4);
|
|
2260
|
+
padding-bottom: calc(0.25rem * 3);
|
|
2261
|
+
}
|
|
2262
|
+
.ga-page-header__page-nav-start {
|
|
2263
|
+
display: flex;
|
|
2264
|
+
align-items: center;
|
|
2265
|
+
gap: calc(0.25rem * 3);
|
|
2266
|
+
}
|
|
2267
|
+
.ga-page-header__page-nav-end {
|
|
2268
|
+
display: flex;
|
|
2269
|
+
align-items: center;
|
|
2270
|
+
gap: calc(0.25rem * 2);
|
|
2271
|
+
}
|
|
2272
|
+
}
|
|
2273
|
+
@media (max-width: 767px) {
|
|
2274
|
+
.ga-page-header .ga-page-header__global-navigation {
|
|
2275
|
+
flex-wrap: wrap;
|
|
2276
|
+
row-gap: calc(0.25rem * 2);
|
|
2277
|
+
}
|
|
2278
|
+
.ga-page-header .ga-page-header__header-actions {
|
|
2279
|
+
margin-left: auto;
|
|
2280
|
+
}
|
|
2281
|
+
.ga-page-header .ga-page-header__menu-breadcrumbs {
|
|
2282
|
+
display: contents;
|
|
2283
|
+
}
|
|
2284
|
+
.ga-page-header .ga-page-header__menu-breadcrumbs .ga-breadcrumb {
|
|
2285
|
+
order: 9999;
|
|
2286
|
+
flex-basis: 100%;
|
|
2287
|
+
}
|
|
2288
|
+
}
|
|
2289
|
+
@media (min-width: 768px) {
|
|
2290
|
+
.ga-page-header .ga-page-header__global-navigation {
|
|
2291
|
+
width: auto;
|
|
2292
|
+
align-self: stretch;
|
|
2293
|
+
}
|
|
2294
|
+
.ga-page-header .ga-page-header__page-navigation {
|
|
2295
|
+
width: auto;
|
|
2296
|
+
}
|
|
2297
|
+
}
|
|
2298
|
+
@media (min-width: 1440px) {
|
|
2299
|
+
.ga-page-header .ga-page-header__header-actions {
|
|
2300
|
+
background-color: transparent;
|
|
2301
|
+
}
|
|
2302
|
+
}
|
|
2222
2303
|
.ga-progress {
|
|
2223
2304
|
display: flex;
|
|
2224
2305
|
flex-direction: column;
|
package/dist/all.css
CHANGED
|
@@ -2372,6 +2372,87 @@
|
|
|
2372
2372
|
margin-right: calc(0.25rem * -2);
|
|
2373
2373
|
}
|
|
2374
2374
|
}
|
|
2375
|
+
.ga-page-header {
|
|
2376
|
+
display: flex;
|
|
2377
|
+
width: 100%;
|
|
2378
|
+
flex-direction: column;
|
|
2379
|
+
align-items: flex-start;
|
|
2380
|
+
gap: calc(0.25rem * 1);
|
|
2381
|
+
padding: calc(0.25rem * 0);
|
|
2382
|
+
.ga-page-header__global-navigation {
|
|
2383
|
+
display: flex;
|
|
2384
|
+
width: 100%;
|
|
2385
|
+
align-items: center;
|
|
2386
|
+
justify-content: space-between;
|
|
2387
|
+
border-radius: var(--ga-radius);
|
|
2388
|
+
background-color: var(--ga-color-surface-primary);
|
|
2389
|
+
padding-inline: calc(0.25rem * 4);
|
|
2390
|
+
padding-block: calc(0.25rem * 3);
|
|
2391
|
+
}
|
|
2392
|
+
.ga-page-header__menu-breadcrumbs {
|
|
2393
|
+
display: flex;
|
|
2394
|
+
flex-shrink: 0;
|
|
2395
|
+
flex-grow: 1;
|
|
2396
|
+
flex-basis: calc(0.25rem * 0);
|
|
2397
|
+
align-items: center;
|
|
2398
|
+
gap: calc(0.25rem * 4);
|
|
2399
|
+
}
|
|
2400
|
+
.ga-page-header__header-actions {
|
|
2401
|
+
display: flex;
|
|
2402
|
+
align-items: center;
|
|
2403
|
+
gap: calc(0.25rem * 2);
|
|
2404
|
+
background-color: var(--ga-color-surface-primary);
|
|
2405
|
+
}
|
|
2406
|
+
.ga-page-header__page-navigation {
|
|
2407
|
+
display: flex;
|
|
2408
|
+
width: 100%;
|
|
2409
|
+
align-items: center;
|
|
2410
|
+
justify-content: space-between;
|
|
2411
|
+
align-self: stretch;
|
|
2412
|
+
padding-inline: calc(0.25rem * 4);
|
|
2413
|
+
padding-bottom: calc(0.25rem * 3);
|
|
2414
|
+
}
|
|
2415
|
+
.ga-page-header__page-nav-start {
|
|
2416
|
+
display: flex;
|
|
2417
|
+
align-items: center;
|
|
2418
|
+
gap: calc(0.25rem * 3);
|
|
2419
|
+
}
|
|
2420
|
+
.ga-page-header__page-nav-end {
|
|
2421
|
+
display: flex;
|
|
2422
|
+
align-items: center;
|
|
2423
|
+
gap: calc(0.25rem * 2);
|
|
2424
|
+
}
|
|
2425
|
+
}
|
|
2426
|
+
@media (max-width: 767px) {
|
|
2427
|
+
.ga-page-header .ga-page-header__global-navigation {
|
|
2428
|
+
flex-wrap: wrap;
|
|
2429
|
+
row-gap: calc(0.25rem * 2);
|
|
2430
|
+
}
|
|
2431
|
+
.ga-page-header .ga-page-header__header-actions {
|
|
2432
|
+
margin-left: auto;
|
|
2433
|
+
}
|
|
2434
|
+
.ga-page-header .ga-page-header__menu-breadcrumbs {
|
|
2435
|
+
display: contents;
|
|
2436
|
+
}
|
|
2437
|
+
.ga-page-header .ga-page-header__menu-breadcrumbs .ga-breadcrumb {
|
|
2438
|
+
order: 9999;
|
|
2439
|
+
flex-basis: 100%;
|
|
2440
|
+
}
|
|
2441
|
+
}
|
|
2442
|
+
@media (min-width: 768px) {
|
|
2443
|
+
.ga-page-header .ga-page-header__global-navigation {
|
|
2444
|
+
width: auto;
|
|
2445
|
+
align-self: stretch;
|
|
2446
|
+
}
|
|
2447
|
+
.ga-page-header .ga-page-header__page-navigation {
|
|
2448
|
+
width: auto;
|
|
2449
|
+
}
|
|
2450
|
+
}
|
|
2451
|
+
@media (min-width: 1440px) {
|
|
2452
|
+
.ga-page-header .ga-page-header__header-actions {
|
|
2453
|
+
background-color: transparent;
|
|
2454
|
+
}
|
|
2455
|
+
}
|
|
2375
2456
|
.ga-progress {
|
|
2376
2457
|
display: flex;
|
|
2377
2458
|
flex-direction: column;
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
|
|
2
|
+
.ga-page-header {
|
|
3
|
+
display: flex;
|
|
4
|
+
width: 100%;
|
|
5
|
+
flex-direction: column;
|
|
6
|
+
align-items: flex-start;
|
|
7
|
+
gap: calc(0.25rem * 1);
|
|
8
|
+
padding: calc(0.25rem * 0);
|
|
9
|
+
.ga-page-header__global-navigation {
|
|
10
|
+
display: flex;
|
|
11
|
+
width: 100%;
|
|
12
|
+
align-items: center;
|
|
13
|
+
justify-content: space-between;
|
|
14
|
+
border-radius: var(--ga-radius);
|
|
15
|
+
background-color: var(--ga-color-surface-primary);
|
|
16
|
+
padding-inline: calc(0.25rem * 4);
|
|
17
|
+
padding-block: calc(0.25rem * 3);
|
|
18
|
+
}
|
|
19
|
+
.ga-page-header__menu-breadcrumbs {
|
|
20
|
+
display: flex;
|
|
21
|
+
flex-shrink: 0;
|
|
22
|
+
flex-grow: 1;
|
|
23
|
+
flex-basis: calc(0.25rem * 0);
|
|
24
|
+
align-items: center;
|
|
25
|
+
gap: calc(0.25rem * 4);
|
|
26
|
+
}
|
|
27
|
+
.ga-page-header__header-actions {
|
|
28
|
+
display: flex;
|
|
29
|
+
align-items: center;
|
|
30
|
+
gap: calc(0.25rem * 2);
|
|
31
|
+
background-color: var(--ga-color-surface-primary);
|
|
32
|
+
}
|
|
33
|
+
.ga-page-header__page-navigation {
|
|
34
|
+
display: flex;
|
|
35
|
+
width: 100%;
|
|
36
|
+
align-items: center;
|
|
37
|
+
justify-content: space-between;
|
|
38
|
+
align-self: stretch;
|
|
39
|
+
padding-inline: calc(0.25rem * 4);
|
|
40
|
+
padding-bottom: calc(0.25rem * 3);
|
|
41
|
+
}
|
|
42
|
+
.ga-page-header__page-nav-start {
|
|
43
|
+
display: flex;
|
|
44
|
+
align-items: center;
|
|
45
|
+
gap: calc(0.25rem * 3);
|
|
46
|
+
}
|
|
47
|
+
.ga-page-header__page-nav-end {
|
|
48
|
+
display: flex;
|
|
49
|
+
align-items: center;
|
|
50
|
+
gap: calc(0.25rem * 2);
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
@media (max-width: 767px) {
|
|
54
|
+
.ga-page-header .ga-page-header__global-navigation {
|
|
55
|
+
flex-wrap: wrap;
|
|
56
|
+
row-gap: calc(0.25rem * 2);
|
|
57
|
+
}
|
|
58
|
+
.ga-page-header .ga-page-header__header-actions {
|
|
59
|
+
margin-left: auto;
|
|
60
|
+
}
|
|
61
|
+
.ga-page-header .ga-page-header__menu-breadcrumbs {
|
|
62
|
+
display: contents;
|
|
63
|
+
}
|
|
64
|
+
.ga-page-header .ga-page-header__menu-breadcrumbs .ga-breadcrumb {
|
|
65
|
+
order: 9999;
|
|
66
|
+
flex-basis: 100%;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
@media (min-width: 768px) {
|
|
70
|
+
.ga-page-header .ga-page-header__global-navigation {
|
|
71
|
+
width: auto;
|
|
72
|
+
align-self: stretch;
|
|
73
|
+
}
|
|
74
|
+
.ga-page-header .ga-page-header__page-navigation {
|
|
75
|
+
width: auto;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
@media (min-width: 1440px) {
|
|
79
|
+
.ga-page-header .ga-page-header__header-actions {
|
|
80
|
+
background-color: transparent;
|
|
81
|
+
}
|
|
82
|
+
}
|
package/dist/components.css
CHANGED
|
@@ -1874,6 +1874,87 @@
|
|
|
1874
1874
|
margin-right: calc(0.25rem * -2);
|
|
1875
1875
|
}
|
|
1876
1876
|
}
|
|
1877
|
+
.ga-page-header {
|
|
1878
|
+
display: flex;
|
|
1879
|
+
width: 100%;
|
|
1880
|
+
flex-direction: column;
|
|
1881
|
+
align-items: flex-start;
|
|
1882
|
+
gap: calc(0.25rem * 1);
|
|
1883
|
+
padding: calc(0.25rem * 0);
|
|
1884
|
+
.ga-page-header__global-navigation {
|
|
1885
|
+
display: flex;
|
|
1886
|
+
width: 100%;
|
|
1887
|
+
align-items: center;
|
|
1888
|
+
justify-content: space-between;
|
|
1889
|
+
border-radius: var(--ga-radius);
|
|
1890
|
+
background-color: var(--ga-color-surface-primary);
|
|
1891
|
+
padding-inline: calc(0.25rem * 4);
|
|
1892
|
+
padding-block: calc(0.25rem * 3);
|
|
1893
|
+
}
|
|
1894
|
+
.ga-page-header__menu-breadcrumbs {
|
|
1895
|
+
display: flex;
|
|
1896
|
+
flex-shrink: 0;
|
|
1897
|
+
flex-grow: 1;
|
|
1898
|
+
flex-basis: calc(0.25rem * 0);
|
|
1899
|
+
align-items: center;
|
|
1900
|
+
gap: calc(0.25rem * 4);
|
|
1901
|
+
}
|
|
1902
|
+
.ga-page-header__header-actions {
|
|
1903
|
+
display: flex;
|
|
1904
|
+
align-items: center;
|
|
1905
|
+
gap: calc(0.25rem * 2);
|
|
1906
|
+
background-color: var(--ga-color-surface-primary);
|
|
1907
|
+
}
|
|
1908
|
+
.ga-page-header__page-navigation {
|
|
1909
|
+
display: flex;
|
|
1910
|
+
width: 100%;
|
|
1911
|
+
align-items: center;
|
|
1912
|
+
justify-content: space-between;
|
|
1913
|
+
align-self: stretch;
|
|
1914
|
+
padding-inline: calc(0.25rem * 4);
|
|
1915
|
+
padding-bottom: calc(0.25rem * 3);
|
|
1916
|
+
}
|
|
1917
|
+
.ga-page-header__page-nav-start {
|
|
1918
|
+
display: flex;
|
|
1919
|
+
align-items: center;
|
|
1920
|
+
gap: calc(0.25rem * 3);
|
|
1921
|
+
}
|
|
1922
|
+
.ga-page-header__page-nav-end {
|
|
1923
|
+
display: flex;
|
|
1924
|
+
align-items: center;
|
|
1925
|
+
gap: calc(0.25rem * 2);
|
|
1926
|
+
}
|
|
1927
|
+
}
|
|
1928
|
+
@media (max-width: 767px) {
|
|
1929
|
+
.ga-page-header .ga-page-header__global-navigation {
|
|
1930
|
+
flex-wrap: wrap;
|
|
1931
|
+
row-gap: calc(0.25rem * 2);
|
|
1932
|
+
}
|
|
1933
|
+
.ga-page-header .ga-page-header__header-actions {
|
|
1934
|
+
margin-left: auto;
|
|
1935
|
+
}
|
|
1936
|
+
.ga-page-header .ga-page-header__menu-breadcrumbs {
|
|
1937
|
+
display: contents;
|
|
1938
|
+
}
|
|
1939
|
+
.ga-page-header .ga-page-header__menu-breadcrumbs .ga-breadcrumb {
|
|
1940
|
+
order: 9999;
|
|
1941
|
+
flex-basis: 100%;
|
|
1942
|
+
}
|
|
1943
|
+
}
|
|
1944
|
+
@media (min-width: 768px) {
|
|
1945
|
+
.ga-page-header .ga-page-header__global-navigation {
|
|
1946
|
+
width: auto;
|
|
1947
|
+
align-self: stretch;
|
|
1948
|
+
}
|
|
1949
|
+
.ga-page-header .ga-page-header__page-navigation {
|
|
1950
|
+
width: auto;
|
|
1951
|
+
}
|
|
1952
|
+
}
|
|
1953
|
+
@media (min-width: 1440px) {
|
|
1954
|
+
.ga-page-header .ga-page-header__header-actions {
|
|
1955
|
+
background-color: transparent;
|
|
1956
|
+
}
|
|
1957
|
+
}
|
|
1877
1958
|
.ga-progress {
|
|
1878
1959
|
display: flex;
|
|
1879
1960
|
flex-direction: column;
|
|
@@ -0,0 +1,355 @@
|
|
|
1
|
+
# Page Header
|
|
2
|
+
|
|
3
|
+
A page header defines the top of a page. It contains a title/breadcrumb trail combined with a context selector, and header actions.
|
|
4
|
+
|
|
5
|
+
## Visual Structure
|
|
6
|
+
|
|
7
|
+
```
|
|
8
|
+
ga-page-header
|
|
9
|
+
├── ga-page-header__global-navigation
|
|
10
|
+
│ ├── ga-page-header__menu-breadcrumbs
|
|
11
|
+
│ │ ├── ga-button ga-button--secondary ga-button--icon-only (hamburger menu)
|
|
12
|
+
│ │ └── ga-breadcrumb
|
|
13
|
+
│ └── ga-page-header__header-actions
|
|
14
|
+
│ ├── ga-select (context selector)
|
|
15
|
+
│ ├── ga-button ga-button--transparent (text action e.g. Feedback)
|
|
16
|
+
│ └── ga-button ga-button--secondary ga-button--icon-only (one per icon action)
|
|
17
|
+
│ └── ga-icon
|
|
18
|
+
└── ga-page-header__page-navigation
|
|
19
|
+
├── ga-page-header__page-nav-start
|
|
20
|
+
└── ga-page-header__page-nav-end
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Elements Hierarchy
|
|
24
|
+
|
|
25
|
+
### Core Block
|
|
26
|
+
|
|
27
|
+
- `ga-page-header` - Main container, full-width vertical stack
|
|
28
|
+
|
|
29
|
+
### Global Navigation Row
|
|
30
|
+
|
|
31
|
+
- `ga-page-header__global-navigation` - The top bar containing the breadcrumb and header actions
|
|
32
|
+
- `ga-page-header__menu-breadcrumbs` - Left slot; contains the hamburger menu button and breadcrumb trail
|
|
33
|
+
- `ga-page-header__header-actions` - Right slot; contains the context selector, text actions, and icon buttons
|
|
34
|
+
- `ga-button ga-button--secondary ga-button--icon-only` - Used for icon action buttons; used for the hamburger menu in `menu-breadcrumbs` and for icon actions in `header-actions`
|
|
35
|
+
|
|
36
|
+
### Page Navigation Row
|
|
37
|
+
|
|
38
|
+
- `ga-page-header__page-navigation` - Secondary bar below the global navigation row
|
|
39
|
+
- `ga-page-header__page-nav-start` - Left slot of the page navigation row (e.g., primary action)
|
|
40
|
+
- `ga-page-header__page-nav-end` - Right slot of the page navigation row (e.g., secondary/tertiary actions)
|
|
41
|
+
|
|
42
|
+
## Responsive Behaviour
|
|
43
|
+
|
|
44
|
+
<table>
|
|
45
|
+
<thead>
|
|
46
|
+
<tr>
|
|
47
|
+
<th>Breakpoint</th>
|
|
48
|
+
<th>Width</th>
|
|
49
|
+
<th>Notes</th>
|
|
50
|
+
</tr>
|
|
51
|
+
</thead>
|
|
52
|
+
<tbody>
|
|
53
|
+
<tr>
|
|
54
|
+
<td>XS – Mobile</td>
|
|
55
|
+
<td>320–767 px</td>
|
|
56
|
+
<td>Hamburger menu + collapsed breadcrumb; icon-only header actions</td>
|
|
57
|
+
</tr>
|
|
58
|
+
<tr>
|
|
59
|
+
<td>S – Tablet</td>
|
|
60
|
+
<td>768–1439 px</td>
|
|
61
|
+
<td>
|
|
62
|
+
Hamburger menu + collapsed breadcrumb; full header actions (selector,
|
|
63
|
+
text button, icon buttons)
|
|
64
|
+
</td>
|
|
65
|
+
</tr>
|
|
66
|
+
<tr>
|
|
67
|
+
<td>M – Desktop</td>
|
|
68
|
+
<td>1440–1919 px</td>
|
|
69
|
+
<td>
|
|
70
|
+
Hamburger menu + full breadcrumb; all header actions inline;{' '}
|
|
71
|
+
<code>header-actions</code> background transparent
|
|
72
|
+
</td>
|
|
73
|
+
</tr>
|
|
74
|
+
<tr>
|
|
75
|
+
<td>L – Wide</td>
|
|
76
|
+
<td>≥ 1920 px</td>
|
|
77
|
+
<td>Same as Desktop</td>
|
|
78
|
+
</tr>
|
|
79
|
+
</tbody>
|
|
80
|
+
</table>
|
|
81
|
+
|
|
82
|
+
## Examples
|
|
83
|
+
|
|
84
|
+
### Size L – Wide (≥ 1920 px)
|
|
85
|
+
|
|
86
|
+
```html
|
|
87
|
+
<div style="overflow-x: auto">
|
|
88
|
+
<div class="ga-page-header" style="min-width: 1920px">
|
|
89
|
+
<div class="ga-page-header__global-navigation">
|
|
90
|
+
<div class="ga-page-header__menu-breadcrumbs">
|
|
91
|
+
<button
|
|
92
|
+
type="button"
|
|
93
|
+
class="ga-button ga-button--secondary ga-button--icon-only"
|
|
94
|
+
>
|
|
95
|
+
<!-- icon: menu, size=24, class="ga-icon" -->
|
|
96
|
+
</button>
|
|
97
|
+
<nav class="ga-breadcrumb">
|
|
98
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--link">
|
|
99
|
+
<div class="ga-breadcrumb-item__group">
|
|
100
|
+
<a class="ga-breadcrumb-item__trigger" href="#">
|
|
101
|
+
<span class="ga-breadcrumb-item__label">Breadcrumb</span>
|
|
102
|
+
</a>
|
|
103
|
+
<button class="ga-breadcrumb-item__explorer" tabindex="-1">
|
|
104
|
+
<!-- icon: chevrons-up-down, size=16, class="ga-icon" -->
|
|
105
|
+
</button>
|
|
106
|
+
</div>
|
|
107
|
+
<span class="ga-breadcrumb-item__separator">/</span>
|
|
108
|
+
</div>
|
|
109
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--link">
|
|
110
|
+
<div class="ga-breadcrumb-item__group">
|
|
111
|
+
<a class="ga-breadcrumb-item__trigger" href="#">
|
|
112
|
+
<span class="ga-breadcrumb-item__label">Breadcrumb</span>
|
|
113
|
+
</a>
|
|
114
|
+
<button class="ga-breadcrumb-item__explorer" tabindex="-1">
|
|
115
|
+
<!-- icon: chevrons-up-down, size=16, class="ga-icon" -->
|
|
116
|
+
</button>
|
|
117
|
+
</div>
|
|
118
|
+
<span class="ga-breadcrumb-item__separator">/</span>
|
|
119
|
+
</div>
|
|
120
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--link">
|
|
121
|
+
<div class="ga-breadcrumb-item__group">
|
|
122
|
+
<a class="ga-breadcrumb-item__trigger" href="#">
|
|
123
|
+
<span class="ga-breadcrumb-item__label">Breadcrumb</span>
|
|
124
|
+
</a>
|
|
125
|
+
<button class="ga-breadcrumb-item__explorer" tabindex="-1">
|
|
126
|
+
<!-- icon: chevrons-up-down, size=16, class="ga-icon" -->
|
|
127
|
+
</button>
|
|
128
|
+
</div>
|
|
129
|
+
<span class="ga-breadcrumb-item__separator">/</span>
|
|
130
|
+
</div>
|
|
131
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--current-page">
|
|
132
|
+
<span class="ga-breadcrumb-item__trigger">Breadcrumb</span>
|
|
133
|
+
</div>
|
|
134
|
+
</nav>
|
|
135
|
+
</div>
|
|
136
|
+
<div class="ga-page-header__header-actions">
|
|
137
|
+
<div class="ga-select" style="min-width: 160px">
|
|
138
|
+
<div class="ga-select__main-area">
|
|
139
|
+
<div class="ga-select__value">Context selector</div>
|
|
140
|
+
</div>
|
|
141
|
+
<div class="ga-select__suffix">
|
|
142
|
+
<!-- icon: chevron-down, size=24, class="ga-select__action-icon" -->
|
|
143
|
+
</div>
|
|
144
|
+
</div>
|
|
145
|
+
<button type="button" class="ga-button ga-button--transparent">
|
|
146
|
+
Feedback
|
|
147
|
+
</button>
|
|
148
|
+
<button
|
|
149
|
+
type="button"
|
|
150
|
+
class="ga-button ga-button--secondary ga-button--icon-only"
|
|
151
|
+
>
|
|
152
|
+
<!-- icon: sparkles, size=24, class="ga-icon" -->
|
|
153
|
+
</button>
|
|
154
|
+
<button
|
|
155
|
+
type="button"
|
|
156
|
+
class="ga-button ga-button--secondary ga-button--icon-only"
|
|
157
|
+
>
|
|
158
|
+
<!-- icon: bell, size=24, class="ga-icon" -->
|
|
159
|
+
</button>
|
|
160
|
+
</div>
|
|
161
|
+
</div>
|
|
162
|
+
</div>
|
|
163
|
+
</div>
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
### Size M – Desktop (1440–1919 px)
|
|
167
|
+
|
|
168
|
+
```html
|
|
169
|
+
<div style="overflow-x: auto">
|
|
170
|
+
<div class="ga-page-header" style="min-width: 1440px">
|
|
171
|
+
<div class="ga-page-header__global-navigation">
|
|
172
|
+
<div class="ga-page-header__menu-breadcrumbs">
|
|
173
|
+
<button
|
|
174
|
+
type="button"
|
|
175
|
+
class="ga-button ga-button--secondary ga-button--icon-only"
|
|
176
|
+
>
|
|
177
|
+
<!-- icon: menu, size=24, class="ga-icon" -->
|
|
178
|
+
</button>
|
|
179
|
+
<nav class="ga-breadcrumb">
|
|
180
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--link">
|
|
181
|
+
<div class="ga-breadcrumb-item__group">
|
|
182
|
+
<a class="ga-breadcrumb-item__trigger" href="#">
|
|
183
|
+
<span class="ga-breadcrumb-item__label">Breadcrumb</span>
|
|
184
|
+
</a>
|
|
185
|
+
<button class="ga-breadcrumb-item__explorer" tabindex="-1">
|
|
186
|
+
<!-- icon: chevrons-up-down, size=16, class="ga-icon" -->
|
|
187
|
+
</button>
|
|
188
|
+
</div>
|
|
189
|
+
<span class="ga-breadcrumb-item__separator">/</span>
|
|
190
|
+
</div>
|
|
191
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--link">
|
|
192
|
+
<div class="ga-breadcrumb-item__group">
|
|
193
|
+
<a class="ga-breadcrumb-item__trigger" href="#">
|
|
194
|
+
<span class="ga-breadcrumb-item__label">Breadcrumb</span>
|
|
195
|
+
</a>
|
|
196
|
+
<button class="ga-breadcrumb-item__explorer" tabindex="-1">
|
|
197
|
+
<!-- icon: chevrons-up-down, size=16, class="ga-icon" -->
|
|
198
|
+
</button>
|
|
199
|
+
</div>
|
|
200
|
+
<span class="ga-breadcrumb-item__separator">/</span>
|
|
201
|
+
</div>
|
|
202
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--link">
|
|
203
|
+
<div class="ga-breadcrumb-item__group">
|
|
204
|
+
<a class="ga-breadcrumb-item__trigger" href="#">
|
|
205
|
+
<span class="ga-breadcrumb-item__label">Breadcrumb</span>
|
|
206
|
+
</a>
|
|
207
|
+
<button class="ga-breadcrumb-item__explorer" tabindex="-1">
|
|
208
|
+
<!-- icon: chevrons-up-down, size=16, class="ga-icon" -->
|
|
209
|
+
</button>
|
|
210
|
+
</div>
|
|
211
|
+
<span class="ga-breadcrumb-item__separator">/</span>
|
|
212
|
+
</div>
|
|
213
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--current-page">
|
|
214
|
+
<span class="ga-breadcrumb-item__trigger">Breadcrumb</span>
|
|
215
|
+
</div>
|
|
216
|
+
</nav>
|
|
217
|
+
</div>
|
|
218
|
+
<div class="ga-page-header__header-actions">
|
|
219
|
+
<div class="ga-select" style="min-width: 160px">
|
|
220
|
+
<div class="ga-select__main-area">
|
|
221
|
+
<div class="ga-select__value">Context selector</div>
|
|
222
|
+
</div>
|
|
223
|
+
<div class="ga-select__suffix">
|
|
224
|
+
<!-- icon: chevron-down, size=24, class="ga-select__action-icon" -->
|
|
225
|
+
</div>
|
|
226
|
+
</div>
|
|
227
|
+
<button type="button" class="ga-button ga-button--transparent">
|
|
228
|
+
Feedback
|
|
229
|
+
</button>
|
|
230
|
+
<button
|
|
231
|
+
type="button"
|
|
232
|
+
class="ga-button ga-button--secondary ga-button--icon-only"
|
|
233
|
+
>
|
|
234
|
+
<!-- icon: sparkles, size=24, class="ga-icon" -->
|
|
235
|
+
</button>
|
|
236
|
+
<button
|
|
237
|
+
type="button"
|
|
238
|
+
class="ga-button ga-button--secondary ga-button--icon-only"
|
|
239
|
+
>
|
|
240
|
+
<!-- icon: bell, size=24, class="ga-icon" -->
|
|
241
|
+
</button>
|
|
242
|
+
</div>
|
|
243
|
+
</div>
|
|
244
|
+
</div>
|
|
245
|
+
</div>
|
|
246
|
+
```
|
|
247
|
+
|
|
248
|
+
### Size S – Tablet (768–1439 px)
|
|
249
|
+
|
|
250
|
+
```html
|
|
251
|
+
<div class="ga-page-header">
|
|
252
|
+
<div class="ga-page-header__global-navigation">
|
|
253
|
+
<div class="ga-page-header__menu-breadcrumbs">
|
|
254
|
+
<button
|
|
255
|
+
type="button"
|
|
256
|
+
class="ga-button ga-button--secondary ga-button--icon-only"
|
|
257
|
+
>
|
|
258
|
+
<!-- icon: menu, size=24, class="ga-icon" -->
|
|
259
|
+
</button>
|
|
260
|
+
<nav class="ga-breadcrumb">
|
|
261
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--overflow">
|
|
262
|
+
<button class="ga-breadcrumb-item__trigger" aria-expanded="false">
|
|
263
|
+
<span class="ga-breadcrumb-item__label">...</span>
|
|
264
|
+
<!-- icon: chevron-down, size=16, class="ga-icon" -->
|
|
265
|
+
</button>
|
|
266
|
+
<span class="ga-breadcrumb-item__separator">/</span>
|
|
267
|
+
</div>
|
|
268
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--current-page">
|
|
269
|
+
<span class="ga-breadcrumb-item__trigger">Breadcrumb</span>
|
|
270
|
+
</div>
|
|
271
|
+
</nav>
|
|
272
|
+
</div>
|
|
273
|
+
<div class="ga-page-header__header-actions">
|
|
274
|
+
<div class="ga-select" style="min-width: 160px">
|
|
275
|
+
<div class="ga-select__main-area">
|
|
276
|
+
<div class="ga-select__value">Context selector</div>
|
|
277
|
+
</div>
|
|
278
|
+
<div class="ga-select__suffix">
|
|
279
|
+
<!-- icon: chevron-down, size=24, class="ga-select__action-icon" -->
|
|
280
|
+
</div>
|
|
281
|
+
</div>
|
|
282
|
+
<button type="button" class="ga-button ga-button--transparent">
|
|
283
|
+
Feedback
|
|
284
|
+
</button>
|
|
285
|
+
<button
|
|
286
|
+
type="button"
|
|
287
|
+
class="ga-button ga-button--secondary ga-button--icon-only"
|
|
288
|
+
>
|
|
289
|
+
<!-- icon: sparkles, size=24, class="ga-icon" -->
|
|
290
|
+
</button>
|
|
291
|
+
<button
|
|
292
|
+
type="button"
|
|
293
|
+
class="ga-button ga-button--secondary ga-button--icon-only"
|
|
294
|
+
>
|
|
295
|
+
<!-- icon: bell, size=24, class="ga-icon" -->
|
|
296
|
+
</button>
|
|
297
|
+
</div>
|
|
298
|
+
</div>
|
|
299
|
+
</div>
|
|
300
|
+
```
|
|
301
|
+
|
|
302
|
+
### Size XS – Mobile (320–767 px)
|
|
303
|
+
|
|
304
|
+
```html
|
|
305
|
+
<div class="ga-page-header">
|
|
306
|
+
<div class="ga-page-header__global-navigation">
|
|
307
|
+
<div class="ga-page-header__menu-breadcrumbs">
|
|
308
|
+
<button
|
|
309
|
+
type="button"
|
|
310
|
+
class="ga-button ga-button--secondary ga-button--icon-only"
|
|
311
|
+
>
|
|
312
|
+
<!-- icon: menu, size=24, class="ga-icon" -->
|
|
313
|
+
</button>
|
|
314
|
+
<nav class="ga-breadcrumb">
|
|
315
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--overflow">
|
|
316
|
+
<button class="ga-breadcrumb-item__trigger" aria-expanded="false">
|
|
317
|
+
<span class="ga-breadcrumb-item__label">...</span>
|
|
318
|
+
<!-- icon: chevron-down, size=16, class="ga-icon" -->
|
|
319
|
+
</button>
|
|
320
|
+
<span class="ga-breadcrumb-item__separator">/</span>
|
|
321
|
+
</div>
|
|
322
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--current-page">
|
|
323
|
+
<span class="ga-breadcrumb-item__trigger">Breadcrumb</span>
|
|
324
|
+
</div>
|
|
325
|
+
</nav>
|
|
326
|
+
</div>
|
|
327
|
+
<div class="ga-page-header__header-actions">
|
|
328
|
+
<button
|
|
329
|
+
type="button"
|
|
330
|
+
class="ga-button ga-button--secondary ga-button--icon-only"
|
|
331
|
+
>
|
|
332
|
+
<!-- icon: building2, size=24, class="ga-icon" -->
|
|
333
|
+
</button>
|
|
334
|
+
<button
|
|
335
|
+
type="button"
|
|
336
|
+
class="ga-button ga-button--secondary ga-button--icon-only"
|
|
337
|
+
>
|
|
338
|
+
<!-- icon: thumbs-up, size=24, class="ga-icon" -->
|
|
339
|
+
</button>
|
|
340
|
+
<button
|
|
341
|
+
type="button"
|
|
342
|
+
class="ga-button ga-button--secondary ga-button--icon-only"
|
|
343
|
+
>
|
|
344
|
+
<!-- icon: sparkles, size=24, class="ga-icon" -->
|
|
345
|
+
</button>
|
|
346
|
+
<button
|
|
347
|
+
type="button"
|
|
348
|
+
class="ga-button ga-button--secondary ga-button--icon-only"
|
|
349
|
+
>
|
|
350
|
+
<!-- icon: bell, size=24, class="ga-icon" -->
|
|
351
|
+
</button>
|
|
352
|
+
</div>
|
|
353
|
+
</div>
|
|
354
|
+
</div>
|
|
355
|
+
```
|
package/package.json
CHANGED
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
.ga-page-header {
|
|
2
|
+
@apply flex w-full flex-col items-start gap-1 p-0;
|
|
3
|
+
|
|
4
|
+
.ga-page-header__global-navigation {
|
|
5
|
+
@apply flex w-full items-center justify-between rounded bg-(--ga-color-surface-primary) px-4 py-3;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.ga-page-header__menu-breadcrumbs {
|
|
9
|
+
@apply flex shrink-0 grow basis-0 items-center gap-4;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.ga-page-header__header-actions {
|
|
13
|
+
@apply flex items-center gap-2 bg-(--ga-color-surface-primary);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.ga-page-header__page-navigation {
|
|
17
|
+
@apply flex w-full items-center justify-between self-stretch px-4 pb-3;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.ga-page-header__page-nav-start {
|
|
21
|
+
@apply flex items-center gap-3;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.ga-page-header__page-nav-end {
|
|
25
|
+
@apply flex items-center gap-2;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
@media (max-width: 767px) {
|
|
30
|
+
.ga-page-header .ga-page-header__global-navigation {
|
|
31
|
+
@apply flex-wrap gap-y-2;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.ga-page-header .ga-page-header__header-actions {
|
|
35
|
+
@apply ml-auto;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.ga-page-header .ga-page-header__menu-breadcrumbs {
|
|
39
|
+
@apply contents;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
/* The breadcrumb wraps to row 2 and stretches to full width. */
|
|
43
|
+
.ga-page-header .ga-page-header__menu-breadcrumbs .ga-breadcrumb {
|
|
44
|
+
@apply order-last basis-full;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
@media (min-width: 768px) {
|
|
49
|
+
.ga-page-header .ga-page-header__global-navigation {
|
|
50
|
+
@apply w-auto self-stretch;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.ga-page-header .ga-page-header__page-navigation {
|
|
54
|
+
@apply w-auto;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
@media (min-width: 1440px) {
|
|
59
|
+
.ga-page-header .ga-page-header__header-actions {
|
|
60
|
+
@apply bg-transparent;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
@import './components/notification.css';
|
|
14
14
|
@import './components/menu.css';
|
|
15
15
|
@import './components/modal.css';
|
|
16
|
+
@import './components/page-header.css';
|
|
16
17
|
@import './components/progress-bar.css';
|
|
17
18
|
@import './components/progress-indicator.css';
|
|
18
19
|
@import './components/radio.css';
|