rei-mirrors/pico
1
0
Fork 0
mirror of https://github.com/picocss/pico synced 2025-08-11 03:46:21 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: spacings multipliers disabled by default

Browse Source
This commit is contained in:
Lucas Larroche 2024-01-22 10:02:17 +07:00
parent 875207f082
commit 6ddb506eb8
5 changed files with 72 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/pico.classless.css.map
View File

File diff suppressed because one or more lines are too long

2
css/pico.css.map
View File

File diff suppressed because one or more lines are too long

2
css/pico.fluid.classless.css.map
View File

File diff suppressed because one or more lines are too long

4
scss/_settings.scss
View File

@ -20,6 +20,10 @@ $enable-semantic-container: false !default;
// Fluid layout if disabled
$enable-viewport: true !default;
// Enable responsive spacings for <header>, <main>, <footer>, <section>, <article>
// Fixed spacings if disabled
$enable-responsive-spacings: false !default;
// Enable responsive typography
// Fixed root element size (rem) if disabled
$enable-responsive-typography: true !default;

65
scss/themes/default/_styles.scss
View File

@ -172,6 +172,71 @@
}
}
// Responsives spacings
@if $enable-responsive-spacings {
// Landmarks and section
@if map.get($modules, "layout/landmarks") or map.get($modules, "layout/section") {
#{$semantic-root-element} > header,
#{$semantic-root-element} > main,
#{$semantic-root-element} > footer,
section {
@each $key, $values in $breakpoints {
@if $values {
@media (min-width: map.get($values, "breakpoint")) {
$multiplier: 1;
@if $key == "sm" {
$multiplier: 1.25;
} @else if $key == "md" {
$multiplier: 1.5;
} @else if $key == "lg" {
$multiplier: 1.75;
} @else if $key == "xl" {
$multiplier: 2;
} @else if $key == "xxl" {
$multiplier: 2.25;
}
#{$css-var-prefix}block-spacing-vertical: calc(
var(#{$css-var-prefix}spacing) * $multiplier
);
}
}
}
}
}
// Card (<article>)
@if map.get($modules, "components/card") {
article {
@each $key, $values in $breakpoints {
@if $values {
@media (min-width: map.get($values, "breakpoint")) {
$multiplier: 1;
@if $key == "sm" {
$multiplier: 1.25;
} @else if $key == "md" {
$multiplier: 1.5;
} @else if $key == "lg" {
$multiplier: 1.75;
} @else if $key == "xl" {
$multiplier: 2;
} @else if $key == "xxl" {
$multiplier: 2.25;
}
#{$css-var-prefix}block-spacing-vertical: calc(
var(#{$css-var-prefix}spacing) * $multiplier
);
#{$css-var-prefix}block-spacing-horizontal: calc(
var(#{$css-var-prefix}spacing) * $multiplier
);
}
}
}
}
}
}
// Link
@if map.get($modules, "content/link") {
a {