Move styles in SCSS vars to CSS vars

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

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;
}
}