diff --git a/app/assets/javascripts/sitewide/dropdown_selector.js b/app/assets/javascripts/sitewide/dropdown_selector.js index c48e97fb9..53394b46c 100644 --- a/app/assets/javascripts/sitewide/dropdown_selector.js +++ b/app/assets/javascripts/sitewide/dropdown_selector.js @@ -340,6 +340,7 @@ var dropdownSelector = (function() { updateDropdownDirection(selector, container); refreshDropdownSelection(selector, container); + if (container.hasClass('open')) container.find('.search-field').focus(); if (selector.data('config').onChange && !config.skipChange) { selector.data('config').onChange(); } diff --git a/app/assets/stylesheets/shared/dropdown_selector.scss b/app/assets/stylesheets/shared/dropdown_selector.scss index 898112bf6..4be2da4f1 100644 --- a/app/assets/stylesheets/shared/dropdown_selector.scss +++ b/app/assets/stylesheets/shared/dropdown_selector.scss @@ -14,6 +14,7 @@ background: $color-white; border: 1px solid $color-alto; border-radius: 4px; + box-shadow: inset 0 1px 2px 0 $md-color-shadow-light; display: flex; flex-wrap: wrap; min-height: 36px; @@ -94,7 +95,7 @@ background: $color-white; border: 1px solid $color-alto; border-radius: 0 0 4px 4px; - box-shadow: 0 0 0 0 rgba(0, 0, 0, .2); + box-shadow: 0 0 0 0 $md-color-shadow-dark; display: none; overflow: hidden; position: absolute; @@ -176,8 +177,7 @@ user-select: none; &:hover { - background: $brand-primary !important; - color: $color-white; + background: $brand-primary-light; } } @@ -190,6 +190,10 @@ .group-name.checkbox-icon { background: $color-concrete; + &:hover { + background: $brand-primary-light; + } + &::before { content: "\f14a"; } @@ -209,7 +213,6 @@ &.open { .input-field { - border-bottom: 1px solid $brand-primary; border-radius: 4px 4px 0 0; z-index: 12; @@ -224,7 +227,7 @@ .dropdown-container { border-top: 0; - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .2); + box-shadow: 0 1px 2px 0 $md-color-shadow-dark; display: block; top: 100%; } @@ -234,14 +237,13 @@ .input-field { border-bottom: 1px solid $color-alto; border-radius: 0 0 4px 4px; - border-top: 1px solid $brand-primary; } .dropdown-container { border-bottom: 0; border-radius: 4px 4px 0 0; bottom: 100%; - box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, .2); + box-shadow: 0 -1px 2px 0 $md-color-shadow-dark; position: fixed; top: auto; }