mirror of
https://github.com/primer/css.git
synced 2024-12-23 22:24:11 +03:00
6b4089d8b3
* storybook for layout alpha * the beginning of layout beta * simplify spacing structure and other things this is a reminder that all the abstraction can happen in the viewComponent; there's no need to flood the css with constricted behaviors * add rowGap & dividers, clean spacing props * content-width support, sticky pane * cleanup props * add preset property * !default * component name & settings example * typo, cleaner header & footer template * fix preset options * mobile-friendly responsive behavior * ongoing flowVertical breakpoint behavior * finish panePosition + responsive pos & dividers * panePosition fix * add splitAsPage, finish responsive divider * Layout beta ongoing updates (#1779) - simplify component with better names - rename it to `PageLayout` - stylelint cleanup - finalize responsive variants - finalize variant-specific region dividers * add minimum 320px viewport * fix layout alpha, add layout patterns * cleanup bg colors, stylint pass * enable debug bg colors * colorful regions by default for dubugging * "Needless disable for primer/no-undefined-vars" * Stylelint auto-fixes * line breaks a EOF * introduce page layout behavior as a sb helper * children props in specialized components * cleanup * typo * discussions responsive temporary example * layout alpha descriptions * pageLayout prop descriptions * cleanup * fix conflict * copy * responsiveVariant storybook description * 0 padding on fullscreen storybook layout * has__divider for boolean props * cleanup, copy * cleanup * cleanup * cleanup chained selections/descendants * Stylelint auto-fixes * inherit values for responsive divider props * consolidate modifier names for responsive props Changelog: ### CSS classes - `PageLayout--variant-stackRegions` → `PageLayout--responsive-stackRegions` - `PageLayout--variant-separateRegions` → `PageLayout--responsive-separateRegions` - `PageLayout--variant-stackRegions-panePos-*` →`PageLayout--responsive-panePos-*` - `PageLayout--variant-separateRegions-primary-*` →`PageLayout--responsive-primary-*` - `PageLayout-region--hasDivider-*` → `PageLayout-region--dividerNarrow-*` ### Prop names - `responsivePrimaryRegion` → `primaryRegion` - `paneResponsivePosition` → `panePositionNarrow` - `paneResponsiveDivider` → `paneDividerNarrow` - `headerResponsiveDivider`→ `headerDividerNarrow` - `footerResponsiveDivider`→ `footerDividerNarrow` ### Args - `*DividerNarrow` props have new `inherit` value by default * Create lemon-games-swim.md * Update lemon-games-swim.md * cleanup, header+footer dividers as local modifiers * hasFooterDivider instead of footerDivider * fix primaryRegion selector Co-authored-by: Actions Auto Build <actions@github.com> Co-authored-by: Katie Langerman <langermank@github.com>
34 lines
717 B
HTML
34 lines
717 B
HTML
<style>
|
|
.story-wrap {
|
|
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans,
|
|
Helvetica Neue, sans-serif;
|
|
color: var(--color-fg-default);
|
|
background-color: var(--color-canvas-default);
|
|
height: 100vh;
|
|
}
|
|
|
|
.theme-wrap {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
|
|
height: 100vh;
|
|
}
|
|
|
|
.theme-wrap .story-wrap {
|
|
padding: 1rem;
|
|
height: unset;
|
|
}
|
|
|
|
.sb-main-padded .theme-wrap {
|
|
margin: -1rem;
|
|
}
|
|
|
|
.sb-main-fullscreen .theme-wrap .story-wrap {
|
|
padding: 0;
|
|
}
|
|
|
|
.sb-main-padded div:not(.theme-wrap) > [data-dark-theme] {
|
|
margin: -1rem;
|
|
padding: 1rem;
|
|
}
|
|
</style>
|