diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss index 6c14e8b97e007b1d2db2cb21d0a569d682cd033d..50f1445bc2e16ad3ccb34d7c721b56575b1c186f 100644 --- a/app/assets/stylesheets/framework/selects.scss +++ b/app/assets/stylesheets/framework/selects.scss @@ -48,31 +48,24 @@ } &:hover { - background-color: $white-normal; - border-color: $border-white-normal; + border-color: $gray-darkest; color: $gl-text-color; } } } -.select2-drop { - box-shadow: $select2-drop-shadow1 0 0 1px 0, $select2-drop-shadow2 0 2px 18px 0; - border-radius: $border-radius-default; - border: none; +.select2-drop, +.select2-drop.select2-drop-above { + box-shadow: 0 2px 4px $dropdown-shadow-color; + border-radius: $border-radius-base; + border: 1px solid $dropdown-border-color; min-width: 175px; + color: $gl-text-color; } -.select2-results .select2-result-label, -.select2-more-results { - padding: 10px 15px; -} - -.select2-drop { - color: $gl-grayish-blue; -} - -.select2-highlighted { - background: $gl-link-color !important; +.select2-drop.select2-drop-above.select2-drop-active { + border-top: 1px solid $dropdown-border-color; + margin-top: -6px; } .select2-results li.select2-result-with-children > .select2-result-label { @@ -87,13 +80,11 @@ } } -.select2-dropdown-open { +.select2-dropdown-open, +.select2-dropdown-open.select2-drop-above { .select2-choice { - border-color: $border-white-normal; + border-color: $gray-darkest; outline: 0; - background-image: none; - background-color: $white-dark; - box-shadow: $gl-btn-active-gradient; } } @@ -131,28 +122,14 @@ } } } - - &.select2-container-active .select2-choices, - &.select2-dropdown-open .select2-choices { - border-color: $border-white-normal; - box-shadow: $gl-btn-active-gradient; - } } .select2-drop-active { - margin-top: 6px; + margin-top: $dropdown-vertical-offset; font-size: 14px; - &.select2-drop-above { - margin-bottom: 8px; - } - .select2-results { max-height: 350px; - - .select2-highlighted { - background: $gl-primary; - } } } @@ -186,19 +163,35 @@ background-size: 16px 16px !important; } -.select2-results .select2-no-results, -.select2-results .select2-searching, -.select2-results .select2-ajax-error, -.select2-results .select2-selection-limit { - background: $gray-light; - display: list-item; - padding: 10px 15px; -} - - .select2-results { margin: 0; - padding: 10px 0; + padding: #{$gl-padding / 2} 0; + + .select2-no-results, + .select2-searching, + .select2-ajax-error, + .select2-selection-limit { + background: transparent; + padding: #{$gl-padding / 2} $gl-padding; + } + + .select2-result-label, + .select2-more-results { + padding: #{$gl-padding / 2} $gl-padding; + } + + .select2-highlighted { + background: transparent; + color: $gl-text-color; + + .select2-result-label { + background: $dropdown-item-hover-bg; + } + } + + .select2-result { + padding: 0 1px; + } } .ajax-users-select { @@ -265,56 +258,10 @@ min-width: 250px !important; } -// TODO: change global style -.ajax-project-dropdown, -.ajax-users-dropdown, -body[data-page="projects:edit"] #select2-drop, -body[data-page="projects:new"] #select2-drop, -body[data-page="projects:merge_requests:edit"] #select2-drop, -body[data-page="projects:blob:new"] #select2-drop, -body[data-page="profiles:show"] #select2-drop, -body[data-page="admin:groups:show"] #select2-drop, -body[data-page="projects:issues:show"] #select2-drop, -body[data-page="projects:blob:edit"] #select2-drop { - &.select2-drop { - border: 1px solid $dropdown-border-color; - border-radius: $border-radius-base; - color: $gl-text-color; - } - - &.select2-drop-above { - border-top: none; - margin-top: -4px; - } - - .select2-results { - .select2-no-results, - .select2-searching, - .select2-ajax-error, - .select2-selection-limit { - background: transparent; - } - - .select2-result { - padding: 0 1px; - - .select2-match { - font-weight: $gl-font-weight-bold; - text-decoration: none; - } - - .select2-result-label { - padding: #{$gl-padding / 2} $gl-padding; - } - - &.select2-highlighted { - background-color: transparent !important; - color: $gl-text-color; - - .select2-result-label { - background-color: $dropdown-item-hover-bg; - } - } - } +.select2-result-selectable, +.select2-result-unselectable { + .select2-match { + font-weight: $gl-font-weight-bold; + text-decoration: none; } }