AntDesign: upgrade to latest 4.24.15 version (Megabit#5354)

* Added new css antDesign version * fixed bugs with alert The problem with the button: in other providers, the button is inside Alert.razor, here the problem arises when we talk about ant design, in short, ant design has one div more than the others, and the alert descrtiption and alert message must be passed to that div, but not the button because otherwise the wrong positioning of the close button occurs * returned original alert demo * added breadcrumb.scss * fixed breadcrumb * removed unnecessary scss * fixed breadcrum html * fixed accordion * Remove duplicate key * Fix Switch styles * Remove script file * Fix Bar item width * Release notes * Update AntDesign guide * fic select size * Fix select close styles * Fix alert close * Fix card link * Tabs WIP * Fix tabs content * Fix row columns * Fix validation styles * Fix rows and cols gutters * Fix table resizer --------- Co-authored-by: steal4life <[email protected]>
njannink · Mar 12, 2024 · 75cda39 · 75cda39
1 parent 28e5d9f
commit 75cda39
Show file tree

Hide file tree

Showing 37 changed files with 370 additions and 143 deletions.
diff --git a/Demos/Blazorise.Demo.AntDesign/wwwroot/index.html b/Demos/Blazorise.Demo.AntDesign/wwwroot/index.html
@@ -11,7 +11,7 @@
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
     <link rel="manifest" href="manifest.json">
 
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/4.0.0/antd.css" integrity="sha256-nzhI/tsi9npc5ir08wCgBpg43SEIrc7crRJLsHE0/60=" crossorigin="anonymous" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/4.24.15/antd.min.css" integrity="sha512-Ac6zlwN6S+uQSinFAcV27Gd/TtKEDt7XWXn2xWO4Xi9dTbbpT9/vJb+VT5af6nZywrgBD3qUFTb5y1VN4YD94Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link href="_content/Blazorise.Icons.FontAwesome/v6/css/all.min.css" rel="stylesheet">
 
     <link href="_content/Blazorise/blazorise.css?v=1.4.2.0" rel="stylesheet" />
@@ -35,7 +35,6 @@
         </div>
     </div>
 
-    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/antd/4.0.0/antd.js" integrity="sha256-KweF5YgNWHMkRH8LlzYKyIdtbH/CmGuYShXmvtWUZBA=" crossorigin="anonymous"></script>-->
     <!-- EXTENSIONS -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

diff --git a/Demos/Blazorise.Demo/wwwroot/demo.css b/Demos/Blazorise.Demo/wwwroot/demo.css
@@ -115,25 +115,29 @@ code {
 }
 
 .grid.b-demo-cssgrid-columns:not(:first-child),
+.ant-grid.b-demo-cssgrid-columns:not(:first-child)
 .fui-Grid.b-demo-cssgrid-columns:not(:first-child) {
     margin-top: 1rem;
 }
 
 .grid.b-demo-cssgrid-columns > div > div:first-child,
+.ant-grid.b-demo-cssgrid-columns > div > div:first-child,
 .fui-Grid.b-demo-cssgrid-columns > div > div:first-child {
     padding: 0.75rem;
     background-color: rgba(var(--b-theme-primary-r, 112), var(--b-theme-primary-g, 44), var(--b-theme-primary-b, 248), 0.15);
     border: 1px solid rgba(var(--b-theme-primary-r, 112), var(--b-theme-primary-g, 44), var(--b-theme-primary-b, 248), 0.3);
 }
 
 .grid.b-demo-cssgrid-columns + .grid.b-demo-cssgrid-columns > div:last-child > div,
+.ant-grid.b-demo-cssgrid-columns + .ant-grid.b-demo-cssgrid-columns > div:last-child > div,
 .fui-Grid.b-demo-cssgrid-columns + .fui-Grid.b-demo-cssgrid-columns > div:last-child > div {
     padding: 0.75rem;
     background-color: rgba(var(--b-theme-secondary-r, 128), var(--b-theme-secondary-g, 128), var(--b-theme-secondary-b, 128), 0.15);
     border: 1px solid rgba(var(--b-theme-secondary-r, 128), var(--b-theme-secondary-g, 128), var(--b-theme-secondary-b, 128), 0.3);
 }
 
 .grid.b-demo-cssgrid-divs > div,
+.ant-grid.b-demo-cssgrid-divs > div,
 .fui-Grid.b-demo-cssgrid-divs > div {
     padding: 0.75rem;
     background-color: rgba(var(--b-theme-primary-r, 112), var(--b-theme-primary-g, 44), var(--b-theme-primary-b, 248), 0.15);

diff --git a/Documentation/Blazorise.Docs/Models/Snippets.generated.cs b/Documentation/Blazorise.Docs/Models/Snippets.generated.cs
@@ -9898,7 +9898,7 @@ public class Item
     .AddAntDesignProviders()
     .AddFontAwesomeIcons();";
 
-        public const string AntDesignGuideSourceFilesExample = @"<link rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/antd/4.0.0/antd.css"" integrity=""sha256-nzhI/tsi9npc5ir08wCgBpg43SEIrc7crRJLsHE0/60="" crossorigin=""anonymous"" />
+        public const string AntDesignGuideSourceFilesExample = @"<link rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/antd/4.24.15/antd.min.css"" integrity=""sha512-Ac6zlwN6S+uQSinFAcV27Gd/TtKEDt7XWXn2xWO4Xi9dTbbpT9/vJb+VT5af6nZywrgBD3qUFTb5y1VN4YD94Q=="" crossorigin=""anonymous"" referrerpolicy=""no-referrer"" />
 <link href=""_content/Blazorise.Icons.FontAwesome/v6/css/all.min.css"" rel=""stylesheet"">
 
 <link href=""_content/Blazorise/blazorise.css"" rel=""stylesheet"" />

diff --git a/...Blazorise.Docs/Pages/Docs/Guides/AntDesign/Code/AntDesignGuideSourceFilesExampleCode.html b/...Blazorise.Docs/Pages/Docs/Guides/AntDesign/Code/AntDesignGuideSourceFilesExampleCode.html
@@ -1,6 +1,6 @@
 <div class="blazorise-codeblock">
 <div class="html"><pre>
-<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">link</span> <span class="htmlAttributeName">rel</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">stylesheet</span><span class="quot">&quot;</span> <span class="htmlAttributeName">href</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">https://cdnjs.cloudflare.com/ajax/libs/antd/4.0.0/antd.css</span><span class="quot">&quot;</span> <span class="htmlAttributeName">integrity</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">sha256-nzhI/tsi9npc5ir08wCgBpg43SEIrc7crRJLsHE0/60=</span><span class="quot">&quot;</span> <span class="htmlAttributeName">crossorigin</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">anonymous</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
+<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">link</span> <span class="htmlAttributeName">rel</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">stylesheet</span><span class="quot">&quot;</span> <span class="htmlAttributeName">href</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">https://cdnjs.cloudflare.com/ajax/libs/antd/4.24.15/antd.min.css</span><span class="quot">&quot;</span> <span class="htmlAttributeName">integrity</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">sha512-Ac6zlwN6S+uQSinFAcV27Gd/TtKEDt7XWXn2xWO4Xi9dTbbpT9/vJb+VT5af6nZywrgBD3qUFTb5y1VN4YD94Q==</span><span class="quot">&quot;</span> <span class="htmlAttributeName">crossorigin</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">anonymous</span><span class="quot">&quot;</span> <span class="htmlAttributeName">referrerpolicy</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">no-referrer</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
 <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">link</span> <span class="htmlAttributeName">href</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">_content/Blazorise.Icons.FontAwesome/v6/css/all.min.css</span><span class="quot">&quot;</span> <span class="htmlAttributeName">rel</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">stylesheet</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
 
 <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">link</span> <span class="htmlAttributeName">href</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">_content/Blazorise/blazorise.css</span><span class="quot">&quot;</span> <span class="htmlAttributeName">rel</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">stylesheet</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>

diff --git a/...zorise.Docs/Pages/Docs/Guides/AntDesign/Examples/AntDesignGuideSourceFilesExample.snippet b/...zorise.Docs/Pages/Docs/Guides/AntDesign/Examples/AntDesignGuideSourceFilesExample.snippet
@@ -1,4 +1,4 @@
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/4.0.0/antd.css" integrity="sha256-nzhI/tsi9npc5ir08wCgBpg43SEIrc7crRJLsHE0/60=" crossorigin="anonymous" />
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/4.24.15/antd.min.css" integrity="sha512-Ac6zlwN6S+uQSinFAcV27Gd/TtKEDt7XWXn2xWO4Xi9dTbbpT9/vJb+VT5af6nZywrgBD3qUFTb5y1VN4YD94Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 <link href="_content/Blazorise.Icons.FontAwesome/v6/css/all.min.css" rel="stylesheet">
 
 <link href="_content/Blazorise/blazorise.css" rel="stylesheet" />

diff --git a/Documentation/Blazorise.Docs/Pages/News/2024-02-15-release-notes-150.razor b/Documentation/Blazorise.Docs/Pages/News/2024-02-15-release-notes-150.razor
@@ -47,6 +47,11 @@
             <Strong>Breakpoints</Strong>: introduced new XXL, or QuadHD size.
         </Paragraph>
     </UnorderedListItem>
+    <UnorderedListItem>
+        <Paragraph>
+            <Strong>AntDesign</Strong>: upgrade to latest 4.x version
+        </Paragraph>
+    </UnorderedListItem>
 </UnorderedList>
 
 <NewsPageSubtitle>
@@ -229,7 +234,7 @@
 </Heading>
 
 <Paragraph>
-    Introduced a new <Code>BarMenuToggleBehavior</Code>. 
+    Introduced a new <Code>BarMenuToggleBehavior</Code>.
     By default, it is set to <Code>BarMenuToggleBehavior.AllowMultipleMenus</Code> which will keep all the menus you toggle open.
     You can also set it to <Code>BarMenuToggleBehavior.AllowSingleMenu</Code> to only keep a menu open at a time.
 </Paragraph>
@@ -242,4 +247,12 @@
     As with many other features in this release we have updated internals of RichTextEdit to work with the latest version of <Anchor To="https://github.com/quilljs/quill" Title="Link to Quill JS">Quill JS</Anchor> library. This update means there will be less security risks that were reported by using an older version.
 </Paragraph>
 
+<Heading Size="HeadingSize.Is3">
+    AntDesign upgrade to latest 4.x version
+</Heading>
+
+<Paragraph>
+    In this release, we've updated our AntDesign provider. Previously, we were using the older 4.0 version of AntDesign, which didn't do justice to this exceptional framework. Although we aim to upgrade to the latest AntDesign 5.1 version in the upcoming Blazorise milestone, this update addresses several issues identified while developing Blazorise 1.5.
+</Paragraph>
+
 <NewsPagePostInfo UserName="Mladen Macanović" ImageName="mladen" PostedOn="February 29th, 2024" Read="9 min" />
diff --git a/Source/Blazorise.AntDesign/Alert.razor b/Source/Blazorise.AntDesign/Alert.razor
@@ -0,0 +1,10 @@
+@inherits Blazorise.Alert
+<CascadingValue Value="@this" IsFixed>
+    <CascadingValue Value="@State">
+        <div @ref="@ElementRef" id="@ElementId" class="@ClassNames" style="@StyleNames" role="alert" @attributes="@Attributes">
+            <div class="ant-alert-content">
+                @ChildContent
+            </div>
+        </div>
+    </CascadingValue>
+</CascadingValue>
diff --git a/Source/Blazorise.AntDesign/AlertDescription.razor b/Source/Blazorise.AntDesign/AlertDescription.razor
@@ -1,4 +1,4 @@
 @inherits Blazorise.AlertDescription
-<span @ref="@ElementRef" id="@ElementId" class="@ClassNames" style="@StyleNames" @attributes="@Attributes">
+<div @ref="@ElementRef" id="@ElementId" class="@ClassNames" style="@StyleNames" @attributes="@Attributes">
     @ChildContent
-</span>
+</div>
diff --git a/Source/Blazorise.AntDesign/AlertMessage.razor b/Source/Blazorise.AntDesign/AlertMessage.razor
@@ -1,4 +1,4 @@
 @inherits Blazorise.AlertMessage
-<span @ref="@ElementRef" id="@ElementId" class="@ClassNames" style="@StyleNames" @attributes="@Attributes">
+<div @ref="@ElementRef" id="@ElementId" class="@ClassNames" style="@StyleNames" @attributes="@Attributes">
     @ChildContent
-</span>
+</div>
diff --git a/Source/Blazorise.AntDesign/AntDesignClassProvider.cs b/Source/Blazorise.AntDesign/AntDesignClassProvider.cs
@@ -312,7 +312,7 @@ public override string FieldValidation( ValidationStatus validationStatus )
 
     public override string FieldLabelRequiredIndicator( bool requiredIndicator )
         => requiredIndicator
-            ? "ant-form-item-label-required"
+            ? "ant-form-item-required"
             : null;
 
     #endregion
@@ -520,7 +520,7 @@ public override string DropdownToggleSize( Size size, bool outline )
 
     public override string TabPanel() => "ant-tabs-tabpane";
 
-    public override string TabPanelActive( bool active ) => active ? "ant-tabs-tabpane-active" : "ant-tabs-tabpane-inactive";
+    public override string TabPanelActive( bool active ) => active ? "ant-tabs-tabpane-active" : "ant-tabs-tabpane-hidden";
 
     #endregion
 
@@ -624,7 +624,7 @@ public override string DropdownToggleSize( Size size, bool outline )
 
     public override string CardText() => "ant-card-text";
 
-    public override string CardLink() => "ant-card-extra";
+    public override string CardLink() => "ant-card-link";
 
     public override string CardLinkUnstyled( bool unstyled ) => unstyled ? "ant-link-unstyled" : null;
 
@@ -748,7 +748,7 @@ public override string BarToggler( BarMode mode, BarTogglerMode togglerMode ) =>
 
     public override string AccordionBody() => "ant-collapse-content";
 
-    public override string AccordionBodyActive( bool active ) => active ? "ant-collapse-content-active" : "ant-collapse-content-inactive";
+    public override string AccordionBodyActive( bool active ) => active ? "ant-collapse-content-active" : "ant-collapse-content-inactive ant-collapse-content-hidden";
 
     public override string AccordionBodyContent( bool firstInAccordion, bool lastInAccordion ) => "ant-collapse-content-box";
 
@@ -1181,7 +1181,7 @@ public override string TextSize( TextSizeType textSizeType, TextSizeDefinition t
         return $"ant-font-size-{ToTextSizeType( textSizeType )}";
     }
 
-    public override string TextItalic() => "font-italic";
+    public override string TextItalic() => "ant-typography-italic";
 
     #endregion
 
@@ -1654,6 +1654,16 @@ public override string ToAlignContent( FlexAlignContent alignContent )
         };
     }
 
