Margin/padding utility classes generator

src/assets/styles/common-layout.scss

@@ -214,82 +214,6 @@ section.settings {
     flex: 2;
 }
 
-.mt-0 {
-    margin-top: 0 !important;
-}
-
-.mt-4 {
-    margin-top: 4px;
-}
-
-.mt-5 {
-    margin-top: 5px;
-}
-
-.mt-8 {
-    margin-top: 8px;
-}
-
-.mt-12 {
-    margin-top: 12px;
-}
-
-.mt-16 {
-    margin-top: 16px !important;
-}
-
-.mt-20 {
-    margin-top: 20px;
-}
-
-.mt-24 {
-    margin-top: 24px;
-}
-
-.mt-32 {
-    margin-top: 32px;
-}
-
-.mb-0 {
-    margin-bottom: 0 !important;
-}
-
-.mb-6 {
-    margin-bottom: 6px;
-}
-
-.mb-8 {
-    margin-bottom: 8px !important;
-}
-
-.mb-12 {
-    margin-bottom: 12px !important;
-}
-
-.ml-8 {
-    margin-left: 8px;
-}
-
-.ml-14 {
-    margin-left: 14px;
-}
-
-.ml-16 {
-    margin-left: 16px;
-}
-
-.mr-24 {
-    margin-right: 24px;
-}
-
-.pb-24 {
-    padding-bottom: 24px;
-}
-
-.pb-32 {
-    padding-bottom: 32px;
-}
-
 .w-100 {
     min-width: 100px !important;
     width: 100px !important;
@@ -313,22 +237,6 @@ section.settings {
     cursor: pointer;
 }
 
-.mr-4 {
-    margin-right: 4px !important;
-}
-
-.mr-8 {
-    margin-right: 8px !important;
-}
-
-.mr-16 {
-    margin-right: 16px;
-}
-
-.mr-34 {
-    margin-right: 34px;
-}
-
 .fit-content {
     width: fit-content;
 }

src/assets/styles/common-styles.scss

@@ -1,3 +1,4 @@
+@use 'common-utilities';
 @use 'common-fonts';
 @use 'common-inputs';
 @use 'common-buttons';

src/assets/styles/common-utilities.scss

@@ -0,0 +1,26 @@
+/* Margins, paddings */
+
+$start: 0;
+$end: 100;
+
+$values: "";
+$sides: (top, bottom, left, right);
+
+@for $i from $start + 1 through $end {
+    $values: append($values, $i, comma);
+    $values: set-nth($values, 1, $start);
+}
+
+// TODO: Check if !important can be avoided
+
+@each $space in $values {
+    @each $side in $sides {
+        .m#{str-slice($side, 0, 1)}-#{$space} {
+            margin-#{$side}: #{$space}px !important;
+        }
+
+        .p#{str-slice($side, 0, 1)}-#{$space} {
+            padding-#{$side}: #{$space}px !important;
+        }
+    }
+}

src/lib/listing/page-header/page-header.component.scss

@@ -1,3 +0,0 @@
-.ml-6 {
-    margin-left: 6px;
-}

src/lib/listing/workflow/column-header/column-header.component.scss

@@ -4,7 +4,3 @@
     align-items: center;
     justify-content: space-between;
 }
-
-.mr-10 {
-    margin-right: 10px;
-}