mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-20 08:45:06 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

CSS Vars refactoring

Browse source
This commit is contained in:
Lucas Larroche 2021-07-02 16:54:41 +07:00
parent 14460576bf
commit d12af72cab
64 changed files with 4878 additions and 4948 deletions
Download patch file Download diff file Expand all files Collapse all files

12
scss/layout/_container.scss
View file

@ -9,13 +9,13 @@
width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: var(--spacing-gutter);
padding-left: var(--spacing-gutter);
padding-right: var(--spacing);
padding-left: var(--spacing);
}
.container {
@if map-get($breakpoints, "sm") and $enable-viewport {
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
max-width: map-get($viewports, "sm");
padding-right: 0;
@ -23,19 +23,19 @@
}
}
@if map-get($breakpoints, "md") and $enable-viewport {
@if map-get($breakpoints, "md") {
@media (min-width: map-get($breakpoints, "md")) {
max-width: map-get($viewports, "md");
}
}
@if map-get($breakpoints, "lg") and $enable-viewport {
@if map-get($breakpoints, "lg") {
@media (min-width: map-get($breakpoints, "lg")) {
max-width: map-get($viewports, "lg");
}
}
@if map-get($breakpoints, "xl") and $enable-viewport {
@if map-get($breakpoints, "xl") {
@media (min-width: map-get($breakpoints, "xl")) {
max-width: map-get($viewports, "xl");
}

42
scss/layout/_document.scss
View file

@ -36,44 +36,12 @@ html {
-moz-tab-size: 4; // 5
-ms-text-size-adjust: 100%; // 6
-webkit-text-size-adjust: 100%; // 6
background: var(--background);
color: var(--text);
font-family: var(--text-font);
font-size: var(--base-font-xs);
font-weight: var(--text-weight);
background-color: var(--background-color);
color: var(--color);
font-family: var(--font-family);
font-size: var(--font-size);
font-weight: var(--font-weight);
line-height: var(--line-height); // 1
text-rendering: optimizeLegibility;
cursor: default; // 4
@if map-get($breakpoints, "sm") and
$enable-responsive-typography {
@media (min-width: map-get($breakpoints, "sm")) {
font-size: var(--base-font-sm);
}
}
@if map-get($breakpoints, "md") and
$enable-responsive-typography {
@media (min-width: map-get($breakpoints, "md")) {
font-size: var(--base-font-md);
}
}
@if map-get($breakpoints, "lg") and
$enable-responsive-typography {
@media (min-width: map-get($breakpoints, "lg")) {
font-size: var(--base-font-lg);
}
}
@if map-get($breakpoints, "xl") and
$enable-responsive-typography {
@media (min-width: map-get($breakpoints, "xl")) {
font-size: var(--base-font-xl);
}
}
}

4
scss/layout/_grid.scss
View file

@ -6,8 +6,8 @@
*/
.grid {
grid-column-gap: var(--spacing-gutter);
grid-row-gap: var(--spacing-gutter);
grid-column-gap: var(--grid-spacing-horizontal);
grid-row-gap: var(--grid-spacing-vertical);
display: grid;
grid-template-columns: 1fr;
margin: 0;

4
scss/layout/_scroller.scss
View file

@ -10,7 +10,7 @@ figure {
overflow-x: auto;
figcaption {
padding: calc(var(--spacing-gutter) / 2) 0;
color: var(--muted-text);
padding: calc(var(--spacing) / 2) 0;
color: var(--muted-color);
}
}

34
scss/layout/_section.scss
View file

@ -4,37 +4,5 @@
*/
section {
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xs) * 2);
@if map-get($breakpoints, "sm") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "sm")) {
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-sm) * 2);
}
}
@if map-get($breakpoints, "md") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "md")) {
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-md) * 2);
}
}
@if map-get($breakpoints, "lg") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "lg")) {
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-lg) * 2);
}
}
@if map-get($breakpoints, "xl") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "xl")) {
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xl) * 2);
}
}
margin-bottom: var(--block-spacing-vertical);
}

95
scss/layout/_sectioning.scss
View file

@ -25,87 +25,48 @@ body {
> header,
> main,
> footer {
$padding-horizontal: var(--spacing-gutter) !default;
$spacing-vertical: var(--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;
// Semantic container
@if $enable-semantic-container {
padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
// sm
@if map-get($breakpoints, "sm")
and ($enable-responsive-spacings or $enable-semantic-container) {
// Centered viewport
@if $enable-viewport {
@media (min-width: map-get($breakpoints, "sm")) {
@if $enable-viewport and $enable-semantic-container {
max-width: map-get($viewports, "sm");
@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 $enable-responsive-spacings or $enable-viewport {
@if $enable-viewport or $enable-semantic-container == false {
$padding-horizontal: 0;
@if map-get($breakpoints, "md") and $enable-viewport {
@media (min-width: map-get($breakpoints, "md")) {
max-width: map-get($viewports, "md");
}
@else {
$padding-horizontal: var(--spacing-gutter);
}
@if map-get($breakpoints, "lg") and $enable-viewport {
@media (min-width: map-get($breakpoints, "lg")) {
max-width: map-get($viewports, "lg");
}
@if $enable-responsive-spacings {
$spacing-vertical: calc(var(--spacing-block) * var(--spacing-factor-sm));
}
@if map-get($breakpoints, "xl") and $enable-viewport {
@media (min-width: map-get($breakpoints, "xl")) {
max-width: map-get($viewports, "xl");
}
@else {
$spacing-vertical: var(--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 {
$spacing-vertical: calc(var(--spacing-block) * var(--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 {
$spacing-vertical: calc(var(--spacing-block) * var(--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 {
$spacing-vertical: calc(var(--spacing-block) * var(--spacing-factor-xl));
padding: $spacing-vertical $padding-horizontal;
}
}
// Semantic container
@else {
padding: var(--block-spacing-vertical) 0;
}
}
}