feat(Layout): add default style (#4609)

* refactor: 更新变量

* feat: Layout 组件增加对 Logout 下拉框样式控制

* style: 增加默认样式

* style: 增加 侧边栏菜单颜色变量

* chore: bump version 9.0.0-rc.2.11.3.1

Author: ArgoZhang

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.0.0-rc.2.11.5.0</Version>
+    <Version>9.0.0-rc.2.11.5.1</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/BootstrapBlazor/Components/Layout/Layout.razor.scss

@@ -2,7 +2,7 @@
     --bb-layout-header-height: #{$bb-layout-header-height};
     --bb-layout-header-background: #{$bb-layout-header-background};
     --bb-layout-header-color: #{$bb-layout-header-color};
-    --bb-layout-headerbar-color: var(--bb-layout-header-color);
+    --bb-layout-headerbar-color: #{$bb-layout-header-color};
     --bb-layout-headerbar-background: #{$bb-layout-headerbar-background};
     --bb-layout-headerbar-border-color: #{$bb-layout-headerbar-border-color};
     --bb-layout-headerbar-padding: #{$bb-layout-headerbar-padding};
@@ -18,6 +18,9 @@
     --bb-layout-title-margin-left: #{$bb-layout-title-margin-left};
     --bb-layout-banner-font-size: #{$bb-layout-banner-font-size};
     --bb-layout-banner-logo-width: #{$bb-layout-banner-logo-width};
+    --bb-layout-menu-user-banner-background: #{$bb-layout-menu-user-banner-background};
+    --bb-layout-menu-user-border-color: #{$bb-layout-menu-user-border-color};
+    --bb-layout-menu-item-hover-bg: #{$bb-layout-menu-item-hover-bg};
     display: flex;
     height: 100%;
     width: 100%;
@@ -122,6 +125,18 @@
                 width: calc(var(--bb-layout-header-height) - 6px);
                 height: calc(var(--bb-layout-header-height) - 6px);
             }
+
+            .dropdown-logout {
+                --bb-logout-text-color: var(--bb-layout-header-color);
+                --bb-logout-user-bg: var(--bb-layout-menu-user-banner-background);
+                --bb-logout-menu-border-color: var(--bb-layout-menu-user-border-color);
+            }
+        }
+
+        .layout-menu {
+            .menu {
+                --bb-menu-item-hover-bg: var(--bb-layout-menu-item-hover-bg);
+            }
         }
 
         .layout-main {

src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss

@@ -321,8 +321,8 @@ $bb-ip-cell-max-width: 30px;
 
 // Layout
 $bb-layout-header-height: 50px;
-$bb-layout-header-background: var(--bs-body-bg);
-$bb-layout-header-color: var(--bs-body-color);
+$bb-layout-header-background: #2c67be;
+$bb-layout-header-color: rgb(200, 210, 228);;
 $bb-layout-headerbar-background: var(--bb-header-bg);
 $bb-layout-headerbar-border-color: var(--bs-border-color);
 $bb-layout-headerbar-padding: 4px 12px;
@@ -331,13 +331,16 @@ $bb-layout-footer-color: var(--bs-body-color);
 $bb-layout-footer-height: 40px;
 $bb-layout-sidebar-width: 214px;
 $bb-layout-sidebar-collapse-width: 70px;
-$bb-layout-sidebar-banner-background: var(--bs-body-bg);
-$bb-layout-sidebar-background: var(--bs-body-bg);
+$bb-layout-sidebar-banner-background: #2c67be;
+$bb-layout-sidebar-background: #edf6ff;
 $bb-layout-sidebar-color: var(--bs-body-color);
-$bb-layout-title-color: var(--bs-body-color);
+$bb-layout-title-color: rgb(200, 210, 228);
 $bb-layout-title-margin-left: .5rem;
 $bb-layout-banner-font-size: 1.5rem;
 $bb-layout-banner-logo-width: 42px;
+$bb-layout-menu-user-banner-background: #1b55aa;
+$bb-layout-menu-user-border-color: #1b55aa;
+$bb-layout-menu-item-hover-bg: #9bc8f5;
 
 // Light
 $bb-light-bg: radial-gradient(circle, #fff, #aaa, #333);