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; }
|
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;
|
||||||
|
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"' +
|
' 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>'
|
||||||
);
|
);
|
||||||
|
|
||||||
|
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"' +
|
' 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>'
|
||||||
);
|
);
|
||||||
|
|
||||||
|
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"' +
|
' 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>'
|
||||||
);
|
);
|
||||||
|
|
||||||
|
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"' +
|
' 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>'
|
||||||
);
|
);
|
||||||
|
|
||||||
|
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"' +
|
' 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>'
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
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-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 {
|
||||||
|
Loading…
Reference in New Issue
Block a user