Responsive sizing WIP

Megabit · Oct 8, 2023 · e8d40bc · e8d40bc
1 parent 47c5759
commit e8d40bc
Show file tree

Hide file tree

Showing 12 changed files with 397 additions and 33 deletions.
diff --git a/Source/Blazorise.AntDesign/AntDesignClassProvider.cs b/Source/Blazorise.AntDesign/AntDesignClassProvider.cs
@@ -1352,6 +1352,8 @@ public override string Sizing( SizingType sizingType, SizingSize sizingSize, Siz
         return sb.ToString();
     }
 
+    public override string Sizing( SizingType sizingType, SizingSize sizingSize, IEnumerable<SizingDefinition> rules ) => null;
+
     #endregion
 
     #region Visibility

diff --git a/Source/Blazorise.Bootstrap/BootstrapClassProvider.cs b/Source/Blazorise.Bootstrap/BootstrapClassProvider.cs
@@ -1352,11 +1352,17 @@ public override string Sizing( SizingType sizingType, SizingSize sizingSize, Siz
             ? "w"
             : "h" );
 
+        if ( sizingDefinition.Breakpoint != Breakpoint.None && sizingDefinition.Breakpoint != Breakpoint.Mobile )
+            sb.Append( $"-{ToBreakpoint( sizingDefinition.Breakpoint )}" );
+
         sb.Append( $"-{ToSizingSize( sizingSize )}" );
 
         return sb.ToString();
     }
 
+    public override string Sizing( SizingType sizingType, SizingSize sizingSize, IEnumerable<SizingDefinition> rules )
+         => string.Join( " ", rules.Select( x => Sizing( sizingType, sizingSize, x ) ) );
+
     #endregion
 
     #region Visibility

diff --git a/Source/Blazorise.Bootstrap/Styles/_utilities.scss b/Source/Blazorise.Bootstrap/Styles/_utilities.scss
@@ -150,3 +150,48 @@ $border-sizes: (1, 2, 3, 4, 5);
 .font-weight-semibold {
     font-weight: 600 !important;
 }
+
+
+@mixin make-sizes( $breakpoints: $grid-breakpoints) {
+    @each $breakpoint in map-keys($breakpoints) {
+        $infix: breakpoint-infix($breakpoint, $breakpoints);
+
+        @include media-breakpoint-up($breakpoint, $breakpoints) {
+            @if $breakpoint != "xs" {
+                @each $prop, $abbrev in (width: w, height: h) {
+                    @each $size, $length in $sizes {
+                        .#{$abbrev}#{$infix}-#{$size} {
+                            #{$prop}: $length !important;
+                        }
+                    }
+                }
+
+                .mw#{$infix}-100 {
+                    max-width: 100% !important;
+                }
+
+                .mh#{$infix}-100 {
+                    max-height: 100% !important;
+                }
+
+                .min-vw#{$infix}-100 {
+                    min-width: 100vw !important;
+                }
+
+                .min-vh#{$infix}-100 {
+                    min-height: 100vh !important;
+                }
+
+                .vw#{$infix}-100 {
+                    width: 100vw !important;
+                }
+
+                .vh#{$infix}-100 {
+                    height: 100vh !important;
+                }
+            }
+        }
+    }
+}
+
+@include make-sizes();
diff --git a/Source/Blazorise.Bootstrap/wwwroot/blazorise.bootstrap.css b/Source/Blazorise.Bootstrap/wwwroot/blazorise.bootstrap.css
@@ -3359,6 +3359,206 @@ ol.ordered-list-upper-roman {
   font-weight: 600 !important;
 }
 
