mirror of
https://github.com/picocss/pico.git
synced 2025-02-24 00:39:20 -05:00
98 lines
2.6 KiB
SCSS
98 lines
2.6 KiB
SCSS
/**
|
||
* Docs: Main (Grid)
|
||
*/
|
||
|
||
$navHeight: 3.5rem;
|
||
|
||
body > main {
|
||
padding-top: calc(1rem * var(--spacing-factor-xs) + #{$navHeight});
|
||
|
||
@media (min-width: map-get($breakpoints, "sm")) {
|
||
padding-top: calc(1rem * var(--spacing-factor-sm) + #{$navHeight});
|
||
}
|
||
|
||
@media (min-width: map-get($breakpoints, "md")) {
|
||
padding-top: calc(1rem * var(--spacing-factor-md) + #{$navHeight});
|
||
}
|
||
|
||
@media (min-width: map-get($breakpoints, "lg")) {
|
||
grid-column-gap: calc(var(--spacing-gutter) * 4);
|
||
display: grid;
|
||
grid-template-columns: 200px auto;
|
||
padding-top: calc(1rem * var(--spacing-factor-lg) + #{$navHeight});
|
||
}
|
||
|
||
@media (min-width: map-get($breakpoints, "xl")) {
|
||
padding-top: calc(1rem * var(--spacing-factor-xl) + #{$navHeight});
|
||
}
|
||
|
||
> * {
|
||
min-width: 0; // HACK for childs in overflow
|
||
}
|
||
}
|
||
|
||
|
||
// Anchors hacks for internal links
|
||
// ––––––––––––––––––––
|
||
|
||
div[role="document"] > section::before {
|
||
display: block;
|
||
height: calc(1rem * var(--spacing-factor-xs) + #{$navHeight});
|
||
margin-top: calc(-1rem * var(--spacing-factor-xs) - #{$navHeight});
|
||
content: '';
|
||
|
||
|
||
@media (min-width: map-get($breakpoints, "sm")) {
|
||
height: calc(1rem * var(--spacing-factor-sm) + #{$navHeight});
|
||
margin-top: calc(-1rem * var(--spacing-factor-sm) - #{$navHeight});
|
||
}
|
||
|
||
@media (min-width: map-get($breakpoints, "md")) {
|
||
height: calc(1rem * var(--spacing-factor-md) + #{$navHeight});
|
||
margin-top: calc(-1rem * var(--spacing-factor-md) - #{$navHeight});
|
||
}
|
||
|
||
@media (min-width: map-get($breakpoints, "lg")) {
|
||
height: calc(1rem * var(--spacing-factor-lg) + #{$navHeight});
|
||
margin-top: calc(-1rem * var(--spacing-factor-lg) - #{$navHeight});
|
||
}
|
||
|
||
@media (min-width: map-get($breakpoints, "xl")) {
|
||
height: calc(1rem * var(--spacing-factor-xl) + #{$navHeight});
|
||
margin-top: calc(-1rem * var(--spacing-factor-xl) - #{$navHeight});
|
||
}
|
||
}
|
||
|
||
|
||
// External links
|
||
// ––––––––––––––––––––
|
||
|
||
div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):not([role])::after {
|
||
display: inline-block;
|
||
width: 1rem;
|
||
height: 1rem;
|
||
background-image: var(--icon-external);
|
||
background-position: top center;
|
||
background-repeat: no-repeat;
|
||
background-size: .66rem auto;
|
||
content: '';
|
||
}
|
||
|
||
|
||
// Form grid
|
||
// ––––––––––––––––––––
|
||
|
||
form.grid {
|
||
> input:not([type=checkbox]):not([type=radio]),
|
||
> button {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
|
||
|
||
// Embedded SVG
|
||
// ––––––––––––––––––––
|
||
svg {
|
||
height: 1rem;
|
||
}
|