fix(admin): Fix appearance of Selectize List

Also fixed indentation of CSS.
charcoalphp · Mar 11, 2024 · 6ec39df · 6ec39df
1 parent cd65f2c
commit 6ec39df
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 45 deletions.
diff --git a/packages/admin/assets/dist/styles/charcoal.admin.vendors.css b/packages/admin/assets/dist/styles/charcoal.admin.vendors.css
diff --git a/packages/admin/assets/src/styles/charcoal/admin/vendors/_selectize.scss b/packages/admin/assets/src/styles/charcoal/admin/vendors/_selectize.scss
@@ -131,49 +131,54 @@ $selectize-width-item-buttons: 40px;
 
     // }
 
-     &.selectize-list {
-         .selectize-input,
-         .selectize-input.focus {
-             border: none;
-             box-shadow: none;
-             padding: 3px 3px 0;
-
-             &::before {
-                 content: none;
-             }
-
-             > input {
-                 left: 0!important;
-                 @extend .form-control;
-                 position: relative!important;
-                 display: block!important;
-                 opacity: 1!important;
-                 width: 100%!important;
-                 padding: 6px 12px!important;
-                 line-height: 1.428571429!important;
-                 color: #080909!important;
-                 border: 1px solid #ccc!important;
-                 border-radius: 4px!important;
-                 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075)!important;
-                 -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-                 transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-             }
-         }
-
-         .item {
-             width: 100%;
-         }
-
-     }
-
-     &:not(.selectize-list) {
-         .selectize-input.focus {
-             // $color: $input-focus-color;
-             $color: $input-focus-border-color;
-             $color-rgba: rgba(red($color), green($color), blue($color), .6);
-             // @include selectize-box-shadow(unquote("inset 0 1px 1px #{rgba(black, .075)}, 0 0 8px #{$color-rgba}"));
-         }
-     }
+    &.selectize-list {
+        .selectize-input,
+        .selectize-input.focus,
+        .selectize-input.has-items {
+            background-color: transparent;
+            border: none;
+            box-shadow: none;
+            padding: 0 3px;
+
+            &::before {
+                content: none;
+            }
+
+            > input {
+                left: 0!important;
+                @extend .form-control;
+                position: relative!important;
+                display: block!important;
+                opacity: 1!important;
+                width: 100%!important;
+                padding: 6px 12px!important;
+                line-height: 1.428571429!important;
+                color: #080909!important;
+                border: 1px solid #ccc!important;
+                border-radius: 4px!important;
+                box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075)!important;
+                -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+                transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+            }
+        }
+
+        .item {
+            width: 100%;
+        }
+
+        & + .input-group-append > .btn {
+            border-radius: $input-border-radius;
+        }
+    }
+
+    &:not(.selectize-list) {
+        .selectize-input.focus {
+            // $color: $input-focus-color;
+            $color: $input-focus-border-color;
+            $color-rgba: rgba(red($color), green($color), blue($color), .6);
+            // @include selectize-box-shadow(unquote("inset 0 1px 1px #{rgba(black, .075)}, 0 0 8px #{$color-rgba}"));
+        }
+    }
 
     // .selectize-input::before {
     //     content:        "\200B";