fix: select2 open state

unfoldadmin · May 26, 2023 · 1e15720 · 1e15720
1 parent 177620f
commit 1e15720
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/src/unfold/static/unfold/css/styles.css b/src/unfold/static/unfold/css/styles.css
diff --git a/styles.css b/styles.css
@@ -297,9 +297,7 @@ h3 span:nth-child(3) {
  Autocomplete
  *******************************************************/
 .select2.select2-container {
-  @apply border max-w-2xl rounded-md shadow-sm w-full dark:border-gray-700;
-
-  width: 100% !important;
+  @apply border max-w-2xl relative rounded-md shadow-sm !w-full dark:border-gray-700;
 }
 
 .errors .select2.select2-container {
@@ -354,15 +352,15 @@ h3 span:nth-child(3) {
 }
 
 .select2-container.select2-container--open .select2-dropdown {
-  @apply border border-gray-200 pb-2 shadow-sm dark:bg-gray-900 dark:border-gray-700;
+  @apply border-primary-600 ring ring-primary-300 pb-2 shadow-sm dark:bg-gray-900 dark:border-primary-700 after:block after:bg-white after:absolute after:border-l after:border-l-primary-600 after:border-r after:border-r-primary-600 after:h-1 after:-left-px after:-right-px after:-mt-1 after:top-0 dark:after:bg-gray-900 dark:after:border-l-primary-700 dark:after:border-r-primary-700 dark:ring-primary-700 dark:ring-opacity-50;
 }
 
 .select2-container.select2-container--open .select2-dropdown--below {
   @apply rounded-t-none rounded-b-md;
 }
 
 .select2-container.select2-container--open .select2-dropdown--above {
-  @apply rounded-b-none rounded-t-md;
+  @apply rounded-b-none rounded-t-md after:bottom-0 after:-mb-1 after:mt-0 after:top-auto;;
 }
 
 .select2-container.select2-container--admin-autocomplete .select2-results__option {
@@ -392,6 +390,10 @@ h3 span:nth-child(3) {
   @apply h-7 text-gray-500 text-sm;
 }
 
+.select2.select2-container--open {
+  @apply border-b-0 border-primary-600 relative ring ring-primary-300 dark:border-primary-700 dark:ring-primary-700 dark:ring-opacity-50;
+}
+
 /*******************************************************
  Collapsed
  *******************************************************/