@primer/css
Version:
The CSS implementation of GitHub's Primer Design System
3 lines (2 loc) • 10.5 kB
CSS
.container-sm{max-width:544px;margin-right:auto;margin-left:auto}.container-md{max-width:768px;margin-right:auto;margin-left:auto}.container-lg{max-width:1012px;margin-right:auto;margin-left:auto}.container-xl{max-width:1280px;margin-right:auto;margin-left:auto}.col-1{width:8.33333%}.col-2{width:16.66667%}.col-3{width:25%}.col-4{width:33.33333%}.col-5{width:41.66667%}.col-6{width:50%}.col-7{width:58.33333%}.col-8{width:66.66667%}.col-9{width:75%}.col-10{width:83.33333%}.col-11{width:91.66667%}.col-12{width:100%}@media (min-width: 544px){.col-sm-1{width:8.33333%}.col-sm-2{width:16.66667%}.col-sm-3{width:25%}.col-sm-4{width:33.33333%}.col-sm-5{width:41.66667%}.col-sm-6{width:50%}.col-sm-7{width:58.33333%}.col-sm-8{width:66.66667%}.col-sm-9{width:75%}.col-sm-10{width:83.33333%}.col-sm-11{width:91.66667%}.col-sm-12{width:100%}}@media (min-width: 768px){.col-md-1{width:8.33333%}.col-md-2{width:16.66667%}.col-md-3{width:25%}.col-md-4{width:33.33333%}.col-md-5{width:41.66667%}.col-md-6{width:50%}.col-md-7{width:58.33333%}.col-md-8{width:66.66667%}.col-md-9{width:75%}.col-md-10{width:83.33333%}.col-md-11{width:91.66667%}.col-md-12{width:100%}}@media (min-width: 1012px){.col-lg-1{width:8.33333%}.col-lg-2{width:16.66667%}.col-lg-3{width:25%}.col-lg-4{width:33.33333%}.col-lg-5{width:41.66667%}.col-lg-6{width:50%}.col-lg-7{width:58.33333%}.col-lg-8{width:66.66667%}.col-lg-9{width:75%}.col-lg-10{width:83.33333%}.col-lg-11{width:91.66667%}.col-lg-12{width:100%}}@media (min-width: 1280px){.col-xl-1{width:8.33333%}.col-xl-2{width:16.66667%}.col-xl-3{width:25%}.col-xl-4{width:33.33333%}.col-xl-5{width:41.66667%}.col-xl-6{width:50%}.col-xl-7{width:58.33333%}.col-xl-8{width:66.66667%}.col-xl-9{width:75%}.col-xl-10{width:83.33333%}.col-xl-11{width:91.66667%}.col-xl-12{width:100%}}.gutter{margin-right:-16px;margin-left:-16px}.gutter>[class*="col-"]{padding-right:16px ;padding-left:16px }.gutter-condensed{margin-right:-8px;margin-left:-8px}.gutter-condensed>[class*="col-"]{padding-right:8px ;padding-left:8px }.gutter-spacious{margin-right:-24px;margin-left:-24px}.gutter-spacious>[class*="col-"]{padding-right:24px ;padding-left:24px }@media (min-width: 544px){.gutter-sm{margin-right:-16px;margin-left:-16px}.gutter-sm>[class*="col-"]{padding-right:16px ;padding-left:16px }.gutter-sm-condensed{margin-right:-8px;margin-left:-8px}.gutter-sm-condensed>[class*="col-"]{padding-right:8px ;padding-left:8px }.gutter-sm-spacious{margin-right:-24px;margin-left:-24px}.gutter-sm-spacious>[class*="col-"]{padding-right:24px ;padding-left:24px }}@media (min-width: 768px){.gutter-md{margin-right:-16px;margin-left:-16px}.gutter-md>[class*="col-"]{padding-right:16px ;padding-left:16px }.gutter-md-condensed{margin-right:-8px;margin-left:-8px}.gutter-md-condensed>[class*="col-"]{padding-right:8px ;padding-left:8px }.gutter-md-spacious{margin-right:-24px;margin-left:-24px}.gutter-md-spacious>[class*="col-"]{padding-right:24px ;padding-left:24px }}@media (min-width: 1012px){.gutter-lg{margin-right:-16px;margin-left:-16px}.gutter-lg>[class*="col-"]{padding-right:16px ;padding-left:16px }.gutter-lg-condensed{margin-right:-8px;margin-left:-8px}.gutter-lg-condensed>[class*="col-"]{padding-right:8px ;padding-left:8px }.gutter-lg-spacious{margin-right:-24px;margin-left:-24px}.gutter-lg-spacious>[class*="col-"]{padding-right:24px ;padding-left:24px }}@media (min-width: 1280px){.gutter-xl{margin-right:-16px;margin-left:-16px}.gutter-xl>[class*="col-"]{padding-right:16px ;padding-left:16px }.gutter-xl-condensed{margin-right:-8px;margin-left:-8px}.gutter-xl-condensed>[class*="col-"]{padding-right:8px ;padding-left:8px }.gutter-xl-spacious{margin-right:-24px;margin-left:-24px}.gutter-xl-spacious>[class*="col-"]{padding-right:24px ;padding-left:24px }}.offset-1{margin-left:8.33333% }.offset-2{margin-left:16.66667% }.offset-3{margin-left:25% }.offset-4{margin-left:33.33333% }.offset-5{margin-left:41.66667% }.offset-6{margin-left:50% }.offset-7{margin-left:58.33333% }.offset-8{margin-left:66.66667% }.offset-9{margin-left:75% }.offset-10{margin-left:83.33333% }.offset-11{margin-left:91.66667% }@media (min-width: 544px){.offset-sm-1{margin-left:8.33333% }.offset-sm-2{margin-left:16.66667% }.offset-sm-3{margin-left:25% }.offset-sm-4{margin-left:33.33333% }.offset-sm-5{margin-left:41.66667% }.offset-sm-6{margin-left:50% }.offset-sm-7{margin-left:58.33333% }.offset-sm-8{margin-left:66.66667% }.offset-sm-9{margin-left:75% }.offset-sm-10{margin-left:83.33333% }.offset-sm-11{margin-left:91.66667% }}@media (min-width: 768px){.offset-md-1{margin-left:8.33333% }.offset-md-2{margin-left:16.66667% }.offset-md-3{margin-left:25% }.offset-md-4{margin-left:33.33333% }.offset-md-5{margin-left:41.66667% }.offset-md-6{margin-left:50% }.offset-md-7{margin-left:58.33333% }.offset-md-8{margin-left:66.66667% }.offset-md-9{margin-left:75% }.offset-md-10{margin-left:83.33333% }.offset-md-11{margin-left:91.66667% }}@media (min-width: 1012px){.offset-lg-1{margin-left:8.33333% }.offset-lg-2{margin-left:16.66667% }.offset-lg-3{margin-left:25% }.offset-lg-4{margin-left:33.33333% }.offset-lg-5{margin-left:41.66667% }.offset-lg-6{margin-left:50% }.offset-lg-7{margin-left:58.33333% }.offset-lg-8{margin-left:66.66667% }.offset-lg-9{margin-left:75% }.offset-lg-10{margin-left:83.33333% }.offset-lg-11{margin-left:91.66667% }}@media (min-width: 1280px){.offset-xl-1{margin-left:8.33333% }.offset-xl-2{margin-left:16.66667% }.offset-xl-3{margin-left:25% }.offset-xl-4{margin-left:33.33333% }.offset-xl-5{margin-left:41.66667% }.offset-xl-6{margin-left:50% }.offset-xl-7{margin-left:58.33333% }.offset-xl-8{margin-left:66.66667% }.offset-xl-9{margin-left:75% }.offset-xl-10{margin-left:83.33333% }.offset-xl-11{margin-left:91.66667% }}.Layout{display:grid;--Layout-sidebar-width: 220px;--Layout-gutter: 16px;grid-auto-flow:column;grid-template-columns:auto 0 1fr;grid-gap:var(--Layout-gutter)}@media (max-width: calc(544px - 1px)){.Layout{grid-auto-flow:row;grid-template-columns:1fr }.Layout .Layout-sidebar,.Layout .Layout-divider,.Layout .Layout-main{width:100% ;grid-column:1 }}@media (max-width: calc(768px - 1px)){.Layout.Layout--flowRow-until-md{grid-auto-flow:row;grid-template-columns:1fr }.Layout.Layout--flowRow-until-md .Layout-sidebar,.Layout.Layout--flowRow-until-md .Layout-divider,.Layout.Layout--flowRow-until-md .Layout-main{width:100% ;grid-column:1 }}@media (max-width: calc(1012px - 1px)){.Layout.Layout--flowRow-until-lg{grid-auto-flow:row;grid-template-columns:1fr }.Layout.Layout--flowRow-until-lg .Layout-sidebar,.Layout.Layout--flowRow-until-lg .Layout-divider,.Layout.Layout--flowRow-until-lg .Layout-main{width:100% ;grid-column:1 }}.Layout .Layout-sidebar{grid-column:1}.Layout .Layout-divider{display:none}.Layout .Layout-main{grid-column:2 / span 2}@media (min-width: 1012px){.Layout{--Layout-gutter: 24px}}.Layout.Layout--gutter-none{--Layout-gutter: 0}.Layout.Layout--gutter-condensed{--Layout-gutter: 16px}@media (min-width: 1012px){.Layout.Layout--gutter-spacious{--Layout-gutter: 32px}}@media (min-width: 1280px){.Layout.Layout--gutter-spacious{--Layout-gutter: 40px}}@media (min-width: 544px){.Layout{--Layout-sidebar-width: 220px}}@media (min-width: 768px){.Layout{--Layout-sidebar-width: 256px}}@media (min-width: 1012px){.Layout{--Layout-sidebar-width: 296px}}@media (min-width: 1280px){.Layout{--Layout-sidebar-width: 320px}}@media (min-width: 768px){.Layout.Layout--sidebar-narrow{--Layout-sidebar-width: 240px}}@media (min-width: 1012px){.Layout.Layout--sidebar-narrow{--Layout-sidebar-width: 256px}}@media (min-width: 1280px){.Layout.Layout--sidebar-narrow{--Layout-sidebar-width: 296px}}@media (min-width: 768px){.Layout.Layout--sidebar-wide{--Layout-sidebar-width: 296px}}@media (min-width: 1012px){.Layout.Layout--sidebar-wide{--Layout-sidebar-width: 320px}}@media (min-width: 1280px){.Layout.Layout--sidebar-wide{--Layout-sidebar-width: 344px}}.Layout.Layout--sidebarPosition-start .Layout-sidebar{grid-column:1}.Layout.Layout--sidebarPosition-start .Layout-main{grid-column:2 / span 2}.Layout.Layout--sidebarPosition-end{grid-template-columns:1fr 0 auto}.Layout.Layout--sidebarPosition-end .Layout-main{grid-column:1}.Layout.Layout--sidebarPosition-end .Layout-sidebar{grid-column:2 / span 2}.Layout.Layout--divided .Layout-divider{display:block;grid-column:2;width:1px;margin-right:-1px;background:var(--color-border-primary)}.Layout.Layout--divided .Layout-main{grid-column:3 / span 1}.Layout-divider{display:none;width:1px}.Layout-sidebar{width:var(--Layout-sidebar-width)}.Layout-main .Layout-main-centered-md,.Layout-main .Layout-main-centered-lg,.Layout-main .Layout-main-centered-xl{margin-right:auto;margin-left:auto}.Layout-main .Layout-main-centered-md>.container-md,.Layout-main .Layout-main-centered-md>.container-lg,.Layout-main .Layout-main-centered-md>.container-xl,.Layout-main .Layout-main-centered-lg>.container-md,.Layout-main .Layout-main-centered-lg>.container-lg,.Layout-main .Layout-main-centered-lg>.container-xl,.Layout-main .Layout-main-centered-xl>.container-md,.Layout-main .Layout-main-centered-xl>.container-lg,.Layout-main .Layout-main-centered-xl>.container-xl{margin-left:0}.Layout-main .Layout-main-centered-md{max-width:calc(768px + var(--Layout-sidebar-width) + var(--Layout-gutter))}.Layout-main .Layout-main-centered-lg{max-width:calc(1012px + var(--Layout-sidebar-width) + var(--Layout-gutter))}.Layout-main .Layout-main-centered-xl{max-width:calc(1280px + var(--Layout-sidebar-width) + var(--Layout-gutter))}
/*# sourceMappingURL=layout.css.map */