@vsn-ux/gaia-styles 0.6.5 → 0.6.7
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 +472 -391
- package/dist/all-no-reset-10pt.css +472 -391
- package/dist/all-no-reset.css +472 -391
- package/dist/all.css +472 -391
- package/dist/components/avatar.css +6 -6
- package/dist/components/badge.css +6 -6
- package/dist/components/breadcrumbs.css +13 -13
- package/dist/components/button.css +7 -7
- package/dist/components/calendar.css +27 -27
- package/dist/components/card.css +1 -1
- package/dist/components/checkbox.css +10 -10
- package/dist/components/container.css +4 -4
- package/dist/components/datepicker.css +2 -2
- package/dist/components/dropdown.css +18 -18
- package/dist/components/form-field.css +10 -10
- package/dist/components/input.css +9 -9
- package/dist/components/link.css +5 -5
- package/dist/components/menu.css +14 -14
- package/dist/components/modal.css +27 -27
- package/dist/components/notification.css +19 -19
- package/dist/components/page-header.css +82 -0
- package/dist/components/progress-bar.css +4 -4
- package/dist/components/progress-indicator.css +21 -21
- package/dist/components/quick-filter-button.css +5 -5
- package/dist/components/radio.css +13 -13
- package/dist/components/segmented-control.css +8 -8
- package/dist/components/select.css +31 -31
- package/dist/components/side-navigation.css +76 -76
- package/dist/components/switch.css +14 -14
- package/dist/components/tabs.css +14 -14
- package/dist/components/tag.css +7 -7
- package/dist/components/text-area.css +5 -5
- package/dist/components/tooltip.css +15 -15
- package/dist/components.css +472 -391
- package/dist/docs/PageHeader.md +355 -0
- package/package.json +1 -1
- package/src/styles/all-10pt.css +0 -5
- package/src/styles/all-no-reset-10pt.css +0 -5
- package/src/styles/components/page-header.css +62 -0
- package/src/styles/components.css +1 -0
- package/src/styles/theme.css +1 -1
|
@@ -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
package/src/styles/all-10pt.css
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';
|
package/src/styles/theme.css
CHANGED
|
@@ -135,7 +135,7 @@
|
|
|
135
135
|
--shadow-east: var(--ga-shadow-east);
|
|
136
136
|
--shadow-west: var(--ga-shadow-west);
|
|
137
137
|
|
|
138
|
-
--spacing: 0.25rem;
|
|
138
|
+
--spacing: calc(0.25rem * var(--ga-base-scaling-factor, 1));
|
|
139
139
|
|
|
140
140
|
--breakpoint-xs: 20rem; /* 320px */
|
|
141
141
|
--breakpoint-s: 48rem; /* 768px */
|