CSS: Utilities for sizing

src/MudBlazor/Styles/utilities/_index.scss

@@ -5,6 +5,9 @@
 
 @import 'flexbox';
 
+@import 'sizing';
+@import 'text';
+
 @import 'interactivity/cursor';
 @import 'interactivity/pointerevents';
 

src/MudBlazor/Styles/utilities/sizing/_height.scss

@@ -0,0 +1,10 @@
+
+@mixin height($breakpoint) {
+    @each $precessor in ("","max-","min-") {
+        @each $name,$value in ( "auto": auto,"25":25%,"50":50%,"75":75%,"100":100%,"25vh":25vh,"50vh":50vh,"75vh":75vh,"100vh":100vh ) {
+            .h-#{$precessor}#{$breakpoint}#{$name} {
+                #{$precessor}height: #{$value} !important;
+            }
+        }
+    }
+}

src/MudBlazor/Styles/utilities/sizing/_index.scss

@@ -0,0 +1,12 @@
+@import '../../abstracts/variables';
+@import '_height.scss';
+@import '_width.scss';
+
+@include height("");
+@include width("");
+@each $name, $value in $breakpoints-css-utilities-only {
+  @media (min-width:$value) {
+      @include height($name+'-');
+      @include width($name+'-');
+  }
+}

src/MudBlazor/Styles/utilities/sizing/_width.scss

@@ -0,0 +1,9 @@
+@mixin width($breakpoint) {
+    @each $precessor in ("","max-","min-") {
+        @each $name,$value in ( "auto": auto,"25":25%,"50":50%,"75":75%,"100":100%,"25vw":25vw,"50vw":50vw,"75vw":75vw,"100vw":100vw ) {
+            .w-#{$precessor}#{$breakpoint}#{$name} {
+                #{$precessor}width: #{$value} !important;
+            }
+        }
+    }
+}

src/MudBlazor/Styles/utilities/text/_index.scss

@@ -0,0 +1,9 @@
+@import '../../abstracts/variables';
+@import 'text-align.scss';
+
+@include textAlign("");
+@each $name, $value in $breakpoints-css-utilities-only {
+    @media (min-width:$value) {
+        @include textAlign($name+'-');
+    }
+}

src/MudBlazor/Styles/utilities/text/text-align.scss

@@ -0,0 +1,7 @@
+@mixin textAlign($breakpoint) {
+    @each $name in ( center,end,start,left,right,justify,justify-all,match-parent ) {
+        .text-#{$breakpoint}#{$name} {
+            text-align: $name !important;
+        }
+    }
+}