Custom spacing

css/spacing.css

@@ -24,7 +24,10 @@
 }
 
 /**
- * Vertical Spacing
+ * General spacing variables
+ */
+/**
+ * custom spacing
  */
 :root {
     --spacing-0:0;
@@ -45,3 +48,7 @@
 .mb0 {
     margin-bottom:var(--spacing-0);
 }
+
+:root {
+    --spacing-x-0:0;
+}

scss/_config.scss

@@ -39,14 +39,39 @@
 //        "xs": 480px,
 //);
 
+// SPACING
+// 40%  => --spacing-x-40: 40%
+// 40   => --spacing-x-40: 40px
+// 40px => --spacing-x-40px: 40px
+// 40em => --spacing-x-40em: 40em
+
 // vertical spacing
 //$vertical_spacing: (
 //        "values":0 1 2 4 6 8 12 16 24 32 48 64 96 128,
-//        "md":    0 1 2 4 6 8 12 16 24 30 40 50 60 70,
+//        "md": 0 1 2 4 6 8 12 16 24 30 40 50 60 70,
+//);
+
+// custom vertical spacing
+//$custom_vertical_spacing: (
+//        'default':10,
+//        'heading':20,
+//        'paragraph':16,
+//);
+
+// horizontal spacing
+//$horizontal_spacing: (
+//        "values":20 40,
+//        "md": 20 20,
+//);
+
+// custom horizontal spacing (gap)
+//$custom_horizontal_spacing: (
+//        "gap-vc-column":20,
+//        "gap-container":40px, // Add unit to not use the responsive value
 //);
 
 // loading class
 $loading_class: (
         "enable": true,
         "isWoocomerce": false // true if project using woocommerce
-)
+)

scss/_defs.scss

@@ -50,12 +50,16 @@ $vertical_spacing: (
         "values": 0
 );
 
+// custom vertical spacing
+$custom_vertical_spacing: ();
+
 // horizontal spacing
-//$horizontal_spacing: (
-//        "values": 0 100 200,
-//        "lg":0 50 200,
-//        "md":0 20 100,
-//);
+$horizontal_spacing: (
+        "values":0,
+);
+
+// custom horizontal spacing (gap)
+$custom_horizontal_spacing: ();
 
 // coordinate values (for position top, right, bottom left)
 $coordinate_values: (

scss/_helpers.scss

@@ -439,4 +439,45 @@
   }
 
   @return --#{$project-prefix}#{$prop};
