@elderbyte/ngx-starter 15.3.3 → 15.3.5

package/package.json

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

package/theming/_elder-common.scss

@@ -1,13 +1,19 @@
 @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 {
+@mixin elder-common-styles ($common-sizes) {
+
+  /***************************************************************************
+   *                                                                         *
+   * Common Sizes                                                            *
+   *                                                                         *
+   **************************************************************************/
+
+  $xs: map-get($common-sizes, xs);
+  $sm: map-get($common-sizes, sm);
+  $md: map-get($common-sizes, md);
+  $lg: map-get($common-sizes, lg);
+  $xl: map-get($common-sizes, xl);
+  $xxl:map-get($common-sizes, xxl);
 
   /***************************************************************************
    *                                                                         *

package/theming/_elder-config.scss

@@ -0,0 +1,37 @@
+
+/*
+   Builds an elder-config.
+
+   All arguments are optional which means all, none are only a part of the arguments can be passed.
+   In case no arguments are passed, the default elder-config will be returned.
+
+   @Examples:
+      elder-config.build();                             // returns default config
+      elder-config.build($common-sizes: $custom-sizes); // returns config with custom sizes
+ */
+@function buildConfig($common-sizes: common-sizes()) {
+  @return (
+    common-sizes: $common-sizes
+  );
+}
+
+/*
+  Returns a map of common-sizes.
+ */
+@function common-sizes(
+  $xs: 4px,
+  $sm: 8px,
+  $md: 12px,
+  $lg: 16px,
+  $xl: 24px,
+  $xxl: 32px
+) {
+  @return (
+    xs: $xs,
+    sm: $sm,
+    md: $md,
+    lg: $lg,
+    xl: $xl,
+    xxl: $xxl
+  )
+}

package/theming/_elder-flex-layout.scss

@@ -34,7 +34,20 @@ $media: (
   box-sizing: border-box;
 }
 
-@mixin elder-flex-layout {
+@mixin elder-flex-layout($common-sizes) {
+
+  /***************************************************************************
+   *                                                                         *
+   * Common Sizes                                                            *
+   *                                                                         *
+   **************************************************************************/
+
+  $xs: map-get($common-sizes, xs);
+  $sm: map-get($common-sizes, sm);
+  $md: map-get($common-sizes, md);
+  $lg: map-get($common-sizes, lg);
+  $xl: map-get($common-sizes, xl);
+  $xxl:map-get($common-sizes, xxl);
 
   /***************************************************************************
    *                                                                         *
@@ -332,32 +345,242 @@ $media: (
 
   /***************************************************************************
    *                                                                         *
-   * Gaps                                                                    *
+   * Gap xs                                                                  *
    *                                                                         *
    **************************************************************************/
 
   .gap-xs {
-    gap: 4px;
+    gap: $xs;
+  }
+
+  .xs\:gap-xs {
+    @include breakpoint('xs') {
+      gap: $xs !important;
+    }
+  }
+
+  .sm\:gap-xs {
+    @include breakpoint('sm') {
+      gap: $xs !important;
+    }
+  }
+
+  .md\:gap-xs {
+    @include breakpoint('md') {
+      gap: $xs !important;
+    }
+  }
+
+  .lg\:gap-xs {
+    @include breakpoint('lg') {
+      gap: $xs !important;
+    }
+  }
+
+  .xl\:gap-xs {
+    @include breakpoint('xl') {
+      gap: $xs !important;
+    }
   }
 
+  /***************************************************************************
+   *                                                                         *
+   * Gap sm                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
   .gap-sm {
-    gap: 8px;
+    gap: $sm;
+  }
+
+  .xs\:gap-sm {
+    @include breakpoint('xs') {
+      gap: $sm !important;
+    }
+  }
+
+  .sm\:gap-sm {
+    @include breakpoint('sm') {
+      gap: $sm !important;
+    }
+  }
+
+  .md\:gap-sm {
+    @include breakpoint('md') {
+      gap: $sm !important;
+    }
   }
 
+  .lg\:gap-sm {
+    @include breakpoint('lg') {
+      gap: $sm !important;
+    }
+  }
+
+  .xl\:gap-sm {
+    @include breakpoint('xl') {
+      gap: $sm !important;
+    }
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Gap md                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
   .gap-md {
-    gap: 12px;
+    gap: $md;
+  }
+
+  .xs\:gap-md {
+    @include breakpoint('xs') {
+      gap: $md !important;
+    }
+  }
+
+  .sm\:gap-md {
+    @include breakpoint('sm') {
+      gap: $md !important;
+    }
+  }
+
+  .md\:gap-md {
+    @include breakpoint('md') {
+      gap: $md !important;
+    }
+  }
+
+  .lg\:gap-md {
+    @include breakpoint('lg') {
+      gap: $md !important;
+    }
+  }
+
+  .xl\:gap-md {
+    @include breakpoint('xl') {
+      gap: $md !important;
+    }
   }
 
+  /***************************************************************************
+   *                                                                         *
+   * Gap lg                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
   .gap-lg {
-    gap: 16px;
+    gap: $lg;
+  }
+
+  .xs\:gap-lg {
+    @include breakpoint('xs') {
+      gap: $lg !important;
+    }
+  }
+
+  .sm\:gap-lg {
+    @include breakpoint('sm') {
+      gap: $lg !important;
+    }
+  }
+
+  .md\:gap-lg {
+    @include breakpoint('md') {
+      gap: $lg !important;
+    }
+  }
+
+  .lg\:gap-lg {
+    @include breakpoint('lg') {
+      gap: $lg !important;
+    }
+  }
+
+  .xl\:gap-lg {
+    @include breakpoint('xl') {
+      gap: $lg !important;
+    }
   }
 
+  /***************************************************************************
+   *                                                                         *
+   * Gap xl                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
   .gap-xl {
-    gap: 24px;
+    gap: $xl;
+  }
+
+  .xs\:gap-xl {
+    @include breakpoint('xs') {
+      gap: $xl !important;
+    }
+  }
+
+  .sm\:gap-xl {
+    @include breakpoint('sm') {
+      gap: $xl !important;
+    }
   }
 
+  .md\:gap-xl {
+    @include breakpoint('md') {
+      gap: $xl !important;
+    }
+  }
+
+  .lg\:gap-xl {
+    @include breakpoint('lg') {
+      gap: $xl !important;
+    }
+  }
+
+  .xl\:gap-xl {
+    @include breakpoint('xl') {
+      gap: $xl !important;
+    }
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Gap xxl                                                                 *
+   *                                                                         *
+   **************************************************************************/
+
   .gap-xxl {
-    gap: 32px;
+    gap: $xxl;
+  }
+
+  .xs\:gap-xxl {
+    @include breakpoint('xs') {
+      gap: $xxl !important;
+    }
+  }
+
+  .sm\:gap-xxl {
+    @include breakpoint('sm') {
+      gap: $xxl !important;
+    }
+  }
+
+  .md\:gap-xxl {
+    @include breakpoint('md') {
+      gap: $xxl !important;
+    }
+  }
+
+  .lg\:gap-xxl {
+    @include breakpoint('lg') {
+      gap: $xxl !important;
+    }
+  }
+
+  .xl\:gap-xxl {
+    @include breakpoint('xl') {
+      gap: $xxl !important;
+    }
   }
 
   /***************************************************************************