kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Make select2 design consistent

Browse source
This commit is contained in:
Alfredo Sumaran 2016-02-19 21:46:18 -05:00
parent ea4d2741a2
commit 42b277eceb
5 changed files with 57 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
app/assets/stylesheets/framework/buttons.scss
View file

@ -68,6 +68,8 @@
@include btn-default; @include btn-default;
@include btn-white; @include btn-white;
color: $gl-text-color;
&.btn-small, &.btn-small,
&.btn-sm { &.btn-sm {
padding: 4px 10px; padding: 4px 10px;
@ -130,6 +132,11 @@
&.disabled { &.disabled {
pointer-events: auto !important; pointer-events: auto !important;
} }
.caret {
margin-left: 5px;
color: $gray-darkest;
}
} }
.btn-block { .btn-block {

2
app/assets/stylesheets/framework/filters.scss
View file

@ -25,6 +25,6 @@
.issues-filters, .issues-filters,
.issues_bulk_update { .issues_bulk_update {
.select2-container .select2-choice { .select2-container .select2-choice {
color: #444 !important; // color: #444 !important;
} }
} }

72
app/assets/stylesheets/framework/selects.scss
View file

@ -2,38 +2,41 @@
.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; height: 35px;
padding: 6px $gl-padding; 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($input-border-radius);
.select2-arrow { .select2-arrow {
background: #FFF; width: auto;
border-left: none; background-image: none;
padding-top: 5px; background-color: transparent;
border: none;
top: calc(50% - 12px);
right: 8px;
b {
@extend .caret;
color: $gray-darkest;
}
} }
.select2-chosen { .select2-chosen {
color: $gl-text-color; margin-right: 15px;
} }
&.select2-default {
.select2-chosen { &:hover {
color: #999; background-color: $gray-dark;
} border-color: $border-white-normal;
color: #313236;
} }
} }
} }
.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 (0px);
@ -61,9 +64,8 @@
.select2-container-multi { .select2-container-multi {
.select2-choices { .select2-choices {
@include border-radius(2px); @include border-radius($input-border-radius);
border-color: $input-border; border-color: $input-border;
background: white;
padding-left: $gl-padding / 2; padding-left: $gl-padding / 2;
.select2-search-field input { .select2-search-field input {
@ -76,7 +78,6 @@
.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;
@ -93,6 +94,22 @@
} }
} }
.select2-container-active {
.select2-choice, .select2-choices {
@include box-shadow(none);
}
}
.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-drop-active { .select2-drop-active {
border: 1px solid #BBB !important; border: 1px solid #BBB !important;
margin-top: 4px; margin-top: 4px;
@ -102,11 +119,6 @@
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,6 +127,14 @@
} }
} }
.select2-search input {
background: #fff image-url('select2.png') no-repeat 99% -22px;
}
.select2-search input.select2-active {
background: #fff image-url('select2-spinner.gif') no-repeat 99%;
}
.select2-container { .select2-container {
width: 100% !important; width: 100% !important;
} }

1
app/assets/stylesheets/framework/variables.scss
View file

@ -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;
$input-border-radius: 3px;
/* /*
* Color schema * Color schema

4
app/assets/stylesheets/pages/projects.scss
View file

@ -191,10 +191,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 ($input-border-radius);
border: none; border: none;
padding: 16px 0; padding: 10px 0;
font-size: 14px; font-size: 14px;
font-weight: 100; font-weight: 100;