mirror of
https://github.com/picocss/pico.git
synced 2025-04-22 17:36:15 -04:00
Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.
This commit is contained in:
Yohn
parent
84ed38efc9
commit
fe78285302
249 changed files with 59188 additions and 594 deletions
|
|
@ -560,9 +560,9 @@ input:not([type=submit],
|
|||
text-underline-offset: var(--pico-text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -593,6 +593,496 @@ main {
|
|||
margin-bottom: var(--pico-block-spacing-vertical);
|
||||
}
|
||||
|
||||
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
|
||||
/*--- CSS Grid ---*/
|
||||
.row-fluid,
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Defining columns spans and offsets */
|
||||
.col-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
|
||||
.offset-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.offset-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.offset-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.offset-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.offset-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.offset-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
|
||||
.offset-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
|
||||
.offset-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
|
||||
.offset-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
|
||||
.offset-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
|
||||
.offset-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
.col-sm-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-sm-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-sm-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-sm-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-sm-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-sm-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-sm-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-sm-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-sm-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-sm-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-sm-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-sm-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-sm-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-sm-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-sm-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-sm-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-sm-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-sm-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-sm-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-sm-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-sm-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-sm-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-sm-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-sm-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.col-md-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-md-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-md-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-md-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-md-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-md-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-md-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-md-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-md-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-md-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-md-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-md-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-md-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-md-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-md-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-md-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-md-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-md-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-md-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-md-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-md-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-md-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-md-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-md-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
.col-lg-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-lg-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-lg-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-lg-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-lg-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-lg-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-lg-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-lg-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-lg-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-lg-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-lg-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-lg-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-lg-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-lg-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-lg-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-lg-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-lg-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-lg-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-lg-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-lg-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-lg-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-lg-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-lg-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-lg-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1450px) {
|
||||
.col-xxl-1 {
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.col-xxl-2 {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
grid-column-end: span 3;
|
||||
}
|
||||
.col-xxl-4 {
|
||||
grid-column-end: span 4;
|
||||
}
|
||||
.col-xxl-5 {
|
||||
grid-column-end: span 5;
|
||||
}
|
||||
.col-xxl-6 {
|
||||
grid-column-end: span 6;
|
||||
}
|
||||
.col-xxl-7 {
|
||||
grid-column-end: span 7;
|
||||
}
|
||||
.col-xxl-8 {
|
||||
grid-column-end: span 8;
|
||||
}
|
||||
.col-xxl-9 {
|
||||
grid-column-end: span 9;
|
||||
}
|
||||
.col-xxl-10 {
|
||||
grid-column-end: span 10;
|
||||
}
|
||||
.col-xxl-11 {
|
||||
grid-column-end: span 11;
|
||||
}
|
||||
.col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-xxl-0 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.offset-xxl-1 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.offset-xxl-2 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
.offset-xxl-3 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
.offset-xxl-4 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
.offset-xxl-5 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
.offset-xxl-6 {
|
||||
grid-column-start: 7;
|
||||
}
|
||||
.offset-xxl-7 {
|
||||
grid-column-start: 8;
|
||||
}
|
||||
.offset-xxl-8 {
|
||||
grid-column-start: 9;
|
||||
}
|
||||
.offset-xxl-9 {
|
||||
grid-column-start: 10;
|
||||
}
|
||||
.offset-xxl-10 {
|
||||
grid-column-start: 11;
|
||||
}
|
||||
.offset-xxl-11 {
|
||||
grid-column-start: 12;
|
||||
}
|
||||
}
|
||||
/* CSS Grid Media Queries */
|
||||
@media (max-width: 510px) {
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
|
||||
grid-column-end: span 12;
|
||||
}
|
||||
.offset-0, .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-md-0, .offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5, .offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11, .offset-lg-0, .offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5, .offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11, .offset-xl-0, .offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5, .offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11, .offset-xxl-0, .offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5, .offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue