Switch the multiple selection container
This switches the container to use BEM for the class naming.
This commit is contained in:
parent
971422f92e
commit
7933eb77c1
85
dist/css/select2.css
vendored
85
dist/css/select2.css
vendored
@ -18,21 +18,22 @@
|
||||
padding-left: 8px;
|
||||
text-overflow: ellipsis; }
|
||||
|
||||
.select2-container .selection .multiple-select {
|
||||
.select2-selection--multiple {
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
min-height: 32px;
|
||||
user-select: none;
|
||||
-webkit-user-select: none; }
|
||||
.select2-container .selection .multiple-select .rendered-selection {
|
||||
.select2-selection--multiple .select2-selection__rendered {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
padding-left: 8px;
|
||||
text-overflow: ellipsis; }
|
||||
.select2-container .select2-search-inline {
|
||||
|
||||
.select2-search--inline {
|
||||
float: left; }
|
||||
.select2-container .select2-search-inline input {
|
||||
.select2-search--inline .select2-search__field {
|
||||
border: none;
|
||||
font-size: 100%;
|
||||
margin-top: 5px; }
|
||||
@ -59,18 +60,19 @@
|
||||
-webkit-user-select: none; }
|
||||
.select2-container .dropdown .results .options .option[aria-selected] {
|
||||
cursor: pointer; }
|
||||
.select2-container .select2-search {
|
||||
display: block;
|
||||
padding: 4px; }
|
||||
.select2-container .select2-search input {
|
||||
padding: 4px;
|
||||
width: 100%; }
|
||||
.select2-container.open .dropdown {
|
||||
border-top: none;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
left: 0; }
|
||||
|
||||
.select2-search--dropdown {
|
||||
display: block;
|
||||
padding: 4px; }
|
||||
.select2-search--dropdown .select2-search__field {
|
||||
padding: 4px;
|
||||
width: 100%; }
|
||||
|
||||
.select2-container--default .select2-selection--single {
|
||||
background-color: #fff;
|
||||
border: 1px solid #aaa;
|
||||
@ -80,59 +82,58 @@
|
||||
line-height: 28px; }
|
||||
.select2-container--default .select2-selection--single .select2-selection__placeholder {
|
||||
color: #999; }
|
||||
|
||||
.select2-container.select2-theme-default .selection .multiple-select {
|
||||
.select2-container--default .select2-selection--multiple {
|
||||
background-color: white;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 4px;
|
||||
cursor: text; }
|
||||
.select2-container.select2-theme-default .selection .multiple-select .rendered-selection {
|
||||
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 5px; }
|
||||
.select2-container.select2-theme-default .selection .multiple-select .rendered-selection .placeholder {
|
||||
.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
|
||||
color: #999;
|
||||
margin-top: 5px;
|
||||
float: left; }
|
||||
.select2-container--default .select2-selection--multiple .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-container--default .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove {
|
||||
color: #999;
|
||||
margin-top: 5px;
|
||||
float: left; }
|
||||
.select2-container.select2-theme-default .selection .multiple-select .rendered-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-container.select2-theme-default .selection .multiple-select .rendered-selection .choice .remove {
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
margin-right: 2px; }
|
||||
.select2-container.select2-theme-default .selection .multiple-select .rendered-selection .choice .remove:hover {
|
||||
color: #333; }
|
||||
.select2-container.select2-theme-default.open .selection .single-select, .select2-container.select2-theme-default.open .selection .multiple-select {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
margin-right: 2px; }
|
||||
.select2-container--default .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove:hover {
|
||||
color: #333; }
|
||||
.select2-container--default.open .select2-selection--single, .select2-container--default.open .select2-selection--multiple {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0; }
|
||||
.select2-container.select2-theme-default .select2-search input {
|
||||
.select2-container--default .select2-search--dropdown .select2-search__field {
|
||||
border: 1px solid #aaa; }
|
||||
.select2-container.select2-theme-default .select2-search-inline input {
|
||||
.select2-container--default .select2-search--inline .select2-search__field {
|
||||
border: none;
|
||||
outline: 0; }
|
||||
.select2-container.select2-theme-default .dropdown .results > .options {
|
||||
.select2-container--default .dropdown .results > .options {
|
||||
max-height: 200px;
|
||||
overflow-y: auto; }
|
||||
.select2-container.select2-theme-default .dropdown .results .options .option[role=group] {
|
||||
.select2-container--default .dropdown .results .options .option[role=group] {
|
||||
padding: 0; }
|
||||
.select2-container.select2-theme-default .dropdown .results .options .option[role=group] .group-label {
|
||||
.select2-container--default .dropdown .results .options .option[role=group] .group-label {
|
||||
cursor: default;
|
||||
display: block;
|
||||
padding: 6px; }
|
||||
.select2-container.select2-theme-default .dropdown .results .options .option[aria-disabled=true] {
|
||||
.select2-container--default .dropdown .results .options .option[aria-disabled=true] {
|
||||
color: #999; }
|
||||
.select2-container.select2-theme-default .dropdown .results .options .option[aria-selected=true] {
|
||||
.select2-container--default .dropdown .results .options .option[aria-selected=true] {
|
||||
background-color: #ddd; }
|
||||
.select2-container.select2-theme-default .dropdown .results .options .option[aria-selected].highlighted {
|
||||
.select2-container--default .dropdown .results .options .option[aria-selected].highlighted {
|
||||
background-color: #5897fb;
|
||||
color: white; }
|
||||
|
||||
|
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
32
dist/js/select2.amd.full.js
vendored
32
dist/js/select2.amd.full.js
vendored
@ -814,9 +814,10 @@ define('select2/selection/multiple',[
|
||||
|
||||
MultipleSelection.prototype.render = function () {
|
||||
var $selection = $(
|
||||
'<span class="multiple-select" tabindex="0" role="combobox" ' +
|
||||
'aria-autocomplete="list" aria-haspopup="true" aria-expanded="false">' +
|
||||
'<ul class="rendered-selection"></ul>' +
|
||||
'<span class="select2-selection select2-selection--multiple"' +
|
||||
' tabindex="0" role="combobox" aria-autocomplete="list"' +
|
||||
' aria-haspopup="true" aria-expanded="false">' +
|
||||
'<ul class="select2-selection__rendered"></ul>' +
|
||||
'</span>'
|
||||
);
|
||||
|
||||
@ -852,7 +853,7 @@ define('select2/selection/multiple',[
|
||||
};
|
||||
|
||||
MultipleSelection.prototype.clear = function () {
|
||||
this.$selection.find('.rendered-selection').empty();
|
||||
this.$selection.find('.select2-selection__rendered').empty();
|
||||
};
|
||||
|
||||
MultipleSelection.prototype.display = function (data) {
|
||||
@ -863,8 +864,10 @@ define('select2/selection/multiple',[
|
||||
|
||||
MultipleSelection.prototype.selectionContainer = function () {
|
||||
var $container = $(
|
||||
'<li class="choice">' +
|
||||
'<span class="remove" role="presentation">×</span>' +
|
||||
'<li class="select2-selection__choice">' +
|
||||
'<span class="select2-selection__choice__remove" role="presentation">' +
|
||||
'×' +
|
||||
'</span>' +
|
||||
'</li>'
|
||||
);
|
||||
|
||||
@ -892,7 +895,7 @@ define('select2/selection/multiple',[
|
||||
$selections.push($selection);
|
||||
}
|
||||
|
||||
this.$selection.find('.rendered-selection').append($selections);
|
||||
this.$selection.find('.select2-selection__rendered').append($selections);
|
||||
};
|
||||
|
||||
return MultipleSelection;
|
||||
@ -957,8 +960,9 @@ define('select2/selection/search',[
|
||||
|
||||
Search.prototype.render = function (decorated) {
|
||||
var $search = $(
|
||||
'<li class="select2-search-inline">' +
|
||||
'<input type="search" tabindex="-1" role="textbox" />' +
|
||||
'<li class="select2-search select2-search--inline">' +
|
||||
'<input class="select2-search__field" type="search" tabindex="-1"' +
|
||||
' role="textbox" />' +
|
||||
'</li>'
|
||||
);
|
||||
|
||||
@ -987,7 +991,7 @@ define('select2/selection/search',[
|
||||
self.$search.val('');
|
||||
});
|
||||
|
||||
this.$selection.on('keydown', '.select2-search-inline', function (evt) {
|
||||
this.$selection.on('keydown', '.select2-search--inline', function (evt) {
|
||||
evt.stopPropagation();
|
||||
|
||||
self.trigger('keypress', evt);
|
||||
@ -995,7 +999,7 @@ define('select2/selection/search',[
|
||||
self._keyUpPrevented = evt.isDefaultPrevented();
|
||||
});
|
||||
|
||||
this.$selection.on('keyup', '.select2-search-inline', function (evt) {
|
||||
this.$selection.on('keyup', '.select2-search--inline', function (evt) {
|
||||
self.handleSearch(evt);
|
||||
});
|
||||
};
|
||||
@ -1009,7 +1013,8 @@ define('select2/selection/search',[
|
||||
|
||||
decorated.call(this, data);
|
||||
|
||||
this.$selection.find('.rendered-selection').append(this.$searchContainer);
|
||||
this.$selection.find('.select2-selection__rendered')
|
||||
.append(this.$searchContainer);
|
||||
|
||||
this.resizeSearch();
|
||||
};
|
||||
@ -1035,7 +1040,8 @@ define('select2/selection/search',[
|
||||
|
||||
if (this.$search.attr('placeholder') !== '') {
|
||||
width = this.$selection.innerWidth();
|
||||
width -= this.$selection.find('.rendered-selection').innerWidth();
|
||||
width -= this.$selection.find('.select2-selection__rendered')
|
||||
.innerWidth();
|
||||
|
||||
width = width + 'px';
|
||||
} else {
|
||||
|
32
dist/js/select2.amd.js
vendored
32
dist/js/select2.amd.js
vendored
@ -814,9 +814,10 @@ define('select2/selection/multiple',[
|
||||
|
||||
MultipleSelection.prototype.render = function () {
|
||||
var $selection = $(
|
||||
'<span class="multiple-select" tabindex="0" role="combobox" ' +
|
||||
'aria-autocomplete="list" aria-haspopup="true" aria-expanded="false">' +
|
||||
'<ul class="rendered-selection"></ul>' +
|
||||
'<span class="select2-selection select2-selection--multiple"' +
|
||||
' tabindex="0" role="combobox" aria-autocomplete="list"' +
|
||||
' aria-haspopup="true" aria-expanded="false">' +
|
||||
'<ul class="select2-selection__rendered"></ul>' +
|
||||
'</span>'
|
||||
);
|
||||
|
||||
@ -852,7 +853,7 @@ define('select2/selection/multiple',[
|
||||
};
|
||||
|
||||
MultipleSelection.prototype.clear = function () {
|
||||
this.$selection.find('.rendered-selection').empty();
|
||||
this.$selection.find('.select2-selection__rendered').empty();
|
||||
};
|
||||
|
||||
MultipleSelection.prototype.display = function (data) {
|
||||
@ -863,8 +864,10 @@ define('select2/selection/multiple',[
|
||||
|
||||
MultipleSelection.prototype.selectionContainer = function () {
|
||||
var $container = $(
|
||||
'<li class="choice">' +
|
||||
'<span class="remove" role="presentation">×</span>' +
|
||||
'<li class="select2-selection__choice">' +
|
||||
'<span class="select2-selection__choice__remove" role="presentation">' +
|
||||
'×' +
|
||||
'</span>' +
|
||||
'</li>'
|
||||
);
|
||||
|
||||
@ -892,7 +895,7 @@ define('select2/selection/multiple',[
|
||||
$selections.push($selection);
|
||||
}
|
||||
|
||||
this.$selection.find('.rendered-selection').append($selections);
|
||||
this.$selection.find('.select2-selection__rendered').append($selections);
|
||||
};
|
||||
|
||||
return MultipleSelection;
|
||||
@ -957,8 +960,9 @@ define('select2/selection/search',[
|
||||
|
||||
Search.prototype.render = function (decorated) {
|
||||
var $search = $(
|
||||
'<li class="select2-search-inline">' +
|
||||
'<input type="search" tabindex="-1" role="textbox" />' +
|
||||
'<li class="select2-search select2-search--inline">' +
|
||||
'<input class="select2-search__field" type="search" tabindex="-1"' +
|
||||
' role="textbox" />' +
|
||||
'</li>'
|
||||
);
|
||||
|
||||
@ -987,7 +991,7 @@ define('select2/selection/search',[
|
||||
self.$search.val('');
|
||||
});
|
||||
|
||||
this.$selection.on('keydown', '.select2-search-inline', function (evt) {
|
||||
this.$selection.on('keydown', '.select2-search--inline', function (evt) {
|
||||
evt.stopPropagation();
|
||||
|
||||
self.trigger('keypress', evt);
|
||||
@ -995,7 +999,7 @@ define('select2/selection/search',[
|
||||
self._keyUpPrevented = evt.isDefaultPrevented();
|
||||
});
|
||||
|
||||
this.$selection.on('keyup', '.select2-search-inline', function (evt) {
|
||||
this.$selection.on('keyup', '.select2-search--inline', function (evt) {
|
||||
self.handleSearch(evt);
|
||||
});
|
||||
};
|
||||
@ -1009,7 +1013,8 @@ define('select2/selection/search',[
|
||||
|
||||
decorated.call(this, data);
|
||||
|
||||
this.$selection.find('.rendered-selection').append(this.$searchContainer);
|
||||
this.$selection.find('.select2-selection__rendered')
|
||||
.append(this.$searchContainer);
|
||||
|
||||
this.resizeSearch();
|
||||
};
|
||||
@ -1035,7 +1040,8 @@ define('select2/selection/search',[
|
||||
|
||||
if (this.$search.attr('placeholder') !== '') {
|
||||
width = this.$selection.innerWidth();
|
||||
width -= this.$selection.find('.rendered-selection').innerWidth();
|
||||
width -= this.$selection.find('.select2-selection__rendered')
|
||||
.innerWidth();
|
||||
|
||||
width = width + 'px';
|
||||
} else {
|
||||
|
32
dist/js/select2.full.js
vendored
32
dist/js/select2.full.js
vendored
@ -10349,9 +10349,10 @@ define('select2/selection/multiple',[
|
||||
|
||||
MultipleSelection.prototype.render = function () {
|
||||
var $selection = $(
|
||||
'<span class="multiple-select" tabindex="0" role="combobox" ' +
|
||||
'aria-autocomplete="list" aria-haspopup="true" aria-expanded="false">' +
|
||||
'<ul class="rendered-selection"></ul>' +
|
||||
'<span class="select2-selection select2-selection--multiple"' +
|
||||
' tabindex="0" role="combobox" aria-autocomplete="list"' +
|
||||
' aria-haspopup="true" aria-expanded="false">' +
|
||||
'<ul class="select2-selection__rendered"></ul>' +
|
||||
'</span>'
|
||||
);
|
||||
|
||||
@ -10387,7 +10388,7 @@ define('select2/selection/multiple',[
|
||||
};
|
||||
|
||||
MultipleSelection.prototype.clear = function () {
|
||||
this.$selection.find('.rendered-selection').empty();
|
||||
this.$selection.find('.select2-selection__rendered').empty();
|
||||
};
|
||||
|
||||
MultipleSelection.prototype.display = function (data) {
|
||||
@ -10398,8 +10399,10 @@ define('select2/selection/multiple',[
|
||||
|
||||
MultipleSelection.prototype.selectionContainer = function () {
|
||||
var $container = $(
|
||||
'<li class="choice">' +
|
||||
'<span class="remove" role="presentation">×</span>' +
|
||||
'<li class="select2-selection__choice">' +
|
||||
'<span class="select2-selection__choice__remove" role="presentation">' +
|
||||
'×' +
|
||||
'</span>' +
|
||||
'</li>'
|
||||
);
|
||||
|
||||
@ -10427,7 +10430,7 @@ define('select2/selection/multiple',[
|
||||
$selections.push($selection);
|
||||
}
|
||||
|
||||
this.$selection.find('.rendered-selection').append($selections);
|
||||
this.$selection.find('.select2-selection__rendered').append($selections);
|
||||
};
|
||||
|
||||
return MultipleSelection;
|
||||
@ -10492,8 +10495,9 @@ define('select2/selection/search',[
|
||||
|
||||
Search.prototype.render = function (decorated) {
|
||||
var $search = $(
|
||||
'<li class="select2-search-inline">' +
|
||||
'<input type="search" tabindex="-1" role="textbox" />' +
|
||||
'<li class="select2-search select2-search--inline">' +
|
||||
'<input class="select2-search__field" type="search" tabindex="-1"' +
|
||||
' role="textbox" />' +
|
||||
'</li>'
|
||||
);
|
||||
|
||||
@ -10522,7 +10526,7 @@ define('select2/selection/search',[
|
||||
self.$search.val('');
|
||||
});
|
||||
|
||||
this.$selection.on('keydown', '.select2-search-inline', function (evt) {
|
||||
this.$selection.on('keydown', '.select2-search--inline', function (evt) {
|
||||
evt.stopPropagation();
|
||||
|
||||
self.trigger('keypress', evt);
|
||||
@ -10530,7 +10534,7 @@ define('select2/selection/search',[
|
||||
self._keyUpPrevented = evt.isDefaultPrevented();
|
||||
});
|
||||
|
||||
this.$selection.on('keyup', '.select2-search-inline', function (evt) {
|
||||
this.$selection.on('keyup', '.select2-search--inline', function (evt) {
|
||||
self.handleSearch(evt);
|
||||
});
|
||||
};
|
||||
@ -10544,7 +10548,8 @@ define('select2/selection/search',[
|
||||
|
||||
decorated.call(this, data);
|
||||
|
||||
this.$selection.find('.rendered-selection').append(this.$searchContainer);
|
||||
this.$selection.find('.select2-selection__rendered')
|
||||
.append(this.$searchContainer);
|
||||
|
||||
this.resizeSearch();
|
||||
};
|
||||
@ -10570,7 +10575,8 @@ define('select2/selection/search',[
|
||||
|
||||
if (this.$search.attr('placeholder') !== '') {
|
||||
width = this.$selection.innerWidth();
|
||||
width -= this.$selection.find('.rendered-selection').innerWidth();
|
||||
width -= this.$selection.find('.select2-selection__rendered')
|
||||
.innerWidth();
|
||||
|
||||
width = width + 'px';
|
||||
} else {
|
||||
|
2
dist/js/select2.full.min.js
vendored
2
dist/js/select2.full.min.js
vendored
File diff suppressed because one or more lines are too long
32
dist/js/select2.js
vendored
32
dist/js/select2.js
vendored
@ -1242,9 +1242,10 @@ define('select2/selection/multiple',[
|
||||
|
||||
MultipleSelection.prototype.render = function () {
|
||||
var $selection = $(
|
||||
'<span class="multiple-select" tabindex="0" role="combobox" ' +
|
||||
'aria-autocomplete="list" aria-haspopup="true" aria-expanded="false">' +
|
||||
'<ul class="rendered-selection"></ul>' +
|
||||
'<span class="select2-selection select2-selection--multiple"' +
|
||||
' tabindex="0" role="combobox" aria-autocomplete="list"' +
|
||||
' aria-haspopup="true" aria-expanded="false">' +
|
||||
'<ul class="select2-selection__rendered"></ul>' +
|
||||
'</span>'
|
||||
);
|
||||
|
||||
@ -1280,7 +1281,7 @@ define('select2/selection/multiple',[
|
||||
};
|
||||
|
||||
MultipleSelection.prototype.clear = function () {
|
||||
this.$selection.find('.rendered-selection').empty();
|
||||
this.$selection.find('.select2-selection__rendered').empty();
|
||||
};
|
||||
|
||||
MultipleSelection.prototype.display = function (data) {
|
||||
@ -1291,8 +1292,10 @@ define('select2/selection/multiple',[
|
||||
|
||||
MultipleSelection.prototype.selectionContainer = function () {
|
||||
var $container = $(
|
||||
'<li class="choice">' +
|
||||
'<span class="remove" role="presentation">×</span>' +
|
||||
'<li class="select2-selection__choice">' +
|
||||
'<span class="select2-selection__choice__remove" role="presentation">' +
|
||||
'×' +
|
||||
'</span>' +
|
||||
'</li>'
|
||||
);
|
||||
|
||||
@ -1320,7 +1323,7 @@ define('select2/selection/multiple',[
|
||||
$selections.push($selection);
|
||||
}
|
||||
|
||||
this.$selection.find('.rendered-selection').append($selections);
|
||||
this.$selection.find('.select2-selection__rendered').append($selections);
|
||||
};
|
||||
|
||||
return MultipleSelection;
|
||||
@ -1385,8 +1388,9 @@ define('select2/selection/search',[
|
||||
|
||||
Search.prototype.render = function (decorated) {
|
||||
var $search = $(
|
||||
'<li class="select2-search-inline">' +
|
||||
'<input type="search" tabindex="-1" role="textbox" />' +
|
||||
'<li class="select2-search select2-search--inline">' +
|
||||
'<input class="select2-search__field" type="search" tabindex="-1"' +
|
||||
' role="textbox" />' +
|
||||
'</li>'
|
||||
);
|
||||
|
||||
@ -1415,7 +1419,7 @@ define('select2/selection/search',[
|
||||
self.$search.val('');
|
||||
});
|
||||
|
||||
this.$selection.on('keydown', '.select2-search-inline', function (evt) {
|
||||
this.$selection.on('keydown', '.select2-search--inline', function (evt) {
|
||||
evt.stopPropagation();
|
||||
|
||||
self.trigger('keypress', evt);
|
||||
@ -1423,7 +1427,7 @@ define('select2/selection/search',[
|
||||
self._keyUpPrevented = evt.isDefaultPrevented();
|
||||
});
|
||||
|
||||
this.$selection.on('keyup', '.select2-search-inline', function (evt) {
|
||||
this.$selection.on('keyup', '.select2-search--inline', function (evt) {
|
||||
self.handleSearch(evt);
|
||||
});
|
||||
};
|
||||
@ -1437,7 +1441,8 @@ define('select2/selection/search',[
|
||||
|
||||
decorated.call(this, data);
|
||||
|
||||
this.$selection.find('.rendered-selection').append(this.$searchContainer);
|
||||
this.$selection.find('.select2-selection__rendered')
|
||||
.append(this.$searchContainer);
|
||||
|
||||
this.resizeSearch();
|
||||
};
|
||||
@ -1463,7 +1468,8 @@ define('select2/selection/search',[
|
||||
|
||||
if (this.$search.attr('placeholder') !== '') {
|
||||
width = this.$selection.innerWidth();
|
||||
width -= this.$selection.find('.rendered-selection').innerWidth();
|
||||
width -= this.$selection.find('.select2-selection__rendered')
|
||||
.innerWidth();
|
||||
|
||||
width = width + 'px';
|
||||
} else {
|
||||
|
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
17
src/js/select2/selection/multiple.js
vendored
17
src/js/select2/selection/multiple.js
vendored
@ -10,9 +10,10 @@ define([
|
||||
|
||||
MultipleSelection.prototype.render = function () {
|
||||
var $selection = $(
|
||||
'<span class="multiple-select" tabindex="0" role="combobox" ' +
|
||||
'aria-autocomplete="list" aria-haspopup="true" aria-expanded="false">' +
|
||||
'<ul class="rendered-selection"></ul>' +
|
||||
'<span class="select2-selection select2-selection--multiple"' +
|
||||
' tabindex="0" role="combobox" aria-autocomplete="list"' +
|
||||
' aria-haspopup="true" aria-expanded="false">' +
|
||||
'<ul class="select2-selection__rendered"></ul>' +
|
||||
'</span>'
|
||||
);
|
||||
|
||||
@ -48,7 +49,7 @@ define([
|
||||
};
|
||||
|
||||
MultipleSelection.prototype.clear = function () {
|
||||
this.$selection.find('.rendered-selection').empty();
|
||||
this.$selection.find('.select2-selection__rendered').empty();
|
||||
};
|
||||
|
||||
MultipleSelection.prototype.display = function (data) {
|
||||
@ -59,8 +60,10 @@ define([
|
||||
|
||||
MultipleSelection.prototype.selectionContainer = function () {
|
||||
var $container = $(
|
||||
'<li class="choice">' +
|
||||
'<span class="remove" role="presentation">×</span>' +
|
||||
'<li class="select2-selection__choice">' +
|
||||
'<span class="select2-selection__choice__remove" role="presentation">' +
|
||||
'×' +
|
||||
'</span>' +
|
||||
'</li>'
|
||||
);
|
||||
|
||||
@ -88,7 +91,7 @@ define([
|
||||
$selections.push($selection);
|
||||
}
|
||||
|
||||
this.$selection.find('.rendered-selection').append($selections);
|
||||
this.$selection.find('.select2-selection__rendered').append($selections);
|
||||
};
|
||||
|
||||
return MultipleSelection;
|
||||
|
15
src/js/select2/selection/search.js
vendored
15
src/js/select2/selection/search.js
vendored
@ -7,8 +7,9 @@ define([
|
||||
|
||||
Search.prototype.render = function (decorated) {
|
||||
var $search = $(
|
||||
'<li class="select2-search-inline">' +
|
||||
'<input type="search" tabindex="-1" role="textbox" />' +
|
||||
'<li class="select2-search select2-search--inline">' +
|
||||
'<input class="select2-search__field" type="search" tabindex="-1"' +
|
||||
' role="textbox" />' +
|
||||
'</li>'
|
||||
);
|
||||
|
||||
@ -37,7 +38,7 @@ define([
|
||||
self.$search.val('');
|
||||
});
|
||||
|
||||
this.$selection.on('keydown', '.select2-search-inline', function (evt) {
|
||||
this.$selection.on('keydown', '.select2-search--inline', function (evt) {
|
||||
evt.stopPropagation();
|
||||
|
||||
self.trigger('keypress', evt);
|
||||
@ -45,7 +46,7 @@ define([
|
||||
self._keyUpPrevented = evt.isDefaultPrevented();
|
||||
});
|
||||
|
||||
this.$selection.on('keyup', '.select2-search-inline', function (evt) {
|
||||
this.$selection.on('keyup', '.select2-search--inline', function (evt) {
|
||||
self.handleSearch(evt);
|
||||
});
|
||||
};
|
||||
@ -59,7 +60,8 @@ define([
|
||||
|
||||
decorated.call(this, data);
|
||||
|
||||
this.$selection.find('.rendered-selection').append(this.$searchContainer);
|
||||
this.$selection.find('.select2-selection__rendered')
|
||||
.append(this.$searchContainer);
|
||||
|
||||
this.resizeSearch();
|
||||
};
|
||||
@ -85,7 +87,8 @@ define([
|
||||
|
||||
if (this.$search.attr('placeholder') !== '') {
|
||||
width = this.$selection.innerWidth();
|
||||
width -= this.$selection.find('.rendered-selection').innerWidth();
|
||||
width -= this.$selection.find('.select2-selection__rendered')
|
||||
.innerWidth();
|
||||
|
||||
width = width + 'px';
|
||||
} else {
|
||||
|
@ -38,16 +38,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.select2-search {
|
||||
display: block;
|
||||
padding: 4px;
|
||||
|
||||
input {
|
||||
padding: 4px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.open .dropdown {
|
||||
border-top: none;
|
||||
border-top-left-radius: 0;
|
||||
@ -56,3 +46,13 @@
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-search--dropdown {
|
||||
display: block;
|
||||
padding: 4px;
|
||||
|
||||
.select2-search__field {
|
||||
padding: 4px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
@ -1,30 +1,28 @@
|
||||
.select2-container {
|
||||
.selection .multiple-select {
|
||||
box-sizing: border-box;
|
||||
.select2-selection--multiple {
|
||||
box-sizing: border-box;
|
||||
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
|
||||
min-height: 32px;
|
||||
min-height: 32px;
|
||||
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
|
||||
.rendered-selection {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
padding-left: 8px;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-search-inline {
|
||||
float: left;
|
||||
|
||||
input {
|
||||
border: none;
|
||||
font-size: 100%;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.select2-selection__rendered {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
padding-left: 8px;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-search--inline {
|
||||
float: left;
|
||||
|
||||
.select2-search__field {
|
||||
border: none;
|
||||
font-size: 100%;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
@ -13,78 +13,71 @@
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select2-container.select2-theme-default {
|
||||
.selection {
|
||||
.multiple-select {
|
||||
background-color: white;
|
||||
.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: text;
|
||||
cursor: default;
|
||||
|
||||
.rendered-selection {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 5px;
|
||||
float: left;
|
||||
|
||||
.placeholder {
|
||||
color: #999;
|
||||
margin-right: 5px;
|
||||
margin-top: 5px;
|
||||
padding: 0 5px;
|
||||
|
||||
margin-top: 5px;
|
||||
.select2-selection__choice__remove {
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
|
||||
float: left;
|
||||
}
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
|
||||
.choice {
|
||||
background-color: #e4e4e4;
|
||||
margin-right: 2px;
|
||||
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 4px;
|
||||
cursor: default;
|
||||
|
||||
float: left;
|
||||
|
||||
margin-right: 5px;
|
||||
margin-top: 5px;
|
||||
padding: 0 5px;
|
||||
|
||||
.remove {
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
|
||||
margin-right: 2px;
|
||||
|
||||
&:hover {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.open {
|
||||
.selection {
|
||||
.single-select,
|
||||
.multiple-select {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.select2-selection--single, .select2-selection--multiple {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-search {
|
||||
input {
|
||||
.select2-search--dropdown {
|
||||
.select2-search__field {
|
||||
border: 1px solid #aaa;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-search-inline {
|
||||
input {
|
||||
.select2-search--inline {
|
||||
.select2-search__field {
|
||||
border: none;
|
||||
outline: 0;
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user