Commit 420360f8 authored by Winnie Hellmann's avatar Winnie Hellmann Committed by Annabel Dunstone Gray

Cleanup Select2 dropdown styles

parent 2e5af6ff
...@@ -48,31 +48,24 @@ ...@@ -48,31 +48,24 @@
} }
&:hover { &:hover {
background-color: $white-normal; border-color: $gray-darkest;
border-color: $border-white-normal;
color: $gl-text-color; color: $gl-text-color;
} }
} }
} }
.select2-drop { .select2-drop,
box-shadow: $select2-drop-shadow1 0 0 1px 0, $select2-drop-shadow2 0 2px 18px 0; .select2-drop.select2-drop-above {
border-radius: $border-radius-default; box-shadow: 0 2px 4px $dropdown-shadow-color;
border: none; border-radius: $border-radius-base;
border: 1px solid $dropdown-border-color;
min-width: 175px; min-width: 175px;
color: $gl-text-color;
} }
.select2-results .select2-result-label, .select2-drop.select2-drop-above.select2-drop-active {
.select2-more-results { border-top: 1px solid $dropdown-border-color;
padding: 10px 15px; margin-top: -6px;
}
.select2-drop {
color: $gl-grayish-blue;
}
.select2-highlighted {
background: $gl-link-color !important;
} }
.select2-results li.select2-result-with-children > .select2-result-label { .select2-results li.select2-result-with-children > .select2-result-label {
...@@ -87,13 +80,11 @@ ...@@ -87,13 +80,11 @@
} }
} }
.select2-dropdown-open { .select2-dropdown-open,
.select2-dropdown-open.select2-drop-above {
.select2-choice { .select2-choice {
border-color: $border-white-normal; border-color: $gray-darkest;
outline: 0; outline: 0;
background-image: none;
background-color: $white-dark;
box-shadow: $gl-btn-active-gradient;
} }
} }
...@@ -131,28 +122,14 @@ ...@@ -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 { .select2-drop-active {
margin-top: 6px; margin-top: $dropdown-vertical-offset;
font-size: 14px; font-size: 14px;
&.select2-drop-above {
margin-bottom: 8px;
}
.select2-results { .select2-results {
max-height: 350px; max-height: 350px;
.select2-highlighted {
background: $gl-primary;
}
} }
} }
...@@ -186,19 +163,35 @@ ...@@ -186,19 +163,35 @@
background-size: 16px 16px !important; 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 { .select2-results {
margin: 0; 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 { .ajax-users-select {
...@@ -265,56 +258,10 @@ ...@@ -265,56 +258,10 @@
min-width: 250px !important; min-width: 250px !important;
} }
// TODO: change global style .select2-result-selectable,
.ajax-project-dropdown, .select2-result-unselectable {
.ajax-users-dropdown, .select2-match {
body[data-page="projects:edit"] #select2-drop, font-weight: $gl-font-weight-bold;
body[data-page="projects:new"] #select2-drop, text-decoration: none;
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;
}
}
}
} }
} }
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment