From 3aba1588ddfdf8ea8d10bb53824fcc2abbce3690 Mon Sep 17 00:00:00 2001 From: Geremia Taglialatela Date: Wed, 3 Mar 2021 20:11:11 +0100 Subject: [PATCH 01/11] Update toolchain --- package.json | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index a3fd9eb..2fc6878 100644 --- a/package.json +++ b/package.json @@ -32,20 +32,20 @@ }, "homepage": "https://github.com/ttskch/select2-bootstrap4-theme#readme", "devDependencies": { - "autoprefixer": "^10.2.3", + "autoprefixer": "^10.2.5", "bootstrap": "^4.6.0", - "css-loader": "^5.0.1", - "mini-css-extract-plugin": "^1.3.4", + "css-loader": "^5.1.2", + "mini-css-extract-plugin": "^1.3.9", "node-sass": "^5.0.0", - "postcss": "^8.2.4", - "postcss-loader": "^4.2.0", - "sass-loader": "^10.1.1", + "postcss": "^8.2.8", + "postcss-loader": "^5.2.0", + "sass-loader": "^11.0.1", "style-loader": "^2.0.0", - "stylelint": "^13.9.0", + "stylelint": "^13.12.0", "stylelint-config-twbs-bootstrap": "^2.1.0", "stylelint-webpack-plugin": "^2.1.1", - "webpack": "^5.16.0", - "webpack-cli": "^4.4.0" + "webpack": "^5.25.0", + "webpack-cli": "^4.5.0" }, "jsdelivr": "dist/select2-bootstrap4.min.css", "browserslist": [ From 34f5878a2bfe105ed9abeb2682e4b6e605dc7977 Mon Sep 17 00:00:00 2001 From: Geremia Taglialatela Date: Tue, 16 Feb 2021 16:05:39 +0100 Subject: [PATCH 02/11] Update demo - Update jQuery to 3.6.0 - Fix Boostrap CSS to 4.6.0 - Update to Select2 4.1.rc0 - Add pre-selected examples - Add default select fields --- docs/index.html | 70 ++++++++++++++++++++++++++++++++++++++++++++----- docs/script.js | 21 +++++++++++---- 2 files changed, 80 insertions(+), 11 deletions(-) diff --git a/docs/index.html b/docs/index.html index afb532b..5d3a0fa 100644 --- a/docs/index.html +++ b/docs/index.html @@ -2,17 +2,18 @@ - - + - + + + Select2 Boostrap 4 Theme @@ -22,18 +23,40 @@

Example of
+
+ + +
+
+
+ + +
+
+ + + + +
+ +
+ + +
+
+ Toggle is-valid state + Toggle is-invalid state
@@ -55,6 +57,8 @@

Example of 2 + Toggle is-valid state + Toggle is-invalid state

@@ -81,6 +85,8 @@

Example of Else Stupka + Toggle is-valid state + Toggle is-invalid state

@@ -90,6 +96,8 @@

Example of Hye Panter + Toggle is-valid state + Toggle is-invalid state

@@ -116,6 +124,8 @@

Example of Else Stupka + Toggle is-valid state + Toggle is-invalid state

@@ -192,6 +202,14 @@

Example of + +
+ Everything is fine. +
+

+
diff --git a/src/_layout.scss b/src/_layout.scss index 10bfd3b..f7f8cea 100644 --- a/src/_layout.scss +++ b/src/_layout.scss @@ -76,23 +76,17 @@ // validated input box // stylelint-disable selector-no-qualifying-type - select.is-invalid ~ & .select2-selection, - form.was-validated select:invalid ~ & .select2-selection { - border-color: $danger; - - &:focus { - border-color: $danger; - box-shadow: 0 0 0 $select2-bootstrap4-focus-width rgba($danger, .25); - } - } - - select.is-valid ~ & .select2-selection, - form.was-validated select:valid ~ & .select2-selection { - border-color: $success; + @each $state, $data in $select2-bootstrap4-validation-states { + select.is-#{$state} ~ &, + form.was-validated select:#{$state} ~ & { + .select2-selection { + border-color: map-get($data, color); + } - &:focus { - border-color: $success; - box-shadow: 0 0 0 $select2-bootstrap4-focus-width rgba($danger, .25); + &.select2-container--focus .select2-selection { + border-color: map-get($data, color); + box-shadow: 0 0 0 $select2-bootstrap4-focus-width rgba(map-get($data, color), .25); + } } } // stylelint-enable selector-no-qualifying-type diff --git a/src/_multiple.scss b/src/_multiple.scss index 5a32dd1..3516774 100644 --- a/src/_multiple.scss +++ b/src/_multiple.scss @@ -65,6 +65,22 @@ top: $select2-bootstrap4-padding-y; right: $select2-bootstrap4-padding-x; } + + // stylelint-disable selector-no-qualifying-type, selector-max-compound-selectors + @if $select2-bootstrap4-enable-validation-icons { + @each $state, $data in $select2-bootstrap4-validation-states { + select.is-#{$state} ~ &, + form.was-validated select:#{$state} ~ & { + padding-right: $select2-bootstrap4-height-inner !important; // stylelint-disable-line declaration-no-important + background: $select2-bootstrap4-bg escape-svg(map-get($data, icon)) top $select2-bootstrap4-height-inner-quarter right $select2-bootstrap4-height-inner-quarter / $select2-bootstrap4-feedback-icon-size no-repeat; + + .select2-selection__clear { + right: $select2-bootstrap4-height-inner; + } + } + } + } + // stylelint-enable selector-no-qualifying-type, selector-max-compound-selectors } // hide x button of each selected item in disabled input box diff --git a/src/_single.scss b/src/_single.scss index 1020196..185bf7e 100644 --- a/src/_single.scss +++ b/src/_single.scss @@ -2,6 +2,18 @@ .select2-selection--single { background: $select2-bootstrap4-bg $select2-bootstrap4-background; + // stylelint-disable selector-no-qualifying-type + @if $select2-bootstrap4-enable-validation-icons { + @each $state, $data in $select2-bootstrap4-validation-states { + select.is-#{$state} ~ &, + form.was-validated select:#{$state} ~ & { + padding-right: $select2-bootstrap4-feedback-icon-padding-right !important; // stylelint-disable-line declaration-no-important + background: $select2-bootstrap4-background, $select2-bootstrap4-bg escape-svg(map-get($data, icon)) $select2-bootstrap4-feedback-icon-position / $select2-bootstrap4-feedback-icon-size no-repeat; + } + } + } + // stylelint-enable selector-no-qualifying-type + .select2-selection__placeholder { color: $select2-bootstrap4-placeholder-color; } diff --git a/src/_variables.scss b/src/_variables.scss index f16b2e9..ad51066 100644 --- a/src/_variables.scss +++ b/src/_variables.scss @@ -1,5 +1,9 @@ // Inherit from Bootstrap variables -$select2-bootstrap4-placeholder-color: $input-placeholder-color !default; +$select2-bootstrap4-enable-validation-icons: $enable-validation-icons !default; + +$select2-bootstrap4-placeholder-color: $input-placeholder-color !default; +$select2-bootstrap4-height-inner: $input-height-inner !default; +$select2-bootstrap4-height-inner-quarter: $input-height-inner-quarter !default; $select2-bootstrap4-transition: $custom-forms-transition !default; @@ -24,11 +28,19 @@ $select2-bootstrap4-indicator-color: $custom-select-indicator-color !default; $select2-bootstrap4-indicator: $custom-select-indicator !default; $select2-bootstrap4-background: $custom-select-background !default; +// `feedback-icon-padding-right` adds some extra space compared to Boostrap +// because of the clear button +$select2-bootstrap4-feedback-icon-padding-right: add(1em, (2 * $select2-bootstrap4-padding-y * .75) + $select2-bootstrap4-padding-x + $select2-bootstrap4-indicator-padding) !default; +$select2-bootstrap4-feedback-icon-position: $custom-select-feedback-icon-position !default; +$select2-bootstrap4-feedback-icon-size: $custom-select-feedback-icon-size !default; + $select2-bootstrap4-border-width: $custom-select-border-width !default; $select2-bootstrap4-border-color: $custom-select-border-color !default; $select2-bootstrap4-border-radius: $custom-select-border-radius !default; $select2-bootstrap4-box-shadow: $custom-select-box-shadow !default; +$select2-bootstrap4-validation-states: $form-validation-states !default; + // Font family fallback. Needed because `$custom-select-font-family` defaults // to `null`, but Select2 comes with a `font-family: sans-serif` CSS rule that // this theme needs to override From c848489246f5dd1cad07dff5ce32d06f0332dc57 Mon Sep 17 00:00:00 2001 From: Geremia Taglialatela Date: Sun, 14 Mar 2021 13:40:06 +0100 Subject: [PATCH 07/11] Downgrade jQuery to 3.5.1 Revert when select2/select2#5993 is fixed --- docs/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/index.html b/docs/index.html index be0f438..4738e49 100644 --- a/docs/index.html +++ b/docs/index.html @@ -221,7 +221,7 @@

Example of - + From 413d62c322bafcfdd9aa7a969af68ecfa9158694 Mon Sep 17 00:00:00 2001 From: Geremia Taglialatela Date: Sun, 14 Mar 2021 18:06:52 +0100 Subject: [PATCH 08/11] Refactor layout Move styles inside theme --- dist/select2-bootstrap4.css | 224 +++++++++++++++----------------- dist/select2-bootstrap4.min.css | 2 +- src/_layout.scss | 33 +++-- 3 files changed, 119 insertions(+), 140 deletions(-) diff --git a/dist/select2-bootstrap4.css b/dist/select2-bootstrap4.css index 991e4d7..98f5bd1 100644 --- a/dist/select2-bootstrap4.css +++ b/dist/select2-bootstrap4.css @@ -1,127 +1,109 @@ -.select2-container { +.select2-container--bootstrap4 { display: block; } - .select2-container *:focus { + .select2-container--bootstrap4 *:focus { outline: 0; } - -.input-group .select2-container--bootstrap4 { - -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 + 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; - transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } - @media (prefers-reduced-motion: reduce) { - .select2-container--bootstrap4 .select2-selection { - transition: none; } } - -.select2-container--bootstrap4.select2-container--focus .select2-selection { - border-color: #80bdff; - box-shadow: 0 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; - box-shadow: none; } - -select.is-valid ~ .select2-container--bootstrap4 .select2-selection, -form.was-validated select:valid ~ .select2-container--bootstrap4 .select2-selection { - border-color: #28a745; } - -select.is-valid ~ .select2-container--bootstrap4.select2-container--focus .select2-selection, -form.was-validated select:valid ~ .select2-container--bootstrap4.select2-container--focus .select2-selection { - border-color: #28a745; - box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25); } - -select.is-invalid ~ .select2-container--bootstrap4 .select2-selection, -form.was-validated select:invalid ~ .select2-container--bootstrap4 .select2-selection { - border-color: #dc3545; } - -select.is-invalid ~ .select2-container--bootstrap4.select2-container--focus .select2-selection, -form.was-validated select:invalid ~ .select2-container--bootstrap4.select2-container--focus .select2-selection { - border-color: #dc3545; - box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); } - -.select2-container--bootstrap4 .select2-dropdown { - border-color: #ced4da; - border-radius: 0; } - .select2-container--bootstrap4 .select2-dropdown.select2-dropdown--below { - border-bottom-right-radius: 0.25rem; - border-bottom-left-radius: 0.25rem; } - .select2-container--bootstrap4 .select2-dropdown.select2-dropdown--above { - border-top-left-radius: 0.25rem; - border-top-right-radius: 0.25rem; } - -.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--disabled { + .input-group .select2-container--bootstrap4 { + -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 + 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; + transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } + @media (prefers-reduced-motion: reduce) { + .select2-container--bootstrap4 .select2-selection { + transition: none; } } + .select2-container--bootstrap4.select2-container--focus .select2-selection { + border-color: #80bdff; + box-shadow: 0 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; + box-shadow: none; } + select.is-valid ~ .select2-container--bootstrap4 .select2-selection, + form.was-validated select:valid ~ .select2-container--bootstrap4 .select2-selection { + border-color: #28a745; } + select.is-valid ~ .select2-container--bootstrap4.select2-container--focus .select2-selection, + form.was-validated select:valid ~ .select2-container--bootstrap4.select2-container--focus .select2-selection { + border-color: #28a745; + box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25); } + select.is-invalid ~ .select2-container--bootstrap4 .select2-selection, + form.was-validated select:invalid ~ .select2-container--bootstrap4 .select2-selection { + border-color: #dc3545; } + select.is-invalid ~ .select2-container--bootstrap4.select2-container--focus .select2-selection, + form.was-validated select:invalid ~ .select2-container--bootstrap4.select2-container--focus .select2-selection { + border-color: #dc3545; + box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); } + .select2-container--bootstrap4 .select2-dropdown { + border-color: #ced4da; + border-radius: 0; } + .select2-container--bootstrap4 .select2-dropdown.select2-dropdown--below { + border-bottom-right-radius: 0.25rem; + border-bottom-left-radius: 0.25rem; } + .select2-container--bootstrap4 .select2-dropdown.select2-dropdown--above { + border-top-left-radius: 0.25rem; + border-top-right-radius: 0.25rem; } + .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--disabled { + color: #6c757d; } + .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; + overflow-y: auto; } + .select2-container--bootstrap4 .select2-results__group { + display: list-item; + padding: 0.375rem 0.375rem; + color: #6c757d; } + .select2-container--bootstrap4 .select2-selection__clear { + float: right; + 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: #d9d9d9 !important; } + .select2-container--bootstrap4 .select2-results__message { color: #6c757d; } - .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; - overflow-y: auto; } - -.select2-container--bootstrap4 .select2-results__group { - display: list-item; - padding: 0.375rem 0.375rem; - color: #6c757d; } - -.select2-container--bootstrap4 .select2-selection__clear { - float: right; - 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: #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 0.75rem center/8px 10px no-repeat; } diff --git a/dist/select2-bootstrap4.min.css b/dist/select2-bootstrap4.min.css index 2d8524d..9646f50 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{-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;transition:background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out}@media (prefers-reduced-motion: reduce){.select2-container--bootstrap4 .select2-selection{transition:none}}.select2-container--bootstrap4.select2-container--focus .select2-selection{border-color:#80bdff;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;box-shadow:none}select.is-valid ~ .select2-container--bootstrap4 .select2-selection,form.was-validated select:valid ~ .select2-container--bootstrap4 .select2-selection{border-color:#28a745}select.is-valid ~ .select2-container--bootstrap4.select2-container--focus .select2-selection,form.was-validated select:valid ~ .select2-container--bootstrap4.select2-container--focus .select2-selection{border-color:#28a745;box-shadow:0 0 0 .2rem rgba(40,167,69,0.25)}select.is-invalid ~ .select2-container--bootstrap4 .select2-selection,form.was-validated select:invalid ~ .select2-container--bootstrap4 .select2-selection{border-color:#dc3545}select.is-invalid ~ .select2-container--bootstrap4.select2-container--focus .select2-selection,form.was-validated select:invalid ~ .select2-container--bootstrap4.select2-container--focus .select2-selection{border-color:#dc3545;box-shadow:0 0 0 .2rem rgba(220,53,69,0.25)}.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--disabled{color:#6c757d}.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}select.is-valid ~ .select2-container--bootstrap4 .select2-selection--single,form.was-validated select:valid ~ .select2-container--bootstrap4 .select2-selection--single{padding-right:calc(1em + 2.3125rem) !important;background: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,#fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") center right 1.75rem/calc(.75em + .375rem) calc(.75em + .375rem) no-repeat}select.is-invalid ~ .select2-container--bootstrap4 .select2-selection--single,form.was-validated select:invalid ~ .select2-container--bootstrap4 .select2-selection--single{padding-right:calc(1em + 2.3125rem) !important;background: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,#fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") center right 1.75rem/calc(.75em + .375rem) calc(.75em + .375rem) 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;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}select.is-valid ~ .select2-container--bootstrap4 .select2-selection--multiple,form.was-validated select:valid ~ .select2-container--bootstrap4 .select2-selection--multiple{padding-right:calc(1.5em + .75rem) !important;background:#fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") top calc(.375em + .1875rem) right calc(.375em + .1875rem)/calc(.75em + .375rem) calc(.75em + .375rem) no-repeat}select.is-valid ~ .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear,form.was-validated select:valid ~ .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear{right:calc(1.5em + .75rem)}select.is-invalid ~ .select2-container--bootstrap4 .select2-selection--multiple,form.was-validated select:invalid ~ .select2-container--bootstrap4 .select2-selection--multiple{padding-right:calc(1.5em + .75rem) !important;background:#fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") top calc(.375em + .1875rem) right calc(.375em + .1875rem)/calc(.75em + .375rem) calc(.75em + .375rem) no-repeat}select.is-invalid ~ .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear,form.was-validated select:invalid ~ .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear{right:calc(1.5em + .75rem)}.select2-container--bootstrap4.select2-container--disabled .select2-selection--multiple .select2-selection__choice{padding-left:5px;cursor:not-allowed}.select2-container--bootstrap4.select2-container--disabled .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove{display:none} +.select2-container--bootstrap4{display:block}.select2-container--bootstrap4 *:focus{outline:0}.input-group .select2-container--bootstrap4{-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;transition:background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out}@media (prefers-reduced-motion: reduce){.select2-container--bootstrap4 .select2-selection{transition:none}}.select2-container--bootstrap4.select2-container--focus .select2-selection{border-color:#80bdff;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;box-shadow:none}select.is-valid ~ .select2-container--bootstrap4 .select2-selection,form.was-validated select:valid ~ .select2-container--bootstrap4 .select2-selection{border-color:#28a745}select.is-valid ~ .select2-container--bootstrap4.select2-container--focus .select2-selection,form.was-validated select:valid ~ .select2-container--bootstrap4.select2-container--focus .select2-selection{border-color:#28a745;box-shadow:0 0 0 .2rem rgba(40,167,69,0.25)}select.is-invalid ~ .select2-container--bootstrap4 .select2-selection,form.was-validated select:invalid ~ .select2-container--bootstrap4 .select2-selection{border-color:#dc3545}select.is-invalid ~ .select2-container--bootstrap4.select2-container--focus .select2-selection,form.was-validated select:invalid ~ .select2-container--bootstrap4.select2-container--focus .select2-selection{border-color:#dc3545;box-shadow:0 0 0 .2rem rgba(220,53,69,0.25)}.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--disabled{color:#6c757d}.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}select.is-valid ~ .select2-container--bootstrap4 .select2-selection--single,form.was-validated select:valid ~ .select2-container--bootstrap4 .select2-selection--single{padding-right:calc(1em + 2.3125rem) !important;background: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,#fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") center right 1.75rem/calc(.75em + .375rem) calc(.75em + .375rem) no-repeat}select.is-invalid ~ .select2-container--bootstrap4 .select2-selection--single,form.was-validated select:invalid ~ .select2-container--bootstrap4 .select2-selection--single{padding-right:calc(1em + 2.3125rem) !important;background: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,#fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") center right 1.75rem/calc(.75em + .375rem) calc(.75em + .375rem) 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;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}select.is-valid ~ .select2-container--bootstrap4 .select2-selection--multiple,form.was-validated select:valid ~ .select2-container--bootstrap4 .select2-selection--multiple{padding-right:calc(1.5em + .75rem) !important;background:#fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") top calc(.375em + .1875rem) right calc(.375em + .1875rem)/calc(.75em + .375rem) calc(.75em + .375rem) no-repeat}select.is-valid ~ .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear,form.was-validated select:valid ~ .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear{right:calc(1.5em + .75rem)}select.is-invalid ~ .select2-container--bootstrap4 .select2-selection--multiple,form.was-validated select:invalid ~ .select2-container--bootstrap4 .select2-selection--multiple{padding-right:calc(1.5em + .75rem) !important;background:#fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") top calc(.375em + .1875rem) right calc(.375em + .1875rem)/calc(.75em + .375rem) calc(.75em + .375rem) no-repeat}select.is-invalid ~ .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear,form.was-validated select:invalid ~ .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear{right:calc(1.5em + .75rem)}.select2-container--bootstrap4.select2-container--disabled .select2-selection--multiple .select2-selection__choice{padding-left: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 f7f8cea..30e112b 100644 --- a/src/_layout.scss +++ b/src/_layout.scss @@ -1,30 +1,27 @@ -// basic -.select2-container { +.select2-container--bootstrap4 { display: block; *:focus { outline: 0; } -} -// input-group -.input-group .select2-container--bootstrap4 { - flex-grow: 1; -} + // input-group + .input-group & { + 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 prepended input + .input-group-prepend ~ & .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; - border-bottom-right-radius: 0; -} + // for appended input + .input-group > &:not(:last-child) .select2-selection { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } -.select2-container--bootstrap4 { // input box .select2-selection { width: 100%; From 68adcb0b343d52a6a454cb322b922800bf4fae77 Mon Sep 17 00:00:00 2001 From: Geremia Taglialatela Date: Mon, 22 Mar 2021 13:55:35 +0100 Subject: [PATCH 09/11] Fix empty select height without allow clear --- dist/select2-bootstrap4.css | 1 + dist/select2-bootstrap4.min.css | 2 +- docs/index.html | 14 ++++++++++++++ src/_layout.scss | 1 + 4 files changed, 17 insertions(+), 1 deletion(-) diff --git a/dist/select2-bootstrap4.css b/dist/select2-bootstrap4.css index 98f5bd1..75ac8a2 100644 --- a/dist/select2-bootstrap4.css +++ b/dist/select2-bootstrap4.css @@ -67,6 +67,7 @@ border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; } .select2-container--bootstrap4 .select2-results__option { + min-height: calc(1.5em + 0.75rem); padding: 0.375rem 0.75rem; } .select2-container--bootstrap4 .select2-results__option--selected { color: #212529; diff --git a/dist/select2-bootstrap4.min.css b/dist/select2-bootstrap4.min.css index 9646f50..02a7c57 100644 --- a/dist/select2-bootstrap4.min.css +++ b/dist/select2-bootstrap4.min.css @@ -1,2 +1,2 @@ -.select2-container--bootstrap4{display:block}.select2-container--bootstrap4 *:focus{outline:0}.input-group .select2-container--bootstrap4{-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;transition:background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out}@media (prefers-reduced-motion: reduce){.select2-container--bootstrap4 .select2-selection{transition:none}}.select2-container--bootstrap4.select2-container--focus .select2-selection{border-color:#80bdff;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;box-shadow:none}select.is-valid ~ .select2-container--bootstrap4 .select2-selection,form.was-validated select:valid ~ .select2-container--bootstrap4 .select2-selection{border-color:#28a745}select.is-valid ~ .select2-container--bootstrap4.select2-container--focus .select2-selection,form.was-validated select:valid ~ .select2-container--bootstrap4.select2-container--focus .select2-selection{border-color:#28a745;box-shadow:0 0 0 .2rem rgba(40,167,69,0.25)}select.is-invalid ~ .select2-container--bootstrap4 .select2-selection,form.was-validated select:invalid ~ .select2-container--bootstrap4 .select2-selection{border-color:#dc3545}select.is-invalid ~ .select2-container--bootstrap4.select2-container--focus .select2-selection,form.was-validated select:invalid ~ .select2-container--bootstrap4.select2-container--focus .select2-selection{border-color:#dc3545;box-shadow:0 0 0 .2rem rgba(220,53,69,0.25)}.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--disabled{color:#6c757d}.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}select.is-valid ~ .select2-container--bootstrap4 .select2-selection--single,form.was-validated select:valid ~ .select2-container--bootstrap4 .select2-selection--single{padding-right:calc(1em + 2.3125rem) !important;background: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,#fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") center right 1.75rem/calc(.75em + .375rem) calc(.75em + .375rem) no-repeat}select.is-invalid ~ .select2-container--bootstrap4 .select2-selection--single,form.was-validated select:invalid ~ .select2-container--bootstrap4 .select2-selection--single{padding-right:calc(1em + 2.3125rem) !important;background: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,#fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") center right 1.75rem/calc(.75em + .375rem) calc(.75em + .375rem) 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;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}select.is-valid ~ .select2-container--bootstrap4 .select2-selection--multiple,form.was-validated select:valid ~ .select2-container--bootstrap4 .select2-selection--multiple{padding-right:calc(1.5em + .75rem) !important;background:#fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") top calc(.375em + .1875rem) right calc(.375em + .1875rem)/calc(.75em + .375rem) calc(.75em + .375rem) no-repeat}select.is-valid ~ .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear,form.was-validated select:valid ~ .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear{right:calc(1.5em + .75rem)}select.is-invalid ~ .select2-container--bootstrap4 .select2-selection--multiple,form.was-validated select:invalid ~ .select2-container--bootstrap4 .select2-selection--multiple{padding-right:calc(1.5em + .75rem) !important;background:#fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") top calc(.375em + .1875rem) right calc(.375em + .1875rem)/calc(.75em + .375rem) calc(.75em + .375rem) no-repeat}select.is-invalid ~ .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear,form.was-validated select:invalid ~ .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear{right:calc(1.5em + .75rem)}.select2-container--bootstrap4.select2-container--disabled .select2-selection--multiple .select2-selection__choice{padding-left:5px;cursor:not-allowed}.select2-container--bootstrap4.select2-container--disabled .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove{display:none} +.select2-container--bootstrap4{display:block}.select2-container--bootstrap4 *:focus{outline:0}.input-group .select2-container--bootstrap4{-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;transition:background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out}@media (prefers-reduced-motion: reduce){.select2-container--bootstrap4 .select2-selection{transition:none}}.select2-container--bootstrap4.select2-container--focus .select2-selection{border-color:#80bdff;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;box-shadow:none}select.is-valid ~ .select2-container--bootstrap4 .select2-selection,form.was-validated select:valid ~ .select2-container--bootstrap4 .select2-selection{border-color:#28a745}select.is-valid ~ .select2-container--bootstrap4.select2-container--focus .select2-selection,form.was-validated select:valid ~ .select2-container--bootstrap4.select2-container--focus .select2-selection{border-color:#28a745;box-shadow:0 0 0 .2rem rgba(40,167,69,0.25)}select.is-invalid ~ .select2-container--bootstrap4 .select2-selection,form.was-validated select:invalid ~ .select2-container--bootstrap4 .select2-selection{border-color:#dc3545}select.is-invalid ~ .select2-container--bootstrap4.select2-container--focus .select2-selection,form.was-validated select:invalid ~ .select2-container--bootstrap4.select2-container--focus .select2-selection{border-color:#dc3545;box-shadow:0 0 0 .2rem rgba(220,53,69,0.25)}.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{min-height:calc(1.5em + .75rem);padding:.375rem .75rem}.select2-container--bootstrap4 .select2-results__option--selected{color:#212529;background-color:#e9ecef}.select2-container--bootstrap4 .select2-results__option--disabled{color:#6c757d}.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}select.is-valid ~ .select2-container--bootstrap4 .select2-selection--single,form.was-validated select:valid ~ .select2-container--bootstrap4 .select2-selection--single{padding-right:calc(1em + 2.3125rem) !important;background: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,#fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") center right 1.75rem/calc(.75em + .375rem) calc(.75em + .375rem) no-repeat}select.is-invalid ~ .select2-container--bootstrap4 .select2-selection--single,form.was-validated select:invalid ~ .select2-container--bootstrap4 .select2-selection--single{padding-right:calc(1em + 2.3125rem) !important;background: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,#fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") center right 1.75rem/calc(.75em + .375rem) calc(.75em + .375rem) 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;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}select.is-valid ~ .select2-container--bootstrap4 .select2-selection--multiple,form.was-validated select:valid ~ .select2-container--bootstrap4 .select2-selection--multiple{padding-right:calc(1.5em + .75rem) !important;background:#fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") top calc(.375em + .1875rem) right calc(.375em + .1875rem)/calc(.75em + .375rem) calc(.75em + .375rem) no-repeat}select.is-valid ~ .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear,form.was-validated select:valid ~ .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear{right:calc(1.5em + .75rem)}select.is-invalid ~ .select2-container--bootstrap4 .select2-selection--multiple,form.was-validated select:invalid ~ .select2-container--bootstrap4 .select2-selection--multiple{padding-right:calc(1.5em + .75rem) !important;background:#fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") top calc(.375em + .1875rem) right calc(.375em + .1875rem)/calc(.75em + .375rem) calc(.75em + .375rem) no-repeat}select.is-invalid ~ .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear,form.was-validated select:invalid ~ .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear{right:calc(1.5em + .75rem)}.select2-container--bootstrap4.select2-container--disabled .select2-selection--multiple .select2-selection__choice{padding-left: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/docs/index.html b/docs/index.html index 4738e49..f8021ed 100644 --- a/docs/index.html +++ b/docs/index.html @@ -61,6 +61,20 @@

Example of Toggle is-invalid state

+
+ + + Toggle is-valid state + Toggle is-invalid state +
+