+@media (min-width: 576px) {
+  .w-sm-25 {
+    width: 25% !important;
+  }
+  .w-sm-50 {
+    width: 50% !important;
+  }
+  .w-sm-75 {
+    width: 75% !important;
+  }
+  .w-sm-100 {
+    width: 100% !important;
+  }
+  .w-sm-auto {
+    width: auto !important;
+  }
+  .h-sm-25 {
+    height: 25% !important;
+  }
+  .h-sm-50 {
+    height: 50% !important;
+  }
+  .h-sm-75 {
+    height: 75% !important;
+  }
+  .h-sm-100 {
+    height: 100% !important;
+  }
+  .h-sm-auto {
+    height: auto !important;
+  }
+  .mw-sm-100 {
+    max-width: 100% !important;
+  }
+  .mh-sm-100 {
+    max-height: 100% !important;
+  }
+  .min-vw-sm-100 {
+    min-width: 100vw !important;
+  }
+  .min-vh-sm-100 {
+    min-height: 100vh !important;
+  }
+  .vw-sm-100 {
+    width: 100vw !important;
+  }
+  .vh-sm-100 {
+    height: 100vh !important;
+  }
+}
+@media (min-width: 768px) {
+  .w-md-25 {
+    width: 25% !important;
+  }
+  .w-md-50 {
+    width: 50% !important;
+  }
+  .w-md-75 {
+    width: 75% !important;
+  }
+  .w-md-100 {
+    width: 100% !important;
+  }
+  .w-md-auto {
+    width: auto !important;
+  }
+  .h-md-25 {
+    height: 25% !important;
+  }
+  .h-md-50 {
+    height: 50% !important;
+  }
+  .h-md-75 {
+    height: 75% !important;
+  }
+  .h-md-100 {
+    height: 100% !important;
+  }
+  .h-md-auto {
+    height: auto !important;
+  }
+  .mw-md-100 {
+    max-width: 100% !important;
+  }
+  .mh-md-100 {
+    max-height: 100% !important;
+  }
+  .min-vw-md-100 {
+    min-width: 100vw !important;
+  }
+  .min-vh-md-100 {
+    min-height: 100vh !important;
+  }
+  .vw-md-100 {
+    width: 100vw !important;
+  }
+  .vh-md-100 {
+    height: 100vh !important;
+  }
+}
+@media (min-width: 992px) {
+  .w-lg-25 {
+    width: 25% !important;
+  }
+  .w-lg-50 {
+    width: 50% !important;
+  }
+  .w-lg-75 {
+    width: 75% !important;
+  }
+  .w-lg-100 {
+    width: 100% !important;
+  }
+  .w-lg-auto {
+    width: auto !important;
+  }
+  .h-lg-25 {
+    height: 25% !important;
+  }
+  .h-lg-50 {
+    height: 50% !important;
+  }
+  .h-lg-75 {
+    height: 75% !important;
+  }
+  .h-lg-100 {
+    height: 100% !important;
+  }
+  .h-lg-auto {
+    height: auto !important;
+  }
+  .mw-lg-100 {
+    max-width: 100% !important;
+  }
+  .mh-lg-100 {
+    max-height: 100% !important;
+  }
+  .min-vw-lg-100 {
+    min-width: 100vw !important;
+  }
+  .min-vh-lg-100 {
+    min-height: 100vh !important;
+  }
+  .vw-lg-100 {
+    width: 100vw !important;
+  }
+  .vh-lg-100 {
+    height: 100vh !important;
+  }
+}
+@media (min-width: 1200px) {
+  .w-xl-25 {
+    width: 25% !important;
+  }
+  .w-xl-50 {
+    width: 50% !important;
+  }
+  .w-xl-75 {
+    width: 75% !important;
+  }
+  .w-xl-100 {
+    width: 100% !important;
+  }
+  .w-xl-auto {
+    width: auto !important;
+  }
+  .h-xl-25 {
+    height: 25% !important;
+  }
+  .h-xl-50 {
+    height: 50% !important;
+  }
+  .h-xl-75 {
+    height: 75% !important;
+  }
+  .h-xl-100 {
+    height: 100% !important;
+  }
+  .h-xl-auto {
+    height: auto !important;
+  }
+  .mw-xl-100 {
+    max-width: 100% !important;
+  }
+  .mh-xl-100 {
+    max-height: 100% !important;
+  }
+  .min-vw-xl-100 {
+    min-width: 100vw !important;
+  }
+  .min-vh-xl-100 {
+    min-height: 100vh !important;
+  }
+  .vw-xl-100 {
+    width: 100vw !important;
+  }
+  .vh-xl-100 {
+    height: 100vh !important;
+  }
+}
 .grid {
   display: grid;
   grid-template-rows: repeat(1, 1fr);

diff --git a/Source/Blazorise.Bootstrap/wwwroot/blazorise.bootstrap.min.css b/Source/Blazorise.Bootstrap/wwwroot/blazorise.bootstrap.min.css
diff --git a/Source/Blazorise.Bootstrap5/Bootstrap5ClassProvider.cs b/Source/Blazorise.Bootstrap5/Bootstrap5ClassProvider.cs
@@ -1350,6 +1350,8 @@ public override string Sizing( SizingType sizingType, SizingSize sizingSize, Siz
         return sb.ToString();
     }
 
+    public override string Sizing( SizingType sizingType, SizingSize sizingSize, IEnumerable<SizingDefinition> rules ) => null;
+
     #endregion
 
     #region Visibility

diff --git a/Source/Blazorise.Bulma/BulmaClassProvider.cs b/Source/Blazorise.Bulma/BulmaClassProvider.cs
@@ -1387,6 +1387,8 @@ public override string Sizing( SizingType sizingType, SizingSize sizingSize, Siz
         return sb.ToString();
     }
 
+    public override string Sizing( SizingType sizingType, SizingSize sizingSize, IEnumerable<SizingDefinition> rules ) => null;
+
     #endregion
 
     #region Float

diff --git a/Source/Blazorise.Tailwind/TailwindClassProvider.cs b/Source/Blazorise.Tailwind/TailwindClassProvider.cs
@@ -1957,6 +1957,8 @@ public override string Sizing( SizingType sizingType, SizingSize sizingSize, Siz
         return sb.ToString();
     }
 
+    public override string Sizing( SizingType sizingType, SizingSize sizingSize, IEnumerable<SizingDefinition> rules ) => null;
+
     #endregion
 
     #region Visibility