-}
+}
+
+// Return true if a list contains a specified value.
+// ($list:0 1 2 4 6 8 12 16 24 32 48 64 96 128, $value: 48) => true
+@function map-search($list, $value) {
+  @for $i from 1 through length($list) {
+    @if (nth($list, $i) == $value) {
+      @return true;
+    }
+  }
+  @return false;
+}
+
+// Check if the value is containing any CSS unit, create CSS unit if it not
+@mixin print-variables-in-root($list_responsive_values, $list_responsive_names,  $variable_name) {
+  // get value list from $list_responsive_names
+  $allowed_values_list: map-get($list_responsive_values, "values");
+
+  :root {
+    @each $responsive_name, $responsive_value in $list_responsive_names {
+      $newValue: format-value($responsive_value); // e.g. 90px
+
+      // check if $responsive_value is containing any CSS unit
+      $has_unit: get-unit($responsive_value) != "";
+
+      // check if $responsive_value in $list_responsive_names
+      $is_allowed_value: map-search($allowed_values_list, $responsive_value);
+
+      // use responsive variable
+      @if ($is_allowed_value and not $has_unit) {
+        $newValue: var(#{get-variable(#{$variable_name}-#{replace-prop($responsive_value)})}); // => var(--$variable_name-90);
+      }
+
+      @if ($variable_name == "spacing") {
+        @include get-variable(#{$variable_name}-#{replace-prop($responsive_name)}, $newValue); //  => --$variable_name-$responsive_name: $newValue;
+      } @else {
+        @include get-variable(#{replace-prop($responsive_name)}, $newValue); //  => --$responsive_name: $newValue;
+      }
+    }
+  }
+}
+

scss/spacing.scss

@@ -19,28 +19,29 @@ $classes: ("m":"margin", "p":"padding");
 }
 
 /**
- * Vertical Spacing
+ * General spacing variables
  */
 
-@mixin vertical-spacing($vertical_spacing) {
-  @each $breakpoint, $values in $vertical_spacing {
+@mixin generate-spacing-variables($axis_spacing, $prefix) {
+  $project-prefix: map-get($info, 'variable-prefix');
+  @each $breakpoint, $values in $axis_spacing {
     @if is-breakpoint($breakpoint) {
       // Responsive value
       @include media-screen($breakpoint) {
         :root {
           @for $i from 1 through length($values) {
             $value: nth($values, $i);
-            $postfix: get-desktop-value($i, $vertical_spacing);
+            $postfix: get-desktop-value($i, $axis_spacing);
 
             //@debug $value, $postfix;
 
             /// if changed compare with desktop value
             @if $value != $postfix {
-              $previous_postfix: get-previous-breakpoint-value($i, $value, $breakpoint, $vertical_spacing);
+              $previous_postfix: get-previous-breakpoint-value($i, $value, $breakpoint, $axis_spacing);
 
               // and changed compare with the previous value
               @if $value != $previous_postfix {
-                @include get-variable(spacing-#{replace-prop($postfix)}, #{format-value($value)});
+                @include get-variable(#{$prefix}-#{replace-prop($postfix)}, #{format-value($value)});
               }
             }
           }
@@ -51,37 +52,47 @@ $classes: ("m":"margin", "p":"padding");
       :root {
         @for $i from 1 through length($values) {
           $value: nth($values, $i);
-          $postfix: get-previous-breakpoint-value($i, $value, $breakpoint, $vertical_spacing);
+          $postfix: get-previous-breakpoint-value($i, $value, $breakpoint, $axis_spacing);
           //@debug $value, $postfix;
-
-          @include get-variable(spacing-#{replace-prop($postfix)}, #{format-value($value)});
+          @include get-variable(#{$prefix}-#{replace-prop($postfix)}, #{format-value($value)});
         }
       }
 
-      // margin padding top bottom
-      @for $i from 1 through length($values) {
-        $value: nth($values, $i);
-        $postfix: get-previous-breakpoint-value($i, $value, $breakpoint, $vertical_spacing);
-        //@debug $value, $postfix;
+      @if ($prefix == "spacing") {
+        // margin padding top bottom
+        @for $i from 1 through length($values) {
+          $value: nth($values, $i);
+          $postfix: get-previous-breakpoint-value($i, $value, $breakpoint, $axis_spacing);
+          //@debug $value, $postfix;
+
+          $var: var(#{get-variable(#{$prefix}-#{replace-prop($postfix)})});
 
-        $var: var(#{get-variable(spacing-#{replace-prop($postfix)})});
 
-        .pt#{replace-prop($postfix)} {
-          padding-top: #{$var};
-        }
-        .pb#{replace-prop($postfix)} {
-          padding-bottom: #{$var};
-        }
-        .mt#{replace-prop($postfix)} {
-          margin-top: #{$var};
-        }
-        .mb#{replace-prop($postfix)} {
-          margin-bottom: #{$var};
+          .pt#{replace-prop($postfix)} {
+            padding-top: #{$var};
+          }
+          .pb#{replace-prop($postfix)} {
+            padding-bottom: #{$var};
+          }
+          .mt#{replace-prop($postfix)} {
+            margin-top: #{$var};
+          }
+          .mb#{replace-prop($postfix)} {
+            margin-bottom: #{$var};
+          }
         }
       }
 
     }
   }
+
 }
 
-@include vertical-spacing($vertical_spacing);
+/**
+ * custom spacing
+ */
+@include print-variables-in-root($vertical_spacing, $custom_vertical_spacing, 'spacing');
+@include print-variables-in-root($horizontal_spacing, $custom_horizontal_spacing, 'spacing-x');
+
+@include generate-spacing-variables($vertical_spacing, 'spacing');
+@include generate-spacing-variables($horizontal_spacing, 'spacing-x');