Added the arrow for the dropdown
This commit is contained in:
parent
ffed37013d
commit
ac5d584f3d
60
dist/css/select2.css
vendored
60
dist/css/select2.css
vendored
@ -91,6 +91,26 @@
|
||||
margin-right: 10px; }
|
||||
.select2-container--default .select2-selection--single .select2-selection__placeholder {
|
||||
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 {
|
||||
background-color: white;
|
||||
border: 1px solid #aaa;
|
||||
@ -168,17 +188,49 @@
|
||||
margin-right: 10px; }
|
||||
.select2-container--classic .select2-selection--single .select2-selection__placeholder {
|
||||
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 {
|
||||
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: -o-linear-gradient(top, #eee 50%, #ffffff 100%);
|
||||
background-image: linear-gradient(to bottom, #eee 50%, #ffffff 100%);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eee', endColorstr='#ffffff', GradientType=0); }
|
||||
.select2-container--classic.select2-container--open .select2-selection--single {
|
||||
border-bottom: none;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0; }
|
||||
.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow {
|
||||
background: transparent;
|
||||
border: none; }
|
||||
.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 {
|
||||
background-color: white;
|
||||
border: 1px solid #aaa;
|
||||
|
2
dist/css/select2.min.css
vendored
2
dist/css/select2.min.css
vendored
File diff suppressed because one or more lines are too long
3
dist/js/select2.amd.full.js
vendored
3
dist/js/select2.amd.full.js
vendored
@ -743,6 +743,9 @@ define('select2/selection/single',[
|
||||
' role="combobox" aria-autocomplete="list" aria-haspopup="true"' +
|
||||
' aria-expanded="false">' +
|
||||
'<span class="select2-selection__rendered"></span>' +
|
||||
'<span class="select2-selection__arrow" role="presentation">' +
|
||||
'<b role="presentation"></b>' +
|
||||
'</span>' +
|
||||
'</span>'
|
||||
);
|
||||
|
||||
|
3
dist/js/select2.amd.js
vendored
3
dist/js/select2.amd.js
vendored
@ -743,6 +743,9 @@ define('select2/selection/single',[
|
||||
' role="combobox" aria-autocomplete="list" aria-haspopup="true"' +
|
||||
' aria-expanded="false">' +
|
||||
'<span class="select2-selection__rendered"></span>' +
|
||||
'<span class="select2-selection__arrow" role="presentation">' +
|
||||
'<b role="presentation"></b>' +
|
||||
'</span>' +
|
||||
'</span>'
|
||||
);
|
||||
|
||||
|
3
dist/js/select2.full.js
vendored
3
dist/js/select2.full.js
vendored
@ -10278,6 +10278,9 @@ define('select2/selection/single',[
|
||||
' role="combobox" aria-autocomplete="list" aria-haspopup="true"' +
|
||||
' aria-expanded="false">' +
|
||||
'<span class="select2-selection__rendered"></span>' +
|
||||
'<span class="select2-selection__arrow" role="presentation">' +
|
||||
'<b role="presentation"></b>' +
|
||||
'</span>' +
|
||||
'</span>'
|
||||
);
|
||||
|
||||
|
4
dist/js/select2.full.min.js
vendored
4
dist/js/select2.full.min.js
vendored
File diff suppressed because one or more lines are too long
3
dist/js/select2.js
vendored
3
dist/js/select2.js
vendored
@ -1171,6 +1171,9 @@ define('select2/selection/single',[
|
||||
' role="combobox" aria-autocomplete="list" aria-haspopup="true"' +
|
||||
' aria-expanded="false">' +
|
||||
'<span class="select2-selection__rendered"></span>' +
|
||||
'<span class="select2-selection__arrow" role="presentation">' +
|
||||
'<b role="presentation"></b>' +
|
||||
'</span>' +
|
||||
'</span>'
|
||||
);
|
||||
|
||||
|
4
dist/js/select2.min.js
vendored
4
dist/js/select2.min.js
vendored
File diff suppressed because one or more lines are too long
3
src/js/select2/selection/single.js
vendored
3
src/js/select2/selection/single.js
vendored
@ -15,6 +15,9 @@ define([
|
||||
' role="combobox" aria-autocomplete="list" aria-haspopup="true"' +
|
||||
' aria-expanded="false">' +
|
||||
'<span class="select2-selection__rendered"></span>' +
|
||||
'<span class="select2-selection__arrow" role="presentation">' +
|
||||
'<b role="presentation"></b>' +
|
||||
'</span>' +
|
||||
'</span>'
|
||||
);
|
||||
|
||||
|
@ -27,18 +27,64 @@
|
||||
.select2-selection__placeholder {
|
||||
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-selection--single {
|
||||
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-left-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
48
src/scss/theme/default/_multiple.scss
Normal file
48
src/scss/theme/default/_multiple.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
60
src/scss/theme/default/_single.scss
Normal file
60
src/scss/theme/default/_single.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
@ -1,74 +1,6 @@
|
||||
.select2-container--default {
|
||||
.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--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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@import "single";
|
||||
@import "multiple";
|
||||
|
||||
&.select2-container--open {
|
||||
.select2-selection--single, .select2-selection--multiple {
|
||||
|
Loading…
Reference in New Issue
Block a user