53 lines
1.9 KiB
CSS
53 lines
1.9 KiB
CSS
/* Page Header pattern (layout visual reference: ui-viz page heading, dashboard-composition.md §8): space-between row, aligned to the
|
|
bottom, 24px gap, 20px to the first card. The Breadcrumb is the HM Breadcrumb (its own 14px look, ui-viz had static 12px text).
|
|
Spacing values are pattern-local. */
|
|
:root, [data-hm-theme] {
|
|
--hm-page-header-gap: 24px;
|
|
--hm-page-header-margin-bottom: 20px;
|
|
--hm-page-header-breadcrumb-gap: 10px;
|
|
--hm-page-header-title-font-size: 28px;
|
|
--hm-page-header-title-line-height: 36px;
|
|
--hm-page-header-title-font-weight: 700;
|
|
--hm-page-header-title-color: var(--hm-sem-fg-primary);
|
|
--hm-page-header-description-gap: 8px;
|
|
--hm-page-header-description-font-size: 14px;
|
|
--hm-page-header-description-line-height: 20px;
|
|
--hm-page-header-description-color: var(--hm-sem-fg-secondary);
|
|
--hm-page-header-actions-gap: 8px;
|
|
}
|
|
|
|
[data-slot="page-header"] {
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
gap: var(--hm-page-header-gap);
|
|
min-width: 0;
|
|
margin-bottom: var(--hm-page-header-margin-bottom);
|
|
}
|
|
[data-slot="page-header-content"] {
|
|
flex: 1 1 320px;
|
|
min-width: 0;
|
|
}
|
|
[data-slot="page-header-content"] > [data-slot="breadcrumb"] {
|
|
margin-bottom: var(--hm-page-header-breadcrumb-gap);
|
|
}
|
|
[data-slot="page-header-title"] {
|
|
margin: 0;
|
|
color: var(--hm-page-header-title-color);
|
|
font-size: var(--hm-page-header-title-font-size);
|
|
line-height: var(--hm-page-header-title-line-height);
|
|
font-weight: var(--hm-page-header-title-font-weight);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
[data-slot="page-header-description"] {
|
|
margin: var(--hm-page-header-description-gap) 0 0;
|
|
color: var(--hm-page-header-description-color);
|
|
font-size: var(--hm-page-header-description-font-size);
|
|
line-height: var(--hm-page-header-description-line-height);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
[data-slot="page-header-actions"] {
|
|
gap: var(--hm-page-header-actions-gap);
|
|
margin-left: auto;
|
|
}
|