refactor(MultiSelect): support dark theme (#2665)

* refactor: 更新 multiple 选择框样式 * refactor: 更新 RadioList 样式
dotnetcore · Dec 29, 2023 · 0c047e3 · 0c047e3
1 parent 1c3bb9f
commit 0c047e3
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 16 deletions.
diff --git a/src/BootstrapBlazor/Components/Radio/RadioList.razor.scss b/src/BootstrapBlazor/Components/Radio/RadioList.razor.scss
@@ -4,46 +4,46 @@
     --bb-radio-group-item-active-color: #{$bb-radio-group-item-active-color};
     display: flex;
     flex-wrap: wrap;
-}
 
-    .radio-list .form-check {
+    .form-check {
         width: var(--bb-radio-item-width);
     }
 
-    .radio-list.is-vertical {
+    &.is-vertical {
         flex-direction: column;
         height: auto;
         line-height: unset;
-    }
 
-        .radio-list.is-vertical .form-check:not(:last-child) {
+        .form-check:not(:last-child) {
             margin-bottom: .5rem;
         }
+    }
 
-    .radio-list.form-control {
+    &.form-control {
         padding: var(--bb-radio-item-padding);
     }
 
-    .radio-list.btn-group {
-        border: 1px solid var(--bs-secondary);
+    &.btn-group {
+        border: var(--bs-border-width) solid var(--bs-border-color);
         display: inline-flex;
         flex: 0 !important;
         flex-wrap: nowrap;
         white-space: nowrap;
-    }
 
-        .radio-list.btn-group > .btn {
+        > .btn {
             white-space: nowrap;
         }
 
-        .radio-list.btn-group .active {
+        .active {
             color: var(--bb-radio-group-item-active-color);
         }
 
-        .radio-list.btn-group.disabled > span {
+        &.disabled > span {
             opacity: var(--bs-btn-disabled-opacity);
-        }
 
-            .radio-list.btn-group.disabled > span:not(.active) {
+            &:not(.active) {
                 background-color: var(--bs-secondary-bg);
             }
+        }
+    }
+}
diff --git a/src/BootstrapBlazor/Components/Select/MultiSelect.razor.scss b/src/BootstrapBlazor/Components/Select/MultiSelect.razor.scss
@@ -1,8 +1,8 @@
 .multi-select {
     --bb-multi-select-min-height: 35px;
     --bb-multi-select-max-height: 65px;
-    --bb-multi-select-button-bg-color: #e9ecef;
-    --bb-multi-select-button-hover-bg-color: #dee2e6;
+    --bb-multi-select-button-bg-color: rgba(var(--bs-body-color-rgb), .15);
+    --bb-multi-select-button-hover-bg-color: rgba(var(--bs-body-color-rgb), .3);
     --bb-multi-select-item-margin-x: 3px;
     --bb-multi-select-item-margin-y: 3px;
     --bb-multi-select-item-padding: 2px 6px;

diff --git a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrap.blazor.scss b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrap.blazor.scss
@@ -472,6 +472,16 @@ $bb-select-search-height: 60px;
 $bb-select-append-width: 30px;
 $bb-select-append-color: #c0c4cc;
 
+// Multiple-Select
+$bb-multi-select-min-height: 35px;
+$bb-multi-select-max-height: 65px;
+$bb-multi-select-button-bg-color: rgba(var(--bs-body-color-rgb), .12);
+$bb-multi-select-button-hover-bg-color: rgba(var(--bs-body-color-rgb), .3);
+$bb-multi-select-item-margin-x: 3px;
+$bb-multi-select-item-margin-y: 3px;
+$bb-multi-select-item-padding: 2px 6px;
+$bb-multi-select-item-max-width: 130px;
+
 // Skeleton
 $bb-skeleton-table-header-bg: rgba(var(--bs-body-color-rgb), 0.25);
 $bb-skeleton-striped-row-bg: rgba(var(--bs-body-color-rgb), 0.05);