Figure: generate size CSS styles for material provider (#5018)

Megabit · Sep 24, 2023 · c8ee9a9 · c8ee9a9
1 parent 7e23f56
commit c8ee9a9
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 1 deletion.
diff --git a/Source/Blazorise.Material/Styles/_figure.scss b/Source/Blazorise.Material/Styles/_figure.scss
@@ -0,0 +1,8 @@
+.figure {
+    @each $dimension in $figure-dimensions {
+        &.figure-is-#{$dimension}x#{$dimension} {
+            height: $dimension * 1px;
+            width: $dimension * 1px;
+        }
+    }
+}
diff --git a/Source/Blazorise.Material/Styles/_variables.scss b/Source/Blazorise.Material/Styles/_variables.scss
@@ -10,6 +10,8 @@ $yiq-text-dark: $text-dark !default;
 // The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
 $yiq-contrasted-threshold: 150 !default;
 
+$figure-dimensions: 16 24 32 48 64 96 128 256 512 !default;
+
 $primary: #9c27b0 !default;
 $secondary: #ff4081 !default;
 $success: #4caf50 !default;

diff --git a/Source/Blazorise.Material/Styles/blazorise.material.scss b/Source/Blazorise.Material/Styles/blazorise.material.scss
@@ -25,6 +25,7 @@ $enable-ripple: true !default; // Enable ripple effect on components (Buttons, m
 @import "card";
 @import "dropdown";
 @import "extensions";
+@import "figure";
 @import "form";
 @import "grid";
 @import "jumbotron";

diff --git a/Source/Blazorise.Material/wwwroot/blazorise.material.css b/Source/Blazorise.Material/wwwroot/blazorise.material.css
@@ -247,6 +247,43 @@
   z-index: 1060 !important;
 }
 
+.figure.figure-is-16x16 {
+  height: 16px;
+  width: 16px;
+}
+.figure.figure-is-24x24 {
+  height: 24px;
+  width: 24px;
+}
+.figure.figure-is-32x32 {
+  height: 32px;
+  width: 32px;
+}
+.figure.figure-is-48x48 {
+  height: 48px;
+  width: 48px;
+}
+.figure.figure-is-64x64 {
+  height: 64px;
+  width: 64px;
+}
+.figure.figure-is-96x96 {
+  height: 96px;
+  width: 96px;
+}
+.figure.figure-is-128x128 {
+  height: 128px;
+  width: 128px;
+}
+.figure.figure-is-256x256 {
+  height: 256px;
+  width: 256px;
+}
+.figure.figure-is-512x512 {
+  height: 512px;
+  width: 512px;
+}
+
 .form-check > .form-check-input.form-check-input-pointer,
 .form-check > .form-check-label.form-check-label-pointer,
 .custom-checkbox > .custom-control-input.custom-control-input-pointer,

diff --git a/Source/Blazorise.Material/wwwroot/blazorise.material.min.css b/Source/Blazorise.Material/wwwroot/blazorise.material.min.css