Commit 983dbe2a authored by Alfredo Sumaran's avatar Alfredo Sumaran
Browse files

Update dropdown menu style

parent c82ad1bd04b7
......@@ -70,6 +70,10 @@
color: $gl-text-color;
&:focus:active {
outline: 0;
}
&.btn-small,
&.btn-sm {
padding: 4px 10px;
......
......@@ -56,6 +56,10 @@ hr {
margin: $gl-padding 0;
}
.dropdown-menu {
margin: 6px 0 0;
}
.dropdown-menu > li > a {
text-shadow: none;
}
......
/** Select2 selectbox style override **/
.select2-container {
width: 100% !important;
}
.select2-container, .select2-container.select2-drop-above {
.select2-choice {
background: #FFF;
background: #fff;
border-color: $input-border;
border-color: $border-white-light;
height: 35px;
padding: $gl-vert-padding $gl-btn-padding;
font-size: $gl-font-size;
line-height: 1.42857143;
@include border-radius($input-border-radius);
@include border-radius($border-radius-default);
.select2-arrow {
width: auto;
......@@ -39,14 +44,12 @@
.select2-drop {
@include box-shadow(rgba(76, 86, 103, 0.247059) 0px 0px 1px 0px, rgba(31, 37, 50, 0.317647) 0px 2px 18px 0px);
@include border-radius (0px);
padding: 16px;
border: none !important;
@include border-radius ($border-radius-default);
border: none;
}
.select2-results .select2-result-label {
padding: 9px;
padding: 10px 15px;
}
.select2-drop{
......@@ -62,11 +65,27 @@
color: #313236;
}
.select2-container-active {
.select2-choice, .select2-choices {
@include box-shadow(none);
}
}
.select2-dropdown-open {
.select2-choice {
border-color: $border-white-normal;
outline: 0;
background-image: none;
background-color: $white-dark;
@include box-shadow (inset 0 0 4px rgba(0, 0, 0, 0.12));
}
}
.select2-container-multi {
.select2-choices {
@include border-radius($input-border-radius);
@include border-radius($border-radius-default);
border-color: $input-border;
padding-left: $gl-padding / 2;
background: none;
.select2-search-field input {
padding: $gl-padding / 2;
......@@ -82,9 +101,12 @@
border-color: $input-border;
color: $gl-text-color;
line-height: 15px;
background-color: $background-color;
background-image: none;
.select2-search-choice-close {
top: 5px;
top: 4px;
left: 3px;
}
&.select2-search-choice-focus {
......@@ -92,28 +114,20 @@
}
}
}
}
.select2-container-active {
.select2-choice, .select2-choices {
@include box-shadow(none);
&.select2-container-active .select2-choices,
&.select2-dropdown-open .select2-choices {
border-color: $border-white-normal;
@include box-shadow (inset 0 0 4px rgba(0, 0, 0, 0.12));
}
}
.select2-dropdown-open {
.select2-choice, .select2-choices {
outline: 0;
background-image: none;
border-color: #d6dae2;
background-color: $white-dark;
@include box-shadow (inset 0 0 4px rgba(0, 0, 0, 0.12));
}
.select2-container-multi .select2-choices .select2-search-choice {
}
.select2-drop-active {
border: 1px solid #BBB !important;
margin-top: 4px;
font-size: 13px;
margin-top: 6px;
font-size: 14px;
&.select2-drop-above {
margin-bottom: 8px;
......@@ -127,16 +141,32 @@
}
}
.select2-search input {
background: #fff image-url('select2.png') no-repeat 99% -22px;
.select2-search {
padding: 15px 15px 5px;
.select2-drop-auto-width & {
padding: 15px 15px 5px;
}
}
.select2-search input.select2-active {
background: #fff image-url('select2-spinner.gif') no-repeat 99%;
.select2-search input {
padding: 2px 25px 2px 5px;
background: #fff image-url('select2.png');
background-repeat: no-repeat;
background-position: calc(100% - 3px) -23px;
border: 1px solid $input-border;
@include border-radius($border-radius-default);
@include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s);
&:focus {
border-color: $input-border-focus;
}
}
.select2-container {
width: 100% !important;
.select2-search input.select2-active {
background: #fff image-url('select2-spinner.gif');
background-repeat: no-repeat;
background-position: calc(100% - 5px) 4px;
}
/** Branch/tag selector **/
......@@ -144,10 +174,19 @@
width: 160px !important;
}
.ajax-users-dropdown, .ajax-project-users-dropdown {
.select2-search {
padding-top: 2px;
}
.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;
}
.ajax-users-select {
......
......@@ -31,7 +31,7 @@ $gl-padding-top:10px;
$gl-avatar-size: 40px;
$secondary-text: #7f8fa4;
$error-exclamation-point: #E62958;
$input-border-radius: 3px;
$border-radius-default: 3px;
/*
* Color schema
......
......@@ -32,6 +32,7 @@
.cover-controls {
.project-settings-dropdown {
margin-left: 10px;
display: inline-block;
}
}
......@@ -191,7 +192,7 @@
.dropdown-menu {
@include box-shadow(rgba(76, 86, 103, 0.247059) 0px 0px 1px 0px, rgba(31, 37, 50, 0.317647) 0px 2px 18px 0px);
@include border-radius ($input-border-radius);
@include border-radius ($border-radius-default);
border: none;
padding: 10px 0;
......
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