shkim4
fc0a3e7725
- Manager LNB: 246px width, 16px brand title, 14px/700 menu and section titles, depth1 48px / depth2+ 42px rows, 24px section gap - Foundation: rename Color to HM Color (Story ID foundation-color--all kept), remove Company Colors subtitle and the page-title bottom border - Patterns/Layout/LNB: Storybook-only overrides in lnb.stories.css (240px column, 212px min width, 14px menu, 48/42px rows, profile text, group dividers); representative board dividers per section - Sync story inventory and docs (brand-color-steps, lnb); shared package defaults and tokens are unchanged
114 lines
6.1 KiB
CSS
114 lines
6.1 KiB
CSS
/* Storybook presentation only: Patterns/Layout/LNB Stories. Scoped by the decorator wrapper in lnb.stories.tsx, so the shared
|
|
@hm-design/ui LNB Pattern, its tokens and every other Story keep their values.
|
|
- min-width 212px: a floor, not a fixed width. The column follows --hm-lnb-width (240px from 1024px, see below) and may be wider.
|
|
- menu font 14px: --hm-lnb-item-font-size is redefined for this subtree; weight (700) and line height (28px) stay.
|
|
- row height: depth1 48px, depth2 and deeper 42px. Heights come from min-height + vertical padding (not a fixed height), so a
|
|
label that wraps grows the row instead of being clipped. Current and hover only change color/background, not the height. */
|
|
.hm-lnb-story {
|
|
display: contents;
|
|
--hm-lnb-item-font-size: 14px;
|
|
/* Existing variable: min-height of every item and group trigger (used by nothing else). */
|
|
--hm-lnb-item-min-height: 48px;
|
|
/* Existing variable: bottom padding of [data-slot="lnb-brand"] (22px by default; top 0 and the 30px sides are unchanged). */
|
|
--hm-lnb-brand-padding-bottom: 8px;
|
|
}
|
|
.hm-lnb-story [data-slot="lnb"] {
|
|
min-width: 212px;
|
|
}
|
|
/* PC column width 240px through the existing --hm-lnb-width (the column, the Story grid track and the menu row offset all read it).
|
|
Only from 1024px: the package sets --hm-lnb-width to 0px below that and collapses the column, which must keep working. */
|
|
@media (min-width: 1024px) {
|
|
.hm-lnb-story {
|
|
--hm-lnb-width: 240px;
|
|
}
|
|
}
|
|
|
|
/* Profile text (PC column): name (strong) 14px, description (p) 12px with no top margin, both 700. The package's existing 1px text
|
|
stroke on strong/p stays as is; the color and the 1.5 line-height ratio are unchanged (21px + 18px lines in the 48px profile).
|
|
The sizes use the existing profile variables; the container gets the name size. */
|
|
.hm-lnb-story {
|
|
--hm-lnb-profile-name-size: 14px;
|
|
--hm-lnb-profile-description-size: 12px;
|
|
}
|
|
.hm-lnb-story [data-slot="lnb"] [data-slot="lnb-profile-text"] {
|
|
font-size: 14px;
|
|
}
|
|
.hm-lnb-story [data-slot="lnb"] [data-slot="lnb-profile-text"] :is(strong, p) {
|
|
font-weight: 700;
|
|
}
|
|
.hm-lnb-story [data-slot="lnb"] [data-slot="lnb-profile-text"] p {
|
|
margin-top: 0;
|
|
}
|
|
/* Divider lines, same design as the Storybook Manager section divider (manager.css, .sidebar-subheading ::before): a 2px double
|
|
line (black 30% over white 40%) faded at both ends by a mask. Shared by the profile divider and the group divider below. */
|
|
.hm-lnb-story [data-slot="lnb"] > [data-slot="lnb-profile"]::before,
|
|
.hm-lnb-story .hm-lnb-story-group-divider {
|
|
height: 2px;
|
|
background: linear-gradient(var(--hm-lnb-text-stroke-color) 0 50%, color-mix(in srgb, var(--hm-sem-palette-white) 40%, transparent) 50% 100%);
|
|
mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
|
|
pointer-events: none;
|
|
}
|
|
/* Above the PC profile, 12px above the block. Like the Manager, it starts after the left inset (--hm-lnb-inset-start, 20px: where
|
|
the menu rows start) and stops 20px short of the right edge. The profile button is only as wide as its content, so the line is
|
|
sized from the column width (--hm-lnb-width) and offset back by the button's left margin. It sits in the 22px gap between the
|
|
menu and the profile, never over the avatar or text. The mobile Sheet profile is not under [data-slot="lnb"]. */
|
|
.hm-lnb-story [data-slot="lnb"] > [data-slot="lnb-profile"] {
|
|
position: relative;
|
|
}
|
|
.hm-lnb-story [data-slot="lnb"] > [data-slot="lnb-profile"]::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -12px;
|
|
left: calc(var(--hm-lnb-inset-start) + 8px - var(--hm-lnb-profile-padding-x));
|
|
width: calc(var(--hm-lnb-width) - var(--hm-lnb-inset-start) - var(--hm-lnb-inset-end));
|
|
}
|
|
/* Between large menu groups (a role="separator" element, direct child of LNBNav). The package already puts a direct child at the
|
|
menu rows' x start (margin-left), so only the other margins are set: the line ends 20px short of the column's right edge (the
|
|
nav is 1px wider than the column), and 12px + 2px + 10px = 24px in total, the Manager's section gap. */
|
|
.hm-lnb-story .hm-lnb-story-group-divider {
|
|
flex: none; /* keep the 2px in a height-limited (scrolling) menu, where an empty item would otherwise shrink to 0 */
|
|
margin-top: 12px;
|
|
margin-right: calc(var(--hm-lnb-inset-end) + 1px);
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/* Profile in the mobile Sheet (<=1023px): 14px, 700, no text stroke. The Sheet is portaled to body, outside .hm-lnb-story, so the
|
|
Story marks its LNBProfile with a class instead. The doubled attribute raises specificity above the package's
|
|
[data-slot="lnb-profile"] strong/p rules. Menu links and the mobile header already have no text stroke. */
|
|
.hm-lnb-story-mobile-profile[data-slot="lnb-profile"] [data-slot="lnb-profile-text"],
|
|
.hm-lnb-story-mobile-profile[data-slot="lnb-profile"] strong {
|
|
font-size: 14px;
|
|
}
|
|
/* Description: 12px with no top margin, like the PC profile (the line height is unchanged, so the Sheet profile is 4px lower
|
|
without the old 4px margin: 8 + 20 + 20 + 8 = 56px). */
|
|
.hm-lnb-story-mobile-profile[data-slot="lnb-profile"] p {
|
|
font-size: 12px;
|
|
margin-top: 0;
|
|
}
|
|
.hm-lnb-story-mobile-profile[data-slot="lnb-profile"] :is(strong, p) {
|
|
font-weight: 700;
|
|
-webkit-text-stroke: 0;
|
|
paint-order: normal;
|
|
}
|
|
|
|
/* depth1: nav items and top-level group triggers. The package hard-codes 14px vertical padding (28px line + 28px = 56px). */
|
|
.hm-lnb-story [data-slot="lnb-item"],
|
|
.hm-lnb-story [data-slot="lnb-group-trigger"] {
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
}
|
|
/* depth2: links directly inside a group and nested group triggers (28px line + 14px = 42px). */
|
|
.hm-lnb-story [data-slot="lnb-group-content"] > [data-slot="lnb-item"],
|
|
.hm-lnb-story [data-slot="lnb-group-content"] [data-slot="lnb-group-trigger"] {
|
|
min-height: 42px;
|
|
padding-top: 7px;
|
|
padding-bottom: 7px;
|
|
}
|
|
/* depth3: links in a nested group (24px line + 18px = 42px). --hm-lnb-third-min-height is also the Profile's height, so it is
|
|
overridden on the row's link instead of through the variable. */
|
|
.hm-lnb-story [data-slot="lnb-group-content"] [data-slot="lnb-third-row"] > [data-slot="lnb-item"] {
|
|
min-height: 42px;
|
|
padding-top: 9px;
|
|
padding-bottom: 9px;
|
|
}
|