Shadow utility (#2274)

Megabit · Apr 29, 2021 · 60b5107 · 60b5107
1 parent 90d54d1
commit 60b5107
Show file tree

Hide file tree

Showing 20 changed files with 273 additions and 0 deletions.
diff --git a/Demos/Blazorise.Demo/Layouts/MainLayout.razor b/Demos/Blazorise.Demo/Layouts/MainLayout.razor
@@ -152,6 +152,9 @@
                                     <BarDropdownItem To="tests/utilities/layout">
                                         Layout
                                     </BarDropdownItem>
+                                    <BarDropdownItem To="tests/utilities/shadows">
+                                        Shadows
+                                    </BarDropdownItem>
                                     <BarDropdownItem To="tests/utilities/sizing">
                                         Sizing
                                     </BarDropdownItem>

diff --git a/Demos/Blazorise.Demo/Pages/Tests/ShadowPage.razor b/Demos/Blazorise.Demo/Pages/Tests/ShadowPage.razor
@@ -0,0 +1,29 @@
+@page "/tests/utilities/shadows"
+
+<Row>
+    <Column ColumnSize="ColumnSize.IsFull">
+        <Card Margin="Margin.Is4.OnY">
+            <CardHeader>
+                <CardTitle>Shadows</CardTitle>
+            </CardHeader>
+            <CardBody>
+                <Paragraph>
+                    Add or remove shadows to elements with box-shadow utilities.
+                </Paragraph>
+            </CardBody>
+        </Card>
+    </Column>
+</Row>
+
+<Row>
+    <Column ColumnSize="ColumnSize.IsFull">
+        <Card>
+            <CardBody>
+                <Div Shadow="Shadow.Remove" Background="Background.Light" Padding="Padding.Is3" Margin="Margin.Is5.FromBottom" Border="Border.Rounded">No shadow</Div>
+                <Div Shadow="Shadow.Small" Background="Background.White" Padding="Padding.Is3" Margin="Margin.Is5.FromBottom" Border="Border.Rounded">Small shadow</Div>
+                <Div Shadow="Shadow.Default" Background="Background.White" Padding="Padding.Is3" Margin="Margin.Is5.FromBottom" Border="Border.Rounded">Regular shadow</Div>
+                <Div Shadow="Shadow.Large" Background="Background.White" Padding="Padding.Is3" Margin="Margin.Is5.FromBottom" Border="Border.Rounded">Larger shadow</Div>
+            </CardBody>
+        </Card>
+    </Column>
+</Row>
diff --git a/Source/Blazorise.AntDesign/AntDesignClassProvider.cs b/Source/Blazorise.AntDesign/AntDesignClassProvider.cs
@@ -1129,6 +1129,18 @@ public override string VerticalAlignment( VerticalAlignment verticalAlignment )
 
         #endregion
 
+        #region Shadow
+
+        public override string Shadow( Shadow shadow )
+        {
+            if ( shadow == Blazorise.Shadow.Default )
+                return "ant-shadow";
+
+            return $"ant-shadow-{ToShadow( shadow )}";
+        }
+
+        #endregion
+
         #region Enums
 
         public override string ToColumnWidth( ColumnWidth columnWidth )

diff --git a/Source/Blazorise.AntDesign/Styles/_utilities.scss b/Source/Blazorise.AntDesign/Styles/_utilities.scss
@@ -512,3 +512,19 @@
     width: 100%;
     height: auto;
 }
+
+.ant-shadow-sm {
+    box-shadow: $box-shadow-sm !important;
+}
+
+.ant-shadow {
+    box-shadow: $box-shadow !important;
+}
+
+.ant-shadow-lg {
+    box-shadow: $box-shadow-lg !important;
+}
+
+.ant-shadow-none {
+    box-shadow: none !important;
+}
diff --git a/Source/Blazorise.AntDesign/Styles/_variables.scss b/Source/Blazorise.AntDesign/Styles/_variables.scss
@@ -182,3 +182,7 @@ $border-color: #adb5bd;
 
 $sizes: () !default;
 $sizes: map-merge( ( 25: 25%, 50: 50%, 75: 75%, 100: 100%, auto: auto ), $sizes );
+
+$box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default;
+$box-shadow: 0 .5rem 1rem rgba($black, .15) !default;
+$box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default;
diff --git a/Source/Blazorise.AntDesign/wwwroot/blazorise.antdesign.css b/Source/Blazorise.AntDesign/wwwroot/blazorise.antdesign.css
@@ -5137,3 +5137,15 @@
 .ant-image-img-fluid {
     width: 100%;
     height: auto; }