+    public override string ToValidationStatus( ValidationStatus validationStatus )
+    {
+        return validationStatus switch
+        {
+            Blazorise.ValidationStatus.Success => "ant-input-status-success",
+            Blazorise.ValidationStatus.Error => "ant-input-status-error",
+            _ => null,
+        };
+    }
+
     #endregion
 
     public override bool UseCustomInputStyles { get; set; } = true;

diff --git a/Source/Blazorise.AntDesign/Breadcrumb.razor b/Source/Blazorise.AntDesign/Breadcrumb.razor
@@ -1,6 +1,8 @@
 @inherits Blazorise.Breadcrumb
 <CascadingValue Value="@this" IsFixed>
-    <div @ref="@ElementRef" id="@ElementId" class="@ClassNames" style="@StyleNames" aria-label="breadcrumbs" @attributes="@Attributes">
-        @ChildContent
-    </div>
+    <nav @ref="@ElementRef" id="@ElementId" class="@ClassNames" style="@StyleNames" aria-label="breadcrumbs" @attributes="@Attributes">
+        <ol>
+            @ChildContent
+        </ol>
+    </nav>
 </CascadingValue>
diff --git a/Source/Blazorise.AntDesign/BreadcrumbItem.razor b/Source/Blazorise.AntDesign/BreadcrumbItem.razor
@@ -1,6 +1,6 @@
 @inherits Blazorise.BreadcrumbItem
 <CascadingValue Value="@this" IsFixed>
