@vsn-ux/gaia-styles 0.6.4 → 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/AgGrid.md +36 -0
- package/dist/docs/PageHeader.md +355 -0
- package/dist/integrations/ag-grid.d.mts +6 -0
- package/dist/integrations/ag-grid.mjs +262 -0
- package/package.json +8 -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,36 @@
|
|
|
1
|
+
# AG Grid
|
|
2
|
+
|
|
3
|
+
A pre-configured [AG Grid](https://www.ag-grid.com/) theme that matches the Gaia design system.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
Install `ag-grid-community` in the consuming app — it is not bundled or declared as a peer dependency.
|
|
8
|
+
|
|
9
|
+
```sh
|
|
10
|
+
pnpm add ag-grid-community ag-grid-react
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Usage
|
|
14
|
+
|
|
15
|
+
The Gaia design-tokens stylesheet must be loaded once so the `--ga-*` variables are defined at runtime. Then import `gaiaTheme` and pass it to the grid via the `theme` prop.
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
|
|
19
|
+
export function MyGrid() {
|
|
20
|
+
return <AgGridReact theme={gaiaTheme} rowData={rows} columnDefs={columns} />;
|
|
21
|
+
}
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
No AG Grid CSS imports are needed — the Theming API injects styles at runtime.
|
|
25
|
+
|
|
26
|
+
## Customization
|
|
27
|
+
|
|
28
|
+
`gaiaTheme` is a standard AG Grid theme object and composes with `withParams` / `withPart` like any other. Prefer `var(--ga-*)` references over literal values.
|
|
29
|
+
|
|
30
|
+
```ts
|
|
31
|
+
|
|
32
|
+
export const myGridTheme = gaiaTheme.withParams({
|
|
33
|
+
rowHeight: 'var(--ga-size-48)',
|
|
34
|
+
headerBackgroundColor: 'var(--ga-color-neutral-20)',
|
|
35
|
+
});
|
|
36
|
+
```
|
|
@@ -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
|
+
```
|
|
@@ -0,0 +1,262 @@
|
|
|
1
|
+
import { themeQuartz } from "ag-grid-community";
|
|
2
|
+
//#region src/integrations/ag-grid/theme.ts
|
|
3
|
+
const gaiaTheme = themeQuartz.withParams({
|
|
4
|
+
accentColor: "var(--ga-color-primary)",
|
|
5
|
+
advancedFilterBuilderButtonBarBorder: {
|
|
6
|
+
width: "var(--ga-size-border-width-sm)",
|
|
7
|
+
color: "var(--ga-color-neutral-30)",
|
|
8
|
+
style: "solid"
|
|
9
|
+
},
|
|
10
|
+
advancedFilterBuilderColumnPillColor: "var(--ga-color-green-10)",
|
|
11
|
+
advancedFilterBuilderIndentSize: "var(--ga-size-32)",
|
|
12
|
+
advancedFilterBuilderJoinPillColor: "var(--ga-color-red-10)",
|
|
13
|
+
advancedFilterBuilderOptionPillColor: "var(--ga-color-orange-20)",
|
|
14
|
+
advancedFilterBuilderValuePillColor: "var(--ga-color-blue-10)",
|
|
15
|
+
backgroundColor: "var(--ga-color-white)",
|
|
16
|
+
borderColor: "var(--ga-color-neutral-30)",
|
|
17
|
+
borderRadius: "var(--ga-radius)",
|
|
18
|
+
browserColorScheme: "light",
|
|
19
|
+
buttonActiveBackgroundColor: "var(--ga-color-orange-30)",
|
|
20
|
+
buttonActiveTextColor: "var(--ga-color-text-body)",
|
|
21
|
+
buttonBackgroundColor: "var(--ga-color-white)",
|
|
22
|
+
buttonBorder: {
|
|
23
|
+
width: "var(--ga-size-border-width-sm)",
|
|
24
|
+
color: "var(--ga-color-neutral-30)",
|
|
25
|
+
style: "solid"
|
|
26
|
+
},
|
|
27
|
+
buttonBorderRadius: "var(--ga-radius)",
|
|
28
|
+
buttonDisabledBackgroundColor: "var(--ga-color-neutral-20)",
|
|
29
|
+
buttonDisabledTextColor: "var(--ga-color-neutral-60)",
|
|
30
|
+
buttonFontWeight: "var(--ga-font-weight-medium)",
|
|
31
|
+
buttonHorizontalPadding: "var(--ga-size-spacing-05)",
|
|
32
|
+
buttonHoverBackgroundColor: "var(--ga-color-orange-20)",
|
|
33
|
+
buttonHoverTextColor: "var(--ga-color-text-body)",
|
|
34
|
+
buttonTextColor: "var(--ga-color-text-body)",
|
|
35
|
+
buttonVerticalPadding: "var(--ga-size-spacing-03)",
|
|
36
|
+
cellEditingBorder: false,
|
|
37
|
+
cellFontFamily: "var(--ga-font-family-primary)",
|
|
38
|
+
cellHorizontalPadding: "var(--ga-size-spacing-04)",
|
|
39
|
+
cellHorizontalPaddingScale: 1,
|
|
40
|
+
cellTextColor: "var(--ga-color-text-body)",
|
|
41
|
+
cellWidgetSpacing: "var(--ga-size-spacing-03)",
|
|
42
|
+
chartMenuPanelWidth: "var(--ga-size-256)",
|
|
43
|
+
checkboxBorderRadius: "var(--ga-radius)",
|
|
44
|
+
checkboxBorderWidth: "var(--ga-size-border-width-sm)",
|
|
45
|
+
checkboxCheckedBackgroundColor: "var(--ga-color-primary)",
|
|
46
|
+
checkboxCheckedShapeColor: "var(--ga-color-white)",
|
|
47
|
+
checkboxIndeterminateShapeColor: "var(--ga-color-white)",
|
|
48
|
+
checkboxUncheckedBackgroundColor: "var(--ga-color-white)",
|
|
49
|
+
checkboxUncheckedBorderColor: "var(--ga-color-neutral-60)",
|
|
50
|
+
columnBorder: {
|
|
51
|
+
width: "var(--ga-size-border-width-sm)",
|
|
52
|
+
color: "transparent",
|
|
53
|
+
style: "solid"
|
|
54
|
+
},
|
|
55
|
+
columnDropCellBackgroundColor: "color-mix(in srgb, var(--ga-color-primary) 7%, transparent)",
|
|
56
|
+
columnDropCellBorder: {
|
|
57
|
+
width: "var(--ga-size-border-width-sm)",
|
|
58
|
+
color: "var(--ga-color-neutral-30)",
|
|
59
|
+
style: "solid"
|
|
60
|
+
},
|
|
61
|
+
columnDropCellDragHandleColor: "var(--ga-color-text-body)",
|
|
62
|
+
columnDropCellTextColor: "var(--ga-color-text-body)",
|
|
63
|
+
columnHoverColor: "color-mix(in srgb, var(--ga-color-primary) 8%, transparent)",
|
|
64
|
+
columnSelectIndentSize: "var(--ga-size-16)",
|
|
65
|
+
dataFontSize: "var(--ga-text-md-font-size)",
|
|
66
|
+
dialogBorder: {
|
|
67
|
+
width: "var(--ga-size-border-width-sm)",
|
|
68
|
+
color: "var(--ga-color-neutral-30)",
|
|
69
|
+
style: "solid"
|
|
70
|
+
},
|
|
71
|
+
dragAndDropImageBackgroundColor: "var(--ga-color-white)",
|
|
72
|
+
dragAndDropImageBorder: {
|
|
73
|
+
width: "var(--ga-size-border-width-sm)",
|
|
74
|
+
color: "var(--ga-color-neutral-30)",
|
|
75
|
+
style: "solid"
|
|
76
|
+
},
|
|
77
|
+
dragHandleColor: "var(--ga-color-neutral-60)",
|
|
78
|
+
filterToolPanelGroupIndent: "var(--ga-size-8)",
|
|
79
|
+
findActiveMatchBackgroundColor: "var(--ga-color-primary)",
|
|
80
|
+
findActiveMatchColor: "var(--ga-color-white)",
|
|
81
|
+
findMatchBackgroundColor: "var(--ga-color-orange-20)",
|
|
82
|
+
findMatchColor: "var(--ga-color-text-body)",
|
|
83
|
+
focusShadow: "none",
|
|
84
|
+
fontFamily: "var(--ga-font-family-primary)",
|
|
85
|
+
fontSize: "var(--ga-text-md-font-size)",
|
|
86
|
+
footerRowBorder: {
|
|
87
|
+
width: "var(--ga-size-border-width-sm)",
|
|
88
|
+
color: "var(--ga-color-neutral-30)",
|
|
89
|
+
style: "solid"
|
|
90
|
+
},
|
|
91
|
+
foregroundColor: "var(--ga-color-neutral-60)",
|
|
92
|
+
headerBackgroundColor: "var(--ga-color-neutral-10)",
|
|
93
|
+
headerCellHoverBackgroundColor: "var(--ga-color-neutral-20)",
|
|
94
|
+
headerColumnBorder: true,
|
|
95
|
+
headerColumnBorderHeight: 0,
|
|
96
|
+
headerColumnResizeHandleHeight: "var(--ga-size-16)",
|
|
97
|
+
headerColumnResizeHandleWidth: "var(--ga-size-border-width-md)",
|
|
98
|
+
headerFontFamily: "var(--ga-font-family-primary)",
|
|
99
|
+
headerFontSize: "var(--ga-text-md-font-size)",
|
|
100
|
+
headerFontWeight: "var(--ga-font-weight-semibold)",
|
|
101
|
+
headerHeight: "var(--ga-size-40)",
|
|
102
|
+
headerRowBorder: {
|
|
103
|
+
width: "var(--ga-size-border-width-sm)",
|
|
104
|
+
color: "var(--ga-color-neutral-30)",
|
|
105
|
+
style: "solid"
|
|
106
|
+
},
|
|
107
|
+
headerTextColor: "var(--ga-color-text-body)",
|
|
108
|
+
headerVerticalPaddingScale: 1,
|
|
109
|
+
iconButtonActiveBackgroundColor: "var(--ga-color-orange-30)",
|
|
110
|
+
iconButtonActiveColor: "var(--ga-color-primary)",
|
|
111
|
+
iconButtonActiveIndicatorColor: "var(--ga-color-primary)",
|
|
112
|
+
iconButtonBackgroundColor: "transparent",
|
|
113
|
+
iconButtonBackgroundSpread: "var(--ga-size-4)",
|
|
114
|
+
iconButtonBorderRadius: "var(--ga-radius)",
|
|
115
|
+
iconButtonColor: "var(--ga-color-primary)",
|
|
116
|
+
iconButtonHoverBackgroundColor: "var(--ga-color-orange-20)",
|
|
117
|
+
iconButtonHoverColor: "var(--ga-color-text-body)",
|
|
118
|
+
iconColor: "var(--ga-color-primary)",
|
|
119
|
+
iconSize: "var(--ga-size-16)",
|
|
120
|
+
inputBackgroundColor: "var(--ga-color-white)",
|
|
121
|
+
inputBorder: {
|
|
122
|
+
width: "var(--ga-size-border-width-sm)",
|
|
123
|
+
color: "var(--ga-color-neutral-60)",
|
|
124
|
+
style: "solid"
|
|
125
|
+
},
|
|
126
|
+
inputBorderRadius: "var(--ga-radius)",
|
|
127
|
+
inputDisabledBackgroundColor: "var(--ga-color-neutral-20)",
|
|
128
|
+
inputDisabledBorder: {
|
|
129
|
+
width: "var(--ga-size-border-width-sm)",
|
|
130
|
+
color: "var(--ga-color-neutral-30)",
|
|
131
|
+
style: "solid"
|
|
132
|
+
},
|
|
133
|
+
inputDisabledTextColor: "var(--ga-color-neutral-60)",
|
|
134
|
+
inputFocusBorder: false,
|
|
135
|
+
inputFocusShadow: "none",
|
|
136
|
+
inputHeight: "var(--ga-size-32)",
|
|
137
|
+
inputIconColor: "var(--ga-color-neutral-60)",
|
|
138
|
+
inputInvalidBorder: {
|
|
139
|
+
width: "var(--ga-size-border-width-md)",
|
|
140
|
+
color: "var(--ga-color-error)",
|
|
141
|
+
style: "solid"
|
|
142
|
+
},
|
|
143
|
+
inputPaddingStart: "var(--ga-size-spacing-03)",
|
|
144
|
+
inputPlaceholderTextColor: "var(--ga-color-neutral-60)",
|
|
145
|
+
inputTextColor: "var(--ga-color-text-body)",
|
|
146
|
+
invalidColor: "var(--ga-color-error)",
|
|
147
|
+
listItemHeight: "var(--ga-size-32)",
|
|
148
|
+
menuBackgroundColor: "var(--ga-color-white)",
|
|
149
|
+
menuBorder: {
|
|
150
|
+
width: "var(--ga-size-border-width-sm)",
|
|
151
|
+
color: "var(--ga-color-neutral-30)",
|
|
152
|
+
style: "solid"
|
|
153
|
+
},
|
|
154
|
+
menuShadow: "none",
|
|
155
|
+
oddRowBackgroundColor: "color-mix(in srgb, var(--ga-color-neutral-10) 75%, transparent)",
|
|
156
|
+
panelTitleBarBorder: {
|
|
157
|
+
width: "var(--ga-size-border-width-sm)",
|
|
158
|
+
color: "var(--ga-color-neutral-30)",
|
|
159
|
+
style: "solid"
|
|
160
|
+
},
|
|
161
|
+
panelTitleBarFontWeight: "var(--ga-font-weight-semibold)",
|
|
162
|
+
pinnedColumnBorder: {
|
|
163
|
+
width: "var(--ga-size-border-width-sm)",
|
|
164
|
+
color: "var(--ga-color-neutral-30)",
|
|
165
|
+
style: "solid"
|
|
166
|
+
},
|
|
167
|
+
pinnedRowBorder: {
|
|
168
|
+
width: "var(--ga-size-border-width-sm)",
|
|
169
|
+
color: "var(--ga-color-neutral-30)",
|
|
170
|
+
style: "solid"
|
|
171
|
+
},
|
|
172
|
+
popupShadow: "none",
|
|
173
|
+
rangeHeaderHighlightColor: "color-mix(in srgb, var(--ga-color-primary) 10%, transparent)",
|
|
174
|
+
rangeSelectionBackgroundColor: "color-mix(in srgb, var(--ga-color-primary) 10%, transparent)",
|
|
175
|
+
rangeSelectionBorderColor: "var(--ga-color-primary)",
|
|
176
|
+
rangeSelectionHighlightColor: "color-mix(in srgb, var(--ga-color-green-40) 40%, transparent)",
|
|
177
|
+
rowBorder: {
|
|
178
|
+
width: "var(--ga-size-border-width-sm)",
|
|
179
|
+
color: "var(--ga-color-neutral-30)",
|
|
180
|
+
style: "solid"
|
|
181
|
+
},
|
|
182
|
+
rowGroupIndentSize: "var(--ga-size-28)",
|
|
183
|
+
rowHeight: "var(--ga-size-40)",
|
|
184
|
+
rowHoverColor: "var(--ga-color-orange-20)",
|
|
185
|
+
rowLoadingSkeletonEffectColor: "var(--ga-color-neutral-20)",
|
|
186
|
+
rowVerticalPaddingScale: 16,
|
|
187
|
+
selectCellBorder: {
|
|
188
|
+
width: "var(--ga-size-border-width-sm)",
|
|
189
|
+
color: "var(--ga-color-primary)",
|
|
190
|
+
style: "solid"
|
|
191
|
+
},
|
|
192
|
+
selectedRowBackgroundColor: "var(--ga-color-green-10)",
|
|
193
|
+
setFilterIndentSize: "var(--ga-size-16)",
|
|
194
|
+
sideBarBackgroundColor: "var(--ga-color-neutral-10)",
|
|
195
|
+
sideBarPanelWidth: "var(--ga-size-224)",
|
|
196
|
+
sideButtonBarTopPadding: 0,
|
|
197
|
+
sideButtonHoverBackgroundColor: "var(--ga-color-neutral-20)",
|
|
198
|
+
sideButtonSelectedBackgroundColor: "var(--ga-color-white)",
|
|
199
|
+
sideButtonSelectedUnderlineColor: "var(--ga-color-primary)",
|
|
200
|
+
sidePanelBorder: {
|
|
201
|
+
width: "var(--ga-size-border-width-sm)",
|
|
202
|
+
color: "var(--ga-color-neutral-30)",
|
|
203
|
+
style: "solid"
|
|
204
|
+
},
|
|
205
|
+
spacing: 8,
|
|
206
|
+
statusBarLabelColor: "var(--ga-color-text-body-secondary)",
|
|
207
|
+
statusBarLabelFontWeight: "var(--ga-font-weight-medium)",
|
|
208
|
+
statusBarValueColor: "var(--ga-color-text-body)",
|
|
209
|
+
statusBarValueFontWeight: "var(--ga-font-weight-semibold)",
|
|
210
|
+
subtleTextColor: "var(--ga-color-text-body-secondary)",
|
|
211
|
+
tabBackgroundColor: "var(--ga-color-neutral-20)",
|
|
212
|
+
tabBarBackgroundColor: "var(--ga-color-neutral-10)",
|
|
213
|
+
tabBarBorder: {
|
|
214
|
+
width: "var(--ga-size-border-width-sm)",
|
|
215
|
+
color: "var(--ga-color-neutral-30)",
|
|
216
|
+
style: "solid"
|
|
217
|
+
},
|
|
218
|
+
tabBarHorizontalPadding: "var(--ga-size-spacing-03)",
|
|
219
|
+
tabBarTopPadding: "var(--ga-size-spacing-03)",
|
|
220
|
+
tabBottomPadding: "var(--ga-size-spacing-03)",
|
|
221
|
+
tabHorizontalPadding: "var(--ga-size-spacing-04)",
|
|
222
|
+
tabHoverBackgroundColor: "var(--ga-color-orange-20)",
|
|
223
|
+
tabSelectedBorderWidth: "var(--ga-size-border-width-md)",
|
|
224
|
+
tabSelectedTextColor: "var(--ga-color-primary)",
|
|
225
|
+
tabSelectedUnderlineColor: "var(--ga-color-primary)",
|
|
226
|
+
tabSelectedUnderlineTransitionDuration: "var(--ga-duration-0)",
|
|
227
|
+
tabSelectedUnderlineWidth: "var(--ga-size-border-width-sm)",
|
|
228
|
+
tabSpacing: "var(--ga-size-spacing-02)",
|
|
229
|
+
tabTopPadding: "var(--ga-size-spacing-03)",
|
|
230
|
+
toggleButtonHeight: "var(--ga-size-20)",
|
|
231
|
+
toggleButtonOffBackgroundColor: "var(--ga-color-neutral-30)",
|
|
232
|
+
toggleButtonOnBackgroundColor: "var(--ga-color-primary)",
|
|
233
|
+
toggleButtonSwitchBackgroundColor: "var(--ga-color-white)",
|
|
234
|
+
toggleButtonSwitchInset: "var(--ga-size-2)",
|
|
235
|
+
toggleButtonWidth: "var(--ga-size-36)",
|
|
236
|
+
toolPanelSeparatorBorder: {
|
|
237
|
+
width: "var(--ga-size-border-width-sm)",
|
|
238
|
+
color: "var(--ga-color-neutral-30)",
|
|
239
|
+
style: "solid"
|
|
240
|
+
},
|
|
241
|
+
tooltipBackgroundColor: "var(--ga-color-white)",
|
|
242
|
+
tooltipBorder: {
|
|
243
|
+
width: "var(--ga-size-border-width-sm)",
|
|
244
|
+
color: "var(--ga-color-neutral-30)",
|
|
245
|
+
style: "solid"
|
|
246
|
+
},
|
|
247
|
+
valueChangeDeltaDownColor: "var(--ga-color-error)",
|
|
248
|
+
valueChangeDeltaUpColor: "var(--ga-color-success)",
|
|
249
|
+
valueChangeValueHighlightBackgroundColor: "var(--ga-color-orange-20)",
|
|
250
|
+
widgetContainerHorizontalPadding: "var(--ga-size-spacing-04)",
|
|
251
|
+
widgetContainerVerticalPadding: "var(--ga-size-spacing-03)",
|
|
252
|
+
widgetHorizontalSpacing: "var(--ga-size-spacing-03)",
|
|
253
|
+
widgetVerticalSpacing: "var(--ga-size-spacing-03)",
|
|
254
|
+
wrapperBorder: {
|
|
255
|
+
width: "var(--ga-size-border-width-sm)",
|
|
256
|
+
color: "var(--ga-color-neutral-30)",
|
|
257
|
+
style: "solid"
|
|
258
|
+
},
|
|
259
|
+
wrapperBorderRadius: "var(--ga-size-8)"
|
|
260
|
+
});
|
|
261
|
+
//#endregion
|
|
262
|
+
export { gaiaTheme };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vsn-ux/gaia-styles",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.6",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"scripts": {
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
"build-tokens": "tz build",
|
|
10
10
|
"build-storybook": "storybook build",
|
|
11
11
|
"build-lib": "node ./build-component-styles.js --clean",
|
|
12
|
+
"build-integrations": "tsdown",
|
|
12
13
|
"build-docs": "tsx --tsconfig tsconfig.app.json build-docs.js",
|
|
13
14
|
"commitlint": "commitlint --edit",
|
|
14
15
|
"prepare": "husky"
|
|
@@ -20,6 +21,10 @@
|
|
|
20
21
|
"./tailwindcss/components.css": "./src/styles/components.css",
|
|
21
22
|
"./design-tokens.json": "./src/design-tokens/dtcg-tokens.json",
|
|
22
23
|
"./font/*": "./src/font/*",
|
|
24
|
+
"./integrations/ag-grid": {
|
|
25
|
+
"types": "./dist/integrations/ag-grid.d.mts",
|
|
26
|
+
"default": "./dist/integrations/ag-grid.mjs"
|
|
27
|
+
},
|
|
23
28
|
"./*": "./dist/*"
|
|
24
29
|
},
|
|
25
30
|
"devDependencies": {
|
|
@@ -37,6 +42,7 @@
|
|
|
37
42
|
"@types/react": "^19.2.14",
|
|
38
43
|
"@types/react-dom": "^19.2.3",
|
|
39
44
|
"@vitejs/plugin-react": "^6.0.1",
|
|
45
|
+
"ag-grid-community": "^35.2.1",
|
|
40
46
|
"chokidar": "^5.0.0",
|
|
41
47
|
"chromatic": "^15.3.0",
|
|
42
48
|
"glob": "^13.0.6",
|
|
@@ -52,6 +58,7 @@
|
|
|
52
58
|
"storybook": "10.3.0",
|
|
53
59
|
"storybook-addon-pseudo-states": "10.3.0",
|
|
54
60
|
"tailwindcss": "^4.2.2",
|
|
61
|
+
"tsdown": "^0.21.9",
|
|
55
62
|
"tsx": "^4.21.0",
|
|
56
63
|
"typescript": "~5.9.3",
|
|
57
64
|
"typescript-eslint": "^8.57.1",
|
|
@@ -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';
|