@dscout/particle 1.0.0-alpha.2 → 1.0.0-alpha.3

package/styles/utilities/_spacing.scss

@@ -1,579 +1,114 @@
-/*
-@styleguide
-@title Margins
+@use "sass:map";
 
-Element margins can be controlled in much the same fashion as heights.
-The possible values are:
-- `auto`
-- `none`
-- `xs` (.25em)
-- `s` (.75em)
-- `m` (1em)
-- `base` (2em)
-- `l` (3em)
-- `xl` (4em)
+$base-enums: (
+  'none': 0,
+  '0\\.25': .25em,
+  '0\\.5': .5em,
+  '0\\.75': .75em,
+  '1': 1em,
+  '1\\.25': 1.25em,
+  '1\\.5': 1.5em,
+  '2': 2em,
+  '3': 3em,
+  '4': 4em,
+);
 
-<div class="margin--2">2em margin on all sides</div>
+$margin-enums: map.set($base-enums, 'auto', auto);
 
-    <div class="margin--2">2em margin on all sides</div>
+/*=== Margins ===*/
 
-Enum values can be applied to each side individually.
-Possible values are:
-- `t` (top)
-- `r` (right)
-- `b` (bottom)
-- `l` (left)
-
-<div class="margin-l--2">2em margin on the left only</div>
-
-```html
-<div class="margin-l--2">2em margin on the left only</div>
-```
-
-Horizontal or vertical margin can be specified like so:
-
-<div class="margin-h--2">2em margin on left and right</div>
-
-```html
-<div class="margin-h--2">2em margin on left and right</div>
-```
-
-<div class="margin-v--2">2em margin on top and bottom</div>
-
-```html
-<div class="margin-v--2">2em margin on top and bottom</div>
-```
-*/
-// === MARGINS === //
-
-.margin--auto  { margin: auto; }
-.margin--0\.25 { margin: 0.25em; }
-.margin--0\.5  { margin: 0.5em; }
-.margin--0\.75 { margin: 0.75em; }
-.margin--1     { margin: 1em; }
-.margin--1\.5  { margin: 1.5em; }
-.margin--2     { margin: 2em; }
-.margin--3     { margin: 3em; }
-.margin--4     { margin: 4em; }
-.margin--none  { margin: 0; }
-
-.margin-v--auto {
-  margin-bottom: auto;
-  margin-top: auto;
-}
-.margin-v--0\.25 {
-  margin-bottom: .25em;
-  margin-top:    .25em;
-}
-.margin-v--0\.5 {
-  margin-bottom: .5em;
-  margin-top:    .5em;
-}
-.margin-v--0\.75 {
-  margin-bottom: .75em;
-  margin-top:    .75em;
-}
-.margin-v--1 {
-  margin-bottom: 1em;
-  margin-top:    1em;
-}
-.margin-v--1\.5 {
-  margin-bottom: 1.5em;
-  margin-top:    1.5em;
-}
-.margin-v--2 {
-  margin-bottom: 2em;
-  margin-top:    2em;
-}
-.margin-v--3 {
-  margin-bottom: 3em;
-  margin-top:    3em;
-}
-.margin-v--4 {
-  margin-bottom: 4em;
-  margin-top:    4em;
-}
-.margin-v--none {
-  margin-bottom: 0;
-  margin-top:    0;
-}
-
-.margin-h--auto {
-  margin-left: auto;
-  margin-right: auto;
-}
-.margin-h--0\.25 {
-  margin-left:  .25em;
-  margin-right: .25em;
-}
-.margin-h--0\.5 {
-  margin-left:  .5em;
-  margin-right: .5em;
-}
-.margin-h--0\.75 {
-  margin-left:  .75em;
-  margin-right: .75em;
-}
-.margin-h--1 {
-  margin-left:  1em;
-  margin-right: 1em;
-}
-.margin-h--1\.5 {
-  margin-left:  1.5em;
-  margin-right: 1.5em;
-}
-.margin-h--2 {
-  margin-left:  2em;
-  margin-right: 2em;
-}
-.margin-h--3 {
-  margin-left:  3em;
-  margin-right: 3em;
-}
-.margin-h--4 {
-  margin-left:  4em;
-  margin-right: 4em;
-}
-.margin-h--none {
-  margin-left:  0;
-  margin-right: 0;
-}
-
-.margin-l--auto  { margin-left: auto; }
-.margin-l--0\.25 { margin-left: 0.25em; }
-.margin-l--0\.5  { margin-left: 0.5em; }
-.margin-l--0\.75 { margin-left: 0.75em; }
-.margin-l--1     { margin-left: 1em; }
-.margin-l--1\.5  { margin-left: 1.5em; }
-.margin-l--2     { margin-left: 2em; }
-.margin-l--3     { margin-left: 3em; }
-.margin-l--4     { margin-left: 4em; }
-.margin-l--none  { margin-left: 0; }
-
-.margin-r--auto  { margin-right: auto; }
-.margin-r--0\.25 { margin-right: 0.25em; }
-.margin-r--0\.5  { margin-right: 0.5em; }
-.margin-r--0\.75 { margin-right: 0.75em; }
-.margin-r--1     { margin-right: 1em; }
-.margin-r--1\.5  { margin-right: 1.5em; }
-.margin-r--2     { margin-right: 2em; }
-.margin-r--3     { margin-right: 3em; }
-.margin-r--4     { margin-right: 4em; }
-.margin-r--none  { margin-right: 0; }
-
-.margin-b--auto  { margin-bottom: auto; }
-.margin-b--0\.25 { margin-bottom: 0.25em; }
-.margin-b--0\.5  { margin-bottom: 0.5em; }
-.margin-b--0\.75 { margin-bottom: 0.75em; }
-.margin-b--1     { margin-bottom: 1em; }
-.margin-b--1\.5  { margin-bottom: 1.5em; }
-.margin-b--2     { margin-bottom: 2em; }
-.margin-b--3     { margin-bottom: 3em; }
-.margin-b--4     { margin-bottom: 4em; }
-.margin-b--none  { margin-bottom: 0; }
-
-.margin-t--auto  { margin-top: auto; }
-.margin-t--0\.25 { margin-top: 0.25em; }
-.margin-t--0\.5  { margin-top: 0.5em; }
-.margin-t--0\.75 { margin-top: 0.75em; }
-.margin-t--1     { margin-top: 1em; }
-.margin-t--1\.5  { margin-top: 1.5em; }
-.margin-t--2     { margin-top: 2em; }
-.margin-t--3     { margin-top: 3em; }
-.margin-t--4     { margin-top: 4em; }
-.margin-t--none  { margin-top: 0; }
-
-/*
-@styleguide
-@title Padding
-
-Element padding can be controlled in much the same fashion as margins.
-The possible values are:
-- `none`
-- `xs` (.25em)
-- `s` (.75em)
-- `m` (1em)
-- `base` (2em)
-- `l` (3em)
-- `xl` (4em)
-
-<div class="padding--2">2em padding on all sides</div>
-
-    <div class="padding--2">2em padding on all sides</div>
-
-Enum values can be applied to each side individually.
-Possible values are:
-- `t` (top)
-- `r` (right)
-- `b` (bottom)
-- `l` (left)
-
-<div class="padding-l--2">2em padding on the left only</div>
-
-```html
-<div class="padding-l--2">2em padding on the left only</div>
-```
-
-Horizontal or vertical padding can be specified like so:
-
-<div class="padding-h--2">2em padding on left and right</div>
-
-```html
-<div class="padding-h--2">2em padding on left and right</div>
-```
-
-<div class="padding-v--2">2em padding on top and bottom</div>
-
-```html
-<div class="padding-v--2">2em padding on top and bottom</div>
-```
-*/
-// === PADDINGS === //
-
-.padding--0\.25 { padding: .25em; }
-.padding--0\.5  { padding: .5em; }
-.padding--0\.75 { padding: .75em; }
-.padding--1     { padding: 1em; }
-.padding--1\.5  { padding: 1.5em; }
-.padding--2     { padding: 2em; }
-.padding--3     { padding: 3em; }
-.padding--4     { padding: 4em; }
-.padding--none  { padding: 0; }
-
-.padding-v--0\.25 {
-  padding-bottom: .25em;
-  padding-top:    .25em;
-}
-.padding-v--0\.5 {
-  padding-bottom: .5em;
-  padding-top:    .5em;
-}
-.padding-v--0\.75 {
-  padding-bottom: .75em;
-  padding-top:    .75em;
-}
-.padding-v--1 {
-  padding-top:    1em;
-  padding-bottom: 1em;
-}
-.padding-v--1\.5 {
-  padding-top:    1.5em;
-  padding-bottom: 1.5em;
-}
-.padding-v--2 {
-  padding-bottom: 2em;
-  padding-top:    2em;
-}
-.padding-v--3 {
-  padding-bottom: 3em;
-  padding-top:    3em;
-}
-.padding-v--4 {
-  padding-bottom: 4em;
-  padding-top:    4em;
-}
-.padding-v--none {
-  padding-bottom: 0;
-  padding-top:    0;
+@each $enum, $value in $margin-enums {
+  .margin--#{$enum} { margin: $value; }
 }
 
-.padding-h--0\.25 {
-  padding-left:  .25em;
-  padding-right: .25em;
-}
-.padding-h--0\.5 {
-  padding-left:  .5em;
-  padding-right: .5em;
-}
-.padding-h--0\.75 {
-  padding-left:  .75em;
-  padding-right: .75em;
-}
-.padding-h--1 {
-  padding-left:  1em;
-  padding-right: 1em;
-}
-.padding-h--1\.5 {
-  padding-left:  1.5em;
-  padding-right: 1.5em;
-}
-.padding-h--2 {
-  padding-left:  2em;
-  padding-right: 2em;
-}
-.padding-h--3 {
-  padding-left:  3em;
-  padding-right: 3em;
-}
-.padding-h--4 {
-  padding-left:  4em;
-  padding-right: 4em;
-}
-.padding-h--none {
-  padding-left:  0;
-  padding-right: 0;
-}
-
-.padding-l--0\.25 { padding-left: .25em; }
-.padding-l--0\.5  { padding-left: .5em; }
-.padding-l--0\.75 { padding-left: .75em; }
-.padding-l--1     { padding-left: 1em; }
-.padding-l--1\.5  { padding-left: 1.5em; }
-.padding-l--2     { padding-left: 2em; }
-.padding-l--3     { padding-left: 3em; }
-.padding-l--4     { padding-left: 4em; }
-.padding-l--none  { padding-left: 0; }
-
-.padding-r--0\.25 { padding-right: .25em; }
-.padding-r--0\.5  { padding-right: .5em; }
-.padding-r--0\.75 { padding-right: .75em; }
-.padding-r--1     { padding-right: 1em; }
-.padding-r--1\.5  { padding-right: 1.5em; }
-.padding-r--2     { padding-right: 2em; }
-.padding-r--3     { padding-right: 3em; }
-.padding-r--4     { padding-right: 4em; }
-.padding-r--none  { padding-right: 0; }
-
-.padding-b--0\.25 { padding-bottom: .25em; }
-.padding-b--0\.5  { padding-bottom: .5em; }
-.padding-b--0\.75 { padding-bottom: .75em; }
-.padding-b--1     { padding-bottom: 1em; }
-.padding-b--1\.5  { padding-bottom: 1.5em; }
-.padding-b--2     { padding-bottom: 2em; }
-.padding-b--3     { padding-bottom: 3em; }
-.padding-b--4     { padding-bottom: 4em; }
-.padding-b--none  { padding-bottom: 0; }
-
-.padding-t--0\.25 { padding-top: .25em; }
-.padding-t--0\.5  { padding-top: .5em; }
-.padding-t--0\.75 { padding-top: .75em; }
-.padding-t--1     { padding-top: 1em; }
-.padding-t--1\.5  { padding-top: 1.5em; }
-.padding-t--2     { padding-top: 2em; }
-.padding-t--3     { padding-top: 3em; }
-.padding-t--4     { padding-top: 4em; }
-.padding-t--none  { padding-top: 0; }
-
-/*
-@styleguide
-@title Spacing
-
-Sets even horizontal or vertical margins between children, ensuring that the
-last child does not have a margin.
-
-Horizontal spacing classes:
-
-- `.spacing-h--0.25`
-- `.spacing-h--0.5`
-- `.spacing-h--0.75`
-- `.spacing-h--1`
-- `.spacing-h--1.5`
-- `.spacing-h--2`
-- `.spacing-h--3`
-- `.spacing-h--4`
-
-Vertical spacing classes:
-
-- `.spacing-v--0.25`
-- `.spacing-v--0.5`
-- `.spacing-v--0.75`
-- `.spacing-v--1`
-- `.spacing-v--1.5`
-- `.spacing-v--2`
-- `.spacing-v--3`
-- `.spacing-v--4`
-
-Examples:
-
-`.spacing-h--1`
-
-<div class="flex spacing-h--1">
-  <div>Item 1</div>
-  <div>Item 2</div>
-  <div>Item 3</div>
-</div>
-
-```html
-<div class="flex spacing-h--1">
-  <div>Item 1</div>
-  <div>Item 2</div>
-  <div>Item 3</div>
-</div>
-```
-
-`.spacing-v--2`
-
-<div class="spacing-v--2">
-  <div>Item 1</div>
-  <div>Item 2</div>
-  <div>Item 3</div>
-</div>
-
-```html
-<div class="spacing-v--2">
-  <div>Item 1</div>
-  <div>Item 2</div>
-  <div>Item 3</div>
-</div>
-```
-*/
-
-.spacing-h--0\.25 {
-  > * {
-    margin-right: .25em;
-
-    &:last-child {
-      margin-right: 0;
-    }
+@each $enum, $value in $margin-enums {
+  .margin-v--#{$enum} {
+    margin-bottom: $value;
+    margin-top: $value;
   }
 }
 
-.spacing-h--0\.5 {
-  > * {
-    margin-right: 0.5em;
-
-    &:last-child {
-      margin-right: 0;
-    }
+@each $enum, $value in $margin-enums {
+  .margin-h--#{$enum} {
+    margin-left: $value;
+    margin-right: $value;
   }
 }
 
-.spacing-h--0\.75 {
-  > * {
-    margin-right: .75em;
-
-    &:last-child {
-      margin-right: 0;
-    }
-  }
+@each $enum, $value in $margin-enums {
+  .margin-l--#{$enum} { margin-left: $value; }
 }
 
-.spacing-h--1 {
-  > * {
-    margin-right: 1em;
-
-    &:last-child {
-      margin-right: 0;
-    }
-  }
+@each $enum, $value in $margin-enums {
+  .margin-r--#{$enum} { margin-right: $value; }
 }
 
-.spacing-h--1\.5 {
-  > * {
-    margin-right: 1.5em;
-
-    &:last-child {
-      margin-right: 0;
-    }
-  }
+@each $enum, $value in $margin-enums {
+  .margin-b--#{$enum} { margin-bottom: $value; }
 }
 
-.spacing-h--2 {
-  > * {
-    margin-right: 2em;
-
-    &:last-child {
-      margin-right: 0;
-    }
-  }
+@each $enum, $value in $margin-enums {
+  .margin-t--#{$enum} { margin-top: $value; }
 }
 
-.spacing-h--3 {
-  > * {
-    margin-right: 3em;
+/*=== Padding ===*/
 
-    &:last-child {
-      margin-right: 0;
-    }
-  }
+@each $enum, $value in $base-enums {
+  .padding--#{$enum} { padding: $value; }
 }
 
-.spacing-h--4 {
-  > * {
-    margin-right: 4em;
-
-    &:last-child {
-      margin-right: 0;
-    }
-  }
-}
-
-.spacing-v--0\.25 {
-  > * {
-    margin-right: .25em;
-
-    &:last-child {
-      margin-right: 0;
-    }
+@each $enum, $value in $base-enums {
+  .padding-v--#{$enum} {
+    padding-bottom: $value;
+    padding-top: $value;
   }
 }
 
-.spacing-v--0\.5 {
-  > * {
-    margin-right: 0.5em;
-
-    &:last-child {
-      margin-right: 0;
-    }
+@each $enum, $value in $base-enums {
+  .padding-h--#{$enum} {
+    padding-left: $value;
+    padding-right: $value;
   }
 }
 
-.spacing-v--0\.75 {
-  > * {
-    margin-bottom: .75em;
-
-    &:last-child {
-      margin-right: 0;
-    }
-  }
+@each $enum, $value in $base-enums {
+  .padding-l--#{$enum} { padding-left: $value; }
 }
 
-.spacing-v--1 {
-  > * {
-    margin-bottom: 1em;
-
-    &:last-child {
-      margin-right: 0;
-    }
-  }
+@each $enum, $value in $base-enums {
+  .padding-r--#{$enum} { padding-right: $value; }
 }
 
-.spacing-v--1\.5 {
-  > * {
-    margin-bottom: 1.5em;
-
-    &:last-child {
-      margin-right: 0;
-    }
-  }
+@each $enum, $value in $base-enums {
+  .padding-b--#{$enum} { padding-bottom: $value; }
 }
 
-.spacing-v--2 {
-  > * {
-    margin-bottom: 2em;
-
-    &:last-child {
-      margin-right: 0;
-    }
-  }
+@each $enum, $value in $base-enums {
+  .padding-t--#{$enum} { padding-top: $value; }
 }
 
-.spacing-v--3 {
-  > * {
-    margin-bottom: 3em;
+/*=== Spacing ===*/
 
-    &:last-child {
-      margin-right: 0;
+@each $enum, $value in $base-enums {
+  .spacing-h--#{$enum} {
+    > * {
+      margin-right: $value;
+  
+      &:last-child {
+        margin-right: 0;
+      }
     }
   }
 }
 
-.spacing-v--4 {
-  > * {
-    margin-bottom: 4em;
-
-    &:last-child {
-      margin-right: 0;
+@each $enum, $value in $base-enums {
+  .spacing-v--#{$enum} {
+    > * {
+      margin-bottom: $value;
+  
+      &:last-child {
+        margin-bottom: 0;
+      }
     }
   }
 }