Initial commit: HMDesignSystem baseline
This commit is contained in:
shkim4 committed
commit
b6a0a61103
486 files changed
+68432
No files matched your search
@@ -0,0 +1,149 @@
|
||||
/* Dashboard Mode owns its internal navigation and scroll frame. No GNB/LNB CSS variable or responsive dependency. */
|
||||
:root, [data-hm-theme] {
|
||||
--hm-dashboard-height: 100dvh;
|
||||
--hm-dashboard-background: var(--hm-sem-palette-green-light-2);
|
||||
--hm-dashboard-content-background: var(--hm-sem-bg-content);
|
||||
--hm-dashboard-content-top-radius: 12px;
|
||||
--hm-dashboard-content-side-radius: 18px;
|
||||
--hm-dashboard-sidebar-width: 272px;
|
||||
--hm-dashboard-min-width: 960px;
|
||||
--hm-dashboard-header-background: linear-gradient(180deg, var(--hm-sem-action-surface-stop-0) 0%, var(--hm-sem-action-surface-stop-30) 30%, var(--hm-sem-action-surface-stop-65) 65%, var(--hm-sem-action-surface-stop-100) 100%);
|
||||
--hm-dashboard-nav-text: var(--hm-sem-on-action-primary);
|
||||
--hm-dashboard-nav-text-secondary: var(--hm-sem-palette-green-tint);
|
||||
--hm-dashboard-nav-text-stroke-width: 1px;
|
||||
--hm-dashboard-nav-text-stroke-color: color-mix(in srgb, var(--hm-sem-palette-black) 30%, transparent);
|
||||
--hm-dashboard-nav-focus-outline: 2px solid var(--hm-sem-on-action-primary);
|
||||
--hm-dashboard-padding: 34px;
|
||||
--hm-dashboard-gap: 24px;
|
||||
--hm-dashboard-content-shadow-top: 0 -8px 18px color-mix(in srgb, var(--hm-sem-palette-green-dark-2) 18%, transparent);
|
||||
--hm-dashboard-content-shadow-side: -8px 0 18px color-mix(in srgb, var(--hm-sem-palette-green-dark-2) 18%, transparent);
|
||||
}
|
||||
|
||||
[data-slot="dashboard-scroll"] {
|
||||
box-sizing: border-box;
|
||||
height: var(--hm-dashboard-height);
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
[data-slot="dashboard-layout"] {
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
/* 4 × 200px KPI cards + 3 × 24px gaps + 2 × 34px padding + 20px scrollbar allowance.
|
||||
Also fits the measured 549px compact status bar, its wings and the 125px brand without overlap. */
|
||||
min-width: var(--hm-dashboard-min-width, 960px);
|
||||
}
|
||||
[data-slot="dashboard-layout"][data-sidebar] {
|
||||
min-width: calc(var(--hm-dashboard-min-width) + var(--hm-dashboard-sidebar-width));
|
||||
}
|
||||
[data-slot="dashboard-body"] {
|
||||
flex: 1 1 0;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
background: var(--hm-dashboard-background);
|
||||
}
|
||||
[data-slot="dashboard-header"] {
|
||||
display: flex;
|
||||
flex: none;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
height: 48px;
|
||||
padding: 0 20px;
|
||||
background: var(--hm-dashboard-header-background);
|
||||
color: var(--hm-dashboard-nav-text);
|
||||
}
|
||||
[data-slot="dashboard-body"] > [data-slot="dashboard-sidebar"] {
|
||||
flex: none;
|
||||
width: var(--hm-dashboard-sidebar-width);
|
||||
min-height: 0;
|
||||
padding: 28px 20px 22px;
|
||||
gap: 22px;
|
||||
background: linear-gradient(90deg, var(--hm-sem-action-primary) 0%, var(--hm-sem-palette-green-light-1) 30%, var(--hm-sem-palette-green-light-2) 50%, var(--hm-sem-palette-green-light-3) 90%, var(--hm-sem-palette-green-light-2) 100%);
|
||||
color: var(--hm-dashboard-nav-text);
|
||||
}
|
||||
[data-slot="dashboard-sidebar"] > nav {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
[data-slot="dashboard-sidebar"] [data-slot="button"] {
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
min-height: 44px;
|
||||
height: auto;
|
||||
white-space: normal;
|
||||
color: var(--hm-dashboard-nav-text);
|
||||
}
|
||||
[data-slot="dashboard-sidebar"] [data-slot="button"]:hover {
|
||||
background: color-mix(in srgb, var(--hm-sem-palette-black) 10%, transparent);
|
||||
}
|
||||
[data-slot="dashboard-sidebar"] [data-slot="button"][aria-expanded="true"] {
|
||||
background: color-mix(in srgb, var(--hm-sem-palette-black) 20%, transparent);
|
||||
}
|
||||
[data-slot="dashboard-sidebar"] [data-slot="collapsible"][data-current] > [data-slot="button"] {
|
||||
color: var(--hm-sem-palette-yellow-accent);
|
||||
}
|
||||
[data-slot="dashboard-sidebar"] [data-slot="button"][aria-expanded="true"] > svg {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
[data-slot="dashboard-sidebar"] [aria-current="page"],
|
||||
[data-slot="dashboard-sidebar"] [aria-current="page"]:hover {
|
||||
background: var(--hm-dashboard-content-background);
|
||||
color: var(--hm-sem-action-primary);
|
||||
}
|
||||
[data-slot="dashboard-sidebar"] [data-slot="button"]:focus-visible {
|
||||
outline: var(--hm-dashboard-nav-focus-outline);
|
||||
}
|
||||
[data-slot="dashboard-sidebar"] [aria-current="page"]:focus-visible {
|
||||
outline-color: var(--hm-sem-action-primary);
|
||||
}
|
||||
|
||||
/* Content surface and vertical scroll container, positioned after Dashboard's internal navigation. */
|
||||
[data-slot="dashboard-main"] {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
padding: var(--hm-dashboard-padding);
|
||||
overflow-x: auto;
|
||||
overflow-y: auto;
|
||||
/* Let horizontal wheel/touch gestures chain to the outer Dashboard frame. */
|
||||
overscroll-behavior-y: contain;
|
||||
background: var(--hm-dashboard-content-background);
|
||||
}
|
||||
/* Dashboard header and sidebar use Dashboard-owned radii. */
|
||||
[data-slot="dashboard-layout"][data-header] [data-slot="dashboard-main"] {
|
||||
border-radius: var(--hm-dashboard-content-top-radius) var(--hm-dashboard-content-top-radius) 0 0;
|
||||
box-shadow: var(--hm-dashboard-content-shadow-top);
|
||||
}
|
||||
|
||||
[data-slot="dashboard-content"] {
|
||||
gap: var(--hm-dashboard-gap);
|
||||
min-width: 0;
|
||||
}
|
||||
[data-slot="dashboard-content"] > * {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Preserve the desktop filter row inside the minimum-width frame, independent of the viewport's mobile Filter Bar rules. */
|
||||
[data-slot="dashboard-layout"] [data-slot="filter-bar"] {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
[data-slot="dashboard-layout"] [data-slot="filter-bar-search"] {
|
||||
flex: 0 0 var(--hm-filter-bar-search-width);
|
||||
}
|
||||
[data-slot="dashboard-layout"] [data-slot="filter-bar"] > :is([data-slot="select-trigger"], [data-slot="combobox-trigger"], [data-slot="date-picker-trigger"], [data-slot="input"]) {
|
||||
flex: 0 0 var(--hm-filter-bar-control-width);
|
||||
width: var(--hm-filter-bar-control-width);
|
||||
}
|
||||
[data-slot="dashboard-layout"] [data-slot="filter-bar-actions"] {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
/* The sidebar remains inside the Dashboard minimum-width frame at every viewport width. */
|
||||
[data-slot="dashboard-layout"][data-sidebar] [data-slot="dashboard-main"] {
|
||||
border-radius: var(--hm-dashboard-content-side-radius) 0 0 var(--hm-dashboard-content-side-radius);
|
||||
box-shadow: var(--hm-dashboard-content-shadow-side);
|
||||
}
|
||||
Reference in new issue
Block a user