doc(Layout): update sass file (#2405)

* fix: 修复样式丢失问题

* doc: 更新示例

* chore: bump version 8.0.2

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Samples/LayoutPages.razor

@@ -10,8 +10,7 @@
     <Tips class="mt-3">
         <p>@Localizer["P1"] <code>Layout</code> @Localizer["P2"] <code>dotnet new bbapp</code> @Localizer["P3"] <code>Visual Studio 2019</code> @Localizer["P4"] <code>@Localizer["P5"]</code> @Localizer["P6"] <a href="template" target="_blank">[@Localizer["P7"]]</a></p>
         <div>
-            <b>@Localizer["P8"]：</b>
-            <br />
+            <b class="mb-2">@Localizer["P8"]：</b>
             <code>Layout</code> @Localizer["P9"] <code>@Localizer["P10"]</code> @Localizer["P11"] <code>@Localizer["P12"]</code> @Localizer["P13"] <code>AdditionalAssemblies</code> @Localizer["P14"] <a href="https://docs.microsoft.com/en-us/aspnet/core/blazor/fundamentals/routing?view=aspnetcore-3.1#route-to-components-from-multiple-assemblies" target="_blank">[@Localizer["P15"]]</a>
         </div>
     </Tips>
@@ -51,7 +50,7 @@
         <p>@Localizer["P27"]</p>
         <div class="page-layout-demo-option-height">
             <span>@Localizer["P28"]</span>
-            <Slider @bind-Value="@Height" style="margin: 0 1rem;" />
+            <Slider @bind-Value="@Height" style="margin: 0 1rem; flex: 1;" />
             <BootstrapInput Value="@(Height * 100)" readonly style="width: 80px;" />
         </div>
     </div>
@@ -61,8 +60,7 @@
         <div class="page-layout-demo-option">
             <p>@Localizer["P29"]</p>
             <div>@Localizer["P30"] <b><TabLink Text="@Localizer["P31"]" Url="layout-page1" Icon="fa-solid fa-font-awesome">@Localizer["P32"]</TabLink></b> @Localizer["P33"]</div>
-            <br />
-            <div>@Localizer["P34"] <Button Text="@Localizer["P35"]" Icon="fa-solid fa-font-awesome" OnClickWithoutRender="OnNavigation" /></div>
+            <div class="mt-2">@Localizer["P34"] <Button Text="@Localizer["P35"]" Icon="fa-solid fa-font-awesome" OnClickWithoutRender="OnNavigation" /></div>
         </div>
     }
 </div>

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>8.0.1</Version>
+    <Version>8.0.2</Version>
   </PropertyGroup>
 
   <ItemGroup Condition="'$(TargetFramework)' == 'net5.0'">

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

@@ -1,21 +1,21 @@
 .layout {
-    -bb-layout-header-height: #{$bb-layout-header-height};
-    -bb-layout-header-backgound: #{$bb-layout-header-backgound};
-    -bb-layout-headerbar-backgound: #{$bb-layout-headerbar-backgound};
-    -bb-layout-headerbar-border-color: #{$bb-layout-headerbar-border-color};
-    -bb-layout-footer-backgound: #{$bb-layout-footer-backgound};
-    -bb-layout-footer-height: #{$bb-layout-footer-height};
-    -bb-layout-user-height: #{$bb-layout-user-height};
-    -bb-layout-sidebar-width: #{$bb-layout-sidebar-width};
-    -bb-layout-sidebar-collapse-width: #{$bb-layout-sidebar-collapse-width};
-    -bb-layout-sidebar-banner-background: #{$bb-layout-sidebar-banner-background};
-    -bb-layout-sidebar-scrollbar-background: #{$bb-layout-sidebar-scrollbar-background};
-    -bb-layout-sidebar-backgound: #{$bb-layout-sidebar-backgound};
-    -bb-layout-sidebar-color: #{$bb-layout-sidebar-color};
-    -bb-layout-title-color: #{$bb-layout-title-color};
-    -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-header-height: #{$bb-layout-header-height};
+    --bb-layout-header-backgound: #{$bb-layout-header-backgound};
+    --bb-layout-headerbar-backgound: #{$bb-layout-headerbar-backgound};
+    --bb-layout-headerbar-border-color: #{$bb-layout-headerbar-border-color};
+    --bb-layout-footer-backgound: #{$bb-layout-footer-backgound};
+    --bb-layout-footer-height: #{$bb-layout-footer-height};
+    --bb-layout-user-height: #{$bb-layout-user-height};
+    --bb-layout-sidebar-width: #{$bb-layout-sidebar-width};
+    --bb-layout-sidebar-collapse-width: #{$bb-layout-sidebar-collapse-width};
+    --bb-layout-sidebar-banner-background: #{$bb-layout-sidebar-banner-background};
+    --bb-layout-sidebar-scrollbar-background: #{$bb-layout-sidebar-scrollbar-background};
+    --bb-layout-sidebar-backgound: #{$bb-layout-sidebar-backgound};
+    --bb-layout-sidebar-color: #{$bb-layout-sidebar-color};
+    --bb-layout-title-color: #{$bb-layout-title-color};
+    --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};
     display: flex;
     height: 100%;
     width: 100%;