feat: spacings multipliers disabled by default

picocss · Jan 22, 2024 · 6ddb506 · 6ddb506
1 parent 875207f
commit 6ddb506
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 3 deletions.
diff --git a/css/pico.classless.css.map b/css/pico.classless.css.map
diff --git a/css/pico.css.map b/css/pico.css.map
diff --git a/css/pico.fluid.classless.css.map b/css/pico.fluid.classless.css.map
diff --git a/scss/_settings.scss b/scss/_settings.scss
@@ -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;

diff --git a/scss/themes/default/_styles.scss b/scss/themes/default/_styles.scss
@@ -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 {