-    <span @ref="@ElementRef" id="@ElementId" class="@ClassNames" style="@StyleNames">
+    <li>
         @ChildContent
-    </span>
+    </li>
 </CascadingValue>
diff --git a/Source/Blazorise.AntDesign/CardLink.razor b/Source/Blazorise.AntDesign/CardLink.razor
@@ -1,6 +1,4 @@
 @inherits Blazorise.CardLink
-<div @ref="@ElementRef" id="@ElementId" class="@ClassNames" style="@StyleNames" @attributes="@Attributes">
-    <a href="@To" title="@Title" target="@TargetName">
-        @ChildContent
-    </a>
-</div>
+<a @ref="@ElementRef" id="@ElementId" class="@ClassNames" href="@To" title="@Title" target="@TargetName" style="@StyleNames" @attributes="@Attributes">
+    @ChildContent
+</a>
diff --git a/Source/Blazorise.AntDesign/CloseButton.razor b/Source/Blazorise.AntDesign/CloseButton.razor
@@ -26,6 +26,4 @@
 
 @code {
     [CascadingParameter] protected Offcanvas ParentOffcanvas { get; set; }
-
-    [CascadingParameter] protected Toast ParentToast { get; set; }
 }
diff --git a/Source/Blazorise.AntDesign/Config.cs b/Source/Blazorise.AntDesign/Config.cs
@@ -42,6 +42,7 @@ public static IServiceCollection AddAntDesignProviders( this IServiceCollection
         { typeof( Blazorise.Addon ), typeof( AntDesign.Addon ) },
         { typeof( Blazorise.AddonLabel ), typeof( AntDesign.AddonLabel ) },
         { typeof( Blazorise.Addons ), typeof( AntDesign.Addons ) },
+        { typeof( Blazorise.Alert ), typeof( AntDesign.Alert ) },
         { typeof( Blazorise.AlertDescription ), typeof( AntDesign.AlertDescription ) },
         { typeof( Blazorise.AlertMessage ), typeof( AntDesign.AlertMessage ) },
         { typeof( Blazorise.Badge ), typeof( AntDesign.Badge ) },
@@ -100,5 +101,6 @@ public static IServiceCollection AddAntDesignProviders( this IServiceCollection
         { typeof( Blazorise.TabsContent ), typeof( AntDesign.TabsContent ) },
         { typeof( Blazorise.TextEdit ), typeof( AntDesign.TextEdit ) },
         { typeof( Blazorise.Toast ), typeof( AntDesign.Toast ) },
+        { typeof( Blazorise.ValidationError ), typeof( AntDesign.ValidationError ) },
     };
 }
