update multiselect style with darkmode and RTL

tomatophp · Dec 21, 2023 · a7ed797 · a7ed797
1 parent a35a2d7
commit a7ed797
Showing 1 changed file with 14 additions and 6 deletions.
diff --git a/publish/resources/js/choices.scss b/publish/resources/js/choices.scss
@@ -15,18 +15,26 @@ fieldset:disabled .#{$choices-selector} {
     }
 }
 
+.multiselect, .multiselect__select, .multiselect__tags, .multiselect__spinner {
+    @apply dark:bg-gray-800 dark:border-gray-700 rounded-lg;
+}
+
+.multiselect__input, .multiselect__option, .multiselect__single, .multiselect__tags, .multiselect__content-wrapper {
+    @apply dark:bg-gray-800 dark:border-gray-700 dark:ring-0 dark:text-gray-200;
+}
+
 .#{$choices-selector} {
     @apply shadow-sm;
 
     .#{$choices-selector}__inner {
-        @apply block rounded-md border-gray-300 dark:border-gray-800 shadow-sm w-full py-2;
+        @apply block rounded-md dark:bg-gray-800 border-gray-200 dark:border-gray-700 shadow-sm w-full py-2;
 
         min-height: auto;
     }
 
     &.is-focused {
         .#{$choices-selector}__inner {
-            @apply border-indigo-300 ring ring-indigo-200 ring-opacity-50;
+            @apply border-primary-300 ring ring-primary-200 ring-opacity-50;
         }
     }
 
@@ -80,7 +88,7 @@ fieldset:disabled .#{$choices-selector} {
     }
 
     .#{$choices-selector}__list--dropdown {
-        @apply mt-1 shadow-lg rounded-md border-gray-300 dark:border-gray-700;
+        @apply mt-1 shadow-lg rounded-md border-gray-200 dark:bg-gray-800 dark:border-gray-700;
 
         .#{$choices-selector}__item.#{$choices-selector}__placeholder {
             @apply hidden;
@@ -90,7 +98,7 @@ fieldset:disabled .#{$choices-selector} {
             @apply text-gray-900 dark:text-gray-200 text-base px-4;
 
             &.is-highlighted {
-                @apply bg-indigo-500 text-white ;
+                @apply bg-primary-500 text-white ;
             }
         }
     }
@@ -99,10 +107,10 @@ fieldset:disabled .#{$choices-selector} {
         @apply mb-0;
 
         .#{$choices-selector}__item {
-            @apply bg-indigo-500 border-indigo-500 dark:text-gray-200 rounded-md font-medium py-1 text-sm mb-0 ;
+            @apply bg-primary-500 border-primary-500 dark:text-gray-200 rounded-md font-medium py-1 text-sm mb-0 ;
 
             &:hover{
-                @apply bg-indigo-700 border-indigo-700
+                @apply bg-primary-700 border-primary-700
             }
 
             line-height: 1;