refactor(Step): support dark theme (#2663)

* doc: 更新 Step 示例 * refactor: 更新 Cascade 二级菜单颜色 * refactor: 更新 required 颜色 * refactor(IpAddress): 更新背景色 * doc: 更新拷贝按钮样式 * doc: 更新示例代码块过渡动画
dotnetcore · Dec 24, 2023 · 3e58f02 · 3e58f02
1 parent c4f92ff
commit 3e58f02
Show file tree

Hide file tree

Showing 7 changed files with 9 additions and 9 deletions.
diff --git a/src/BootstrapBlazor.Server/Components/Components/DemoBlock.razor.css b/src/BootstrapBlazor.Server/Components/Components/DemoBlock.razor.css
@@ -1,5 +1,5 @@
 .card {
-    transition: all .3s linear;
+    transition: box-shadow .3s linear;
 }
 
     .card:hover {

diff --git a/src/BootstrapBlazor.Server/Components/Components/Pre.razor b/src/BootstrapBlazor.Server/Components/Components/Pre.razor
@@ -11,11 +11,11 @@
             @if (ShowToolbar)
             {
                 <div class="btn-group">
-                    <Button TooltipPlacement="Placement.Top" TooltipText="@PlusTooltipTitle" TooltipTrigger="hover" Icon="fa-solid fa-plus" class="btn-plus"></Button>
-                    <Button TooltipPlacement="Placement.Top" TooltipText="@MinusTooltipTitle" TooltipTrigger="hover" Icon="fa-solid fa-minus" class="btn-minus"></Button>
+                    <Button TooltipPlacement="Placement.Top" TooltipText="@PlusTooltipTitle" TooltipTrigger="hover" Icon="fa-solid fa-plus" class="btn-code btn-plus"></Button>
+                    <Button TooltipPlacement="Placement.Top" TooltipText="@MinusTooltipTitle" TooltipTrigger="hover" Icon="fa-solid fa-minus" class="btn-code btn-minus"></Button>
                 </div>
             }
-            <Button TooltipPlacement="Placement.Top" TooltipText="@TooltipTitle" TooltipTrigger="hover" class="btn-copy">Copy</Button>
+            <Button TooltipPlacement="Placement.Top" TooltipText="@TooltipTitle" TooltipTrigger="hover" class="btn-code btn-copy">Copy</Button>
         }
     }
 </div>
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Steps.razor.css b/src/BootstrapBlazor.Server/Components/Samples/Steps.razor.css
@@ -1,6 +1,4 @@
 .step-demo ::deep .step {
-    --step-item-color: #ccc;
-    background-color: #f8f9fa;
     padding: 0 1rem;
     border-radius: var(--bs-border-radius);
     border: var(--bs-border-width) solid var(--bs-border-color);

diff --git a/src/BootstrapBlazor.Server/wwwroot/css/site.css b/src/BootstrapBlazor.Server/wwwroot/css/site.css
@@ -193,7 +193,7 @@ code {
     background-color: rgba(var(--bs-emphasis-color-rgb),.1);
 }
 
-.btn-copy {
+.btn-code {
     position: absolute;
     top: .65rem;
     right: 1.5rem;
@@ -204,7 +204,7 @@ code {
     --bs-btn-padding-x: .5rem;
 }
 
-[data-bs-theme='dark'] .btn-copy {
+[data-bs-theme='dark'] .btn-code {
     --bs-btn-bg: rgba(255, 255, 255, 0.12);
     --bs-btn-color: rgba(255, 255, 255, 0.45);
     --bs-btn-border-color: #606266;

diff --git a/src/BootstrapBlazor/Components/IpAddress/IpAddress.razor.scss b/src/BootstrapBlazor/Components/IpAddress/IpAddress.razor.scss
@@ -9,6 +9,7 @@
     }
 
     .ipv4-cell {
+        background-color: var(--bs-body-bg);
         border: none;
         max-width: var(--bb-ip-cell-max-width);
         text-align: right;

diff --git a/src/BootstrapBlazor/Components/Menu/Menu.razor.scss b/src/BootstrapBlazor/Components/Menu/Menu.razor.scss
@@ -36,6 +36,7 @@
 
 .menu .nav .nav-link,
 .cascade .dropdown-item {
+    --bs-nav-link-color: var(--bs-body-color);
     padding: 0.5rem 1rem;
     user-select: none;
     white-space: nowrap;

diff --git a/src/BootstrapBlazor/Components/ValidateForm/ValidateForm.razor.scss b/src/BootstrapBlazor/Components/ValidateForm/ValidateForm.razor.scss
@@ -14,7 +14,7 @@ form {
 
     .form-label[required]:before {
         content: "*";
-        color: red;
+        color: var(--bs-danger);
     }
 }