Makes autocomplete dropdown look the same as others
This commit is contained in:
parent
8e53cf94e6
commit
9d51f86694
6 changed files with 62 additions and 25 deletions
|
@ -300,7 +300,7 @@ class GitLabDropdown
|
||||||
|
|
||||||
noResults: ->
|
noResults: ->
|
||||||
html = "<li>"
|
html = "<li>"
|
||||||
html += "<a href='#' class='dropdown-menu-empty-link is-focused'>"
|
html += "<a class='dropdown-menu-empty-link is-focused'>"
|
||||||
html += "No matching results."
|
html += "No matching results."
|
||||||
html += "</a>"
|
html += "</a>"
|
||||||
html += "</li>"
|
html += "</li>"
|
||||||
|
|
|
@ -260,6 +260,6 @@ class @SearchAutocomplete
|
||||||
|
|
||||||
restoreMenu: ->
|
restoreMenu: ->
|
||||||
html = "<ul>
|
html = "<ul>
|
||||||
<li><a class='is-focused'>Loading...</a></li>
|
<li><a class='dropdown-menu-empty-link is-focused'>Loading...</a></li>
|
||||||
</ul>"
|
</ul>"
|
||||||
@dropdownContent.html(html)
|
@dropdownContent.html(html)
|
||||||
|
|
|
@ -42,7 +42,7 @@
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
border: 1px solid $dropdown-toggle-border-color;
|
border: 1px solid $dropdown-toggle-border-color;
|
||||||
border-radius: 2px;
|
border-radius: $dropdown-border-radius;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
@ -75,12 +75,12 @@
|
||||||
width: 240px;
|
width: 240px;
|
||||||
margin-top: 2px;
|
margin-top: 2px;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: 10px;
|
font-size: 15px;
|
||||||
font-size: 14px;
|
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
|
padding: 10px 0;
|
||||||
background-color: $dropdown-bg;
|
background-color: $dropdown-bg;
|
||||||
border: 1px solid $dropdown-border-color;
|
border: 1px solid $dropdown-border-color;
|
||||||
border-radius: $border-radius-base;
|
border-radius: $dropdown-border-radius;
|
||||||
box-shadow: 0 2px 4px $dropdown-shadow-color;
|
box-shadow: 0 2px 4px $dropdown-shadow-color;
|
||||||
|
|
||||||
&.is-loading {
|
&.is-loading {
|
||||||
|
@ -101,9 +101,17 @@
|
||||||
li {
|
li {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
|
padding: 0 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.divider {
|
.divider {
|
||||||
|
height: 1px;
|
||||||
|
margin: 8px 10px;
|
||||||
|
padding: 0;
|
||||||
|
background-color: $dropdown-divider-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.separator {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 1px;
|
height: 1px;
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
|
@ -137,6 +145,17 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.dropdown-header {
|
||||||
|
color: $dropdown-header-color;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 22px;
|
||||||
|
padding: 0 10px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.separator + .dropdown-header {
|
||||||
|
padding-top: 2px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-menu-paging {
|
.dropdown-menu-paging {
|
||||||
|
@ -154,6 +173,10 @@
|
||||||
.dropdown-menu-back {
|
.dropdown-menu-back {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.dropdown-content {
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -218,20 +241,11 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-header {
|
|
||||||
padding-left: 5px;
|
|
||||||
padding-right: 5px;
|
|
||||||
color: $dropdown-header-color;
|
|
||||||
font-size: 13px;
|
|
||||||
line-height: 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-title {
|
.dropdown-title {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: 10px;
|
padding: 0 0 15px;
|
||||||
padding-left: 30px;
|
margin: 0 10px 10px;
|
||||||
padding-right: 30px;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
@ -257,21 +271,26 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-menu-close {
|
.dropdown-menu-close {
|
||||||
right: 0;
|
right: 7px;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
top: -1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-menu-back {
|
.dropdown-menu-back {
|
||||||
left: 0;
|
left: 7px;
|
||||||
|
top: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-input {
|
.dropdown-input {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
padding: 0 10px;
|
||||||
|
|
||||||
.fa {
|
.fa {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 10px;
|
top: 10px;
|
||||||
right: 10px;
|
right: 20px;
|
||||||
color: #c7c7c7;
|
color: #c7c7c7;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
@ -281,6 +300,9 @@
|
||||||
display: none;
|
display: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
pointer-events: all;
|
pointer-events: all;
|
||||||
|
right: 22px;
|
||||||
|
top: 9px;
|
||||||
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.has-value {
|
&.has-value {
|
||||||
|
|
|
@ -66,7 +66,7 @@ $header-height: 58px;
|
||||||
$fixed-layout-width: 1280px;
|
$fixed-layout-width: 1280px;
|
||||||
$gl-avatar-size: 40px;
|
$gl-avatar-size: 40px;
|
||||||
$error-exclamation-point: #e62958;
|
$error-exclamation-point: #e62958;
|
||||||
$border-radius-default: 3px;
|
$border-radius-default: 2px;
|
||||||
$btn-transparent-color: #8f8f8f;
|
$btn-transparent-color: #8f8f8f;
|
||||||
$ssh-key-icon-color: #8f8f8f;
|
$ssh-key-icon-color: #8f8f8f;
|
||||||
$ssh-key-icon-size: 18px;
|
$ssh-key-icon-size: 18px;
|
||||||
|
@ -166,6 +166,7 @@ $regular_font: 'Source Sans Pro', "Helvetica Neue", Helvetica, Arial, sans-serif
|
||||||
/*
|
/*
|
||||||
* Dropdowns
|
* Dropdowns
|
||||||
*/
|
*/
|
||||||
|
$dropdown-border-radius: 2px;
|
||||||
$dropdown-width: 300px;
|
$dropdown-width: 300px;
|
||||||
$dropdown-bg: #fff;
|
$dropdown-bg: #fff;
|
||||||
$dropdown-link-color: #555;
|
$dropdown-link-color: #555;
|
||||||
|
@ -178,7 +179,7 @@ $dropdown-header-color: #959494;
|
||||||
$dropdown-title-btn-color: #bfbfbf;
|
$dropdown-title-btn-color: #bfbfbf;
|
||||||
$dropdown-input-color: #555;
|
$dropdown-input-color: #555;
|
||||||
$dropdown-input-focus-border: rgb(58, 171, 240);
|
$dropdown-input-focus-border: rgb(58, 171, 240);
|
||||||
$dropdown-input-focus-shadow: rgba(#000, .2);
|
$dropdown-input-focus-shadow: rgba($dropdown-input-focus-border, .4);
|
||||||
$dropdown-loading-bg: rgba(#fff, .6);
|
$dropdown-loading-bg: rgba(#fff, .6);
|
||||||
|
|
||||||
$dropdown-toggle-bg: #fff;
|
$dropdown-toggle-bg: #fff;
|
||||||
|
@ -198,6 +199,8 @@ $award-emoji-new-btn-icon-color: #dcdcdc;
|
||||||
/*
|
/*
|
||||||
* Search Box
|
* Search Box
|
||||||
*/
|
*/
|
||||||
|
$search-input-border-color: $dropdown-input-focus-border;
|
||||||
|
$search-input-focus-shadow-color: $dropdown-input-focus-shadow;
|
||||||
$search-input-width: $dropdown-width;
|
$search-input-width: $dropdown-width;
|
||||||
$location-badge-color: #aaa;
|
$location-badge-color: #aaa;
|
||||||
$location-badge-bg: $gray-normal;
|
$location-badge-bg: $gray-normal;
|
||||||
|
|
|
@ -109,12 +109,23 @@
|
||||||
.dropdown-menu {
|
.dropdown-menu {
|
||||||
top: 30px;
|
top: 30px;
|
||||||
left: -5px;
|
left: -5px;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
padding: 10px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-content {
|
||||||
|
max-height: 300px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.search-active {
|
&.search-active {
|
||||||
form {
|
form {
|
||||||
@extend .form-control:focus;
|
@extend .form-control:focus;
|
||||||
|
border-color: $dropdown-input-focus-border;
|
||||||
|
box-shadow: 0 0 4px $search-input-focus-shadow-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.location-badge {
|
.location-badge {
|
||||||
|
|
|
@ -16,9 +16,10 @@
|
||||||
= search_field_tag "search", nil, placeholder: 'Search', class: "search-input dropdown-menu-toggle", spellcheck: false, tabindex: "1", autocomplete: 'off', data: { toggle: 'dropdown' }
|
= search_field_tag "search", nil, placeholder: 'Search', class: "search-input dropdown-menu-toggle", spellcheck: false, tabindex: "1", autocomplete: 'off', data: { toggle: 'dropdown' }
|
||||||
.dropdown-menu.dropdown-select
|
.dropdown-menu.dropdown-select
|
||||||
= dropdown_content do
|
= dropdown_content do
|
||||||
%li
|
%ul
|
||||||
%a.is-focused
|
%li
|
||||||
Loading...
|
%a.is-focused.dropdown-menu-empty-link
|
||||||
|
Loading...
|
||||||
= dropdown_loading
|
= dropdown_loading
|
||||||
%i.search-icon
|
%i.search-icon
|
||||||
%i.clear-icon.js-clear-input
|
%i.clear-icon.js-clear-input
|
||||||
|
|
Loading…
Reference in a new issue