diff --git a/Source/Blazorise.AntDesign/Select.razor b/Source/Blazorise.AntDesign/Select.razor
@@ -29,7 +29,7 @@
             else
             {
                 <span class="ant-select-selection-search">
-                    <input @ref="@ElementRef" id="@InputElementId" class="ant-select-selection-search-input" role="combobox" tabindex="@TabIndex" @onkeydown="@OnKeyDownHandler" @onkeypress="@OnKeyPressHandler" @onkeyup="@OnKeyUpHandler" @onblur="@OnBlurHandler" @onfocus="@OnFocusHandler" @onfocusin="@OnFocusInHandler" @onfocusout="@OnFocusOutHandler" readonly="true" multiple="@Multiple" aria-haspopup="listbox" aria-owns="@SelectListId" aria-controls="@SelectListId" aria-expanded="false" autocomplete="off" aria-autocomplete="list" unselectable="on">
+                    <input @ref="@ElementRef" id="@InputElementId" class="ant-select-selection-search-input" role="combobox" tabindex="@TabIndex" @onkeydown="@OnKeyDownHandler" @onkeypress="@OnKeyPressHandler" @onkeyup="@OnKeyUpHandler" @onblur="@OnBlurHandler" @onfocus="@OnFocusHandler" @onfocusin="@OnFocusInHandler" @onfocusout="@OnFocusOutHandler" readonly="true" multiple="@Multiple" aria-haspopup="listbox" aria-owns="@SelectListId" aria-controls="@SelectListId" aria-expanded="@InputAriaExpanded" autocomplete="off" aria-autocomplete="list" unselectable="on">
                 </span>
                 <span class="ant-select-selection-item">
                     @SelectedItem

diff --git a/Source/Blazorise.AntDesign/Select.razor.cs b/Source/Blazorise.AntDesign/Select.razor.cs
@@ -308,7 +308,7 @@ string DropdownClassNames
             if ( Expanded )
                 sb.Append( " slide-up-enter slide-up-enter-active slide-up" );
             else
-                sb.Append( " slide-up-leave slide-up-leave-active slide-up" );
+                sb.Append( " ant-select-dropdown-hidden slide-up-leave slide-up-leave-active slide-up" );
 
             return sb.ToString();
         }
