mirror of
https://github.com/picocss/pico.git
synced 2025-02-24 00:39:20 -05:00
112 lines
3.2 KiB
SCSS
112 lines
3.2 KiB
SCSS
/**
|
||
* Sectioning
|
||
* Container and responsive spacings for header, main, footer
|
||
*/
|
||
|
||
|
||
// Reboot based on :
|
||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||
// ––––––––––––––––––––
|
||
|
||
// Render the `main` element consistently in IE
|
||
main {
|
||
display: block;
|
||
}
|
||
|
||
|
||
// Pico
|
||
// ––––––––––––––––––––
|
||
|
||
body {
|
||
width: 100%;
|
||
margin: 0;
|
||
|
||
> header,
|
||
> main,
|
||
> footer {
|
||
$padding-horizontal: var(--spacing-gutter) !default;
|
||
$spacing-vertical: var(--spacing-block) !default;
|
||
width: 100%;
|
||
margin-right: auto;
|
||
margin-left: auto;
|
||
|
||
// xs
|
||
@if $enable-semantic-container == false {
|
||
$padding-horizontal: 0;
|
||
}
|
||
padding: $spacing-vertical $padding-horizontal;
|
||
|
||
// sm
|
||
@if map-get($breakpoints, "sm")
|
||
and ($enable-responsive-spacings or $enable-semantic-container) {
|
||
|
||
@media (min-width: map-get($breakpoints, "sm")) {
|
||
@if $enable-viewport and $enable-semantic-container {
|
||
max-width: map-get($viewports, "sm");
|
||
}
|
||
@if $enable-responsive-spacings or $enable-viewport {
|
||
@if $enable-viewport or $enable-semantic-container == false {
|
||
$padding-horizontal: 0;
|
||
}
|
||
@else {
|
||
$padding-horizontal: var(--spacing-gutter);
|
||
}
|
||
@if $enable-responsive-spacings {
|
||
$spacing-vertical: calc(var(--spacing-block) * var(--spacing-factor-sm));
|
||
}
|
||
@else {
|
||
$spacing-vertical: var(--spacing-block);
|
||
}
|
||
padding: $spacing-vertical $padding-horizontal;
|
||
}
|
||
}
|
||
}
|
||
|
||
// md
|
||
@if map-get($breakpoints, "md")
|
||
and ($enable-responsive-spacings or $enable-semantic-container) {
|
||
|
||
@media (min-width: map-get($breakpoints, "md")) {
|
||
@if $enable-viewport and $enable-semantic-container {
|
||
max-width: map-get($viewports, "md");
|
||
}
|
||
@if $enable-responsive-spacings {
|
||
$spacing-vertical: calc(var(--spacing-block) * var(--spacing-factor-md));
|
||
padding: $spacing-vertical $padding-horizontal;
|
||
}
|
||
}
|
||
}
|
||
|
||
// lg
|
||
@if map-get($breakpoints, "lg")
|
||
and ($enable-responsive-spacings or $enable-semantic-container) {
|
||
|
||
@media (min-width: map-get($breakpoints, "lg")) {
|
||
@if $enable-viewport and $enable-semantic-container {
|
||
max-width: map-get($viewports, "lg");
|
||
}
|
||
@if $enable-responsive-spacings {
|
||
$spacing-vertical: calc(var(--spacing-block) * var(--spacing-factor-lg));
|
||
padding: $spacing-vertical $padding-horizontal;
|
||
}
|
||
}
|
||
}
|
||
|
||
// xl
|
||
@if map-get($breakpoints, "xl")
|
||
and ($enable-responsive-spacings or $enable-semantic-container) {
|
||
|
||
@media (min-width: map-get($breakpoints, "xl")) {
|
||
@if $enable-viewport and $enable-semantic-container {
|
||
max-width: map-get($viewports, "xl");
|
||
}
|
||
@if $enable-responsive-spacings {
|
||
$spacing-vertical: calc(var(--spacing-block) * var(--spacing-factor-xl));
|
||
padding: $spacing-vertical $padding-horizontal;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|