+
+.ant-shadow-sm {
+    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; }
+
+.ant-shadow {
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; }
+
+.ant-shadow-lg {
+    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; }
+
+.ant-shadow-none {
+    box-shadow: none !important; }
diff --git a/Source/Blazorise.Bootstrap/BootstrapClassProvider.cs b/Source/Blazorise.Bootstrap/BootstrapClassProvider.cs
@@ -1111,6 +1111,18 @@ public override string VerticalAlignment( VerticalAlignment verticalAlignment )
 
         #endregion
 
+        #region Shadow
+
+        public override string Shadow( Shadow shadow )
+        {
+            if ( shadow == Blazorise.Shadow.Default )
+                return "shadow";
+
+            return $"shadow-{ToShadow( shadow )}";
+        }
+
+        #endregion
+
         public override bool UseCustomInputStyles { get; set; } = true;
 
         public override string Provider => "Bootstrap";

diff --git a/Source/Blazorise.Bulma/BulmaClassProvider.cs b/Source/Blazorise.Bulma/BulmaClassProvider.cs
@@ -1141,6 +1141,18 @@ public override string VerticalAlignment( VerticalAlignment verticalAlignment )
 
         #endregion
 
+        #region Shadow
+
+        public override string Shadow( Shadow shadow )
+        {
+            if ( shadow == Blazorise.Shadow.Default )
+                return "has-shadow";
+
+            return $"has-shadow-{ToShadow( shadow )}";
+        }
+
+        #endregion
+
         #region Enums
 
         public override string ToSize( Size size )
@@ -1379,6 +1391,17 @@ public override string ToAlignContent( FlexAlignContent alignContent )
             };
         }
 
+        public override string ToShadow( Shadow shadow )
+        {
+            return shadow switch
+            {
+                Blazorise.Shadow.Remove => "none",
+                Blazorise.Shadow.Small => "small",
+                Blazorise.Shadow.Large => "large",
+                _ => null,
+            };
+        }
+
         #endregion
 
         public override bool UseCustomInputStyles { get; set; } = false;

diff --git a/Source/Blazorise.Bulma/Styles/_utilities.scss b/Source/Blazorise.Bulma/Styles/_utilities.scss
@@ -397,3 +397,19 @@
 .is-vertical-align-text-top {
     vertical-align: text-top !important;
 }
+
+.has-shadow-small {
+    box-shadow: $box-shadow-sm !important;
+}
+
+.has-shadow {
+    box-shadow: $box-shadow !important;
+}
+
+.has-shadow-large {
+    box-shadow: $box-shadow-lg !important;
+}
+
+.has-shadow-none {
+    box-shadow: none !important;
+}
diff --git a/Source/Blazorise.Bulma/Styles/_variables.scss b/Source/Blazorise.Bulma/Styles/_variables.scss
@@ -142,3 +142,7 @@ $steps-divider-height: .2em !default
 
 $sizes: () !default;
 $sizes: map-merge( ( 25: 25%, 50: 50%, 75: 75%, 100: 100%, auto: auto ), $sizes );
+
+$box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default;
+$box-shadow: 0 .5rem 1rem rgba($black, .15) !default;
+$box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default;
diff --git a/Source/Blazorise.Bulma/wwwroot/blazorise.bulma.css b/Source/Blazorise.Bulma/wwwroot/blazorise.bulma.css
@@ -2025,6 +2025,18 @@
 .is-vertical-align-text-top {
     vertical-align: text-top !important; }
 
+.has-shadow-small {
+    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; }
+
+.has-shadow {
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; }
+
+.has-shadow-large {
+    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; }
+
+.has-shadow-none {
+    box-shadow: none !important; }
+
 .b-bar-vertical-inline.b-bar-dark .is-active,
 .b-bar-vertical.b-bar-dark .is-active {
     color: #fff !important; }

diff --git a/Source/Blazorise.Frolic/FrolicClassProvider.cs b/Source/Blazorise.Frolic/FrolicClassProvider.cs
@@ -1155,6 +1155,18 @@ public override string VerticalAlignment( VerticalAlignment verticalAlignment )
 
         #endregion
 
+        #region Shadow
+
+        public override string Shadow( Shadow shadow )
+        {
+            if ( shadow == Blazorise.Shadow.Default )
+                return "e-shadow";
+
+            return $"e-shadow-{ToShadow( shadow )}";
+        }
+
+        #endregion
+
         #region Enums
 
         public override string ToSize( Size size )

diff --git a/Source/Blazorise.Frolic/Styles/_utilities.scss b/Source/Blazorise.Frolic/Styles/_utilities.scss
@@ -476,3 +476,19 @@ $dimensions: 16 24 32 48 64 96 128 256 512 !default
     width: 100%;
     height: auto;
 }
