Scroll snap done

Author: Diego Lafuente

config_css.scss renamed to config_css

@@ -193,11 +193,15 @@ $config-right:                       false;
 $config-right-with-scales:           false;    // deactivate the config-right first, if you want to profit.
 
 $config-scroll-behavior:             false;
-$config-scroll-padding:              false;
+$config-scroll-margin-sides:         false;
+$config-scroll-margin-block-start:   false;
+$config-scroll-margin-block-end:     false;
+$config-scroll-padding-block-start:  false;
+$config-scroll-padding-block-end:    false;
 $config-scroll-padding-sides:        false;
-$config-scroll-padding-inline:       false;
-$config-scroll-padding-inline-start: true;
-$config-scroll-padding-inline-end:   true;
+$config-scroll-padding-inline-start: false;
+$config-scroll-padding-inline-end:   false;
+$config-scroll-snap-align:           false;
 $config-scroll-snap-stop:            false;
 $config-scroll-snap-type:            false;
 

config_normalizer.scss renamed to config_normalizer

@@ -41,7 +41,7 @@ $device-xl:        1280px;
 
 
 $align-items: (
-  stretch,
+  // stretch,
   // center,
   // flex-start,
   // flex-end,
@@ -619,8 +619,8 @@ $overflows: (
   );
 
 $padding-scales: (
-  0,
-  4,
+  // 0,
+  // 4,
   // 8,
   // 16,
   // 32,
@@ -666,10 +666,19 @@ $scales: (
 // these values will be used for paddings, margins, etc.
 
 $sides: (
-  top,
-  bottom,
-  left,
-  right
+  // top,
+  // bottom,
+  // left,
+  // right
+  );
+
+$scroll-snap-aligns: (
+  // none: none,
+  // start-end: start end,
+  // center: center,
+  // inherit: inherit,
+  // initial: initial,
+  // unset: unset,
   );
 
 $scroll-behaviors: (
@@ -679,6 +688,27 @@ $scroll-behaviors: (
   // inherit
   );
 
+$scroll-margin-blocks: (
+  // 0: 0%,
+  // 10: 10px,
+  // initial: initial,
+  // unset: unset,
+  );
+
+$scroll-margin-inlines: (
+  // 0: 0%,
+  // 10: 10px,
+  // initial: initial,
+  // unset: unset,
+  );
+
+$scroll-padding-blocks: (
+  // 0: 0%,
+  // 10: 10px,
+  // initial: initial,
+  // unset: unset,
+  );
+
 $scroll-padding-inlines: (
   // 0: 0%,
   // 10: 10px,
@@ -687,10 +717,10 @@ $scroll-padding-inlines: (
   );
 
 $scroll-padding-inline-start-ends: (
-  0: 0%,
-  10: 10px,
-  initial: initial,
-  unset: unset,
+  // 0: 0%,
+  // 10: 10px,
+  // initial: initial,
+  // unset: unset,
   );
 
 $scroll-snap-stops: (

config_vars.scss renamed to config_vars

@@ -8,14 +8,48 @@
       }
     }
   }
-  &-padding {
-    @if ($config-scroll-padding) {
-      @each $scale in $padding-scales {
-        &--#{$scale} {
-          scroll-padding: #{$scale}px
+  &-nap {
+    @if ($config-scroll-snap-align) {
+      &-align {
+        @each $key, $value in $scroll-snap-aligns {
+          &--#{$key} {
+            scroll-nap-align: $value
+          }
         }
       }
     }
+  }
+  &-margin {
+    // @if ($config-scroll-margin-sides) {
+    //   @each $side in $sides {
+    //     &-#{$side} {
+    //       @each $scale in $margin-scales {
+    //         &--#{$scale} {
+    //           scroll-margin-#{$side}: #{$scale}px
+    //         }
+    //       }
+    //     }
+    //   }
+    // }
+    @if ($config-scroll-margin-block-start) {
+      .color {
+        color: red;
+      }
+      &-block-start {
+         color: red;
+      }
+    }
+    @if ($config-scroll-margin-block-end) {
+      &-block-end {
+         @each $key, $value in $scroll-margin-blocks {
+          &--#{$key} {
+            scroll-margin-block-end: $value
+          }
+         }
+      }
+    }
+  }
+  &-padding {
       // scroll padding side
     @if ($config-scroll-padding-sides) {
       @each $side in $sides {
@@ -28,11 +62,20 @@
         }
       }
     }
-    @if ($config-scroll-padding-inline) {
-      &-inline {
-         @each $key, $value in $scroll-padding-inlines {
+    @if ($config-scroll-padding-block-start) {
+      &-block-start {
+         @each $key, $value in $scroll-padding-inline-start-ends {
+          &--#{$key} {
+            scroll-padding-block-start: $value
+          }
+         }
+      }
+    }
+    @if ($config-scroll-padding-block-end) {
+      &-block-end {
+         @each $key, $value in $scroll-padding-inline-start-ends {
           &--#{$key} {
-            scroll-padding-inline: $value
+            scroll-padding-block-end: $value
           }
          }
       }