refactor: 精简样式

Author: ArgoZhang

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

@@ -64,7 +64,7 @@
     <div class="layout-menu-demo">
         <Layout IsFullSide="true" ShowFooter="true" ShowCollapseBar="true" Menus="IconSideMenuItems">
             <Header>
-                <div class="menu-demo-header">
+                <div class="ms-3">
                     @Localizer["MenusClickShrinkSpanSpan"]
                 </div>
             </Header>
@@ -80,7 +80,9 @@
                 <div style="padding: 10rem 1rem;">Main</div>
             </Main>
             <Footer>
-                <a href="@WebsiteOption.CurrentValue.BootstrapAdminLink" target="_blank">Bootstrap Admin</a>
+                <div class="text-center flex-fill">
+                    <a href="@WebsiteOption.CurrentValue.BootstrapAdminLink" target="_blank">Bootstrap Admin</a>
+                </div>
             </Footer>
         </Layout>
     </div>

src/BootstrapBlazor.Server/Components/Samples/Menus.razor.css

@@ -1,66 +1,3 @@
-.layout-menu-demo ::deep .layout-side {
-    background-color: var(--bs-body-bg);
-    color: var(--bs-body-color);
-    height: 100%;
-    border-right: 1px solid var(--bs-border-color);
+.layout-menu-demo {
+    border: 1px solid var(--bs-border-color);
 }
-
-.layout-menu-demo ::deep .menu.is-vertical:not(.is-collapsed) {
-    width: 156px;
-}
-
-.layout-menu-demo ::deep .menu-demo-header {
-    background-color: rgba(var(--bs-body-color-rgb), .12);
-    line-height: 50px;
-    color: var(--bs-body-color);
-    flex: 1;
-    padding-left: 80px;
-}
-
-.layout-menu-demo ::deep .layout-banner {
-    display: flex;
-    align-items: center;
-    padding: 0 .625rem;
-    background-color: rgba(var(--bs-body-color-rgb), .12);
-    height: 50px;
-    font-size: 1.5rem;
-}
-
-    .layout-menu-demo ::deep .layout-banner img {
-        width: 38px;
-        border-radius: var(--bs-border-radius);
-        margin-inline-end: .5rem;
-        border: 1px solid #c0c4cc;
-        background-color: #787878;
-    }
-
-.layout-menu-demo ::deep .layout-side.is-collapsed .layout-banner .layout-title {
-    width: 0;
-    overflow: hidden;
-    white-space: nowrap;
-}
-
-.layout-menu-demo ::deep .layout-menu {
-    height: 371px;
-    padding: 6px 0;
-    color: var(--bs-body-color);
-}
-
-.layout-menu-demo ::deep .layout-title {
-    color: var(--bs-body-color);
-}
-
-.layout-menu-demo ::deep .layout-header .layout-header-bar {
-    position: absolute;
-    margin: 9px 14px;
-}
-
-.layout-menu-demo ::deep .layout-footer {
-    background-color: rgba(var(--bs-body-color-rgb), .12);
-    text-align: center;
-}
-
-    .layout-menu-demo ::deep .layout-footer > a {
-        color: #000;
-        line-height: 30px;
-    }