From f75b87ea6534fa7b7e574846f78b2c9ed0e76722 Mon Sep 17 00:00:00 2001
From: sajjadarashhh <72276897+sajjadarashhh@users.noreply.github.com>
Date: Wed, 7 Sep 2022 14:31:10 +0430
Subject: [PATCH] CSS: Utilities for sizing

---
 src/MudBlazor/Styles/utilities/_index.scss          |  3 +++
 src/MudBlazor/Styles/utilities/sizing/_height.scss  | 10 ++++++++++
 src/MudBlazor/Styles/utilities/sizing/_index.scss   | 12 ++++++++++++
 src/MudBlazor/Styles/utilities/sizing/_width.scss   |  9 +++++++++
 src/MudBlazor/Styles/utilities/text/_index.scss     |  9 +++++++++
 src/MudBlazor/Styles/utilities/text/text-align.scss |  7 +++++++
 6 files changed, 50 insertions(+)
 create mode 100644 src/MudBlazor/Styles/utilities/sizing/_height.scss
 create mode 100644 src/MudBlazor/Styles/utilities/sizing/_index.scss
 create mode 100644 src/MudBlazor/Styles/utilities/sizing/_width.scss
 create mode 100644 src/MudBlazor/Styles/utilities/text/_index.scss
 create mode 100644 src/MudBlazor/Styles/utilities/text/text-align.scss

diff --git a/src/MudBlazor/Styles/utilities/_index.scss b/src/MudBlazor/Styles/utilities/_index.scss
index 1c8a337587e..b521cf39b5d 100644
--- a/src/MudBlazor/Styles/utilities/_index.scss
+++ b/src/MudBlazor/Styles/utilities/_index.scss
@@ -5,6 +5,9 @@
 
 @import 'flexbox';
 
+@import 'sizing';
+@import 'text';
+
 @import 'interactivity/cursor';
 @import 'interactivity/pointerevents';
 
diff --git a/src/MudBlazor/Styles/utilities/sizing/_height.scss b/src/MudBlazor/Styles/utilities/sizing/_height.scss
new file mode 100644
index 00000000000..1fc4dff2b05
--- /dev/null
+++ b/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;
+            }
+        }
+    }
+}
diff --git a/src/MudBlazor/Styles/utilities/sizing/_index.scss b/src/MudBlazor/Styles/utilities/sizing/_index.scss
new file mode 100644
index 00000000000..20f4a81fc21
--- /dev/null
+++ b/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+'-');
+  }
+}
\ No newline at end of file
diff --git a/src/MudBlazor/Styles/utilities/sizing/_width.scss b/src/MudBlazor/Styles/utilities/sizing/_width.scss
new file mode 100644
index 00000000000..2f2a8567d13
--- /dev/null
+++ b/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;
+            }
+        }
+    }
+}
diff --git a/src/MudBlazor/Styles/utilities/text/_index.scss b/src/MudBlazor/Styles/utilities/text/_index.scss
new file mode 100644
index 00000000000..c0fae1b1f16
--- /dev/null
+++ b/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+'-');
+    }
+}
\ No newline at end of file
diff --git a/src/MudBlazor/Styles/utilities/text/text-align.scss b/src/MudBlazor/Styles/utilities/text/text-align.scss
new file mode 100644
index 00000000000..0330d0daa42
--- /dev/null
+++ b/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;
+        }
+    }
+}