doc(RibbonTab): support dark theme (#2661)

* doc: 更新版本号样式不折行 * doc: 更新 logout 示例样式 * refactor: 精简 menu 样式 * doc: Menu 示例适配暗黑主题 * refactor: 更新 RibbonTab 样式 * doc: 更新 RibbtonTab 示例 * refactor: Select 适配暗黑主题
dotnetcore · Dec 24, 2023 · c4f92ff · c4f92ff
1 parent 568097f
commit c4f92ff
Show file tree

Hide file tree

Showing 10 changed files with 39 additions and 29 deletions.
diff --git a/src/BootstrapBlazor.Server/Components/Components/Header.razor.css b/src/BootstrapBlazor.Server/Components/Components/Header.razor.css
@@ -40,15 +40,16 @@
     color: var(--bs-navbar-color);
     border-right: 1px solid #dddddd40;
     padding-right: 0.5rem;
+    white-space: nowrap;
 }
 
-    .icon-theme img {
-        cursor: pointer;
-    }
+.icon-theme img {
+    cursor: pointer;
+}
 
-    .icon-theme .icon-dark {
-        display: none;
-    }
+.icon-theme .icon-dark {
+    display: none;
+}
 
 [data-bs-theme='dark'] .icon-dark {
     display: block;

diff --git a/src/BootstrapBlazor.Server/Components/Samples/Logouts.razor b/src/BootstrapBlazor.Server/Components/Samples/Logouts.razor
@@ -8,15 +8,19 @@
 <DemoBlock Title="@Localizer["LogoutsNormalTitle"]"
            Introduction="@Localizer["LogoutsNormalIntro"]"
            Name="Normal">
-    <Logout ImageUrl="./images/Argo.png" DisplayName="Administrators" UserName="Admin" class="bg-secondary" />
-    <div style="height: 80px;"></div>
+    <div class="logout-custom">
+        <Logout ImageUrl="./images/Argo.png" DisplayName="Administrators" UserName="Admin" />
+        <div style="height: 80px;"></div>
+    </div>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["LogoutsShowUserNameTitle"]"
            Introduction="@Localizer["LogoutsShowUserNameIntro"]"
            Name="ShowUserName">
-    <Logout ImageUrl="./images/Argo.png" DisplayName="Administrators" UserName="Admin" ShowUserName="false" class="bg-secondary" />
-    <div style="height: 80px;"></div>
+    <div class="logout-custom">
+        <Logout ImageUrl="./images/Argo.png" DisplayName="Administrators" UserName="Admin" ShowUserName="false" />
+        <div style="height: 80px;"></div>
+    </div>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["LogoutsChildContentTitle"]"

diff --git a/src/BootstrapBlazor.Server/Components/Samples/Logouts.razor.css b/src/BootstrapBlazor.Server/Components/Samples/Logouts.razor.css
@@ -0,0 +1,3 @@
+.logout-custom ::deep .dropdown-logout {
+    background-color: rgba(var(--bs-body-color-rgb), .12);
+}
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Menus.razor.css b/src/BootstrapBlazor.Server/Components/Samples/Menus.razor.css
@@ -2,16 +2,17 @@
     background-color: var(--bs-body-bg);
     color: var(--bs-body-color);
     height: 100%;
+    border-right: 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: #17a2b8;
+    background-color: rgba(var(--bs-body-color-rgb), .12);
     line-height: 50px;
-    color: #fff;
+    color: var(--bs-body-color);
     flex: 1;
     padding-left: 80px;
 }
@@ -20,7 +21,7 @@
     display: flex;
     align-items: center;
     padding: 0 .625rem;
-    background-color: var(--bb-layout-sidebar-banner-background);
+    background-color: rgba(var(--bs-body-color-rgb), .12);
     height: 50px;
     font-size: 1.5rem;
 }
@@ -29,6 +30,8 @@
         width: 38px;
         border-radius: var(--bs-border-radius);
         margin-right: .5rem;