@@ -320,6 +320,8 @@ string DropdownClassNames
     string DropdownInnerStyleNames
         => $"max-height: {( MaxVisibleItems == null ? 256 : MaxVisibleItems * 32 )}px; overflow-y: auto; overflow-anchor: none;";
 
+    string InputAriaExpanded => Expanded ? "true" : "false";
+
     [Inject] public IJSClosableModule JSClosableModule { get; set; }
 
     #endregion

diff --git a/Source/Blazorise.AntDesign/SelectItem.razor b/Source/Blazorise.AntDesign/SelectItem.razor
@@ -1,6 +1,6 @@
 @typeparam TValue
 @inherits Blazorise.SelectItem<TValue>
-<div @ref="@ElementRef" id="@ElementId" aria-selected="false" class="@SelectItemClassNames" style="@StyleNames" hidden="@Hidden" @onclick="@OnClickHandler" @onmouseover="@OnMouseOverHandler" @onmouseout="@OnMouseOutHandler">
+<div @ref="@ElementRef" id="@ElementId" aria-selected="@ActiveString" class="@SelectItemClassNames" style="@StyleNames" hidden="@Hidden" @onclick="@OnClickHandler" @onmouseover="@OnMouseOverHandler" @onmouseout="@OnMouseOutHandler">
     <div class="ant-select-item-option-content">@ChildContent</div>
     <span class="ant-select-item-option-state" unselectable="on" aria-hidden="true" style="user-select: none;"></span>
 </div>
