style: 更新多选框样式

dotnetcore · Sep 10, 2024 · eb2456f · eb2456f
1 parent cf04dac
commit eb2456f
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 5 deletions.
diff --git a/src/BootstrapBlazor/Components/Select/MultiSelect.razor.scss b/src/BootstrapBlazor/Components/Select/MultiSelect.razor.scss
@@ -19,6 +19,14 @@
         cursor: pointer;
         transition: border 0.15s ease-in-out;
 
+        &.is-invalid {
+            border-color: var(--bs-form-invalid-border-color);
+        }
+
+        &.is-valid {
+            border-color: var(--bs-form-valid-border-color);
+        }
+
         &.is-fixed {
             --bb-multi-select-max-height: var(--bb-multi-select-min-height);
         }
@@ -39,7 +47,7 @@
             }
         }
 
-        &:not(.disabled):hover {
+        &:not(.disabled):not(.is-valid):not(.is-invalid):hover {
             border: 1px solid var(--bb-border-hover-color);
         }
 

diff --git a/src/BootstrapBlazor/wwwroot/src/css/motronic.css b/src/BootstrapBlazor/wwwroot/src/css/motronic.css
@@ -335,20 +335,32 @@
     box-shadow: 0 0.25rem 0.5rem #0000001a;
 }
 
-.form-control.is-valid, .was-validated .form-control:valid {
+.form-control.is-valid,
+.multi-select .dropdown-toggle.is-valid,
+.was-validated .form-control:valid {
     border-color: var(--bs-success);
 }
 
-    .was-validated .form-control:valid:focus, .form-control.is-valid:focus, .was-validated .custom-select:valid:focus, .custom-select.is-valid:focus {
+    .was-validated .form-control:valid:focus,
+    .form-control.is-valid:focus,
+    .multi-select .dropdown-toggle.is-valid:focus,
+    .was-validated .custom-select:valid:focus,
+    .custom-select.is-valid:focus {
         border-color: var(--bs-success);
         box-shadow: none;
     }
 
-.form-control.is-invalid, .was-validated .form-control:invalid {
+.form-control.is-invalid,
+.multi-select .dropdown-toggle.is-invalid,
+.was-validated .form-control:invalid {
     border-color: var(--bs-danger);
 }
 
-    .was-validated .form-control:invalid:focus, .form-control.is-invalid:focus, .was-validated .custom-select:invalid:focus, .custom-select.is-invalid:focus {
+    .was-validated .form-control:invalid:focus,
+    .form-control.is-invalid:focus,
+    .multi-select .dropdown-toggle.is-invalid:focus,
+    .was-validated .custom-select:invalid:focus,
+    .custom-select.is-invalid:focus {
         border-color: var(--bs-danger);
         box-shadow: none;
     }