+        border: 1px solid #c0c4cc;
+        background-color: #787878;
     }
 
 .layout-menu-demo ::deep .layout-side.is-collapsed .layout-banner .layout-title {
@@ -40,11 +43,11 @@
 .layout-menu-demo ::deep .layout-menu {
     height: 371px;
     padding: 6px 0;
-    color: #000;
+    color: var(--bs-body-color);
 }
 
 .layout-menu-demo ::deep .layout-title {
-    color: #fff;
+    color: var(--bs-body-color);
 }
 
 .layout-menu-demo ::deep .layout-header .layout-header-bar {
@@ -53,7 +56,7 @@
 }
 
 .layout-menu-demo ::deep .layout-footer {
-    background-color: #e4e7ed;
+    background-color: rgba(var(--bs-body-color-rgb), .12);
     text-align: center;
 }
 

diff --git a/src/BootstrapBlazor.Server/Components/Samples/RibbonTabs.razor b/src/BootstrapBlazor.Server/Components/Samples/RibbonTabs.razor
@@ -47,7 +47,7 @@
 <DemoBlock Title="@Localizer["RibbonTabsAnchorTitle"]"
            Introduction="@Localizer["RibbonTabsAnchorIntro"]"
            Name="IsSupportAnchor">
-    <p>@((MarkupString)Localizer["RibbonTabsAnchorDesc"].Value)</p>
+    <section ignore class="mb-3">@((MarkupString)Localizer["RibbonTabsAnchorDesc"].Value)</section>
     <RibbonTab Items="@AnchorItems" IsSupportAnchor="true" EncodeAnchorCallback="EncodeAnchorCallback" DecodeAnchorCallback="DecodeAnchorCallback"></RibbonTab>
 </DemoBlock>
 

diff --git a/src/BootstrapBlazor.Server/Locales/en.json b/src/BootstrapBlazor.Server/Locales/en.json
@@ -1796,7 +1796,7 @@
     "MenusClickShrinkDescription": "In this example, the layout component <code>Layout</code> is used to build a web page",
     "Block7aTitle": "Click expand to shrink the left menu",
     "MenusClickShrinkSpanSpan": "I am the title of the website",
-    "MenusClickShrinkMenuTitle": "Backstage management",
+    "MenusClickShrinkMenuTitle": "Admin",
     "MenusWidgetTitle": "Menu with pendant",
     "MenusWidgetIntro": "Set the custom component into the menu by setting the <code>Component</code> property of the MenuItem</code> <code>",
     "MenusCustomNodeTitle": "Custom node shrinkage",

diff --git a/src/BootstrapBlazor/Components/Menu/Menu.razor.scss b/src/BootstrapBlazor/Components/Menu/Menu.razor.scss
@@ -37,7 +37,6 @@
 .menu .nav .nav-link,
 .cascade .dropdown-item {
     padding: 0.5rem 1rem;
-    color: rgba(0,0,0,.65);
     user-select: none;
     white-space: nowrap;
     position: relative;
@@ -137,7 +136,6 @@
     display: flex;
     align-items: center;
     line-height: 21px;
-    color: inherit;
     transition: background-color .3s linear, color .3s linear;
 }
 

diff --git a/src/BootstrapBlazor/Components/RibbonTab/RibbonTab.razor.scss b/src/BootstrapBlazor/Components/RibbonTab/RibbonTab.razor.scss
@@ -6,8 +6,6 @@
     --bb-ribbon-menu-radius: #{$bb-ribbon-menu-radius};
     --bb-ribbon-menu-padding: #{$bb-ribbon-menu-padding};
     --bb-ribbon-menu-border-color: #{$bb-ribbon-menu-border-color};
-    --bb-ribbon-menu-bg: #{$bb-ribbon-menu-bg};
-    --bb-ribbon-menu-color: #{$bb-ribbon-menu-color};
     --bb-ribbon-menu-hover-color: #{$bb-ribbon-menu-hover-color};
     --bb-ribbon-button-hover-bg: #{$bb-ribbon-button-hover-bg};
     --bb-ribbon-button-hover-border-color: #{$bb-ribbon-button-hover-border-color};
@@ -36,7 +34,8 @@
 }
 
 .ribbon-tab .ribbon-header .tabs-header {
-    background-color: var(--bb-ribbon-menu-bg);
+    background-color: var(--bs-body-bg);
+    border-bottom: 1px solid var(--bs-border-color);
 }
 
 .ribbon-tab .ribbon-header .tabs-border-card.tabs-top .tabs-header {
@@ -74,7 +73,7 @@
 }
 
 .ribbon-tab .ribbon-header .tabs-border-card .tabs-header .tabs-item:not(:hover):not(.active) {
-    color: var(--bb-ribbon-menu-color);
+    color: var(--bs-body-color);
 }
 
 .ribbon-tab .ribbon-header .tabs-border-card .tabs-header .tabs-item:hover {

diff --git a/src/BootstrapBlazor/Components/Select/Select.razor.scss b/src/BootstrapBlazor/Components/Select/Select.razor.scss
@@ -90,12 +90,16 @@
     height: 0;
     border-width: 0 6px 6px;
     border-style: solid;
-    border-color: transparent transparent #fff;
+    border-color: transparent transparent var(--bs-body-bg);
     position: absolute;
     top: 1px;
     left: -6px;
 }
 
+[data-bs-theme='dark'] .dropdown-menu-arrow:after {
+    content: none;
+}
+
 .show > .dropdown-menu,
 .show > .dropdown-menu-arrow {
     display: block;

diff --git a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrap.blazor.scss b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrap.blazor.scss
@@ -410,11 +410,9 @@ $bb-ribbon-menu-body-padding: .5rem;
 $bb-ribbon-menu-radius: var(--bs-border-radius);
 $bb-ribbon-menu-padding: .5rem;
 $bb-ribbon-menu-border-color: var(--bs-border-color);
-$bb-ribbon-menu-bg: #f5f5f5;
-$bb-ribbon-menu-color: #343a40;
 $bb-ribbon-menu-hover-color: #409eff;
-$bb-ribbon-button-hover-bg: #d0e7ff;
-$bb-ribbon-button-hover-border-color: #8bb5e0;
+$bb-ribbon-button-hover-bg: rgb(51 147 246 / 48%);
+$bb-ribbon-button-hover-border-color: #89b9ea;
 $bb-ribbon-button-active-bg: #acd4fd;
 $bb-ribbon-button-active-border-color: #8bb5e0;
 $bb-ribbon-button-border-width: 1px;