// Layout component
.Layout {
display: grid; --Layout-sidebar-width: #{map-get($sidebar-width, "sm")}; --Layout-gutter: 16px; @media (max-width: calc(#{$width-sm} - 1px)) { @include flow-as-row; } &.Layout--flowRow-until-md { @media (max-width: calc(#{$width-md} - 1px)) { @include flow-as-row; } } &.Layout--flowRow-until-lg { @media (max-width: calc(#{$width-lg} - 1px)) { @include flow-as-row; } } // Flow as column grid-auto-flow: column; grid-template-columns: auto 0 1fr; // sidebar column, separator, main column // stylelint-disable-next-line primer/no-undefined-vars grid-gap: var(--Layout-gutter); .Layout-sidebar { grid-column: 1; } .Layout-divider { display: none; } .Layout-main { grid-column: 2 / span 2; } // Gutter spacing @include breakpoint(lg) { --Layout-gutter: 24px; } &.Layout--gutter-none { --Layout-gutter: 0; } &.Layout--gutter-condensed { --Layout-gutter: 16px; } &.Layout--gutter-spacious { @include breakpoint(lg) { --Layout-gutter: 32px; } @include breakpoint(xl) { --Layout-gutter: 40px; } } // Sidebar width @each $breakpoint in map-keys($sidebar-width) { @include breakpoint($breakpoint) { --Layout-sidebar-width: #{map-get($sidebar-width, $breakpoint)}; } } &.Layout--sidebar-narrow { @each $breakpoint in map-keys($sidebar-narrow-width) { @include breakpoint($breakpoint) { --Layout-sidebar-width: #{map-get($sidebar-narrow-width, $breakpoint)}; } } } &.Layout--sidebar-wide { @each $breakpoint in map-keys($sidebar-wide-width) { @include breakpoint($breakpoint) { --Layout-sidebar-width: #{map-get($sidebar-wide-width, $breakpoint)}; } } } // Sidebar position &.Layout--sidebarPosition-start { .Layout-sidebar { grid-column: 1; } .Layout-main { grid-column: 2 / span 2; } } &.Layout--sidebarPosition-end { grid-template-columns: 1fr 0 auto; .Layout-main { grid-column: 1; } .Layout-sidebar { grid-column: 2 / span 2; } } // Sidebar divider &.Layout--divided { .Layout-divider { display: block; grid-column: 2; width: 1px; // stylelint-disable-next-line primer/spacing margin-right: -1px; // stylelint-disable-next-line primer/colors background: var(--color-border-primary); } .Layout-main { grid-column: 3 / span 1; } &.Layout--sidebarPosition-end { .Layout-sidebar { grid-column: 3 / span 1; } .Layout-main { grid-column: 1; } } }
}
.Layout-divider {
display: none; width: 1px;
}
.Layout-sidebar {
// stylelint-disable-next-line primer/no-undefined-vars width: var(--Layout-sidebar-width);
}
.Layout-main {
min-width: 0; // Centered main column // FIXME: right-aligned sidebar .Layout-main-centered-md, .Layout-main-centered-lg, .Layout-main-centered-xl { margin-right: auto; margin-left: auto; > .container-md, > .container-lg, > .container-xl { margin-left: 0; } } .Layout-main-centered-md { // stylelint-disable-next-line primer/no-undefined-vars max-width: calc(#{$container-md} + var(--Layout-sidebar-width) + var(--Layout-gutter)); } .Layout-main-centered-lg { // stylelint-disable-next-line primer/no-undefined-vars max-width: calc(#{$container-lg} + var(--Layout-sidebar-width) + var(--Layout-gutter)); } .Layout-main-centered-xl { // stylelint-disable-next-line primer/no-undefined-vars max-width: calc(#{$container-xl} + var(--Layout-sidebar-width) + var(--Layout-gutter)); }
}