refactor(Segmented): support dark theme (#2646)

* refactor: 更新边框 * feat: 支持暗黑模式主题 * feat: 增加 hover/active 样式
dotnetcore · Dec 29, 2023 · 751e7c0 · 751e7c0
1 parent 64b94cf
commit 751e7c0
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 2 deletions.
diff --git a/src/BootstrapBlazor/Components/Segmented/Segmented.razor.scss b/src/BootstrapBlazor/Components/Segmented/Segmented.razor.scss
@@ -5,6 +5,8 @@
     --bb-segmented-item-height: #{$bb-segmented-item-height};
     --bb-segmented-item-font-size: #{$bb-segmented-item-font-size};
     --bb-segmented-item-selected-bg: #{$bb-segmented-item-selected-bg};
+    --bb-segmented-item-hover-bg: #{$bb-segmented-item-hover-bg};
+    --bb-segmented-item-active-bg: #{$bb-segmented-item-active-bg};
     --bb-segmented-item-border-radius: #{$bb-segmented-item-border-radius};
     --bb-segmented-item-lg-height: #{$bb-segmented-item-lg-height};
     --bb-segmented-item-lg-padding: #{$bb-segmented-item-lg-padding};
@@ -18,6 +20,7 @@
     padding: var(--bb-segmented-padding);
     background-color: var(--bb-segmented-bg);
     border-radius: var(--bs-border-radius);
+    border: var(--bs-border-width) solid var(--bs-border-color);
     display: inline-flex;
     position: relative;
 
@@ -78,11 +81,11 @@
         }
 
         &:hover:not(.selected):not(.disabled):not(.moving):after {
-            background-color: rgba(0,0,0,.06);
+            background-color: var(--bb-segmented-item-hover-bg);
         }
 
         &:active:not(.selected):not(.disabled):not(.moving):after {
-            background-color: rgba(0,0,0,.15);
+            background-color: var(--bb-segmented-item-active-bg);
         }
 
         &:after {
@@ -106,3 +109,10 @@
         }
     }
 }
+
+[data-bs-theme='dark'] .segmented {
+    --bb-segmented-bg: #{$bb-segmented-bg-dark};
+    --bb-segmented-item-selected-bg: #{$bb-segmented-item-selected-bg-dark};
+    --bb-segmented-item-hover-bg: #{$bb-segmented-item-hover-bg-dark};
+    --bb-segmented-item-active-bg: #{$bb-segmented-item-active-bg-dark};
+}
diff --git a/src/BootstrapBlazor/wwwroot/scss/bootstrap.blazor-dark.scss b/src/BootstrapBlazor/wwwroot/scss/bootstrap.blazor-dark.scss
@@ -1,3 +1,9 @@
 // Scroll
 $bb-scorll-thumb-bg-dark: rgba(255,255,255,0.2);
 $bb-scorll-thumb-hover-bg-dark: rgba(255,255,255,0.3);
+
+// Segmented
+$bb-segmented-bg-dark: #000;
+$bb-segmented-item-selected-bg-dark: #1f1f1f;
+$bb-segmented-item-hover-bg-dark: rgba(255, 255, 255, 0.12);
+$bb-segmented-item-active-bg-dark: rgba(255, 255, 255, 0.18);
diff --git a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrap.blazor.scss b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrap.blazor.scss
@@ -450,6 +450,8 @@ $bb-segmented-item-padding: 0 11px;
 $bb-segmented-item-height: 28px;
 $bb-segmented-item-font-size: 0.875rem;
 $bb-segmented-item-selected-bg: #fff;
+$bb-segmented-item-hover-bg: rgba(0,0,0,.06);
+$bb-segmented-item-active-bg: rgba(0,0,0,.15);
 $bb-segmented-item-border-radius: 6px;
 $bb-segmented-item-lg-height: 36px;
 $bb-segmented-item-lg-padding: 0 11px;