mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-25 18:56:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: prefix css vars

Browse source
This commit is contained in:
Lucas Larroche 2022-10-22 13:11:51 +07:00
parent cba8f385c2
commit c5a1ffc733
40 changed files with 2334 additions and 2329 deletions
Download patch file Download diff file Expand all files Collapse all files

32
scss/layout/_container.scss
View file

@ -1,6 +1,6 @@
@use "../settings";
@use "../settings" as *;
@if (settings.$enable-class-container and settings.$enable-classes) {
@if ($enable-class-container and $enable-classes) {
/**
* Container
*/
@ -10,34 +10,34 @@
width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: var(--spacing);
padding-left: var(--spacing);
padding-right: var(#{$✨}spacing);
padding-left: var(#{$✨}spacing);
}
.container {
@if map-get(settings.$breakpoints, "sm") {
@media (min-width: map-get(settings.$breakpoints, "sm")) {
max-width: map-get(settings.$viewports, "sm");
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
max-width: map-get($viewports, "sm");
padding-right: 0;
padding-left: 0;
}
}
@if map-get(settings.$breakpoints, "md") {
@media (min-width: map-get(settings.$breakpoints, "md")) {
max-width: map-get(settings.$viewports, "md");
@if map-get($breakpoints, "md") {
@media (min-width: map-get($breakpoints, "md")) {
max-width: map-get($viewports, "md");
}
}
@if map-get(settings.$breakpoints, "lg") {
@media (min-width: map-get(settings.$breakpoints, "lg")) {
max-width: map-get(settings.$viewports, "lg");
@if map-get($breakpoints, "lg") {
@media (min-width: map-get($breakpoints, "lg")) {
max-width: map-get($viewports, "lg");
}
}
@if map-get(settings.$breakpoints, "xl") {
@media (min-width: map-get(settings.$breakpoints, "xl")) {
max-width: map-get(settings.$viewports, "xl");
@if map-get($breakpoints, "xl") {
@media (min-width: map-get($breakpoints, "xl")) {
max-width: map-get($viewports, "xl");
}
}
}

14
scss/layout/_document.scss
View file

@ -1,3 +1,5 @@
@use "../settings" as *;
/**
* Document
* Content-box & Responsive typography
@ -35,12 +37,12 @@
-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);
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

12
scss/layout/_grid.scss
View file

@ -1,20 +1,20 @@
@use "../settings";
@use "../settings" as *;
@if (settings.$enable-classes and settings.$enable-grid) {
@if ($enable-classes and $enable-grid) {
/**
* Grid
* Minimal grid system with auto-layout columns
*/
.grid {
grid-column-gap: var(--grid-spacing-horizontal);
grid-row-gap: var(--grid-spacing-vertical);
grid-column-gap: var(#{$✨}grid-spacing-horizontal);
grid-row-gap: var(#{$✨}grid-spacing-vertical);
display: grid;
grid-template-columns: 1fr;
margin: 0;
@if map-get(settings.$breakpoints, "lg") {
@media (min-width: map-get(settings.$breakpoints, "lg")) {
@if map-get($breakpoints, "lg") {
@media (min-width: map-get($breakpoints, "lg")) {
grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
}
}

6
scss/layout/_scroller.scss
View file

@ -1,3 +1,5 @@
@use "../settings" as *;
/**
* Horizontal scroller (<figure>)
*/
@ -10,7 +12,7 @@ figure {
overflow-x: auto;
figcaption {
padding: calc(var(--spacing) * 0.5) 0;
color: var(--muted-color);
padding: calc(var(#{$✨}spacing) * 0.5) 0;
color: var(#{$✨}muted-color);
}
}

4
scss/layout/_section.scss
View file

@ -1,8 +1,10 @@
@use "../settings" as *;
/**
* Section
* Responsive spacings for section
*/
section {
margin-bottom: var(--block-spacing-vertical);
margin-bottom: var(#{$✨}block-spacing-vertical);
}

36
scss/layout/_sectioning.scss
View file

@ -1,4 +1,4 @@
@use "../settings";
@use "../settings" as *;
/**
* Sectioning
@ -19,7 +19,7 @@ main {
// ––––––––––––––––––––
// 1. Remove the margin in all browsers (opinionated)
#{settings.$semantic-root-element} {
#{$semantic-root-element} {
width: 100%;
margin: 0; // 1
@ -31,34 +31,34 @@ main {
margin-left: auto;
// Semantic container
@if settings.$enable-semantic-container {
padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
@if $enable-semantic-container {
padding: var(#{$✨}block-spacing-vertical) var(#{$✨}block-spacing-horizontal);
// Centered viewport
@if settings.$enable-viewport {
@if map-get(settings.$breakpoints, "sm") and settings.$enable-viewport {
@media (min-width: map-get(settings.$breakpoints, "sm")) {
max-width: map-get(settings.$viewports, "sm");
@if $enable-viewport {
@if map-get($breakpoints, "sm") and $enable-viewport {
@media (min-width: map-get($breakpoints, "sm")) {
max-width: map-get($viewports, "sm");
padding-right: 0;
padding-left: 0;
}
}
@if map-get(settings.$breakpoints, "md") and settings.$enable-viewport {
@media (min-width: map-get(settings.$breakpoints, "md")) {
max-width: map-get(settings.$viewports, "md");
@if map-get($breakpoints, "md") and $enable-viewport {
@media (min-width: map-get($breakpoints, "md")) {
max-width: map-get($viewports, "md");
}
}
@if map-get(settings.$breakpoints, "lg") and settings.$enable-viewport {
@media (min-width: map-get(settings.$breakpoints, "lg")) {
max-width: map-get(settings.$viewports, "lg");
@if map-get($breakpoints, "lg") and $enable-viewport {
@media (min-width: map-get($breakpoints, "lg")) {
max-width: map-get($viewports, "lg");
}
}
@if map-get(settings.$breakpoints, "xl") and settings.$enable-viewport {
@media (min-width: map-get(settings.$breakpoints, "xl")) {
max-width: map-get(settings.$viewports, "xl");
@if map-get($breakpoints, "xl") and $enable-viewport {
@media (min-width: map-get($breakpoints, "xl")) {
max-width: map-get($viewports, "xl");
}
}
}
@ -66,7 +66,7 @@ main {
// Semantic container
@else {
padding: var(--block-spacing-vertical) 0;
padding: var(#{$✨}block-spacing-vertical) 0;
}
}
}