diff --git a/Source/Blazorise.AntDesign/SelectItem.razor.cs b/Source/Blazorise.AntDesign/SelectItem.razor.cs
@@ -65,5 +65,7 @@ string SelectItemClassNames
 
     bool Active { get; set; }
 
+    string ActiveString => Active ? "true" : "false";
+
     #endregion
 }
diff --git a/Source/Blazorise.AntDesign/Styles/_variables.scss b/Source/Blazorise.AntDesign/Styles/_variables.scss
@@ -97,7 +97,7 @@ $modal-dialog-margin: .5rem !default;
 
 // Cards
 
-$grid-gutter-width: 30px !default;
+$grid-gutter-width: 8px !default;
 
 $card-group-margin: $grid-gutter-width / 2 !default;
 $card-deck-margin: $card-group-margin !default;

diff --git a/Source/Blazorise.AntDesign/Styles/components/_alert.scss b/Source/Blazorise.AntDesign/Styles/components/_alert.scss
@@ -12,4 +12,10 @@
             border-color: $border;
         }
     }
+
+    .ant-close {
+        position: absolute;
+        right: 15px;
+        top: 15px;
+    }
 }
diff --git a/Source/Blazorise.AntDesign/Styles/components/_bar.scss b/Source/Blazorise.AntDesign/Styles/components/_bar.scss
@@ -466,3 +466,15 @@
         }
     }
 }
+
+.ant-menu-inline {
+    &.ant-menu-root {
+        .ant-menu-item {
+            display: block;
+
+            > a {
+                display: block;
+            }
+        }
+    }
+}
diff --git a/Source/Blazorise.AntDesign/Styles/components/_card.scss b/Source/Blazorise.AntDesign/Styles/components/_card.scss
@@ -49,3 +49,7 @@
     width: 100%;
     margin-left: 0px;
 }
+
+.ant-card-link + .ant-card-link {
+    margin-left: 1.25rem;
+}
diff --git a/Source/Blazorise.AntDesign/Styles/components/_form.scss b/Source/Blazorise.AntDesign/Styles/components/_form.scss
@@ -89,6 +89,10 @@
             padding-left: 0;
         }
     }
+
+    .ant-select {
+        width: 100%;
+    }
 }
 
 .ant-input {
@@ -317,4 +321,4 @@ textarea.ant-input.ant-input-static {
 .ant-form-item-label-required:after {
     content: " *";
     color: var(--b-theme-danger, $danger);
-}
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -26,6 +26,4 @@ @@
     @code {
         [CascadingParameter] protected Offcanvas ParentOffcanvas { get; set; }
-        [CascadingParameter] protected Toast ParentToast { get; set; }
     }