Commit b323e4dc authored by Jacob Schatz's avatar Jacob Schatz

Merge branch 'issue_11874' into 'master'

Fixes dropdown appearance and makes it look accordingly to current design

Fixes #11874

See merge request !2920
parents 884094a7 8f5e1b9f
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
&:focus, &:focus,
&:active { &:active {
outline: none; outline: none;
@include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12)); @include box-shadow($gl-btn-active-background);
} }
} }
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
} }
&:active { &:active {
@include box-shadow (inset 0 0 4px rgba(0, 0, 0, 0.12)); @include box-shadow ($gl-btn-active-background);
background-color: $dark; background-color: $dark;
border-color: $border-dark; border-color: $border-dark;
...@@ -68,6 +68,12 @@ ...@@ -68,6 +68,12 @@
@include btn-default; @include btn-default;
@include btn-white; @include btn-white;
color: $gl-text-color;
&:focus:active {
outline: 0;
}
&.btn-small, &.btn-small,
&.btn-sm { &.btn-sm {
padding: 4px 10px; padding: 4px 10px;
...@@ -130,6 +136,11 @@ ...@@ -130,6 +136,11 @@
&.disabled { &.disabled {
pointer-events: auto !important; pointer-events: auto !important;
} }
.caret {
margin-left: 5px;
color: $gray-darkest;
}
} }
.btn-block { .btn-block {
...@@ -179,7 +190,7 @@ ...@@ -179,7 +190,7 @@
} }
.active { .active {
@include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12)); @include box-shadow($gl-btn-active-background);
border: 1px solid #c6cacf !important; border: 1px solid #c6cacf !important;
background-color: #e4e7ed !important; background-color: #e4e7ed !important;
......
...@@ -56,6 +56,10 @@ hr { ...@@ -56,6 +56,10 @@ hr {
margin: $gl-padding 0; margin: $gl-padding 0;
} }
.dropdown-menu {
margin: 6px 0 0;
}
.dropdown-menu > li > a { .dropdown-menu > li > a {
text-shadow: none; text-shadow: none;
} }
......
...@@ -21,10 +21,3 @@ ...@@ -21,10 +21,3 @@
} }
} }
} }
.issues-filters,
.issues_bulk_update {
.select2-container .select2-choice {
color: #444 !important;
}
}
/** Select2 selectbox style override **/ /** Select2 selectbox style override **/
.select2-container {
width: 100% !important;
}
.select2-container, .select2-container.select2-drop-above { .select2-container, .select2-container.select2-drop-above {
.select2-choice { .select2-choice {
background: #FFF; background: #fff;
border-color: #DDD; border-color: $input-border;
height: 36px; border-color: $border-white-light;
padding: 6px $gl-padding; height: 35px;
padding: $gl-vert-padding $gl-btn-padding;
font-size: $gl-font-size; font-size: $gl-font-size;
line-height: 1.42857143; line-height: 1.42857143;
@include border-radius(2px); @include border-radius($border-radius-default);
.select2-arrow { .select2-arrow {
background: #FFF; background-image: none;
border-left: none; background-color: transparent;
padding-top: 5px; border: none;
} padding-top: 6px;
padding-right: 10px;
.select2-chosen { b {
color: $gl-text-color; @extend .caret;
color: $gray-darkest;
}
} }
&.select2-default {
.select2-chosen { .select2-chosen {
color: #999; margin-right: 15px;
} }
&:hover {
background-color: $gray-dark;
border-color: $border-white-normal;
color: $gl-text-color;
} }
} }
} }
.select2-container .select2-choice, .select2-container.select2-drop-above .select2-choice{
color: #7f8fa4;
border: 1px solid #e7e9ed;
}
.select2-drop { .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 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); @include border-radius ($border-radius-default);
border: none;
padding: 16px;
border: none !important;
} }
.select2-results .select2-result-label { .select2-results .select2-result-label {
padding: 9px; padding: 10px 15px;
} }
.select2-drop{ .select2-drop{
...@@ -56,15 +60,30 @@ ...@@ -56,15 +60,30 @@
.select2-results li.select2-result-with-children > .select2-result-label { .select2-results li.select2-result-with-children > .select2-result-label {
font-weight: 600; font-weight: 600;
color: #313236; color: $gl-text-color;
}
.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($gl-btn-active-gradient);
}
} }
.select2-container-multi { .select2-container-multi {
.select2-choices { .select2-choices {
@include border-radius(2px); @include border-radius($border-radius-default);
border-color: $input-border; border-color: $input-border;
background: white; background: none;
padding-left: $gl-padding / 2;
.select2-search-field input { .select2-search-field input {
padding: $gl-padding / 2; padding: $gl-padding / 2;
...@@ -76,14 +95,16 @@ ...@@ -76,14 +95,16 @@
.select2-search-choice { .select2-search-choice {
margin: 8px 0 0 8px; margin: 8px 0 0 8px;
background: white;
box-shadow: none; box-shadow: none;
border-color: $input-border; border-color: $input-border;
color: $gl-text-color; color: $gl-text-color;
line-height: 15px; line-height: 15px;
background-color: $background-color;
background-image: none;
.select2-search-choice-close { .select2-search-choice-close {
top: 5px; top: 4px;
left: 3px;
} }
&.select2-search-choice-focus { &.select2-search-choice-focus {
...@@ -91,22 +112,25 @@ ...@@ -91,22 +112,25 @@
} }
} }
} }
&.select2-container-active .select2-choices,
&.select2-dropdown-open .select2-choices {
border-color: $border-white-normal;
@include box-shadow($gl-btn-active-gradient);
}
}
.select2-container-multi .select2-choices .select2-search-choice {
} }
.select2-drop-active { .select2-drop-active {
border: 1px solid #BBB !important; margin-top: 6px;
margin-top: 4px; font-size: 14px;
font-size: 13px;
&.select2-drop-above { &.select2-drop-above {
margin-bottom: 8px; margin-bottom: 8px;
} }
.select2-search input {
background: #fafafa;
border-color: #DDD;
}
.select2-results { .select2-results {
max-height: 350px; max-height: 350px;
.select2-highlighted { .select2-highlighted {
...@@ -115,8 +139,34 @@ ...@@ -115,8 +139,34 @@
} }
} }
.select2-container { .select2-search {
width: 100% !important; padding: 15px 15px 5px;
.select2-drop-auto-width & {
padding: 15px 15px 5px;
}
}
.select2-search input {
padding: 2px 25px 2px 5px;
background: #fff image-url('select2.png');
background-repeat: no-repeat;
background-position: right 0px bottom 6px;
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-search input.select2-active {
background-color: #fff;
background-image: image-url('select2-spinner.gif') !important;
background-repeat: no-repeat;
background-position: right 5px center !important;
background-size: 16px 16px !important;
} }
/** Branch/tag selector **/ /** Branch/tag selector **/
...@@ -124,10 +174,19 @@ ...@@ -124,10 +174,19 @@
width: 160px !important; width: 160px !important;
} }
.ajax-users-dropdown, .ajax-project-users-dropdown { .select2-results .select2-no-results,
.select2-search { .select2-results .select2-searching,
padding-top: 2px; .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 { .ajax-users-select {
......
...@@ -31,6 +31,7 @@ $gl-padding-top:10px; ...@@ -31,6 +31,7 @@ $gl-padding-top:10px;
$gl-avatar-size: 40px; $gl-avatar-size: 40px;
$secondary-text: #7f8fa4; $secondary-text: #7f8fa4;
$error-exclamation-point: #E62958; $error-exclamation-point: #E62958;
$border-radius-default: 3px;
/* /*
* Color schema * Color schema
...@@ -100,6 +101,8 @@ $gl-success: $green-normal; ...@@ -100,6 +101,8 @@ $gl-success: $green-normal;
$gl-info: $blue-normal; $gl-info: $blue-normal;
$gl-warning: $orange-normal; $gl-warning: $orange-normal;
$gl-danger: $red-normal; $gl-danger: $red-normal;
$gl-btn-active-background: rgba(0, 0, 0, 0.12);
$gl-btn-active-gradient: inset 0 0 4px $gl-btn-active-background;
/* /*
* Commit Diff Colors * Commit Diff Colors
......
...@@ -32,6 +32,7 @@ ...@@ -32,6 +32,7 @@
.cover-controls { .cover-controls {
.project-settings-dropdown { .project-settings-dropdown {
margin-left: 10px; margin-left: 10px;
display: inline-block;
} }
} }
...@@ -186,10 +187,10 @@ ...@@ -186,10 +187,10 @@
.dropdown-menu { .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 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); @include border-radius ($border-radius-default);
border: none; border: none;
padding: 16px 0; padding: 10px 0;
font-size: 14px; font-size: 14px;
font-weight: 100; font-weight: 100;
......
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