Skip to content

Commit

Permalink
Fixed sizing issues #57
Browse files Browse the repository at this point in the history
  • Loading branch information
@apalfrey
apalfrey committed Feb 22, 2022
1 parent bca024d commit e230331
Show file tree
Hide file tree
Showing 9 changed files with 146 additions and 83 deletions.
87 changes: 57 additions & 30 deletions dist/select2-bootstrap-5-theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,9 @@
.select2-container--bootstrap-5 .select2-search {
width: 100%;
}
.select2-container--bootstrap-5 .select2-search--inline .select2-search__field {
vertical-align: top;
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear,
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__clear {
position: absolute;
Expand Down Expand Up @@ -303,108 +306,120 @@
border-top-right-radius: 0;
}

.select2-container--bootstrap-5 .select2--small ~ .select2-selection {
.select2-container--bootstrap-5 .select2--small.select2-selection {
min-height: calc(1.5em + (0.5rem + 2px));
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
}
.select2-container--bootstrap-5 .select2--small ~ .select2-selection--single .select2-selection__clear,
.select2-container--bootstrap-5 .select2--small ~ .select2-selection--multiple .select2-selection__clear {
.select2-container--bootstrap-5 .select2--small.select2-selection--single .select2-selection__clear,
.select2-container--bootstrap-5 .select2--small.select2-selection--multiple .select2-selection__clear {
width: 0.5rem;
height: 0.5rem;
padding: 0.125rem 0.125rem;
background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23676a6d'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/0.5rem auto no-repeat;
}
.select2-container--bootstrap-5 .select2--small ~ .select2-selection--single .select2-selection__clear:hover,
.select2-container--bootstrap-5 .select2--small ~ .select2-selection--multiple .select2-selection__clear:hover {
.select2-container--bootstrap-5 .select2--small.select2-selection--single .select2-selection__clear:hover,
.select2-container--bootstrap-5 .select2--small.select2-selection--multiple .select2-selection__clear:hover {
background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/0.5rem auto no-repeat;
}
.select2-container--bootstrap-5 .select2--small ~ .select2-dropdown .select2-search .select2-search__field {
.select2-container--bootstrap-5 .select2--small.select2-selection--single .select2-search,
.select2-container--bootstrap-5 .select2--small.select2-selection--single .select2-search .select2-search__field,
.select2-container--bootstrap-5 .select2--small.select2-selection--multiple .select2-search,
.select2-container--bootstrap-5 .select2--small.select2-selection--multiple .select2-search .select2-search__field {
height: 1.5em;
}
.select2-container--bootstrap-5 .select2--small.select2-dropdown .select2-search .select2-search__field {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
}
.select2-container--bootstrap-5 .select2--small ~ .select2-dropdown .select2-results__options .select2-results__option {
.select2-container--bootstrap-5 .select2--small.select2-dropdown .select2-results__options .select2-results__option {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
}
.select2-container--bootstrap-5 .select2--small ~ .select2-dropdown .select2-results__options .select2-results__option[role=group] .select2-results__group {
.select2-container--bootstrap-5 .select2--small.select2-dropdown .select2-results__options .select2-results__option[role=group] .select2-results__group {
padding: 0.25rem 0.25rem;
}
.select2-container--bootstrap-5 .select2--small ~ .select2-dropdown .select2-results__options .select2-results__option[role=group] .select2-results__options--nested .select2-results__option {
.select2-container--bootstrap-5 .select2--small.select2-dropdown .select2-results__options .select2-results__option[role=group] .select2-results__options--nested .select2-results__option {
padding: 0.25rem 0.5rem;
}
.select2-container--bootstrap-5 .select2--small ~ .select2-selection--single {
.select2-container--bootstrap-5 .select2--small.select2-selection--single {
padding: 0.25rem 2.25rem 0.25rem 0.5rem;
}
.select2-container--bootstrap-5 .select2--small ~ .select2-selection--multiple .select2-selection__rendered:not(:empty) {
.select2-container--bootstrap-5 .select2--small.select2-selection--multiple .select2-selection__rendered:not(:empty) {
padding-bottom: 0.25rem;
}
.select2-container--bootstrap-5 .select2--small ~ .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
.select2-container--bootstrap-5 .select2--small.select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
padding: 0.35em 0.65em;
font-size: 0.875rem;
}
.select2-container--bootstrap-5 .select2--small ~ .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove {
.select2-container--bootstrap-5 .select2--small.select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove {
width: 0.5rem;
height: 0.5rem;
padding: 0.125rem 0.125rem;
background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23676a6d'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/0.5rem auto no-repeat;
}
.select2-container--bootstrap-5 .select2--small ~ .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove:hover {
.select2-container--bootstrap-5 .select2--small.select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove:hover {
background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/0.5rem auto no-repeat;
}
.select2-container--bootstrap-5 .select2--small ~ .select2-selection--multiple .select2-selection__clear {
.select2-container--bootstrap-5 .select2--small.select2-selection--multiple .select2-selection__clear {
right: 0.5rem;
}
.select2-container--bootstrap-5 .select2--large ~ .select2-selection {
.select2-container--bootstrap-5 .select2--large.select2-selection {
min-height: calc(1.5em + (1rem + 2px));
padding: 0.5rem 1rem;
font-size: 1.25rem;
}
.select2-container--bootstrap-5 .select2--large ~ .select2-selection--single .select2-selection__clear,
.select2-container--bootstrap-5 .select2--large ~ .select2-selection--multiple .select2-selection__clear {
.select2-container--bootstrap-5 .select2--large.select2-selection--single .select2-selection__clear,
.select2-container--bootstrap-5 .select2--large.select2-selection--multiple .select2-selection__clear {
width: 1rem;
height: 1rem;
padding: 0.5rem 0.5rem;
background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23676a6d'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1rem auto no-repeat;
}
.select2-container--bootstrap-5 .select2--large ~ .select2-selection--single .select2-selection__clear:hover,
.select2-container--bootstrap-5 .select2--large ~ .select2-selection--multiple .select2-selection__clear:hover {
.select2-container--bootstrap-5 .select2--large.select2-selection--single .select2-selection__clear:hover,
.select2-container--bootstrap-5 .select2--large.select2-selection--multiple .select2-selection__clear:hover {
background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1rem auto no-repeat;
}
.select2-container--bootstrap-5 .select2--large ~ .select2-dropdown .select2-search .select2-search__field {
.select2-container--bootstrap-5 .select2--large.select2-selection--single .select2-search,
.select2-container--bootstrap-5 .select2--large.select2-selection--single .select2-search .select2-search__field,
.select2-container--bootstrap-5 .select2--large.select2-selection--multiple .select2-search,
.select2-container--bootstrap-5 .select2--large.select2-selection--multiple .select2-search .select2-search__field {
height: 1.5em;
}
.select2-container--bootstrap-5 .select2--large.select2-dropdown .select2-search .select2-search__field {
padding: 0.5rem 1rem;
font-size: 1.25rem;
}
.select2-container--bootstrap-5 .select2--large ~ .select2-dropdown .select2-results__options .select2-results__option {
.select2-container--bootstrap-5 .select2--large.select2-dropdown .select2-results__options .select2-results__option {
padding: 0.5rem 1rem;
font-size: 1.25rem;
}
.select2-container--bootstrap-5 .select2--large ~ .select2-dropdown .select2-results__options .select2-results__option[role=group] .select2-results__group {
.select2-container--bootstrap-5 .select2--large.select2-dropdown .select2-results__options .select2-results__option[role=group] .select2-results__group {
padding: 0.5rem 0.5rem;
}
.select2-container--bootstrap-5 .select2--large ~ .select2-dropdown .select2-results__options .select2-results__option[role=group] .select2-results__options--nested .select2-results__option {
.select2-container--bootstrap-5 .select2--large.select2-dropdown .select2-results__options .select2-results__option[role=group] .select2-results__options--nested .select2-results__option {
padding: 0.5rem 1rem;
}
.select2-container--bootstrap-5 .select2--large ~ .select2-selection--single {
.select2-container--bootstrap-5 .select2--large.select2-selection--single {
padding: 0.5rem 2.25rem 0.5rem 1rem;
}
.select2-container--bootstrap-5 .select2--large ~ .select2-selection--multiple .select2-selection__rendered:not(:empty) {
.select2-container--bootstrap-5 .select2--large.select2-selection--multiple .select2-selection__rendered:not(:empty) {
padding-bottom: 0.5rem;
}
.select2-container--bootstrap-5 .select2--large ~ .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
.select2-container--bootstrap-5 .select2--large.select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
padding: 0.35em 0.65em;
font-size: 1.25rem;
}
.select2-container--bootstrap-5 .select2--large ~ .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove {
.select2-container--bootstrap-5 .select2--large.select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove {
width: 1rem;
height: 1rem;
padding: 0.5rem 0.5rem;
background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23676a6d'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1rem auto no-repeat;
}
.select2-container--bootstrap-5 .select2--large ~ .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove:hover {
.select2-container--bootstrap-5 .select2--large.select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove:hover {
background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1rem auto no-repeat;
}
.select2-container--bootstrap-5 .select2--large ~ .select2-selection--multiple .select2-selection__clear {
.select2-container--bootstrap-5 .select2--large.select2-selection--multiple .select2-selection__clear {
right: 1rem;
}

Expand All @@ -424,6 +439,12 @@
.form-select-sm ~ .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__clear:hover {
background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/0.5rem auto no-repeat;
}
.form-select-sm ~ .select2-container--bootstrap-5 .select2-selection--single .select2-search,
.form-select-sm ~ .select2-container--bootstrap-5 .select2-selection--single .select2-search .select2-search__field,
.form-select-sm ~ .select2-container--bootstrap-5 .select2-selection--multiple .select2-search,
.form-select-sm ~ .select2-container--bootstrap-5 .select2-selection--multiple .select2-search .select2-search__field {
height: 1.5em;
}
.form-select-sm ~ .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
Expand Down Expand Up @@ -477,6 +498,12 @@
.form-select-lg ~ .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__clear:hover {
background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1rem auto no-repeat;
}
.form-select-lg ~ .select2-container--bootstrap-5 .select2-selection--single .select2-search,
.form-select-lg ~ .select2-container--bootstrap-5 .select2-selection--single .select2-search .select2-search__field,
.form-select-lg ~ .select2-container--bootstrap-5 .select2-selection--multiple .select2-search,
.form-select-lg ~ .select2-container--bootstrap-5 .select2-selection--multiple .select2-search .select2-search__field {
height: 1.5em;
}
.form-select-lg ~ .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
padding: 0.5rem 1rem;
font-size: 1.25rem;
Expand Down
2 changes: 1 addition & 1 deletion dist/select2-bootstrap-5-theme.min.css
View file

Large diffs are not rendered by default.

0 comments on commit e230331

Please sign in to comment.