@elderbyte/ngx-starter 19.1.0-beta.2 → 19.1.0-beta.21

package/theming/{utility-classes/_elder-color-helpers.scss → utilities/_elder-color-utils.scss}

@@ -1,4 +1,4 @@
-@mixin elder-color-helpers() {
+@mixin elder-color-utils() {
   $color-variables: (
     'background': var(--md-sys-color-background),
     'error': var(--md-sys-color-error),
@@ -52,13 +52,17 @@
   );
 
   // background colors
+  .elder-pane-bg-color {
+    background-color: var(--elder-pane-bg-color);
+  }
+
   @each $name, $value in $color-variables {
-    .elder-bg-#{$name} {
+    .bg-#{$name} {
       background-color: #{$value};
     }
   }
 
-  .elder-bg-transparent {
+  .bg-transparent {
     background-color: transparent;
   }
 
@@ -68,15 +72,4 @@
       color: #{$value};
     }
   }
-
-  // border colors
-  @each $name, $value in $color-variables {
-    .elder-border-#{$name} {
-      border-color: #{$value};
-    }
-  }
-
-  .elder-pane-bg-color {
-    background-color: var(--elder-pane-bg-color);
-  }
 }

package/theming/utilities/_elder-common-utils.scss

@@ -0,0 +1,20 @@
+@mixin elder-common-utils() {
+    .border-none {
+        border: none;
+    }
+    .display-none {
+        display: none;
+    }
+    .text-center {
+        text-align: center;
+    }
+    .overflow-hidden {
+        overflow: hidden;
+    }
+    .overflow-auto {
+        overflow: auto;
+    }
+    .full-width {
+        width: 100%; // legacy, keep for now
+    }
+}

package/theming/{utility-classes/_elder-flex-layout.scss → utilities/_elder-flex-layout-utils.scss}

@@ -1,4 +1,4 @@
-@use '../system/elder-config' as settings;
+@use '../abstracts/elder-scss-variables' as settings;
 @use 'sass:map';
 
 /***************************************************************************
@@ -33,7 +33,7 @@ $media: (
   flex: 1 1 100%;
 }
 
-@mixin elder-flex-layout($theme) {
+@mixin elder-flex-layout-utils($theme) {
   $common-sizes: map.get($theme, elder, common-sizes);
 
   /***************************************************************************
@@ -205,6 +205,10 @@ $media: (
     flex: 0 1 auto; // No grow, shrink
   }
 
+  .flex-initial-100 {
+    flex: 1 1 100%;
+  }
+
   .flex-none {
     flex: none;
   }
@@ -311,6 +315,108 @@ $media: (
     }
   }
 
+  /***************************************************************************
+   *                                                                         *
+   * Flex Item Grow/Shrink                                                   *
+   *                                                                         *
+   **************************************************************************/
+
+   .max-w-100 {
+    max-width: 100%;
+  }
+
+  .max-w-90 {
+    max-width: 90%;
+  }
+
+  .max-w-80 {
+    max-width: 80%;
+  }
+
+  .max-w-70 {
+    max-width: 70%;
+  }
+
+  .max-w-60 {
+    max-width: 60%;
+  }
+
+  .max-w-50 {
+    max-width: 50%;
+  }
+
+  .max-w-40 {
+    max-width: 40%;
+  }
+
+  .max-w-30 {
+    max-width: 30%;
+  }
+
+  .max-w-25 {
+    max-width: 25%;
+  }
+
+  .max-w-20 {
+    max-width: 20%;
+  }
+
+  .max-w-15 {
+    max-width: 15%;
+  }
+
+  .max-w-10 {
+    max-width: 10%;
+  }
+
+  .max-h-100 {
+    max-height: 100%;
+  }
+
+  .max-h-90 {
+    max-height: 90%;
+  }
+
+  .max-h-80 {
+    max-height: 80%;
+  }
+
+  .max-h-70 {
+    max-height: 70%;
+  }
+
+  .max-h-60 {
+    max-height: 60%;
+  }
+
+  .max-h-50 {
+    max-height: 50%;
+  }
+
+  .max-h-40 {
+    max-height: 40%;
+  }
+
+  .max-h-30 {
+    max-height: 30%;
+  }
+
+  .max-h-25 {
+    max-height: 25%;
+  }
+
+  .max-h-20 {
+    max-height: 20%;
+  }
+
+  .max-h-15 {
+    max-height: 15%;
+  }
+
+  .max-h-10 {
+    max-height: 10%;
+  }
+
   /***************************************************************************
    *                                                                         *
    * Flex Item Grow/Shrink                                                   *