+
+.e-shadow-sm {
+    box-shadow: $box-shadow-sm !important;
+}
+
+.e-shadow {
+    box-shadow: $box-shadow !important;
+}
+
+.e-shadow-lg {
+    box-shadow: $box-shadow-lg !important;
+}
+
+.e-shadow-none {
+    box-shadow: none !important;
+}
diff --git a/Source/Blazorise.Frolic/Styles/_variables.scss b/Source/Blazorise.Frolic/Styles/_variables.scss
@@ -131,3 +131,7 @@ $steps-divider-height: .2em !default
 
 $sizes: () !default;
 $sizes: map-merge( ( 25: 25%, 50: 50%, 75: 75%, 100: 100%, auto: auto ), $sizes );
+
+$box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default;
+$box-shadow: 0 .5rem 1rem rgba($black, .15) !default;
+$box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default;
diff --git a/Source/Blazorise.Frolic/wwwroot/blazorise.frolic.css b/Source/Blazorise.Frolic/wwwroot/blazorise.frolic.css
@@ -1026,6 +1026,18 @@
     width: 100%;
     height: auto; }
 
+.e-shadow-sm {
+    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; }
+
+.e-shadow {
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; }
+
+.e-shadow-lg {
+    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; }
+
+.e-shadow-none {
+    box-shadow: none !important; }
+
 .e-alert {
     margin-bottom: 1rem; }
 

diff --git a/Source/Blazorise/Base/BaseComponent.cs b/Source/Blazorise/Base/BaseComponent.cs
@@ -53,6 +53,8 @@ public abstract class BaseComponent : BaseAfterRenderComponent
 
         private Background background = Background.None;
 
+        private Shadow shadow = Shadow.None;
+
         #endregion
 
         #region Constructors
@@ -195,6 +197,9 @@ protected virtual void BuildClasses( ClassBuilder builder )
 
             if ( Background != Background.None )
                 builder.Append( ClassProvider.BackgroundColor( Background ) );
+
+            if ( Shadow != Shadow.None )
+                builder.Append( ClassProvider.Shadow( Shadow ) );
         }
 
         /// <summary>
@@ -582,6 +587,21 @@ public Background Background
             }
         }
 
+        /// <summary>
+        /// Gets or sets the component shadow box.
+        /// </summary>
+        [Parameter]
+        public Shadow Shadow
+        {
+            get => shadow;
+            set
+            {
+                shadow = value;
+
+                DirtyClasses();
+            }
+        }
+
         /// <summary>
         /// Captures all the custom attribute that are not part of Blazorise component.
         /// </summary>

diff --git a/Source/Blazorise/Enums/Shadow.cs b/Source/Blazorise/Enums/Shadow.cs
@@ -0,0 +1,33 @@
+namespace Blazorise
+{
+    /// <summary>
+    /// Add or remove shadows to elements with box-shadow utilities.
+    /// </summary>
+    public enum Shadow
+    {
+        /// <summary>
+        /// Shadow will not be applied.
+        /// </summary>
+        None,
+
+        /// <summary>
+        /// Disables any shadow on the element.
+        /// </summary>
+        Remove,
+
+        /// <summary>
+        /// Regular shadow.
+        /// </summary>
+        Default,
+
+        /// <summary>
+        /// Small shadow.
+        /// </summary>
+        Small,
+
+        /// <summary>
+        /// Larger shadow.
+        /// </summary>
+        Large,
+    }
+}
diff --git a/Source/Blazorise/Interfaces/IClassProvider.cs b/Source/Blazorise/Interfaces/IClassProvider.cs
@@ -983,6 +983,12 @@ public interface IClassProvider
 
         #endregion
 
+        #region Shadow
+
+        string Shadow( Shadow shadow );
+
+        #endregion
+
         #region Custom
 
         string Casing( CharacterCasing characterCasing );
@@ -1078,6 +1084,8 @@ public interface IClassProvider
 
         string ToVerticalAlignment( VerticalAlignment verticalAlignment );
 
+        string ToShadow( Shadow shadow );
+
         #endregion
 
         /// <summary>