@softheon/armature 19.14.1 → 19.16.0

package/assets/styles/_utility.scss

@@ -1,824 +1,57 @@
+@use "sass:meta";
 @use "./variables" as vars;
 
-/** This file includes classes/attributes to control the margin & padding of elements */
-
-/** Margin Styling */
-
-/** M-Top */
-[m-t-auto],
-.m-t-auto {
-  margin-top: auto !important;
-}
-[m-t-0],
-.m-t-0 {
-  margin-top: 0px !important;
-}
-[m-t-5],
-.m-t-5 {
-  margin-top: 5px !important;
-}
-[m-t-10],
-.m-t-10 {
-  margin-top: 10px !important;
-}
-[m-t-15],
-.m-t-15 {
-  margin-top: 15px !important;
-}
-[m-t-20],
-.m-t-20 {
-  margin-top: 20px !important;
-}
-[m-t-24],
-.m-t-24 {
-  margin-top: 24px !important;
-}
-[m-t-25],
-.m-t-25 {
-  margin-top: 25px !important;
-}
-[m-t-30],
-.m-t-30 {
-  margin-top: 30px !important;
-}
-[m-t-32],
-.m-t-32 {
-  margin-top: 32px !important;
-}
-[m-t-40],
-.m-t-40 {
-  margin-top: 40px !important;
-}
-[m-t-45],
-.m-t-45 {
-  margin-top: 45px !important;
-}
-[m-t-50],
-.m-t-50 {
-  margin-top: 45px !important;
-}
-.m-t-55,
-[m-t-55] {
-  margin-top: 55px !important;
-}
-[m-t-60],
-.m-t-60 {
-  margin-top: 60px !important;
-}
-
-/** M-Right */
-.m-r-auto,
-[m-r-auto] {
-  margin-right: auto !important;
-}
-.m-r-0,
-[m-r-0] {
-  margin-right: 0px !important;
-}
-.m-r-5,
-[m-r-5] {
-  margin-right: 5px !important;
-}
-.m-r-10,
-[m-r-10] {
-  margin-right: 10px !important;
-}
-.m-r-16,
-[m-r-16] {
-  margin-right: 16px !important;
-}
-.m-r-20,
-[m-r-20] {
-  margin-right: 20px !important;
-}
-.m-r-60,
-[m-r-60] {
-  margin-right: 60px !important;
-}
-
-/** M-Bottom */
-[m-b-auto],
-.m-b-auto {
-  margin-bottom: auto !important;
-}
-[m-b-0],
-.m-b-0 {
-  margin-bottom: 0px !important;
-}
-[m-b-5],
-.m-b-5 {
-  margin-bottom: 5px !important;
-}
-[m-b-10],
-.m-b-10 {
-  margin-bottom: 10px !important;
-}
-[m-b-15],
-.m-b-15 {
-  margin-bottom: 15px !important;
-}
-[m-b-20],
-.m-b-20 {
-  margin-bottom: 20px !important;
-}
-[m-b-24],
-.m-b-24 {
-  margin-bottom: 24px !important;
-}
-[m-b-25],
-.m-b-25 {
-  margin-bottom: 25px !important;
-}
-[m-b-30],
-.m-b-30 {
-  margin-bottom: 30px !important;
-}
-[m-b-37],
-.m-b-37 {
-  margin-bottom: 37px !important;
-}
-[m-b-45],
-.m-b-45 {
-  margin-bottom: 45px !important;
-}
-[m-b-50],
-.m-b-50 {
-  margin-bottom: 50px !important;
-}
-[m-b-65],
-.m-b-65 {
-  margin-bottom: 65px !important;
-}
-
-/** M-Left */
-.m-l-auto,
-[m-l-auto] {
-  margin-left: auto !important;
-}
-.m-l-0,
-[m-l-0] {
-  margin-left: 0px !important;
-}
-.m-l-5,
-[m-l-5] {
-  margin-left: 5px !important;
-}
-.m-l-8,
-[m-l-8] {
-  margin-left: 8px !important;
-}
-.m-l-10,
-[m-l-10] {
-  margin-left: 10px !important;
-}
-.m-l-15,
-[m-l-15] {
-  margin-left: 15px !important;
-}
-[m-l-20],
-.m-l-20 {
-  margin-left: 20px !important;
-}
-.m-l-35,
-[m-l-35] {
-  margin-left: 35px !important;
-}
-
-/** M-Horizontal */
-.m-h-auto,
-[m-h-auto] {
-  margin-left: auto !important;
-  margin-right: auto !important;
-}
-.m-h-0,
-[m-h-0] {
-  margin-left: 0px !important;
-  margin-right: 0px !important;
-}
-.m-h-5,
-[m-h-5] {
-  margin-left: 5px !important;
-  margin-right: 5px !important;
-}
-.m-h-10,
-[m-h-10] {
-  margin-left: 10px !important;
-  margin-right: 10px !important;
-}
-.m-h-15,
-[m-h-15] {
-  margin-left: 15px !important;
-  margin-right: 15px !important;
-}
-.m-h-20,
-[m-h-20] {
-  margin-left: 20px !important;
-  margin-right: 20px !important;
-}
-.m-h-24,
-[m-h-24] {
-  margin-left: 24px !important;
-  margin-right: 24px !important;
-}
-.m-h-25,
-[m-h-25] {
-  margin-left: 25px !important;
-  margin-right: 25px !important;
-}
-.m-h-30,
-[m-h-30] {
-  margin-left: 30px !important;
-  margin-right: 30px !important;
-}
-.m-h-68,
-[m-h-68] {
-  margin-left: 68px !important;
-  margin-right: 68px !important;
-}
-.m-h-70,
-[m-h-70] {
-  margin-left: 70px !important;
-  margin-right: 70px !important;
-}
-
-/** M-Vertical */
-.m-v-auto,
-[m-v-auto] {
-  margin-top: auto !important;
-  margin-bottom: auto !important;
-}
-.m-v-0,
-[m-v-0] {
-  margin-top: 0px !important;
-  margin-bottom: 0px !important;
-}
-.m-v-5,
-[m-v-5] {
-  margin-top: 5px !important;
-  margin-bottom: 5px !important;
-}
-.m-v-10,
-[m-v-10] {
-  margin-top: 10px !important;
-  margin-bottom: 10px !important;
-}
-[m-v-15],
-.m-v-15 {
-  margin-top: 15px !important;
-  margin-bottom: 15px !important;
-}
-.m-v-18,
-[m-v-18] {
-  margin-top: 18px !important;
-  margin-bottom: 18px !important;
-}
-.m-v-20,
-[m-v-20] {
-  margin-top: 20px !important;
-  margin-bottom: 20px !important;
-}
-[m-v-24],
-.m-v-24 {
-  margin-top: 24px !important;
-  margin-bottom: 24px !important;
-}
-[m-v-25],
-.m-v-25 {
-  margin-top: 25px !important;
-  margin-bottom: 25px !important;
-}
-.m-v-30,
-[m-v-30] {
-  margin-top: 30px !important;
-  margin-bottom: 30px !important;
-}
-.m-v-35,
-[m-v-35] {
-  margin-top: 35px !important;
-  margin-bottom: 35px !important;
-}
-.m-v-40,
-[m-v-40] {
-  margin-top: 40px !important;
-  margin-bottom: 40px !important;
-}
-.m-v-45,
-[m-v-45] {
-  margin-top: 45px !important;
-  margin-bottom: 45px !important;
-}
-.m-v-50,
-[m-v-50] {
-  margin-top: 50px !important;
-  margin-bottom: 50px !important;
-}
-.m-v-60,
-[m-v-60] {
-  margin-top: 60px !important;
-  margin-bottom: 60px !important;
-}
-
-/** M-All */
-.m-a-auto,
-[m-a-auto] {
-  margin: auto !important;
-}
-.m-a-0,
-[m-a-0] {
-  margin: 0px !important;
-}
-.m-a-5,
-[m-a-5] {
-  margin: 5px !important;
-}
-.m-a-10,
-[m-a-10] {
-  margin: 10px !important;
-}
-.m-a-15,
-[m-a-15] {
-  margin: 15px !important;
-}
-.m-a-20,
-[m-a-20] {
-  margin: 20px !important;
-}
-.m-a-25,
-[m-a-25] {
-  margin: 25px !important;
-}
-.m-a-30,
-[m-a-30] {
-  margin: 30px !important;
-}
-
-/** Padding Styling */
-
-/** P-Top */
-[p-t-0],
-.p-t-0 {
-  padding-top: 0px !important;
-}
-[p-t-4],
-.p-t-4 {
-  padding-top: 4px !important;
-}
-[p-t-5],
-.p-t-5 {
-  padding-top: 5px !important;
-}
-[p-t-6],
-.p-t-6 {
-  padding-top: 6px !important;
-}
-[p-t-8],
-.p-t-8 {
-  padding-top: 8px !important;
-}
-[p-t-10],
-.p-t-10 {
-  padding-top: 10px !important;
-}
-[p-t-12],
-.p-t-12 {
-  padding-top: 12px !important;
-}
-.p-t-15,
-[p-t-15] {
-  padding-top: 15px !important;
-}
-.p-t-16,
-[p-t-16] {
-  padding-top: 16px !important;
-}
-[p-t-17],
-.p-t-17 {
-  padding-top: 17px !important;
-}
-[p-t-18],
-.p-t-18 {
-  padding-top: 18px !important;
-}
-[p-t-20],
-.p-t-20 {
-  padding-top: 20px !important;
-}
-[p-t-24],
-.p-t-24 {
-  padding-top: 24px !important;
-}
-[p-t-25],
-.p-t-25 {
-  padding-top: 25px !important;
-}
-.p-t-30,
-[p-t-30] {
-  padding-top: 30px !important;
-}
-.p-t-35,
-[p-t-35] {
-  padding-top: 35px !important;
-}
-.p-t-40,
-[p-t-40] {
-  padding-top: 40px !important;
-}
-.p-t-45,
-[p-t-45] {
-  padding-top: 45px !important;
-}
-.p-t-48,
-[p-t-48] {
-  padding-top: 48px !important;
-}
-.p-t-50,
-[p-t-50] {
-  padding-top: 50px !important;
-}
-.p-t-55,
-[p-t-55] {
-  padding-top: 55px !important;
-}
-.p-t-60,
-[p-t-60] {
-  padding-top: 60px !important;
-}
-.p-t-65,
-[p-t-60] {
-  padding-top: 65px !important;
-}
-
-/** P-Right */
-[p-r-0],
-.p-r-0 {
-  padding-right: 0px !important;
-}
-[p-r-5],
-.p-r-5 {
-  padding-right: 5px !important;
-}
-[p-r-6],
-.p-r-6 {
-  padding-right: 6px !important;
-}
-[p-r-10],
-.p-r-10 {
-  padding-right: 10px !important;
-}
-[p-r-15],
-.p-r-15 {
-  padding-right: 15px !important;
-}
-[p-r-20],
-.p-r-20 {
-  padding-right: 20px !important;
-}
-[p-r-25],
-.p-r-25 {
-  padding-right: 25px !important;
-}
-[p-r-30],
-.p-r-30 {
-  padding-right: 30px !important;
-}
-
-/** P-Bottom */
-[p-b-0],
-.p-b-0 {
-  padding-bottom: 0px !important;
-}
-[p-b-5],
-.p-b-5 {
-  padding-bottom: 5px !important;
-}
-[p-b-10],
-.p-b-10 {
-  padding-bottom: 10px !important;
-}
-[p-b-12],
-.p-b-12 {
-  padding-bottom: 12px !important;
-}
-[p-b-15],
-.p-b-15 {
-  padding-bottom: 15px !important;
-}
-[p-b-20],
-.p-b-20 {
-  padding-bottom: 20px !important;
-}
-[p-b-25],
-.p-b-25 {
-  padding-bottom: 25px !important;
-}
-[p-b-30],
-.p-b-30 {
-  padding-bottom: 30px !important;
-}
-[p-b-35],
-.p-b-35 {
-  padding-bottom: 35px !important;
-}
-[p-b-40],
-.p-b-40 {
-  padding-bottom: 40px !important;
-}
-[p-b-45],
-.p-b-45 {
-  padding-bottom: 45px !important;
-}
-[p-b-50],
-.p-b-50 {
-  padding-bottom: 50px !important;
-}
-[p-b-55],
-.p-b-55 {
-  padding-bottom: 55px !important;
-}
-[p-b-60],
-.p-b-60 {
-  padding-bottom: 60px !important;
-}
-[p-b-100],
-.p-b-100 {
-  padding-bottom: 100px !important;
-}
-
-/** P-Left */
-.p-l-0,
-[p-l-0] {
-  padding-left: 0px !important;
-}
-.p-l-4,
-[p-l-4] {
-  padding-left: 4px !important;
-}
-.p-l-5,
-[p-l-5] {
-  padding-left: 5px !important;
-}
-.p-l-10,
-[p-l-10] {
-  padding-left: 10px !important;
-}
-.p-l-12,
-[p-l-12] {
-  padding-left: 12px !important;
-}
-.p-l-15,
-[p-l-15] {
-  padding-left: 15px !important;
-}
-.p-l-20,
-[p-l-20] {
-  padding-left: 20px !important;
-}
-.p-l-25,
-[p-l-25] {
-  padding-left: 25px !important;
-}
-.p-l-30,
-[p-l-30] {
-  padding-left: 30px !important;
-}
-
-/** P-Horizontal */
-[p-h-0],
-.p-h-0 {
-  padding-left: 0px !important;
-  padding-right: 0px !important;
-}
-[p-h-5],
-.p-h-5 {
-  padding-left: 5px !important;
-  padding-right: 5px !important;
-}
-[p-h-6],
-.p-h-6 {
-  padding-left: 6px !important;
-  padding-right: 6px !important;
-}
-[p-h-10],
-.p-h-10 {
-  padding-left: 10px !important;
-  padding-right: 10px !important;
-}
-[p-h-15],
-.p-h-15 {
-  padding-left: 15px !important;
-  padding-right: 15px !important;
-}
-[p-h-16],
-.p-h-16 {
-  padding-left: 16px !important;
-  padding-right: 16px !important;
-}
-[p-h-20],
-.p-h-20 {
-  padding-left: 20px !important;
-  padding-right: 20px !important;
-}
-
-/** P-Vertical */
-[p-v-0],
-.p-v-0 {
-  padding-top: 0px !important;
-  padding-bottom: 0px !important;
-}
-[p-v-5],
-.p-v-5 {
-  padding-top: 5px !important;
-  padding-bottom: 5px !important;
-}
-[p-v-6],
-.p-v-6 {
-  padding-top: 6px !important;
-  padding-bottom: 6px !important;
-}
-[p-v-10],
-.p-v-10 {
-  padding-top: 10px !important;
-  padding-bottom: 10px !important;
-}
-[p-v-15],
-.p-v-15 {
-  padding-top: 15px !important;
-  padding-bottom: 15px !important;
-}
-[p-v-16],
-.p-v-16 {
-  padding-top: 16px !important;
-  padding-bottom: 16px !important;
-}
-[p-v-20],
-.p-v-20 {
-  padding-top: 20px !important;
-  padding-bottom: 20px !important;
-}
-[p-v-25],
-.p-v-25 {
-  padding-top: 25px !important;
-  padding-bottom: 25px !important;
-}
-[p-v-30],
-.p-v-30 {
-  padding-top: 30px !important;
-  padding-bottom: 30px !important;
-}
-[p-v-35],
-.p-v-35 {
-  padding-top: 35px !important;
-  padding-bottom: 35px !important;
-}
-[p-v-40],
-.p-v-40 {
-  padding-top: 40px !important;
-  padding-bottom: 40px !important;
-}
-[p-v-45],
-.p-v-45 {
-  padding-top: 45px !important;
-  padding-bottom: 45px !important;
-}
-[p-v-50],
-.p-v-50 {
-  padding-top: 50px !important;
-  padding-bottom: 50px !important;
-}
-[p-v-55],
-.p-v-55 {
-  padding-top: 55px !important;
-  padding-bottom: 55px !important;
-}
-[p-v-100],
-.p-v-100 {
-  padding-top: 100px !important;
-  padding-bottom: 100px !important;
-}
-
-/** P-All */
-[p-a-0],
-.p-a-0 {
-  padding: 0px !important;
-}
-[p-a-5],
-.p-a-5 {
-  padding: 5px !important;
-}
-[p-a-10],
-.p-a-10 {
-  padding: 10px !important;
-}
-[p-a-15],
-.p-a-15 {
-  padding: 15px !important;
-}
-[p-a-20],
-.p-a-20 {
-  padding: 20px !important;
-}
-[p-a-25],
-.p-a-25 {
-  padding: 25px !important;
-}
-[p-a-40],
-.p-a-40 {
-  padding: 40px !important;
-}
-
-/** Mobile responsive */
-
-.sm-m-b-16 {
-  @media only screen and (max-width: vars.$mat-lt-md) {
-    margin-bottom: 16px !important;
-  }
-}
-
-.sm-m-b-24 {
-  @media only screen and (max-width: vars.$mat-lt-md) {
-    margin-bottom: 24px !important;
-  }
-}
-
-.sm-m-v-24 {
-  @media only screen and (max-width: vars.$mat-lt-md) {
-    margin-top: 24px !important;
-    margin-bottom: 24px !important;
-  }
-}
-
-.sm-m-b-32 {
-  @media only screen and (max-width: vars.$mat-lt-md) {
-    margin-bottom: 32px !important;
-  }
-}
-
-.sm-m-b-64 {
-  @media only screen and (max-width: vars.$mat-lt-md) {
-    margin-bottom: 64px !important;
-  }
-}
-
-.sm-screen-m-a-0 {
-  @media screen and (max-width: vars.$mat-lt-md) {
-    margin: 0 !important;
-  }
-}
-
-.sm-screen-m-l-0 {
-  @media screen and (max-width: vars.$mat-lt-md) {
-    margin-left: 0 !important;
+/* This file includes classes/attributes to control the margin & padding of elements */
+
+/* Helper to resolve spacing direction */
+$spacing-directions: (
+  t: top,
+  b: bottom,
+  l: left,
+  r: right,
+  v: (top, bottom),
+  h: (left, right),
+  a: null,
+);
+
+/* Mixin to generate spacing utilities */
+@mixin generate-spacing-utilities($max) {
+  @each $type in (m, p) {
+    @each $dir, $props in $spacing-directions {
+      @for $i from 0 through $max {
+        $selector: ".#{$type}-#{$dir}-#{$i}, [#{$type}-#{$dir}-#{$i}]";
+        #{$selector} {
+          @if $dir == a {
+            #{if($type == m, margin, padding)}: #{$i}px !important;
+          } @else {
+            $prop-list: if(meta.type-of($props) == 'list', $props, ($props));
+            @each $prop in $prop-list {
+              #{if($type == m, margin, padding)}-#{$prop}: #{$i}px !important;
+            }
+          }
+        }
+      }
+      @if $type == m {
+        $selector: ".m-#{$dir}-auto, [m-#{$dir}-auto]";
+        #{$selector} {
+          @if $dir == a {
+            margin: auto !important;
+          } @else {
+            $prop-list: if(meta.type-of($props) == 'list', $props, ($props));
+            @each $prop in $prop-list {
+              margin-#{$prop}: auto !important;
+            }
+          }
+        }
+      }
+    }
   }
 }
 
