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

Move styles in SCSS vars to CSS vars

Browse source
This commit is contained in:
Lucas 2020-09-29 08:38:35 +07:00
parent f67044ecae
commit 9b1ef33577
49 changed files with 2921 additions and 1841 deletions
Download patch file Download diff file Expand all files Collapse all files

4
scss/layout/_container.scss
View file

@ -9,8 +9,8 @@
width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: $spacing-gutter;
padding-left: $spacing-gutter;
padding-right: var(--spacing-gutter);
padding-left: var(--spacing-gutter);
}
.container {

20
scss/layout/_document.scss
View file

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

4
scss/layout/_grid.scss
View file

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

2
scss/layout/_scroller.scss
View file

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

14
scss/layout/_section.scss
View file

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

24
scss/layout/_sectioning.scss
View file

@ -25,8 +25,8 @@ body {
> header,
> main,
> footer {
$padding-horizontal: $spacing-gutter !default;
$spacing-vertical: $spacing-block !default;
$padding-horizontal: var(--spacing-gutter) !default;
$spacing-vertical: var(--spacing-block) !default;
width: 100%;
margin-right: auto;
margin-left: auto;
@ -50,13 +50,13 @@ body {
$padding-horizontal: 0;
}
@else {
$padding-horizontal: $spacing-gutter;
$padding-horizontal: var(--spacing-gutter);
}
@if $enable-responsive-spacings and map-get($spacing-factor, "sm") {
$spacing-vertical: $spacing-block*map-get($spacing-factor, "sm");
@if $enable-responsive-spacings {
$spacing-vertical: calc(var(--spacing-block) * var(--spacing-factor-sm));
}
@else {
$spacing-vertical: $spacing-block;
$spacing-vertical: var(--spacing-block);
}
padding: $spacing-vertical $padding-horizontal;
}
@ -71,8 +71,8 @@ body {
@if $enable-viewport and $enable-semantic-container {
max-width: map-get($viewports, "md");
}
@if $enable-responsive-spacings and map-get($spacing-factor, "md") {
$spacing-vertical: $spacing-block*map-get($spacing-factor, "md");
@if $enable-responsive-spacings {
$spacing-vertical: calc(var(--spacing-block) * var(--spacing-factor-md));
padding: $spacing-vertical $padding-horizontal;
}
}
@ -86,8 +86,8 @@ body {
@if $enable-viewport and $enable-semantic-container {
max-width: map-get($viewports, "lg");
}
@if $enable-responsive-spacings and map-get($spacing-factor, "lg") {
$spacing-vertical: $spacing-block*map-get($spacing-factor, "lg");
@if $enable-responsive-spacings {
$spacing-vertical: calc(var(--spacing-block) * var(--spacing-factor-lg));
padding: $spacing-vertical $padding-horizontal;
}
}
@ -101,8 +101,8 @@ body {
@if $enable-viewport and $enable-semantic-container {
max-width: map-get($viewports, "xl");
}
@if $enable-responsive-spacings and map-get($spacing-factor, "xl") {
$spacing-vertical: $spacing-block*map-get($spacing-factor, "xl");
@if $enable-responsive-spacings {
$spacing-vertical: calc(var(--spacing-block) * var(--spacing-factor-xl));
padding: $spacing-vertical $padding-horizontal;
}
}