diff --git a/app/webpacker/css/admin_v3/components/tom_select.scss b/app/webpacker/css/admin_v3/components/tom_select.scss index 9217135c14..9a5fe2e4d9 100644 --- a/app/webpacker/css/admin_v3/components/tom_select.scss +++ b/app/webpacker/css/admin_v3/components/tom_select.scss @@ -10,7 +10,8 @@ &.input-active { .ts-control { - border-color: $lighter-grey; + border-color: $orient; + background-color: $lighter-grey; input { &::placeholder { @@ -29,20 +30,32 @@ input { font-size: $body-font-size; + height: auto; &::placeholder { color: $near-black; } } + + .item { + margin-top: 2px; // Ensure it lines up with the input. I have no idea why it's necessary. + } } .ts-dropdown { + margin-top: 4px; + color: $near-black; @include border-radius($border-radius); border: none; - box-shadow: none; - color: $near-black; + box-shadow: $shadow-dropdown; + + .ts-dropdown-content { + padding: $border-radius 0; + } .option { + padding: 8px; + &.selected { border-left: 2px solid $orient; } @@ -93,5 +106,6 @@ .ts-dropdown { position: absolute; top: 0; // we don't need to see the currently selected option, because it's visible in the dropdown + margin-top: 0; } } diff --git a/app/webpacker/css/admin_v3/globals/variables.scss b/app/webpacker/css/admin_v3/globals/variables.scss index e41f2a9597..8686fe85d8 100644 --- a/app/webpacker/css/admin_v3/globals/variables.scss +++ b/app/webpacker/css/admin_v3/globals/variables.scss @@ -74,6 +74,9 @@ $color-action-save-brd: very-light($color-success, 20 ) !default; $color-action-mail-bg: very-light($color-success, 5 ) !default; $color-action-mail-brd: very-light($color-success, 20 ) !default; +// Dropdown styles +$shadow-dropdown: 0px 0px 8px 0px rgba($near-black, 0.25); + // Select2 select field colors $color-sel-bg: $lighter-grey !default; $color-sel-hover-bg: $lighter-grey !default;