mirror of
https://github.com/picocss/pico.git
synced 2025-04-30 04:49:13 -04:00
refactor: modules and css vars
This commit is contained in:
Lucas Larroche
parent
2e4d6c66ec
commit
ce2ed6826d
46 changed files with 3874 additions and 3534 deletions
|
|
@ -1,10 +1,10 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if ($enable-class-container and $enable-classes) {
|
||||
@if map.get($modules, "layout/container") and $enable-classes {
|
||||
/**
|
||||
* Container
|
||||
*/
|
||||
* Container
|
||||
*/
|
||||
|
||||
.container,
|
||||
.container-fluid {
|
||||
|
|
|
|||
|
|
@ -1,50 +1,53 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
/**
|
||||
* Document
|
||||
* Content-box & Responsive typography
|
||||
*/
|
||||
@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
|
||||
// ––––––––––––––––––––
|
||||
// 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. Use the default cursor in all browsers (opinionated)
|
||||
// 2. Change the line height in all browsers (opinionated)
|
||||
// 3. Breaks words to prevent overflow in all browsers (opinionated)
|
||||
// 4. Use a 4-space tab width in all browsers (opinionated)
|
||||
// 5. Remove the grey highlight on links in iOS (opinionated)
|
||||
// 6. Prevent adjustments of font size after orientation changes in iOS
|
||||
:where(:root) {
|
||||
-webkit-tap-highlight-color: transparent; // 5
|
||||
-webkit-text-size-adjust: 100%; // 6
|
||||
text-size-adjust: 100%; // 6
|
||||
background-color: var(#{$✨}background-color);
|
||||
color: var(#{$✨}color);
|
||||
font-weight: var(#{$✨}font-weight);
|
||||
font-size: var(#{$✨}font-size);
|
||||
line-height: var(#{$✨}line-height); // 2
|
||||
font-family: var(#{$✨}font-family);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word; // 3
|
||||
cursor: default; // 1
|
||||
tab-size: 4; // 4
|
||||
// 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. Use the default cursor in all browsers (opinionated)
|
||||
// 2. Change the line height in all browsers (opinionated)
|
||||
// 3. Breaks words to prevent overflow in all browsers (opinionated)
|
||||
// 4. Use a 4-space tab width in all browsers (opinionated)
|
||||
// 5. Remove the grey highlight on links in iOS (opinionated)
|
||||
// 6. Prevent adjustments of font size after orientation changes in iOS
|
||||
:where(:root) {
|
||||
-webkit-tap-highlight-color: transparent; // 5
|
||||
-webkit-text-size-adjust: 100%; // 6
|
||||
text-size-adjust: 100%; // 6
|
||||
background-color: var(#{$✨}background-color);
|
||||
color: var(#{$✨}color);
|
||||
font-weight: var(#{$✨}font-weight);
|
||||
font-size: var(#{$✨}font-size);
|
||||
line-height: var(#{$✨}line-height); // 2
|
||||
font-family: var(#{$✨}font-family);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word; // 3
|
||||
cursor: default; // 1
|
||||
tab-size: 4; // 4
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if ($enable-classes and $enable-grid) {
|
||||
@if map.get($modules, "layout/grid") and $enable-classes {
|
||||
/**
|
||||
* Grid
|
||||
* Minimal grid system with auto-layout columns
|
||||
*/
|
||||
* Grid
|
||||
* Minimal grid system with auto-layout columns
|
||||
*/
|
||||
|
||||
.grid {
|
||||
grid-column-gap: var(#{$✨}grid-spacing-horizontal);
|
||||
|
|
|
|||
61
scss/layout/_landmarks.scss
Normal file
61
scss/layout/_landmarks.scss
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
@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
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// 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
|
||||
// ––––––––––––––––––––
|
||||
#{$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(#{$✨}block-spacing-vertical) var(#{$✨}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 pacing <header>, <main>, <footer>
|
||||
@else {
|
||||
padding: var(#{$✨}block-spacing-vertical) 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,18 +1,21 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
/**
|
||||
* Horizontal scroller (<figure>)
|
||||
*/
|
||||
@if map.get($modules, "layout/scroller") {
|
||||
/**
|
||||
* Horizontal scroller (<figure>)
|
||||
*/
|
||||
|
||||
// Wrapper to make any content responsive across all viewports
|
||||
figure {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-x: auto;
|
||||
// Wrapper to make allow any content to be scrolled horizontally
|
||||
figure {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-x: auto;
|
||||
|
||||
figcaption {
|
||||
padding: calc(var(#{$✨}spacing) * 0.5) 0;
|
||||
color: var(#{$✨}muted-color);
|
||||
figcaption {
|
||||
padding: calc(var(#{$✨}spacing) * 0.5) 0;
|
||||
color: var(#{$✨}muted-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
/**
|
||||
* Section
|
||||
* Responsive spacings for section
|
||||
*/
|
||||
@if map.get($modules, "layout/section") {
|
||||
/**
|
||||
* Section
|
||||
*/
|
||||
|
||||
section {
|
||||
margin-bottom: var(#{$✨}block-spacing-vertical);
|
||||
section {
|
||||
margin-bottom: var(#{$✨}block-spacing-vertical);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,58 +0,0 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
/**
|
||||
* Sectioning
|
||||
* Container and responsive spacings for header, main, footer
|
||||
*/
|
||||
|
||||
// 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
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Render the `main` element consistently in IE
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// 1. Remove the margin in all browsers (opinionated)
|
||||
#{$semantic-root-element} {
|
||||
width: 100%;
|
||||
margin: 0; // 1
|
||||
|
||||
> header,
|
||||
> main,
|
||||
> footer {
|
||||
width: 100%;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
|
||||
// Semantic container
|
||||
@if $enable-semantic-container {
|
||||
// Centered viewport
|
||||
$first-breakpoint: true;
|
||||
padding: var(#{$✨}block-spacing-vertical) var(#{$✨}block-spacing-horizontal);
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Semantic container
|
||||
@else {
|
||||
padding: var(#{$✨}block-spacing-vertical) 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue