mirror of
https://github.com/picocss/pico.git
synced 2025-04-24 18:26:14 -04:00
Build CSS
This commit is contained in:
parent
ddf41a191a
commit
951aae3801
77 changed files with 7702 additions and 7702 deletions
|
@ -1,33 +1,33 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "layout/container") and $enable-classes {
|
||||
/**
|
||||
* Container
|
||||
*/
|
||||
|
||||
#{$parent-selector} .container,
|
||||
#{$parent-selector} .container-fluid {
|
||||
width: 100%;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-right: var(#{$css-var-prefix}spacing);
|
||||
padding-left: var(#{$css-var-prefix}spacing);
|
||||
}
|
||||
|
||||
#{$parent-selector} .container {
|
||||
$first-breakpoint: true;
|
||||
@each $key, $values in $breakpoints {
|
||||
@if $values {
|
||||
@media (min-width: map.get($values, "breakpoint")) {
|
||||
max-width: map.get($values, "viewport");
|
||||
@if $first-breakpoint {
|
||||
$first-breakpoint: false;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "layout/container") and $enable-classes {
|
||||
/**
|
||||
* Container
|
||||
*/
|
||||
|
||||
#{$parent-selector} .container,
|
||||
#{$parent-selector} .container-fluid {
|
||||
width: 100%;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-right: var(#{$css-var-prefix}spacing);
|
||||
padding-left: var(#{$css-var-prefix}spacing);
|
||||
}
|
||||
|
||||
#{$parent-selector} .container {
|
||||
$first-breakpoint: true;
|
||||
@each $key, $values in $breakpoints {
|
||||
@if $values {
|
||||
@media (min-width: map.get($values, "breakpoint")) {
|
||||
max-width: map.get($values, "viewport");
|
||||
@if $first-breakpoint {
|
||||
$first-breakpoint: false;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,53 +1,53 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "layout/document") {
|
||||
/**
|
||||
* Document
|
||||
* Content-box & Responsive typography
|
||||
*/
|
||||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// 1. Add border box sizing in all browsers (opinionated)
|
||||
// 2. Backgrounds do not repeat by default (opinionated)
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box; // 1
|
||||
background-repeat: no-repeat; // 2
|
||||
}
|
||||
|
||||
// 1. Add text decoration inheritance in all browsers (opinionated)
|
||||
// 2. Add vertical alignment inheritance in all browsers (opinionated)
|
||||
::before,
|
||||
::after {
|
||||
text-decoration: inherit; // 1
|
||||
vertical-align: inherit; // 2
|
||||
}
|
||||
|
||||
// 1. Change the line height in all browsers (opinionated)
|
||||
// 2. Breaks words to prevent overflow in all browsers (opinionated)
|
||||
// 3. Use a 4-space tab width in all browsers (opinionated)
|
||||
// 4. Remove the grey highlight on links in iOS (opinionated)
|
||||
// 5. Prevent adjustments of font size after orientation changes in iOS
|
||||
:where(:root),
|
||||
:where(:host) {
|
||||
-webkit-tap-highlight-color: transparent; // 4
|
||||
-webkit-text-size-adjust: 100%; // 5
|
||||
text-size-adjust: 100%; // 5
|
||||
background-color: var(#{$css-var-prefix}background-color);
|
||||
color: var(#{$css-var-prefix}color);
|
||||
font-weight: var(#{$css-var-prefix}font-weight);
|
||||
font-size: var(#{$css-var-prefix}font-size);
|
||||
line-height: var(#{$css-var-prefix}line-height); // 1
|
||||
font-family: var(#{$css-var-prefix}font-family);
|
||||
text-underline-offset: var(#{$css-var-prefix}text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word; // 2
|
||||
tab-size: 2; // 3
|
||||
}
|
||||
}
|
||||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "layout/document") {
|
||||
/**
|
||||
* Document
|
||||
* Content-box & Responsive typography
|
||||
*/
|
||||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// 1. Add border box sizing in all browsers (opinionated)
|
||||
// 2. Backgrounds do not repeat by default (opinionated)
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box; // 1
|
||||
background-repeat: no-repeat; // 2
|
||||
}
|
||||
|
||||
// 1. Add text decoration inheritance in all browsers (opinionated)
|
||||
// 2. Add vertical alignment inheritance in all browsers (opinionated)
|
||||
::before,
|
||||
::after {
|
||||
text-decoration: inherit; // 1
|
||||
vertical-align: inherit; // 2
|
||||
}
|
||||
|
||||
// 1. Change the line height in all browsers (opinionated)
|
||||
// 2. Breaks words to prevent overflow in all browsers (opinionated)
|
||||
// 3. Use a 4-space tab width in all browsers (opinionated)
|
||||
// 4. Remove the grey highlight on links in iOS (opinionated)
|
||||
// 5. Prevent adjustments of font size after orientation changes in iOS
|
||||
:where(:root),
|
||||
:where(:host) {
|
||||
-webkit-tap-highlight-color: transparent; // 4
|
||||
-webkit-text-size-adjust: 100%; // 5
|
||||
text-size-adjust: 100%; // 5
|
||||
background-color: var(#{$css-var-prefix}background-color);
|
||||
color: var(#{$css-var-prefix}color);
|
||||
font-weight: var(#{$css-var-prefix}font-weight);
|
||||
font-size: var(#{$css-var-prefix}font-size);
|
||||
line-height: var(#{$css-var-prefix}line-height); // 1
|
||||
font-family: var(#{$css-var-prefix}font-family);
|
||||
text-underline-offset: var(#{$css-var-prefix}text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word; // 2
|
||||
tab-size: 2; // 3
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,26 +1,26 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "layout/grid") and $enable-classes {
|
||||
/**
|
||||
* Grid
|
||||
* Minimal grid system with auto-layout columns
|
||||
*/
|
||||
|
||||
#{$parent-selector} .grid {
|
||||
grid-column-gap: var(#{$css-var-prefix}grid-column-gap);
|
||||
grid-row-gap: var(#{$css-var-prefix}grid-row-gap);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
@if map.get($breakpoints, "md") {
|
||||
@media (min-width: map.get(map.get($breakpoints, "md"), "breakpoint")) {
|
||||
grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
& > * {
|
||||
min-width: 0; // HACK for children in overflow
|
||||
}
|
||||
}
|
||||
}
|
||||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "layout/grid") and $enable-classes {
|
||||
/**
|
||||
* Grid
|
||||
* Minimal grid system with auto-layout columns
|
||||
*/
|
||||
|
||||
#{$parent-selector} .grid {
|
||||
grid-column-gap: var(#{$css-var-prefix}grid-column-gap);
|
||||
grid-row-gap: var(#{$css-var-prefix}grid-row-gap);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
@if map.get($breakpoints, "md") {
|
||||
@media (min-width: map.get(map.get($breakpoints, "md"), "breakpoint")) {
|
||||
grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
& > * {
|
||||
min-width: 0; // HACK for children in overflow
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,67 +1,67 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "layout/landmarks") {
|
||||
/**
|
||||
* Landmarks
|
||||
*/
|
||||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// add smooth scrolling
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
// 1. Remove the margin in all browsers (opinionated)
|
||||
body {
|
||||
width: 100%;
|
||||
margin: 0; // 1
|
||||
}
|
||||
|
||||
// Render the `main` element consistently in IE
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
#{$parent-selector} #{$semantic-root-element} {
|
||||
> header,
|
||||
> main,
|
||||
> footer {
|
||||
// <header>, <main>, <footer> as containers
|
||||
@if $enable-semantic-container {
|
||||
$first-breakpoint: true;
|
||||
width: 100%;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding: var(#{$css-var-prefix}block-spacing-vertical)
|
||||
var(#{$css-var-prefix}block-spacing-horizontal);
|
||||
|
||||
@if $enable-viewport {
|
||||
@each $key, $values in $breakpoints {
|
||||
@if $values {
|
||||
@media (min-width: map.get($values, "breakpoint")) {
|
||||
max-width: map.get($values, "viewport");
|
||||
@if $first-breakpoint {
|
||||
$first-breakpoint: false;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Regular vertical spacings for <header>, <main>, <footer>
|
||||
@else {
|
||||
padding-block: var(#{$css-var-prefix}block-spacing-vertical);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "layout/landmarks") {
|
||||
/**
|
||||
* Landmarks
|
||||
*/
|
||||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// add smooth scrolling
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
// 1. Remove the margin in all browsers (opinionated)
|
||||
body {
|
||||
width: 100%;
|
||||
margin: 0; // 1
|
||||
}
|
||||
|
||||
// Render the `main` element consistently in IE
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
#{$parent-selector} #{$semantic-root-element} {
|
||||
> header,
|
||||
> main,
|
||||
> footer {
|
||||
// <header>, <main>, <footer> as containers
|
||||
@if $enable-semantic-container {
|
||||
$first-breakpoint: true;
|
||||
width: 100%;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding: var(#{$css-var-prefix}block-spacing-vertical)
|
||||
var(#{$css-var-prefix}block-spacing-horizontal);
|
||||
|
||||
@if $enable-viewport {
|
||||
@each $key, $values in $breakpoints {
|
||||
@if $values {
|
||||
@media (min-width: map.get($values, "breakpoint")) {
|
||||
max-width: map.get($values, "viewport");
|
||||
@if $first-breakpoint {
|
||||
$first-breakpoint: false;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Regular vertical spacings for <header>, <main>, <footer>
|
||||
@else {
|
||||
padding-block: var(#{$css-var-prefix}block-spacing-vertical);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,12 +1,12 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "layout/overflow-auto") and $enable-classes {
|
||||
/**
|
||||
* Overflow auto
|
||||
*/
|
||||
|
||||
#{$parent-selector} .overflow-auto {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "layout/overflow-auto") and $enable-classes {
|
||||
/**
|
||||
* Overflow auto
|
||||
*/
|
||||
|
||||
#{$parent-selector} .overflow-auto {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,105 +1,105 @@
|
|||
@use "sass:string";
|
||||
@use "sass:map";
|
||||
@use "sass:math";
|
||||
@use "../settings" as *; // for spacing, breakpoints, and if columns are defined.
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
|
||||
@if map.get($modules, "layout/row") and $enable-classes {
|
||||
$helper-cols: "";
|
||||
$helper-offset: "";
|
||||
/*--- CSS Grid ---*/
|
||||
#{$parent-selector} .row-fluid,
|
||||
#{$parent-selector} .row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat($row-columns, 1fr);
|
||||
gap: var(#{$css-var-prefix}grid-row-gap) var(#{$css-var-prefix}grid-column-gap);
|
||||
&.align-center {
|
||||
align-items: center;
|
||||
}
|
||||
&.align-start {
|
||||
align-items: start;
|
||||
}
|
||||
&.align-end {
|
||||
align-items: end;
|
||||
}
|
||||
> [class*="col"] > *,
|
||||
> [class|="col"] > *,
|
||||
> [class~="col"] > * {
|
||||
margin: var(#{$css-var-prefix}block-spacing-vertical) auto;
|
||||
}
|
||||
}
|
||||
#{$parent-selector} .row {
|
||||
max-width: map.get(map.get($breakpoints, "xl"), "viewport");
|
||||
margin: 0 auto;
|
||||
}
|
||||
/* Defining columns spans and offsets */
|
||||
// Loop through all column spans and define the .grid-column-end number
|
||||
@for $col from 1 through $row-columns {
|
||||
#{$parent-selector} .col-#{$col} {
|
||||
grid-column-end: span $col;
|
||||
}
|
||||
@if $col == 1 {
|
||||
$helper-cols: ".col-1";
|
||||
} @else {
|
||||
$helper-cols: #{$helper-cols} + ", #{$parent-selector} .col-" + #{$col};
|
||||
}
|
||||
}
|
||||
|
||||
// Loop through all column offsets and define the .grid-column-start number
|
||||
@for $offset from 0 through $row-columns - 1 {
|
||||
#{$parent-selector} .offset-#{$offset} {
|
||||
grid-column-start: $offset + 1;
|
||||
}
|
||||
@if $offset == 0 {
|
||||
$helper-offset: ".offset-0";
|
||||
} @else {
|
||||
$helper-offset: #{$helper-offset} + ", .offset-" + #{$offset};
|
||||
}
|
||||
}
|
||||
// Defines media queries for each breakpoint and loops through both spans
|
||||
// and offsets to set grid-column-end and grid-column-start
|
||||
// Loop through breakpoints and generate media queries
|
||||
|
||||
@each $breakpoint, $values in $breakpoints {
|
||||
@if $values {
|
||||
@media (min-width: map.get($values, "viewport")) {
|
||||
@for $col from 1 through $row-columns {
|
||||
#{$parent-selector} .col-#{$breakpoint}-#{$col} {
|
||||
grid-column-end: span $col;
|
||||
}
|
||||
@if ($breakpoint != "sm") {
|
||||
$helper-cols: #{$helper-cols} +
|
||||
", #{$parent-selector} .col-" +
|
||||
#{$breakpoint} +
|
||||
"-" +
|
||||
#{$col};
|
||||
}
|
||||
}
|
||||
@for $offset from 0 through $row-columns - 1 {
|
||||
#{$parent-selector} .offset-#{$breakpoint}-#{$offset} {
|
||||
grid-column-start: $offset + 1;
|
||||
}
|
||||
@if ($breakpoint != "sm") {
|
||||
$helper-offset: #{$helper-offset} + ", .offset-" + #{$breakpoint} + "-" + #{$offset};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* CSS Grid Media Queries */
|
||||
// Sets the columns to be col-12 with a starting column of 1
|
||||
$sm-size: map.get(map.get($breakpoints, "sm"), "viewport");
|
||||
|
||||
@media (max-width: $sm-size) {
|
||||
//[class*="col-"] {
|
||||
#{$helper-cols} {
|
||||
grid-column-end: span $row-columns;
|
||||
}
|
||||
//[class*="offset-"] {
|
||||
#{$helper-offset} {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@use "sass:string";
|
||||
@use "sass:map";
|
||||
@use "sass:math";
|
||||
@use "../settings" as *; // for spacing, breakpoints, and if columns are defined.
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
|
||||
@if map.get($modules, "layout/row") and $enable-classes {
|
||||
$helper-cols: "";
|
||||
$helper-offset: "";
|
||||
/*--- CSS Grid ---*/
|
||||
#{$parent-selector} .row-fluid,
|
||||
#{$parent-selector} .row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat($row-columns, 1fr);
|
||||
gap: var(#{$css-var-prefix}grid-row-gap) var(#{$css-var-prefix}grid-column-gap);
|
||||
&.align-center {
|
||||
align-items: center;
|
||||
}
|
||||
&.align-start {
|
||||
align-items: start;
|
||||
}
|
||||
&.align-end {
|
||||
align-items: end;
|
||||
}
|
||||
> [class*="col"] > *,
|
||||
> [class|="col"] > *,
|
||||
> [class~="col"] > * {
|
||||
margin: var(#{$css-var-prefix}block-spacing-vertical) auto;
|
||||
}
|
||||
}
|
||||
#{$parent-selector} .row {
|
||||
max-width: map.get(map.get($breakpoints, "xl"), "viewport");
|
||||
margin: 0 auto;
|
||||
}
|
||||
/* Defining columns spans and offsets */
|
||||
// Loop through all column spans and define the .grid-column-end number
|
||||
@for $col from 1 through $row-columns {
|
||||
#{$parent-selector} .col-#{$col} {
|
||||
grid-column-end: span $col;
|
||||
}
|
||||
@if $col == 1 {
|
||||
$helper-cols: ".col-1";
|
||||
} @else {
|
||||
$helper-cols: #{$helper-cols} + ", #{$parent-selector} .col-" + #{$col};
|
||||
}
|
||||
}
|
||||
|
||||
// Loop through all column offsets and define the .grid-column-start number
|
||||
@for $offset from 0 through $row-columns - 1 {
|
||||
#{$parent-selector} .offset-#{$offset} {
|
||||
grid-column-start: $offset + 1;
|
||||
}
|
||||
@if $offset == 0 {
|
||||
$helper-offset: ".offset-0";
|
||||
} @else {
|
||||
$helper-offset: #{$helper-offset} + ", .offset-" + #{$offset};
|
||||
}
|
||||
}
|
||||
// Defines media queries for each breakpoint and loops through both spans
|
||||
// and offsets to set grid-column-end and grid-column-start
|
||||
// Loop through breakpoints and generate media queries
|
||||
|
||||
@each $breakpoint, $values in $breakpoints {
|
||||
@if $values {
|
||||
@media (min-width: map.get($values, "viewport")) {
|
||||
@for $col from 1 through $row-columns {
|
||||
#{$parent-selector} .col-#{$breakpoint}-#{$col} {
|
||||
grid-column-end: span $col;
|
||||
}
|
||||
@if ($breakpoint != "sm") {
|
||||
$helper-cols: #{$helper-cols} +
|
||||
", #{$parent-selector} .col-" +
|
||||
#{$breakpoint} +
|
||||
"-" +
|
||||
#{$col};
|
||||
}
|
||||
}
|
||||
@for $offset from 0 through $row-columns - 1 {
|
||||
#{$parent-selector} .offset-#{$breakpoint}-#{$offset} {
|
||||
grid-column-start: $offset + 1;
|
||||
}
|
||||
@if ($breakpoint != "sm") {
|
||||
$helper-offset: #{$helper-offset} + ", .offset-" + #{$breakpoint} + "-" + #{$offset};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* CSS Grid Media Queries */
|
||||
// Sets the columns to be col-12 with a starting column of 1
|
||||
$sm-size: map.get(map.get($breakpoints, "sm"), "viewport");
|
||||
|
||||
@media (max-width: $sm-size) {
|
||||
//[class*="col-"] {
|
||||
#{$helper-cols} {
|
||||
grid-column-end: span $row-columns;
|
||||
}
|
||||
//[class*="offset-"] {
|
||||
#{$helper-offset} {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,12 +1,12 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "layout/section") {
|
||||
/**
|
||||
* Section
|
||||
*/
|
||||
|
||||
#{$parent-selector} section {
|
||||
margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
|
||||
}
|
||||
}
|
||||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "layout/section") {
|
||||
/**
|
||||
* Section
|
||||
*/
|
||||
|
||||
#{$parent-selector} section {
|
||||
margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue