@elderbyte/ngx-starter 15.0.15 → 15.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elderbyte/ngx-starter",
-  "version": "15.0.15",
+  "version": "15.1.0",
   "peerDependencies": {
     "@angular/core": "^15.0.0 || ^16.0.0",
     "@angular/common": "^15.0.0 || ^16.0.0",

package/theming/_elder-common.scss

@@ -1,5 +1,12 @@
 @use 'mat-icon-button-size' as icon-button-size;
 
+$xs: 4px;
+$sm: 8px;
+$md: 12px;
+$lg: 16px;
+$xl: 24px;
+$xxl: 32px;
+
 @mixin elder-common-styles {
 
   /***************************************************************************
@@ -79,8 +86,8 @@
   .mat-mdc-form-field.elder-dense {
 
     .mat-mdc-text-field-wrapper { // padding left / right 16 by default
-      padding-left: 8px!important;
-      padding-right: 8px!important;
+      padding-left: $sm !important;
+      padding-right: $sm !important;
     }
 
     .mat-mdc-form-field-flex {
@@ -89,8 +96,8 @@
 
     .mdc-text-field--outlined {
       .mat-mdc-form-field-infix {
-        padding-top: 8px!important; // 16px by default
-        padding-bottom: 8px!important; // 16px by default
+        padding-top: $sm !important; // 16px by default
+        padding-bottom: $sm !important; // 16px by default
         min-height: 40px; // (24 + 2*16) = 56px by default
       }
     }
@@ -263,27 +270,183 @@
    **************************************************************************/
 
   .p-xs {
-    padding: 4px;
+    padding: $xs;
+  }
+
+  .pt-xs {
+    padding-top: $xs;
+  }
+
+  .pb-xs {
+    padding-bottom: $xs;
+  }
+
+  .pr-xs {
+    padding-right: $xs;
+  }
+
+  .pl-xs {
+    padding-left: $xs;
+  }
+
+  .px-xs {
+    padding-left: $xs;
+    padding-right: $xs;
+  }
+
+  .py-xs {
+    padding-top: $xs;
+    padding-bottom: $xs;
   }
 
   .p-sm {
-    padding: 8px;
+    padding: $sm;
+  }
+
+  .pt-sm {
+    padding-top: $sm;
+  }
+
+  .pb-sm {
+    padding-bottom: $sm;
+  }
+
+  .pr-sm {
+    padding-right: $sm;
+  }
+
+  .pl-sm {
+    padding-left: $sm;
+  }
+
+  .px-sm {
+    padding-left: $sm;
+    padding-right: $sm;
+  }
+
+  .py-sm {
+    padding-top: $sm;
+    padding-bottom: $sm;
   }
 
   .p-md {
-    padding: 12px;
+    padding: $md;
+  }
+
+  .pt-md {
+    padding-top: $md;
+  }
+
+  .pb-md {
+    padding-bottom: $md;
+  }
+
+  .pr-md {
+    padding-right: $md;
+  }
+
+  .pl-md {
+    padding-left: $md;
+  }
+
+  .px-md {
+    padding-left: $md;
+    padding-right: $md;
+  }
+
+  .py-md {
+    padding-top: $md;
+    padding-bottom: $md;
   }
 
   .p-lg {
-    padding: 16px;
+    padding: $lg;
+  }
+
+  .pt-lg {
+    padding-top: $lg;
+  }
+
+  .pb-lg {
+    padding-bottom: $lg;
+  }
+
+  .pr-lg {
+    padding-right: $lg;
+  }
+
+  .pl-lg {
+    padding-left: $lg;
+  }
+
+  .px-lg {
+    padding-left: $lg;
+    padding-right: $lg;
+  }
+
+  .py-lg {
+    padding-top: $lg;
+    padding-bottom: $lg;
   }
 
   .p-xl {
-    padding: 24px;
+    padding: $xl;
+  }
+
+  .pt-xl {
+    padding-top: $xl;
+  }
+
+  .pb-xl {
+    padding-bottom: $xl;
+  }
+
+  .pr-xl {
+    padding-right: $xl;
+  }
+
+  .pl-xl {
+    padding-left: $xl;
+  }
+
+  .px-xl {
+    padding-left: $xl;
+    padding-right: $xl;
+  }
+
+  .py-xl {
+    padding-top: $xl;
+    padding-bottom: $xl;
   }
 
   .p-xxl {
-    padding: 32px;
+    padding: $xxl;
+  }
+
+  .pt-xxl {
+    padding-top: $xxl;
+  }
+
+  .pb-xxl {
+    padding-bottom: $xxl;
+  }
+
+  .pr-xxl {
+    padding-right: $xxl;
+  }
+
+  .pl-xxl {
+    padding-left: $xxl;
+  }
+
+  .px-xxl {
+    padding-left: $xxl;
+    padding-right: $xxl;
+  }
+
+  .py-xxl {
+    padding-top: $xxl;
+    padding-bottom: $xxl;
   }
 
   /***************************************************************************