217cd4cfd0
This adds a search box to the main container for multiple select boxes, similar to the what the old version had. This can still be swapped out such that the search box displays above the results like it previously did. The placeholder for multiple selects will also now use the input attribute of the search box instead of generating a custom element. This also changes the selector for the search container to `.select2-search`, which is consistent with the old class and reduces the complexity of the selectors. This fixes an issue with how decorators worked, where the constructor from the parent class would clobber the custom constructor that is generated for the new decorated class. This has been fixed by excluding the constructor from the list of fields which are transferred when decorating classes.
183 lines
7.0 KiB
CSS
183 lines
7.0 KiB
CSS
.select2-container {
|
|
box-sizing: border-box;
|
|
display: inline-block;
|
|
margin: 0;
|
|
position: relative;
|
|
vertical-align: middle; }
|
|
|
|
.select2-container .selection .single-select {
|
|
box-sizing: border-box;
|
|
cursor: pointer;
|
|
display: block;
|
|
height: 28px;
|
|
user-select: none;
|
|
-webkit-user-select: none; }
|
|
.select2-container .selection .single-select .rendered-selection {
|
|
display: block;
|
|
overflow: hidden;
|
|
padding-left: 8px;
|
|
text-overflow: ellipsis; }
|
|
|
|
.select2-container .selection .multiple-select {
|
|
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 {
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
padding-left: 8px;
|
|
text-overflow: ellipsis; }
|
|
.select2-container .select2-search-inline {
|
|
float: left; }
|
|
.select2-container .select2-search-inline input {
|
|
border: none;
|
|
font-size: 100%;
|
|
margin-top: 5px; }
|
|
|
|
.select2-container .dropdown {
|
|
background-color: white;
|
|
border: 1px solid #aaa;
|
|
border-radius: 4px;
|
|
box-sizing: border-box;
|
|
display: block;
|
|
position: absolute;
|
|
left: -100000px;
|
|
width: 100%;
|
|
z-index: 100; }
|
|
.select2-container .dropdown .results {
|
|
display: block; }
|
|
.select2-container .dropdown .results .options {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0; }
|
|
.select2-container .dropdown .results .options .option {
|
|
padding: 6px;
|
|
user-select: none;
|
|
-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-container.select2-theme-default .selection .single-select {
|
|
background-color: #fff;
|
|
border: 1px solid #aaa;
|
|
border-radius: 4px; }
|
|
.select2-container.select2-theme-default .selection .single-select .rendered-selection {
|
|
color: #444;
|
|
line-height: 28px; }
|
|
.select2-container.select2-theme-default .selection .single-select .rendered-selection .placeholder {
|
|
color: #999; }
|
|
.select2-container.select2-theme-default .selection .multiple-select {
|
|
background-color: white;
|
|
border: 1px solid #aaa;
|
|
border-radius: 4px; }
|
|
.select2-container.select2-theme-default .selection .multiple-select .rendered-selection {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0 5px; }
|
|
.select2-container.select2-theme-default .selection .multiple-select .rendered-selection .placeholder {
|
|
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;
|
|
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;
|
|
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 {
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0; }
|
|
.select2-container.select2-theme-default .select2-search input {
|
|
border: 1px solid #aaa; }
|
|
.select2-container.select2-theme-default .dropdown .results > .options {
|
|
max-height: 200px;
|
|
overflow-y: auto; }
|
|
.select2-container.select2-theme-default .dropdown .results .options .option[role=group] {
|
|
padding: 0; }
|
|
.select2-container.select2-theme-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] {
|
|
color: #999; }
|
|
.select2-container.select2-theme-default .dropdown .results .options .option[aria-selected=true] {
|
|
background-color: #ddd; }
|
|
.select2-container.select2-theme-default .dropdown .results .options .option[aria-selected].highlighted {
|
|
background-color: #5897fb;
|
|
color: white; }
|
|
|
|
.select2-container.select2-theme-classic .selection .single-select {
|
|
background-color: #f6f6f6;
|
|
border: 1px solid #aaa;
|
|
border-radius: 4px;
|
|
outline: 0;
|
|
background-image: -webkit-linear-gradient(top, #ffffff 50%, #eee 100%);
|
|
background-image: -o-linear-gradient(top, #ffffff 50%, #eee 100%);
|
|
background-image: linear-gradient(to bottom, #ffffff 50%, #eee 100%);
|
|
background-repeat: repeat-x;
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eee', GradientType=0); }
|
|
.select2-container.select2-theme-classic .selection .single-select:focus {
|
|
border: 1px solid #5897fb; }
|
|
.select2-container.select2-theme-classic .selection .single-select .rendered-selection {
|
|
color: #444;
|
|
line-height: 28px; }
|
|
.select2-container.select2-theme-classic .selection .single-select .rendered-selection .placeholder {
|
|
color: #999; }
|
|
.select2-container.select2-theme-classic.open .selection .single-select {
|
|
border: 1px solid #5897fb;
|
|
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.select2-theme-classic.open .selection .single-select, .select2-container.select2-theme-classic.open .selection .multiple-select {
|
|
border-bottom: none;
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0; }
|
|
.select2-container.select2-theme-classic .dropdown {
|
|
background-color: white;
|
|
border-top: none; }
|
|
.select2-container.select2-theme-classic .dropdown .select2-search input {
|
|
border: 1px solid #aaa;
|
|
outline: 0; }
|
|
.select2-container.select2-theme-classic .dropdown .results > .options {
|
|
max-height: 200px;
|
|
overflow-y: auto; }
|
|
.select2-container.select2-theme-classic .dropdown .results .options .option[role=group] {
|
|
padding: 0; }
|
|
.select2-container.select2-theme-classic .dropdown .results .options .option[role=group] .group-label {
|
|
cursor: default;
|
|
display: block;
|
|
padding: 6px; }
|
|
.select2-container.select2-theme-classic .dropdown .results .options .option[aria-disabled=true] {
|
|
color: grey; }
|
|
.select2-container.select2-theme-classic .dropdown .results .options .option[aria-selected].highlighted {
|
|
background-color: #3875d7;
|
|
color: white; }
|
|
.select2-container.select2-theme-classic.open .dropdown {
|
|
border: 1px solid #5897fb;
|
|
border-top: none; }
|