mirror of
https://github.com/picocss/pico.git
synced 2025-02-24 00:39:20 -05:00
456539a52e
- CSS icons color dynamization in `_color.scss` - Bigger Checkboxes and Radio buttons - Small refactoring for Checkboxes and Radio buttons in `_form.scss` and `form-checkbox-radio.scss` - Styles for new form elements: `type=date`, `type=datetime-local`, `type=month`, `type=time`, `type=week`, `type=range`, `type=search` - Reordering @import in `pico.scss` and `pico.slim.scss`
92 lines
2.7 KiB
SCSS
92 lines
2.7 KiB
SCSS
/**
|
||
* Docs: Main (Grid)
|
||
*/
|
||
|
||
$navHeight: 3.5rem;
|
||
|
||
body > main {
|
||
padding-top:map-get($spacing-factor, "xs") + $navHeight;
|
||
|
||
@media (min-width: map-get($breakpoints, "sm")) {
|
||
padding-top: map-get($spacing-factor, "sm") + $navHeight;
|
||
}
|
||
|
||
@media (min-width: map-get($breakpoints, "md")) {
|
||
padding-top: map-get($spacing-factor, "md") + $navHeight;
|
||
}
|
||
|
||
@media (min-width: map-get($breakpoints, "lg")) {
|
||
grid-column-gap: $spacing-gutter*4;
|
||
display: grid;
|
||
grid-template-columns: 200px auto;
|
||
padding-top: map-get($spacing-factor, "lg") + $navHeight;
|
||
}
|
||
|
||
@media (min-width: map-get($breakpoints, "xl")) {
|
||
padding-top: map-get($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: map-get($spacing-factor, "xs") + $navHeight;
|
||
margin-top: -(map-get($spacing-factor, "xs")+ $navHeight);
|
||
content: '';
|
||
|
||
|
||
@media (min-width: map-get($breakpoints, "sm")) {
|
||
height: map-get($spacing-factor, "sm") + $navHeight;
|
||
margin-top: -(map-get($spacing-factor, "sm") + $navHeight);
|
||
}
|
||
|
||
@media (min-width: map-get($breakpoints, "md")) {
|
||
height: map-get($spacing-factor, "md") + $navHeight;
|
||
margin-top: -(map-get($spacing-factor, "md") + $navHeight);
|
||
}
|
||
|
||
@media (min-width: map-get($breakpoints, "lg")) {
|
||
height: map-get($spacing-factor, "lg") + $navHeight;
|
||
margin-top: -(map-get($spacing-factor, "lg") + $navHeight);
|
||
}
|
||
|
||
@media (min-width: map-get($breakpoints, "xl")) {
|
||
height: map-get($spacing-factor, "xl") + $navHeight;
|
||
margin-top: -(map-get($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;
|
||
// Source: https://feathericons.com/
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{$icon-color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
|
||
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;
|
||
}
|
||
}
|