-.sm-screen-m-h-0 {
-  @media screen and (max-width: vars.$mat-lt-md) {
-    margin-left: 0 !important;
-    margin-right: 0 !important;
-  }
-}
-
-.sm-screen-p-a-0 {
-  @media screen and (max-width: vars.$mat-lt-md) {
-    padding: 0 !important;
-  }
-}
-
-.sm-screen-p-h-0 {
-  @media screen and (max-width: vars.$mat-lt-md) {
-    padding-left: 0 !important;
-    padding-right: 0 !important;
-  }
-}
-
-.md-screen-p-a-0 {
-  @media screen and (max-width: vars.$mat-lt-lg) {
-    padding: 0 !important;
-  }
-}
-
-.md-m-v-24 {
-  @media only screen and (max-width: vars.$mat-lt-lg) {
-    margin-top: 24px !important;
-    margin-bottom: 24px !important;
-  }
-}
-
-.mobile-no-h-margin {
-  @media only screen and (max-width: vars.$mat-lt-sm) {
-    margin-left: 0 !important;
-    margin-right: 0 !important;
-  }
-}
-
-.mobile-no-h-padding {
-  @media only screen and (max-width: vars.$mat-lt-sm) {
-    padding-left: 0 !important;
-    padding-right: 0 !important;
-  }
-}
+/* Include/generate the spacing classes/attributes */
+@include generate-spacing-utilities(100);
 
-/** Generic utility classes */
+/* Generic utility classes */
 
 body.inheritCursors * {
   cursor: inherit !important;