@dontdrinkandroot/ngx-material-extensions 0.7.5 → 0.7.6

package/assets/_extensions.scss

@@ -1,4 +1,7 @@
 @use '@angular/material' as mat;
+@use 'variables' as ddr-vars;
+@use 'mixins' as ddr-mixins;
+@use 'utils' as ddr-utils;
 
 .mat-sidenav-container {
 
@@ -55,7 +58,7 @@
 
 .ddr-mat-fab-fixed-container {
 
-    height: calc($ddr-mat-fab-height + 2rem);
+    height: calc(ddr-vars.$fab-height + 2rem);
 
     .mdc-fab {
         position: fixed;
@@ -67,8 +70,8 @@
 .mat-toolbar {
 
     .ddr-mat-heading {
-        @extend .text-overflow-ellipsis;
-        @extend .flex-auto;
+        @include ddr-mixins.text-overflow-ellipsis;
+        @include ddr-mixins.flex-auto;
     }
 
     ddr-mat-sidenav-toggle {
@@ -83,7 +86,7 @@
         padding-right: .25rem;
     }
 
-    @include ddr-mat-mobile {
+    @include ddr-mixins.media-mobile {
         &.ddr-mat-toolbar-icon-start-mobile {
             padding-left: .25rem;
         }
@@ -93,7 +96,7 @@
         }
     }
 
-    @include ddr-mat-desktop {
+    @include ddr-mixins.media-desktop {
         &.ddr-mat-toolbar-icon-start-desktop {
             padding-left: .25rem;
         }
@@ -112,7 +115,7 @@
     }
 
     height: var(--mat-toolbar-mobile-height, 56px);
-    @media (min-width: $ddr-breakpoint-sm) {
+    @media (min-width: ddr-vars.$breakpoint-sm) {
         height: var(--mat-toolbar-standard-height, 64px);
     }
 }

package/assets/_mixins.scss

@@ -1,11 +1,23 @@
-@mixin ddr-mat-mobile {
-    @media (max-width: #{$ddr-breakpoint-md - 1}) {
+@use 'variables' as ddr-vars;
+
+@mixin media-mobile {
+    @media (max-width: #{ddr-vars.$breakpoint-md - 1}) {
         @content;
     }
 }
 
-@mixin ddr-mat-desktop {
-    @media (min-width: #{$ddr-breakpoint-md}) {
+@mixin media-desktop {
+    @media (min-width: #{ddr-vars.$breakpoint-md}) {
         @content;
     }
 }
+
+@mixin text-overflow-ellipsis {
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    white-space: nowrap !important;
+}
+
+@mixin flex-auto {
+    flex: 1 1 auto !important;
+}

package/assets/_theme.scss

@@ -1,20 +1,17 @@
 @use '@angular/material' as mat;
-
-$ddr-mat-primary: mat.$azure-palette !default;
-$ddr-mat-tertiary: mat.$magenta-palette !default;
-$ddr-mat-density: 0 !default;
+@use 'variables' as ddr-vars;
 
 html {
     color-scheme: light dark;
     @include mat.theme((
             color: (
-                    primary: $ddr-mat-primary,
-                    tertiary: $ddr-mat-tertiary,
+                    primary: ddr-vars.$primary,
+                    tertiary: ddr-vars.$tertiary,
             ),
             typography: (
                     plain-family: 'Roboto Flex Variable'
             ),
-            density: $ddr-mat-density
+            density: ddr-vars.$density
     ));
 }
 

package/assets/_utils.scss

@@ -1,6 +1,7 @@
-@import "./utils/display";
-@import "./utils/spacing";
-@import "./utils/color";
+@use "./utils/display";
+@use "./utils/spacing";
+@use "./utils/color";
+@use 'mixins' as ddr-mixins;
 
 .flex-row {
     flex-direction: row !important;
@@ -11,7 +12,7 @@
 }
 
 .flex-auto {
-    flex: 1 1 auto !important;
+    @include ddr-mixins.flex-auto;
 }
 
 .d-grid {
@@ -28,9 +29,7 @@
 }
 
 .text-overflow-ellipsis {
-    overflow: hidden !important;
-    text-overflow: ellipsis !important;
-    white-space: nowrap !important;
+    @include ddr-mixins.text-overflow-ellipsis;
 }
 
 

package/assets/_variables.scss

@@ -1,14 +1,20 @@
-$ddr-spacer: 1rem !default;
-$ddr-spacers: (
+@use '@angular/material' as mat;
+
+$primary: mat.$azure-palette !default;
+$tertiary: mat.$magenta-palette !default;
+$density: 0 !default;
+
+$spacer: 1rem !default;
+$spacers: (
         none: 0,
-        quarter: $ddr-spacer * .25,
-        half: $ddr-spacer * .5,
-        full: $ddr-spacer,
-        one-half: $ddr-spacer * 1.5,
-        double: $ddr-spacer * 2
+        quarter: $spacer * .25,
+        half: $spacer * .5,
+        full: $spacer,
+        one-half: $spacer * 1.5,
+        double: $spacer * 2
 ) !default;
 
-$ddr-paddings: (
+$paddings: (
         'p': 'padding',
         'ps': 'padding-left',
         'pe': 'padding-right',
@@ -16,7 +22,7 @@ $ddr-paddings: (
         'pb': 'padding-bottom'
 ) !default;
 
-$ddr-margins: (
+$margins: (
         'm': 'margin',
         'ms': 'margin-left',
         'me': 'margin-right',
@@ -24,7 +30,7 @@ $ddr-margins: (
         'mb': 'margin-bottom'
 ) !default;
 
-$ddr-displays: (
+$displays: (
         none: none,
         inline: inline,
         inline-block: inline-block,
@@ -38,17 +44,17 @@ $ddr-displays: (
         inline-flex: inline-flex
 ) !default;
 
-$ddr-mat-fab-height: 56px !default;
+$fab-height: 56px !default;
 
-$ddr-breakpoint-xs: 0;
-$ddr-breakpoint-sm: 600px;
-$ddr-breakpoint-md: 960px;
-$ddr-breakpoint-lg: 1280px;
-$ddr-breakpoint-xl: 1920px;
-$ddr-breakpoints: (
-        xs: $ddr-breakpoint-xs,
-        sm: $ddr-breakpoint-sm,
-        md: $ddr-breakpoint-md,
-        lg: $ddr-breakpoint-lg,
-        xl: $ddr-breakpoint-xl
+$breakpoint-xs: 0;
+$breakpoint-sm: 600px;
+$breakpoint-md: 960px;
+$breakpoint-lg: 1280px;
+$breakpoint-xl: 1920px;
+$breakpoints: (
+        xs: $breakpoint-xs,
+        sm: $breakpoint-sm,
+        md: $breakpoint-md,
+        lg: $breakpoint-lg,
+        xl: $breakpoint-xl
 ) !default;

package/assets/fonts.scss

@@ -1,5 +1,5 @@
-@import '@fontsource-variable/roboto-flex';
-@import "@fontsource/material-symbols-rounded/400.css";
+@use '@fontsource-variable/roboto-flex';
+@use "@fontsource/material-symbols-rounded";
 
 .material-symbols-rounded {
     font-family: "Material Symbols Rounded";

package/assets/style.scss

@@ -1,5 +1,5 @@
-@import "variables";
-@import "mixins";
-@import "theme";
-@import "utils";
-@import "extensions";
+@forward "variables";
+@use "mixins";
+@use "theme";
+@use "utils";
+@use "extensions";

package/assets/utils/_color.scss

@@ -1,5 +1,3 @@
-@use '@angular/material' as mat;
-
 .text-primary {
     color: var(--mat-sys-primary);
 }

package/assets/utils/_display.scss

@@ -1,18 +1,20 @@
+@use '../variables' as ddr-vars;
+
 @function next-breakpoint($breakpoint) {
-    $breakpoints: map-keys($ddr-breakpoints);
+    $breakpoints: map-keys(ddr-vars.$breakpoints);
     $index: index($breakpoints, $breakpoint);
     @if $index < length($breakpoints) {
-        @return map-get($ddr-breakpoints, nth($breakpoints, $index + 1));
+        @return map-get(ddr-vars.$breakpoints, nth($breakpoints, $index + 1));
     }
     @return null;
 }
 
-@each $display, $value in $ddr-displays {
+@each $display, $value in ddr-vars.$displays {
     .d-#{$display} {
         display: $value !important;
     }
 
-    @each $breakpoint, $size in $ddr-breakpoints {
+    @each $breakpoint, $size in ddr-vars.$breakpoints {
         .d-min-#{$breakpoint}-#{$display} {
             @media (min-width: $size) {
                 display: $value !important;

package/assets/utils/_spacing.scss

@@ -1,12 +1,14 @@
-@each $prefix, $property in $ddr-paddings {
-    @each $suffix, $size in $ddr-spacers {
+@use '../variables' as ddr-vars;
+
+@each $prefix, $property in ddr-vars.$paddings {
+    @each $suffix, $size in ddr-vars.$spacers {
         .#{$prefix}-#{$suffix} {
             #{$property}: #{$size} !important;
         }
     }
 }
 
-@each $suffix, $size in $ddr-spacers {
+@each $suffix, $size in ddr-vars.$spacers {
     .px-#{$suffix} {
         padding-left: #{$size} !important;
         padding-right: #{$size} !important;
@@ -18,15 +20,15 @@
     }
 }
 
-@each $prefix, $property in $ddr-margins {
-    @each $suffix, $size in $ddr-spacers {
+@each $prefix, $property in ddr-vars.$margins {
+    @each $suffix, $size in ddr-vars.$spacers {
         .#{$prefix}-#{$suffix} {
             #{$property}: #{$size} !important;
         }
     }
 }
 
-@each $suffix, $size in $ddr-spacers {
+@each $suffix, $size in ddr-vars.$spacers {
     .mx-#{$suffix} {
         margin-left: #{$size} !important;
         margin-right: #{$size} !important;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dontdrinkandroot/ngx-material-extensions",
-  "version": "0.7.5",
+  "version": "0.7.6",
   "peerDependencies": {
     "@angular/cdk": "^19",
     "@angular/common": "^19",