1
0
mirror of synced 2024-11-22 21:16:10 +03:00

Added the arrow for the dropdown

This commit is contained in:
Kevin Brown 2014-11-24 21:33:22 -05:00
parent ffed37013d
commit ac5d584f3d
13 changed files with 236 additions and 83 deletions

60
dist/css/select2.css vendored
View File

@ -91,6 +91,26 @@
margin-right: 10px; } margin-right: 10px; }
.select2-container--default .select2-selection--single .select2-selection__placeholder { .select2-container--default .select2-selection--single .select2-selection__placeholder {
color: #999; } color: #999; }
.select2-container--default .select2-selection--single .select2-selection__arrow {
height: 26px;
position: absolute;
top: 1px;
right: 1px;
width: 20px; }
.select2-container--default .select2-selection--single .select2-selection__arrow b {
border-color: #888 transparent transparent transparent;
border-style: solid;
border-width: 5px 4px 0 4px;
height: 0;
left: 50%;
margin-left: -4px;
margin-top: -2px;
position: absolute;
top: 50%;
width: 0; }
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
border-color: transparent transparent #888 transparent;
border-width: 0 4px 5px 4px; }
.select2-container--default .select2-selection--multiple { .select2-container--default .select2-selection--multiple {
background-color: white; background-color: white;
border: 1px solid #aaa; border: 1px solid #aaa;
@ -168,17 +188,49 @@
margin-right: 10px; } margin-right: 10px; }
.select2-container--classic .select2-selection--single .select2-selection__placeholder { .select2-container--classic .select2-selection--single .select2-selection__placeholder {
color: #999; } color: #999; }
.select2-container--classic .select2-selection--single .select2-selection__arrow {
background-color: #ddd;
border: none;
border-left: 1px solid #aaa;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
height: 26px;
position: absolute;
top: 1px;
right: 1px;
width: 20px;
background-image: -webkit-linear-gradient(top, #eee 50%, #ccc 100%);
background-image: -o-linear-gradient(top, #eee 50%, #ccc 100%);
background-image: linear-gradient(to bottom, #eee 50%, #ccc 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eee', endColorstr='#ccc', GradientType=0); }
.select2-container--classic .select2-selection--single .select2-selection__arrow b {
border-color: #888 transparent transparent transparent;
border-style: solid;
border-width: 5px 4px 0 4px;
height: 0;
left: 50%;
margin-left: -4px;
margin-top: -2px;
position: absolute;
top: 50%;
width: 0; }
.select2-container--classic.select2-container--open .select2-selection--single { .select2-container--classic.select2-container--open .select2-selection--single {
border: 1px solid #5897fb; border: 1px solid #5897fb;
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
background-image: -webkit-linear-gradient(top, #eee 50%, #ffffff 100%); background-image: -webkit-linear-gradient(top, #eee 50%, #ffffff 100%);
background-image: -o-linear-gradient(top, #eee 50%, #ffffff 100%); background-image: -o-linear-gradient(top, #eee 50%, #ffffff 100%);
background-image: linear-gradient(to bottom, #eee 50%, #ffffff 100%); background-image: linear-gradient(to bottom, #eee 50%, #ffffff 100%);
background-repeat: repeat-x; background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eee', endColorstr='#ffffff', GradientType=0); } filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eee', endColorstr='#ffffff', GradientType=0); }
.select2-container--classic.select2-container--open .select2-selection--single { .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow {
border-bottom: none; background: transparent;
border-bottom-left-radius: 0; border: none; }
border-bottom-right-radius: 0; } .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b {
border-color: transparent transparent #888 transparent;
border-width: 0 4px 5px 4px; }
.select2-container--classic .select2-selection--multiple { .select2-container--classic .select2-selection--multiple {
background-color: white; background-color: white;
border: 1px solid #aaa; border: 1px solid #aaa;

File diff suppressed because one or more lines are too long

View File

@ -743,6 +743,9 @@ define('select2/selection/single',[
' role="combobox" aria-autocomplete="list" aria-haspopup="true"' + ' role="combobox" aria-autocomplete="list" aria-haspopup="true"' +
' aria-expanded="false">' + ' aria-expanded="false">' +
'<span class="select2-selection__rendered"></span>' + '<span class="select2-selection__rendered"></span>' +
'<span class="select2-selection__arrow" role="presentation">' +
'<b role="presentation"></b>' +
'</span>' +
'</span>' '</span>'
); );

View File

@ -743,6 +743,9 @@ define('select2/selection/single',[
' role="combobox" aria-autocomplete="list" aria-haspopup="true"' + ' role="combobox" aria-autocomplete="list" aria-haspopup="true"' +
' aria-expanded="false">' + ' aria-expanded="false">' +
'<span class="select2-selection__rendered"></span>' + '<span class="select2-selection__rendered"></span>' +
'<span class="select2-selection__arrow" role="presentation">' +
'<b role="presentation"></b>' +
'</span>' +
'</span>' '</span>'
); );

View File

@ -10278,6 +10278,9 @@ define('select2/selection/single',[
' role="combobox" aria-autocomplete="list" aria-haspopup="true"' + ' role="combobox" aria-autocomplete="list" aria-haspopup="true"' +
' aria-expanded="false">' + ' aria-expanded="false">' +
'<span class="select2-selection__rendered"></span>' + '<span class="select2-selection__rendered"></span>' +
'<span class="select2-selection__arrow" role="presentation">' +
'<b role="presentation"></b>' +
'</span>' +
'</span>' '</span>'
); );

File diff suppressed because one or more lines are too long

3
dist/js/select2.js vendored
View File

@ -1171,6 +1171,9 @@ define('select2/selection/single',[
' role="combobox" aria-autocomplete="list" aria-haspopup="true"' + ' role="combobox" aria-autocomplete="list" aria-haspopup="true"' +
' aria-expanded="false">' + ' aria-expanded="false">' +
'<span class="select2-selection__rendered"></span>' + '<span class="select2-selection__rendered"></span>' +
'<span class="select2-selection__arrow" role="presentation">' +
'<b role="presentation"></b>' +
'</span>' +
'</span>' '</span>'
); );

File diff suppressed because one or more lines are too long

View File

@ -15,6 +15,9 @@ define([
' role="combobox" aria-autocomplete="list" aria-haspopup="true"' + ' role="combobox" aria-autocomplete="list" aria-haspopup="true"' +
' aria-expanded="false">' + ' aria-expanded="false">' +
'<span class="select2-selection__rendered"></span>' + '<span class="select2-selection__rendered"></span>' +
'<span class="select2-selection__arrow" role="presentation">' +
'<b role="presentation"></b>' +
'</span>' +
'</span>' '</span>'
); );

View File

@ -27,18 +27,64 @@
.select2-selection__placeholder { .select2-selection__placeholder {
color: #999; color: #999;
} }
.select2-selection__arrow {
background-color: #ddd;
border: none;
border-left: 1px solid $border-color;
border-top-right-radius: $border-radius;
border-bottom-right-radius: $border-radius;
height: 26px;
position: absolute;
top: 1px;
right: 1px;
width: 20px;
@include gradient-vertical(#eee, #ccc, 50%, 100%);
b {
border-color: #888 transparent transparent transparent;
border-style: solid;
border-width: 5px 4px 0 4px;
height: 0;
left: 50%;
margin-left: -4px;
margin-top: -2px;
position: absolute;
top: 50%;
width: 0;
}
}
} }
&.select2-container--open { &.select2-container--open {
.select2-selection--single { .select2-selection--single {
border: 1px solid $focus-border-color; border: 1px solid $focus-border-color;
@include gradient-vertical($selection-opened-bg-top-color, $selection-opened-bg-bottom-color, 50%, 100%);
}
.select2-selection--single {
border-bottom: none; border-bottom: none;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
@include gradient-vertical($selection-opened-bg-top-color, $selection-opened-bg-bottom-color, 50%, 100%);
.select2-selection__arrow {
background: transparent;
border: none;
b {
border-color: transparent transparent #888 transparent;
border-width: 0 4px 5px 4px;
}
}
} }
} }

View File

@ -0,0 +1,48 @@
.select2-selection--multiple {
background-color: white;
border: 1px solid #aaa;
border-radius: 4px;
cursor: text;
.select2-selection__rendered {
list-style: none;
margin: 0;
padding: 0 5px;
}
.select2-selection__placeholder {
color: #999;
margin-top: 5px;
float: left;
}
.select2-selection__choice {
background-color: #e4e4e4;
border: 1px solid #aaa;
border-radius: 4px;
cursor: default;
float: left;
margin-right: 5px;
margin-top: 5px;
padding: 0 5px;
}
.select2-selection__choice__remove {
color: #999;
cursor: pointer;
display: inline-block;
font-weight: bold;
margin-right: 2px;
&:hover {
color: #333;
}
}
}

View File

@ -0,0 +1,60 @@
.select2-selection--single {
background-color: #fff;
border: 1px solid #aaa;
border-radius: 4px;
.select2-selection__rendered {
color: #444;
line-height: 28px;
}
.select2-selection__clear {
cursor: pointer;
float: right;
font-weight: bold;
margin-right: 10px;
}
.select2-selection__placeholder {
color: #999;
}
.select2-selection__arrow {
height: 26px;
position: absolute;
top: 1px;
right: 1px;
width: 20px;
b {
border-color: #888 transparent transparent transparent;
border-style: solid;
border-width: 5px 4px 0 4px;
height: 0;
left: 50%;
margin-left: -4px;
margin-top: -2px;
position: absolute;
top: 50%;
width: 0;
}
}
}
&.select2-container--open {
.select2-selection--single {
.select2-selection__arrow {
b {
border-color: transparent transparent #888 transparent;
border-width: 0 4px 5px 4px;
}
}
}
}

View File

@ -1,74 +1,6 @@
.select2-container--default { .select2-container--default {
.select2-selection--single { @import "single";
background-color: #fff; @import "multiple";
border: 1px solid #aaa;
border-radius: 4px;
.select2-selection__rendered {
color: #444;
line-height: 28px;
}
.select2-selection__clear {
cursor: pointer;
float: right;
font-weight: bold;
margin-right: 10px;
}
.select2-selection__placeholder {
color: #999;
}
}
.select2-selection--multiple {
background-color: white;
border: 1px solid #aaa;
border-radius: 4px;
cursor: text;
.select2-selection__rendered {
list-style: none;
margin: 0;
padding: 0 5px;
}
.select2-selection__placeholder {
color: #999;
margin-top: 5px;
float: left;
}
.select2-selection__choice {
background-color: #e4e4e4;
border: 1px solid #aaa;
border-radius: 4px;
cursor: default;
float: left;
margin-right: 5px;
margin-top: 5px;
padding: 0 5px;
}
.select2-selection__choice__remove {
color: #999;
cursor: pointer;
display: inline-block;
font-weight: bold;
margin-right: 2px;
&:hover {
color: #333;
}
}
}
&.select2-container--open { &.select2-container--open {
.select2-selection--single, .select2-selection--multiple { .select2-selection--single, .select2-selection--multiple {