diff --git a/.stylelintrc b/.stylelintrc
index 32fecd2..3c16391 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -3,6 +3,13 @@
"stylelint-config-twbs-bootstrap/scss"
],
"rules": {
- "selector-class-pattern": "^[a-z][a-z0-9\\-_]*[a-z0-9]$"
+ "block-closing-brace-empty-line-before": "never",
+ "declaration-no-important": null,
+ "rule-empty-line-before": ["always", {
+ "except": ["first-nested"],
+ "ignore": ["after-comment"]
+ }],
+ "selector-class-pattern": "^[a-z][a-z0-9\\-_]*[a-z0-9]$",
+ "selector-no-qualifying-type": null
}
}
diff --git a/dist/select2-bootstrap4.css b/dist/select2-bootstrap4.css
index 4bb4db5..dd3c6e4 100644
--- a/dist/select2-bootstrap4.css
+++ b/dist/select2-bootstrap4.css
@@ -18,13 +18,21 @@
.select2-container--bootstrap4 .select2-selection {
width: 100%;
+ min-height: calc(1.5em + 0.75rem + 2px);
+ padding: 0.375rem 1.75rem 0.375rem 0.75rem;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+ font-size: 1rem;
+ font-weight: 400;
+ line-height: 1.5;
+ color: #495057;
+ vertical-align: middle;
background-color: #fff;
border: 1px solid #ced4da;
border-radius: 0.25rem;
- -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
- transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
- transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
- transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; }
+ -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
+ transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
+ transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+ transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; }
@media (prefers-reduced-motion: reduce) {
.select2-container--bootstrap4 .select2-selection {
-webkit-transition: none;
@@ -35,11 +43,6 @@
-webkit-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }
-.select2-container--bootstrap4.select2-container--focus.select2-container--open .select2-selection {
- border-bottom: none;
- border-bottom-right-radius: 0;
- border-bottom-left-radius: 0; }
-
.select2-container--bootstrap4.select2-container--open.select2-container--above .select2-selection {
border-top-left-radius: 0;
border-top-right-radius: 0; }
@@ -48,16 +51,14 @@
border-bottom-right-radius: 0;
border-bottom-left-radius: 0; }
-.select2-container--bootstrap4.select2-container--disabled .select2-selection, .select2-container--bootstrap4.select2-container--disabled.select2-container--focus .select2-selection {
+.select2-container--bootstrap4.select2-container--disabled .select2-selection,
+.select2-container--bootstrap4.select2-container--disabled .select2-search__field {
cursor: not-allowed;
background-color: #e9ecef;
border-color: #ced4da;
-webkit-box-shadow: none;
box-shadow: none; }
-.select2-container--bootstrap4.select2-container--disabled .select2-search__field, .select2-container--bootstrap4.select2-container--disabled.select2-container--focus .select2-search__field {
- background-color: transparent; }
-
select.is-invalid ~ .select2-container--bootstrap4 .select2-selection,
form.was-validated select:invalid ~ .select2-container--bootstrap4 .select2-selection {
border-color: #dc3545; }
@@ -66,36 +67,28 @@ select.is-valid ~ .select2-container--bootstrap4 .select2-selection,
form.was-validated select:valid ~ .select2-container--bootstrap4 .select2-selection {
border-color: #28a745; }
-.select2-container--bootstrap4 .select2-search {
- width: 100%; }
-
.select2-container--bootstrap4 .select2-dropdown {
border-color: #ced4da;
border-radius: 0; }
.select2-container--bootstrap4 .select2-dropdown.select2-dropdown--below {
- border-top: none;
border-bottom-right-radius: 0.25rem;
border-bottom-left-radius: 0.25rem; }
.select2-container--bootstrap4 .select2-dropdown.select2-dropdown--above {
- border-top: 1px solid #ced4da;
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem; }
- .select2-container--bootstrap4 .select2-dropdown .select2-results__option[aria-selected="true"] {
- color: #212529;
- background-color: #f2f2f2; }
-
-.select2-container--bootstrap4 .select2-results__option--highlighted,
-.select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected="true"] {
- color: #fff;
- background-color: #007bff; }
-
-.select2-container--bootstrap4 .select2-results__option[role="group"] {
- padding: 0; }
- .select2-container--bootstrap4 .select2-results__option[role="group"] .select2-results__options--nested .select2-results__option {
- padding-left: 1em; }
.select2-container--bootstrap4 .select2-results__option {
padding: 0.375rem 0.75rem; }
+ .select2-container--bootstrap4 .select2-results__option--selected {
+ color: #212529;
+ background-color: #e9ecef; }
+ .select2-container--bootstrap4 .select2-results__option--highlighted {
+ color: #fff;
+ background-color: #007bff; }
+ .select2-container--bootstrap4 .select2-results__option--group {
+ padding: 0; }
+ .select2-container--bootstrap4 .select2-results__option--group .select2-results__options--nested .select2-results__option {
+ padding-left: 0.75rem; }
.select2-container--bootstrap4 .select2-results > .select2-results__options {
max-height: 15em;
@@ -103,96 +96,94 @@ form.was-validated select:valid ~ .select2-container--bootstrap4 .select2-select
.select2-container--bootstrap4 .select2-results__group {
display: list-item;
- padding: 6px;
+ padding: 0.375rem 0.375rem;
color: #6c757d; }
.select2-container--bootstrap4 .select2-selection__clear {
float: right;
- width: .9em;
- height: .9em;
- padding-left: .15em;
- margin-top: .7em;
- margin-right: .3em;
- line-height: .75em;
- color: #f8f9fa;
- background-color: #c8c8c8;
+ width: 1em;
+ height: 1em;
+ padding: 0;
+ margin: 0.25em 0 0;
+ font-weight: 700;
+ line-height: 0.75em;
+ color: #495057;
+ background: #e6e6e6 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 16 16'%3e%3cpath fill='%23495057' d='M1 12l4-4-4-4 3-3 4 4 4-4 3 3-4 4 4 4-3 3-4-4-4 4z'/%3e%3c/svg%3e") center no-repeat !important;
border-radius: 100%; }
+ .select2-container--bootstrap4 .select2-selection__clear span {
+ display: none; }
.select2-container--bootstrap4 .select2-selection__clear:hover {
- background-color: #afafaf; }
+ background-color: #d9d9d9 !important; }
+
+.select2-container--bootstrap4 .select2-results__message {
+ color: #6c757d; }
.select2-container--bootstrap4 .select2-selection--single {
- height: calc(1.5em + 0.75rem + 2px) !important; }
+ background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat; }
.select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder {
- line-height: calc(1.5em + 0.75rem);
color: #6c757d; }
- .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
- position: absolute;
- top: 50%;
- right: 3px;
- width: 20px; }
- .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b {
- position: absolute;
- top: 60%;
- left: 50%;
- width: 0;
- height: 0;
- margin-top: -2px;
- margin-left: -4px;
- border-color: #343a40 transparent transparent transparent;
- border-style: solid;
- border-width: 5px 4px 0; }
.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
- padding-left: 0.75rem;
- line-height: calc(1.5em + 0.75rem);
+ padding: 0;
color: #495057; }
-.select2-search--dropdown .select2-search__field {
+.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field {
padding: 0.375rem 0.75rem;
+ color: #495057;
border: 1px solid #ced4da;
border-radius: 0.25rem; }
-
-.select2-results__message {
- color: #6c757d; }
+ .select2-container--bootstrap4 .select2-search--dropdown .select2-search__field:focus {
+ color: #495057;
+ background-color: #fff;
+ border-color: #80bdff;
+ outline: 0;
+ -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+ box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }
.select2-container--bootstrap4 .select2-selection--multiple {
- min-height: calc(1.5em + 0.75rem + 2px) !important; }
+ padding: 0 0.75rem; }
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered {
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- width: 100%;
- padding: 0 0.375rem;
- margin: 0;
- list-style: none; }
+ margin: 0; }
+ .select2-container--bootstrap4 .select2-selection--multiple .select2-search--inline {
+ display: inline-block; }
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
- float: left;
- padding: 0;
- padding-right: 0.75rem;
- margin-top: calc(0.375rem - 2px);
- margin-right: 0.375rem;
- color: #495057;
+ position: relative;
+ display: inline-block;
+ padding: 0 5px 0 21px;
+ margin: 0.375rem 0.375rem 0.375rem 0;
+ color: #fff;
+ vertical-align: top;
cursor: pointer;
- border: 1px solid #bdc6d0;
+ background-color: #6c757d;
border-radius: 0.2rem; }
+ .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__display {
+ padding: 0 5px; }
.select2-container--bootstrap4 .select2-selection--multiple .select2-search__field {
+ height: calc(1.5em + 0.75rem);
+ padding-top: 0.375rem;
+ margin: 0;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+ line-height: 1.5;
color: #495057; }
- .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice + .select2-search {
- width: 0; }
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
- float: left;
- padding-right: 3px;
- padding-left: 3px;
- margin-right: 1px;
- margin-left: 3px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ padding: 0 5px;
+ margin: 0;
font-weight: 700;
- color: #bdc6d0; }
+ color: rgba(255, 255, 255, 0.75);
+ cursor: pointer;
+ background: none;
+ border: none;
+ border-right: 1px solid #a1a8ae; }
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove:hover {
- color: #343a40; }
+ color: rgba(255, 255, 255, 0.85); }
+ .select2-container--bootstrap4 .select2-selection--multiple.select2-selection--clearable {
+ padding-right: 32px; }
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear {
- position: absolute !important;
- top: 0;
- right: .7em;
- float: none;
- margin-right: 0; }
+ position: absolute;
+ top: 0.375rem;
+ right: 0.75rem; }
.select2-container--bootstrap4.select2-container--disabled .select2-selection--multiple .select2-selection__choice {
padding: 0 5px;
diff --git a/dist/select2-bootstrap4.min.css b/dist/select2-bootstrap4.min.css
index 6d36591..169056c 100644
--- a/dist/select2-bootstrap4.min.css
+++ b/dist/select2-bootstrap4.min.css
@@ -1,2 +1,2 @@
-.select2-container{display:block}.select2-container *:focus{outline:0}.input-group .select2-container--bootstrap4{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.input-group-prepend ~ .select2-container--bootstrap4 .select2-selection{border-top-left-radius:0;border-bottom-left-radius:0}.input-group>.select2-container--bootstrap4:not(:last-child) .select2-selection{border-top-right-radius:0;border-bottom-right-radius:0}.select2-container--bootstrap4 .select2-selection{width:100%;background-color:#fff;border:1px solid #ced4da;border-radius:.25rem;-webkit-transition:border-color 0.15s ease-in-out,-webkit-box-shadow 0.15s ease-in-out;transition:border-color 0.15s ease-in-out,-webkit-box-shadow 0.15s ease-in-out;transition:border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;transition:border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out,-webkit-box-shadow 0.15s ease-in-out}@media (prefers-reduced-motion: reduce){.select2-container--bootstrap4 .select2-selection{-webkit-transition:none;transition:none}}.select2-container--bootstrap4.select2-container--focus .select2-selection{border-color:#80bdff;-webkit-box-shadow:0 0 0 .2rem rgba(0,123,255,0.25);box-shadow:0 0 0 .2rem rgba(0,123,255,0.25)}.select2-container--bootstrap4.select2-container--focus.select2-container--open .select2-selection{border-bottom:none;border-bottom-right-radius:0;border-bottom-left-radius:0}.select2-container--bootstrap4.select2-container--open.select2-container--above .select2-selection{border-top-left-radius:0;border-top-right-radius:0}.select2-container--bootstrap4.select2-container--open.select2-container--below .select2-selection{border-bottom-right-radius:0;border-bottom-left-radius:0}.select2-container--bootstrap4.select2-container--disabled .select2-selection,.select2-container--bootstrap4.select2-container--disabled.select2-container--focus .select2-selection{cursor:not-allowed;background-color:#e9ecef;border-color:#ced4da;-webkit-box-shadow:none;box-shadow:none}.select2-container--bootstrap4.select2-container--disabled .select2-search__field,.select2-container--bootstrap4.select2-container--disabled.select2-container--focus .select2-search__field{background-color:transparent}select.is-invalid ~ .select2-container--bootstrap4 .select2-selection,form.was-validated select:invalid ~ .select2-container--bootstrap4 .select2-selection{border-color:#dc3545}select.is-valid ~ .select2-container--bootstrap4 .select2-selection,form.was-validated select:valid ~ .select2-container--bootstrap4 .select2-selection{border-color:#28a745}.select2-container--bootstrap4 .select2-search{width:100%}.select2-container--bootstrap4 .select2-dropdown{border-color:#ced4da;border-radius:0}.select2-container--bootstrap4 .select2-dropdown.select2-dropdown--below{border-top:none;border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.select2-container--bootstrap4 .select2-dropdown.select2-dropdown--above{border-top:1px solid #ced4da;border-top-left-radius:.25rem;border-top-right-radius:.25rem}.select2-container--bootstrap4 .select2-dropdown .select2-results__option[aria-selected="true"]{color:#212529;background-color:#f2f2f2}.select2-container--bootstrap4 .select2-results__option--highlighted,.select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected="true"]{color:#fff;background-color:#007bff}.select2-container--bootstrap4 .select2-results__option[role="group"]{padding:0}.select2-container--bootstrap4 .select2-results__option[role="group"] .select2-results__options--nested .select2-results__option{padding-left:1em}.select2-container--bootstrap4 .select2-results__option{padding:.375rem .75rem}.select2-container--bootstrap4 .select2-results>.select2-results__options{max-height:15em;overflow-y:auto}.select2-container--bootstrap4 .select2-results__group{display:list-item;padding:6px;color:#6c757d}.select2-container--bootstrap4 .select2-selection__clear{float:right;width:.9em;height:.9em;padding-left:.15em;margin-top:.7em;margin-right:.3em;line-height:.75em;color:#f8f9fa;background-color:#c8c8c8;border-radius:100%}.select2-container--bootstrap4 .select2-selection__clear:hover{background-color:#afafaf}.select2-container--bootstrap4 .select2-selection--single{height:calc(1.5em + .75rem + 2px) !important}.select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder{line-height:calc(1.5em + .75rem);color:#6c757d}.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow{position:absolute;top:50%;right:3px;width:20px}.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b{position:absolute;top:60%;left:50%;width:0;height:0;margin-top:-2px;margin-left:-4px;border-color:#343a40 transparent transparent transparent;border-style:solid;border-width:5px 4px 0}.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered{padding-left:.75rem;line-height:calc(1.5em + .75rem);color:#495057}.select2-search--dropdown .select2-search__field{padding:.375rem .75rem;border:1px solid #ced4da;border-radius:.25rem}.select2-results__message{color:#6c757d}.select2-container--bootstrap4 .select2-selection--multiple{min-height:calc(1.5em + .75rem + 2px) !important}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered{-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;padding:0 .375rem;margin:0;list-style:none}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice{float:left;padding:0;padding-right:.75rem;margin-top:calc(.375rem - 2px);margin-right:.375rem;color:#495057;cursor:pointer;border:1px solid #bdc6d0;border-radius:.2rem}.select2-container--bootstrap4 .select2-selection--multiple .select2-search__field{color:#495057}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice+.select2-search{width:0}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove{float:left;padding-right:3px;padding-left:3px;margin-right:1px;margin-left:3px;font-weight:700;color:#bdc6d0}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove:hover{color:#343a40}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear{position:absolute !important;top:0;right:.7em;float:none;margin-right:0}.select2-container--bootstrap4.select2-container--disabled .select2-selection--multiple .select2-selection__choice{padding:0 5px;cursor:not-allowed}.select2-container--bootstrap4.select2-container--disabled .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove{display:none}
+.select2-container{display:block}.select2-container *:focus{outline:0}.input-group .select2-container--bootstrap4{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.input-group-prepend ~ .select2-container--bootstrap4 .select2-selection{border-top-left-radius:0;border-bottom-left-radius:0}.input-group>.select2-container--bootstrap4:not(:last-child) .select2-selection{border-top-right-radius:0;border-bottom-right-radius:0}.select2-container--bootstrap4 .select2-selection{width:100%;min-height:calc(1.5em + .75rem + 2px);padding:.375rem 1.75rem .375rem .75rem;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5;color:#495057;vertical-align:middle;background-color:#fff;border:1px solid #ced4da;border-radius:.25rem;-webkit-transition:background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,-webkit-box-shadow 0.15s ease-in-out;transition:background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,-webkit-box-shadow 0.15s ease-in-out;transition:background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;transition:background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out,-webkit-box-shadow 0.15s ease-in-out}@media (prefers-reduced-motion: reduce){.select2-container--bootstrap4 .select2-selection{-webkit-transition:none;transition:none}}.select2-container--bootstrap4.select2-container--focus .select2-selection{border-color:#80bdff;-webkit-box-shadow:0 0 0 .2rem rgba(0,123,255,0.25);box-shadow:0 0 0 .2rem rgba(0,123,255,0.25)}.select2-container--bootstrap4.select2-container--open.select2-container--above .select2-selection{border-top-left-radius:0;border-top-right-radius:0}.select2-container--bootstrap4.select2-container--open.select2-container--below .select2-selection{border-bottom-right-radius:0;border-bottom-left-radius:0}.select2-container--bootstrap4.select2-container--disabled .select2-selection,.select2-container--bootstrap4.select2-container--disabled .select2-search__field{cursor:not-allowed;background-color:#e9ecef;border-color:#ced4da;-webkit-box-shadow:none;box-shadow:none}select.is-invalid ~ .select2-container--bootstrap4 .select2-selection,form.was-validated select:invalid ~ .select2-container--bootstrap4 .select2-selection{border-color:#dc3545}select.is-valid ~ .select2-container--bootstrap4 .select2-selection,form.was-validated select:valid ~ .select2-container--bootstrap4 .select2-selection{border-color:#28a745}.select2-container--bootstrap4 .select2-dropdown{border-color:#ced4da;border-radius:0}.select2-container--bootstrap4 .select2-dropdown.select2-dropdown--below{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.select2-container--bootstrap4 .select2-dropdown.select2-dropdown--above{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.select2-container--bootstrap4 .select2-results__option{padding:.375rem .75rem}.select2-container--bootstrap4 .select2-results__option--selected{color:#212529;background-color:#e9ecef}.select2-container--bootstrap4 .select2-results__option--highlighted{color:#fff;background-color:#007bff}.select2-container--bootstrap4 .select2-results__option--group{padding:0}.select2-container--bootstrap4 .select2-results__option--group .select2-results__options--nested .select2-results__option{padding-left:.75rem}.select2-container--bootstrap4 .select2-results>.select2-results__options{max-height:15em;overflow-y:auto}.select2-container--bootstrap4 .select2-results__group{display:list-item;padding:.375rem .375rem;color:#6c757d}.select2-container--bootstrap4 .select2-selection__clear{float:right;width:1em;height:1em;padding:0;margin:.25em 0 0;font-weight:700;line-height:.75em;color:#495057;background:#e6e6e6 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 16 16'%3e%3cpath fill='%23495057' d='M1 12l4-4-4-4 3-3 4 4 4-4 3 3-4 4 4 4-3 3-4-4-4 4z'/%3e%3c/svg%3e") center no-repeat !important;border-radius:100%}.select2-container--bootstrap4 .select2-selection__clear span{display:none}.select2-container--bootstrap4 .select2-selection__clear:hover{background-color:#d9d9d9 !important}.select2-container--bootstrap4 .select2-results__message{color:#6c757d}.select2-container--bootstrap4 .select2-selection--single{background:#fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right .75rem center/8px 10px no-repeat}.select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder{color:#6c757d}.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered{padding:0;color:#495057}.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field{padding:.375rem .75rem;color:#495057;border:1px solid #ced4da;border-radius:.25rem}.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field:focus{color:#495057;background-color:#fff;border-color:#80bdff;outline:0;-webkit-box-shadow:0 0 0 .2rem rgba(0,123,255,0.25);box-shadow:0 0 0 .2rem rgba(0,123,255,0.25)}.select2-container--bootstrap4 .select2-selection--multiple{padding:0 .75rem}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered{margin:0}.select2-container--bootstrap4 .select2-selection--multiple .select2-search--inline{display:inline-block}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice{position:relative;display:inline-block;padding:0 5px 0 21px;margin:.375rem .375rem .375rem 0;color:#fff;vertical-align:top;cursor:pointer;background-color:#6c757d;border-radius:.2rem}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__display{padding:0 5px}.select2-container--bootstrap4 .select2-selection--multiple .select2-search__field{height:calc(1.5em + .75rem);padding-top:.375rem;margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height:1.5;color:#495057}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove{position:absolute;top:0;left:0;padding:0 5px;margin:0;font-weight:700;color:rgba(255,255,255,0.75);cursor:pointer;background:none;border:none;border-right:1px solid #a1a8ae}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove:hover{color:rgba(255,255,255,0.85)}.select2-container--bootstrap4 .select2-selection--multiple.select2-selection--clearable{padding-right:32px}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear{position:absolute;top:.375rem;right:.75rem}.select2-container--bootstrap4.select2-container--disabled .select2-selection--multiple .select2-selection__choice{padding:0 5px;cursor:not-allowed}.select2-container--bootstrap4.select2-container--disabled .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove{display:none}
diff --git a/src/_layout.scss b/src/_layout.scss
index 1c33c41..10e5de0 100644
--- a/src/_layout.scss
+++ b/src/_layout.scss
@@ -1,3 +1,11 @@
+$s2bs4-selection-clear-icon: url("data:image/svg+xml,") !default;
+
+// `font-family` fallback. This is needed because `$custom-select-font-family`
+// defaults to null, but this theme needs an existing value to override
+// Select2's `font-family: sans-serif` rule
+$s2bs4-font-family: $custom-select-font-family !default;
+$s2bs4-font-family: $font-family-base !default;
+
// basic
.select2-container {
display: block;
@@ -11,11 +19,13 @@
.input-group .select2-container--bootstrap4 {
flex-grow: 1;
}
+
// for prepended input
.input-group-prepend ~ .select2-container--bootstrap4 .select2-selection {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
+
// for appended input
.input-group > .select2-container--bootstrap4:not(:last-child) .select2-selection {
border-top-right-radius: 0;
@@ -23,38 +33,38 @@
}
.select2-container--bootstrap4 {
-
// input box
.select2-selection {
width: 100%;
- background-color: $input-bg;
- border: $input-border-width solid $input-border-color;
- @include border-radius($input-border-radius);
- @include box-shadow($input-box-shadow);
- @include transition($input-transition);
+ min-height: $custom-select-height;
+ padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
+ font-family: $s2bs4-font-family;
+ @include font-size($custom-select-font-size);
+ font-weight: $custom-select-font-weight;
+ line-height: $custom-select-line-height;
+ color: $custom-select-color;
+ vertical-align: middle;
+ background-color: $custom-select-bg;
+ border: $custom-select-border-width solid $custom-select-border-color;
+ @include border-radius($custom-select-border-radius, 0);
+ @include box-shadow($custom-select-box-shadow);
+ @include transition($custom-forms-transition);
}
- // focused input box
&.select2-container--focus {
.select2-selection {
- border-color: $input-focus-border-color;
- box-shadow: $input-focus-box-shadow;
- }
-
- // when open, hide bottom border
- &.select2-container--open .select2-selection {
- border-bottom: none;
- @include border-bottom-radius(0);
+ border-color: $custom-select-focus-border-color;
+ box-shadow: $custom-select-focus-box-shadow;
}
}
- // open input box
&.select2-container--open {
&.select2-container--above {
.select2-selection {
@include border-top-radius(0);
}
}
+
&.select2-container--below {
.select2-selection {
@include border-bottom-radius(0);
@@ -62,18 +72,14 @@
}
}
- // disabled input box
- &.select2-container--disabled,
- &.select2-container--disabled.select2-container--focus {
- .select2-selection {
+ &.select2-container--disabled {
+ .select2-selection,
+ .select2-search__field {
cursor: not-allowed;
- background-color: $input-disabled-bg;
- border-color: $input-border-color;
+ background-color: $custom-select-disabled-bg;
+ border-color: $custom-select-border-color;
box-shadow: none;
}
- .select2-search__field {
- background-color: transparent;
- }
}
// validated input box
@@ -82,61 +88,50 @@
form.was-validated select:invalid ~ & .select2-selection {
border-color: $danger;
}
+
select.is-valid ~ & .select2-selection,
form.was-validated select:valid ~ & .select2-selection {
border-color: $success;
}
// stylelint-enable selector-no-qualifying-type
- // fixes placeholder width
- .select2-search {
- width: 100%;
- }
-
- // dropdown
.select2-dropdown {
- border-color: $input-border-color;
- border-radius: 0; // overwrite select2.css
+ border-color: $custom-select-border-color;
+ border-radius: 0; // overload select2.css
- // dropdown opened below
&.select2-dropdown--below {
- border-top: none;
- @include border-bottom-radius($input-border-radius);
+ @include border-bottom-radius($custom-select-border-radius);
}
- // dropdown opened above
&.select2-dropdown--above {
- border-top: 1px solid $input-border-color;
- @include border-top-radius($input-border-radius);
- }
-
- // selected item
- .select2-results__option[aria-selected="true"] {
- color: color-yiq(darken($input-bg, 5%));
- background-color: darken($input-bg, 5%);
+ @include border-top-radius($custom-select-border-radius);
}
}
- // mouse hovered item
- .select2-results__option--highlighted,
- .select2-results__option--highlighted.select2-results__option[aria-selected="true"] {
- color: color-yiq($primary);
- background-color: $primary;
- }
+ .select2-results__option {
+ padding: $custom-select-padding-y $custom-select-padding-x;
- // for