mirror of
https://github.com/picocss/pico.git
synced 2025-04-30 12:59:12 -04:00
Initial commit 🚀
This commit is contained in:
Lucas
commit
16c7596319
30 changed files with 5996 additions and 0 deletions
44
scss/layout/_container.scss
Normal file
44
scss/layout/_container.scss
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
@if ($enable-class-container and $enable-classes) {
|
||||
|
||||
/**
|
||||
* Container
|
||||
*/
|
||||
|
||||
.container,
|
||||
.container-fluid {
|
||||
width: 100%;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-right: $spacing-gutter;
|
||||
padding-left: $spacing-gutter;
|
||||
}
|
||||
|
||||
.container {
|
||||
|
||||
@if map-get($breakpoints, "sm") and $enable-viewport {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
max-width: map-get($viewports, "sm");
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") and $enable-viewport {
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
max-width: map-get($viewports, "md");
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") and $enable-viewport {
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
max-width: map-get($viewports, "lg");
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "xl") and $enable-viewport {
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
max-width: map-get($viewports, "xl");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
68
scss/layout/_document.scss
Normal file
68
scss/layout/_document.scss
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
/**
|
||||
* Document
|
||||
* Content-box & Responsive typography
|
||||
*/
|
||||
|
||||
|
||||
// Reboot
|
||||
// Based on normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box; // 1
|
||||
}
|
||||
|
||||
// 1. Correct the line height in all browsers.
|
||||
// 2. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
|
||||
// 3. Change the default tap highlight to be completely transparent in iOS.
|
||||
html {
|
||||
-webkit-text-size-adjust: 100%; // 2
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0); // 3
|
||||
background: var(--background);
|
||||
color: var(--text);
|
||||
font-family: $sans-serif;
|
||||
font-size: map-get($base-font, "xs");
|
||||
font-weight: $text-weight;
|
||||
line-height: $line-height; // 1
|
||||
text-rendering: optimizeLegibility;
|
||||
|
||||
@if map-get($breakpoints, "sm") and
|
||||
map-get($base-font, "sm") and
|
||||
$enable-responsive-typography {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
font-size: map-get($base-font, "sm");
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") and
|
||||
map-get($base-font, "md") and
|
||||
$enable-responsive-typography {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
font-size: map-get($base-font, "md");
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") and
|
||||
map-get($base-font, "lg") and
|
||||
$enable-responsive-typography {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
font-size: map-get($base-font, "lg");
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "xl") and
|
||||
map-get($base-font, "xl") and
|
||||
$enable-responsive-typography {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
font-size: map-get($base-font, "xl");
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
30
scss/layout/_grid.scss
Normal file
30
scss/layout/_grid.scss
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
@if $enable-classes {
|
||||
|
||||
/**
|
||||
* Grid
|
||||
* Minimal grid system with auto-layout columns
|
||||
*/
|
||||
|
||||
.grid {
|
||||
margin: 0;
|
||||
|
||||
@if map-get($breakpoints, "lg") {
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
grid-column-gap: $spacing-gutter;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
& > * {
|
||||
min-width: 0; // HACK for childs in overflow
|
||||
margin-bottom: $spacing-gutter;
|
||||
|
||||
@if map-get($breakpoints, "md") {
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
29
scss/layout/_scroller.scss
Normal file
29
scss/layout/_scroller.scss
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
/**
|
||||
* Horizontal scroller (<figure>)
|
||||
*/
|
||||
|
||||
// Wrapper to make any content responsive across all viewports
|
||||
figure {
|
||||
display: block;
|
||||
margin-right: -$spacing-gutter;
|
||||
margin-left: -$spacing-gutter;
|
||||
padding: 0;
|
||||
overflow-x: auto;
|
||||
|
||||
figcaption {
|
||||
color: var(--muted-text);
|
||||
font-size: 87.5%;
|
||||
padding: 0 $spacing-gutter ;
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "sm") {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
|
||||
figcaption {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
44
scss/layout/_section.scss
Normal file
44
scss/layout/_section.scss
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
/**
|
||||
* Section
|
||||
* Responsive spacings for section
|
||||
*/
|
||||
|
||||
section {
|
||||
margin-bottom: $spacing-block*map-get($spacing-factor, "xs")*2;
|
||||
|
||||
@if map-get($breakpoints, "sm") and
|
||||
map-get($spacing-factor, "sm") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
margin-bottom: $spacing-block*map-get($spacing-factor, "sm")*2;
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") and
|
||||
map-get($spacing-factor, "md") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
margin-bottom: $spacing-block*map-get($spacing-factor, "md")*2;
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") and
|
||||
map-get($spacing-factor, "lg") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
margin-bottom: $spacing-block*map-get($spacing-factor, "lg")*2;
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "xl") and
|
||||
map-get($spacing-factor, "xl") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
margin-bottom: $spacing-block*map-get($spacing-factor, "xl")*2;
|
||||
}
|
||||
}
|
||||
}
|
||||
113
scss/layout/_sectioning.scss
Normal file
113
scss/layout/_sectioning.scss
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
/**
|
||||
* Sectioning
|
||||
* Container and responsive spacings for header, main, footer
|
||||
*/
|
||||
|
||||
|
||||
// Reboot
|
||||
// Based on normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Render the `main` element consistently in IE.
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
|
||||
> header,
|
||||
> main,
|
||||
> footer {
|
||||
|
||||
$padding-horizontal: $spacing-gutter !default;
|
||||
$spacing-vertical: $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: $spacing-gutter;
|
||||
}
|
||||
@if $enable-responsive-spacings and map-get($spacing-factor, "sm") {
|
||||
$spacing-vertical: $spacing-block*map-get($spacing-factor, "sm");
|
||||
}
|
||||
@else {
|
||||
$spacing-vertical: $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 and map-get($spacing-factor, "md") {
|
||||
$spacing-vertical: $spacing-block*map-get($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 and map-get($spacing-factor, "lg") {
|
||||
$spacing-vertical: $spacing-block*map-get($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 and map-get($spacing-factor, "xl") {
|
||||
$spacing-vertical: $spacing-block*map-get($spacing-factor, "xl");
|
||||
padding: $spacing-vertical $padding-horizontal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue