From ba23ade295ebd8e937b175e915e879da24c9d161 Mon Sep 17 00:00:00 2001 From: Johannes Weberhofer Date: Thu, 2 Jul 2020 15:44:11 +0200 Subject: [PATCH 1/3] Updated tool-chain Signed-off-by: Johannes Weberhofer --- package.json | 22 +++++++++++----------- webpack.config.js | 21 +++++++-------------- 2 files changed, 18 insertions(+), 25 deletions(-) diff --git a/package.json b/package.json index 049c45b..91819ff 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@ttskch/select2-bootstrap4-theme", - "version": "1.3.3", + "version": "1.4.0", "description": "Select2 v4 theme for Bootstrap4", "main": "", "style": "select2-bootstrap4.css", @@ -30,19 +30,19 @@ }, "homepage": "https://github.com/ttskch/select2-bootstrap4-theme#readme", "devDependencies": { - "autoprefixer": "^9.4.2", - "bootstrap": "^4.1.3", - "css-loader": "^1.0.1", - "cssnano": "^4.1.7", - "extract-text-webpack-plugin": "^4.0.0-beta.0", - "node-sass": "^4.10.0", - "postcss": "^7.0.6", + "autoprefixer": "^9.8.4", + "bootstrap": "^4.5.0", + "css-loader": "^3.6.0", + "cssnano": "^4.1.10", + "mini-css-extract-plugin": "^0.9.0", + "node-sass": "^4.14.1", + "postcss": "^7.0.32", "postcss-loader": "^3.0.0", "precss": "^4.0.0", "sass-loader": "^8.0.2", - "style-loader": "^0.23.1", - "webpack": "^4.27.0", - "webpack-cli": "^3.1.2" + "style-loader": "^1.2.1", + "webpack": "^4.43.0", + "webpack-cli": "^3.3.12" }, "jsdelivr": "dist/select2-bootstrap4.min.css", "browserslist": [ diff --git a/webpack.config.js b/webpack.config.js index 9c87fd6..78e3430 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,18 +1,11 @@ const path = require('path'); -const ProvidePlugin = require('webpack/lib/ProvidePlugin'); -const ExtractTextPlugin = require('extract-text-webpack-plugin'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const isProd = process.env.NODE_ENV === 'production'; let plugins = [ - new ProvidePlugin({ - $: 'jquery', - jQuery: 'jquery', - 'window.jQuery': 'jquery', - Popper: ['popper.js', 'default'], - }), - new ExtractTextPlugin({ + new MiniCssExtractPlugin({ filename: '[name]' + (isProd ? '.min' : '') + '.css', allChunks: true, }), @@ -32,9 +25,10 @@ module.exports = { rules: [ { test: /\.scss$/, - use: ExtractTextPlugin.extract({ - fallback: 'style-loader', - use: [ + use: [ + { + loader: MiniCssExtractPlugin.loader, + }, { loader: 'css-loader', }, @@ -66,8 +60,7 @@ module.exports = { ` } }, - ], - }), + ] }, ], }, From 61f4ee487011ac8650955076b94d204fb4b9ca58 Mon Sep 17 00:00:00 2001 From: Johannes Weberhofer Date: Thu, 2 Jul 2020 15:48:56 +0200 Subject: [PATCH 2/3] Keep old version number --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 91819ff..f87397f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@ttskch/select2-bootstrap4-theme", - "version": "1.4.0", + "version": "1.3.3", "description": "Select2 v4 theme for Bootstrap4", "main": "", "style": "select2-bootstrap4.css", From df75043536550188eefc39ac1a9cf8658c2cab90 Mon Sep 17 00:00:00 2001 From: Johannes Weberhofer Date: Thu, 2 Jul 2020 17:17:18 +0200 Subject: [PATCH 3/3] Layout compatible to Select2 version 4.0 and 4.1 Signed-off-by: Johannes Weberhofer --- dist/select2-bootstrap4.css | 29 +++++++++++++++++------------ dist/select2-bootstrap4.min.css | 2 +- src/_multiple.scss | 26 +++++++++++++++++--------- 3 files changed, 35 insertions(+), 22 deletions(-) diff --git a/dist/select2-bootstrap4.css b/dist/select2-bootstrap4.css index 9b8abe9..3d2785b 100644 --- a/dist/select2-bootstrap4.css +++ b/dist/select2-bootstrap4.css @@ -30,42 +30,46 @@ color: #6c757d; } .select2-container--bootstrap4 .select2-selection--multiple { + padding: 0 5px 0 5px; min-height: calc(1.5em + 0.75rem + 2px) !important; } .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered { -webkit-box-sizing: border-box; box-sizing: border-box; list-style: none; margin: 0; - padding: 0 8px; - width: 100%; } + padding: 0; + width: 100%; + white-space: normal; } .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered .select2-search__field { width: 100% !important; } .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice { color: #343a40; border: 1px solid #bdc6d0; border-radius: 0.2rem; - padding: 0; - padding-right: 5px; + padding: 0 5px 0 0; cursor: pointer; - float: left; + display: inline-block; margin-top: 0.3em; margin-right: 5px; } .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove { - color: #bdc6d0; + color: #8193a5; font-weight: bold; - margin-left: 3px; - margin-right: 1px; - padding-right: 3px; - padding-left: 3px; - float: left; } + margin-right: 5px; + padding: 0 5px; + float: left; + border: 1px solid transparent; } .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove:hover { color: #343a40; } .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear { + color: #506070; float: none; margin-right: 0; position: absolute !important; top: 0; - right: 0.7em; } + right: 0.7em; + border: 1px solid transparent; } + .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear:hover { + color: #343a40; } .select2-container { display: block; } @@ -173,3 +177,4 @@ form.was-validated select:valid ~ .select2-container--bootstrap4 .select2-select margin-right: 0.3em; } .select2-container--bootstrap4 .select2-selection__clear:hover { background-color: #afafaf; } + diff --git a/dist/select2-bootstrap4.min.css b/dist/select2-bootstrap4.min.css index 28c026c..0511a60 100644 --- a/dist/select2-bootstrap4.min.css +++ b/dist/select2-bootstrap4.min.css @@ -1 +1 @@ -.select2-container--bootstrap4 .select2-selection--single{height:calc(1.5em + .75rem + 2px)!important}.select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder{color:#757575;line-height:calc(1.5em + .75rem)}.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{top:60%;border-color:#343a40 transparent transparent;border-style:solid;border-width:5px 4px 0;width:0;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute}.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered{line-height:calc(1.5em + .75rem)}.select2-search--dropdown .select2-search__field{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;list-style:none;margin:0;padding:0 8px;width:100%}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered .select2-search__field{width:100%!important}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice{color:#343a40;border:1px solid #bdc6d0;border-radius:.2rem;padding:0 5px 0 0;cursor:pointer;float:left;margin-top:.3em;margin-right:5px}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove{color:#bdc6d0;font-weight:700;margin-left:3px;margin-right:1px;padding-right:3px;padding-left:3px;float:left}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove:hover{color:#343a40}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear{float:none;margin-right:0;position:absolute!important;top:0;right:.7em}.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{background-color:#fff;border:1px solid #ced4da;border-radius:.25rem;-webkit-transition:border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;width:100%}@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,.25);box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.select2-container--bootstrap4.select2-container--focus.select2-container--open .select2-selection{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--bootstrap4.select2-container--disabled.select2-container--focus .select2-selection,.select2-container--bootstrap4.select2-container--disabled .select2-selection{background-color:#e9ecef;cursor:not-allowed;border-color:#ced4da;-webkit-box-shadow:none;box-shadow:none}.select2-container--bootstrap4.select2-container--disabled.select2-container--focus .select2-search__field,.select2-container--bootstrap4.select2-container--disabled .select2-search__field{background-color:transparent}form.was-validated select:invalid~.select2-container--bootstrap4 .select2-selection,select.is-invalid~.select2-container--bootstrap4 .select2-selection{border-color:#dc3545}form.was-validated select:valid~.select2-container--bootstrap4 .select2-selection,select.is-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-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]{background-color:#e9ecef}.select2-container--bootstrap4 .select2-results__option--highlighted,.select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected=true]{background-color:#007bff;color:#f8f9fa}.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>.select2-results__options{max-height:15em;overflow-y:auto}.select2-container--bootstrap4 .select2-results__group{padding:6px;display:list-item;color:#6c757d}.select2-container--bootstrap4 .select2-selection__clear{width:.9em;height:.9em;line-height:.75em;padding-left:.15em;margin-top:.7em;border-radius:100%;background-color:#c8c8c8;color:#f8f9fa;float:right;margin-right:.3em}.select2-container--bootstrap4 .select2-selection__clear:hover{background-color:#afafaf} \ No newline at end of file +.select2-container--bootstrap4 .select2-selection--single{height:calc(1.5em + .75rem + 2px)!important}.select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder{color:#757575;line-height:calc(1.5em + .75rem)}.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{top:60%;border-color:#343a40 transparent transparent;border-style:solid;border-width:5px 4px 0;width:0;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute}.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered{line-height:calc(1.5em + .75rem)}.select2-search--dropdown .select2-search__field{border:1px solid #ced4da;border-radius:.25rem}.select2-results__message{color:#6c757d}.select2-container--bootstrap4 .select2-selection--multiple{padding:0 5px;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;list-style:none;margin:0;padding:0;width:100%;white-space:normal}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered .select2-search__field{width:100%!important}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice{color:#343a40;border:1px solid #bdc6d0;border-radius:.2rem;padding:0 5px 0 0;cursor:pointer;display:inline-block;margin-top:.3em;margin-right:5px}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove{color:#8193a5;font-weight:700;margin-right:5px;padding:0 5px;float:left;border:1px solid transparent}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove:hover{color:#343a40}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear{color:#506070;float:none;margin-right:0;position:absolute!important;top:0;right:.7em;border:1px solid transparent}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear:hover{color:#343a40}.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{background-color:#fff;border:1px solid #ced4da;border-radius:.25rem;-webkit-transition:border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;width:100%}@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,.25);box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.select2-container--bootstrap4.select2-container--focus.select2-container--open .select2-selection{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--bootstrap4.select2-container--disabled.select2-container--focus .select2-selection,.select2-container--bootstrap4.select2-container--disabled .select2-selection{background-color:#e9ecef;cursor:not-allowed;border-color:#ced4da;-webkit-box-shadow:none;box-shadow:none}.select2-container--bootstrap4.select2-container--disabled.select2-container--focus .select2-search__field,.select2-container--bootstrap4.select2-container--disabled .select2-search__field{background-color:transparent}form.was-validated select:invalid~.select2-container--bootstrap4 .select2-selection,select.is-invalid~.select2-container--bootstrap4 .select2-selection{border-color:#dc3545}form.was-validated select:valid~.select2-container--bootstrap4 .select2-selection,select.is-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-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]{background-color:#e9ecef}.select2-container--bootstrap4 .select2-results__option--highlighted,.select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected=true]{background-color:#007bff;color:#f8f9fa}.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>.select2-results__options{max-height:15em;overflow-y:auto}.select2-container--bootstrap4 .select2-results__group{padding:6px;display:list-item;color:#6c757d}.select2-container--bootstrap4 .select2-selection__clear{width:.9em;height:.9em;line-height:.75em;padding-left:.15em;margin-top:.7em;border-radius:100%;background-color:#c8c8c8;color:#f8f9fa;float:right;margin-right:.3em}.select2-container--bootstrap4 .select2-selection__clear:hover{background-color:#afafaf} diff --git a/src/_multiple.scss b/src/_multiple.scss index abca743..bf3a2b8 100644 --- a/src/_multiple.scss +++ b/src/_multiple.scss @@ -1,6 +1,8 @@ .select2-container--bootstrap4 { .select2-selection--multiple { + padding: 0 5px 0 5px; + // height of input box min-height: $input-height !important; @@ -9,8 +11,9 @@ box-sizing: border-box; list-style: none; margin: 0; - padding: 0 8px; + padding: 0; width: 100%; + white-space: normal; .select2-search__field { width: 100% !important; @@ -22,23 +25,21 @@ color: $dark; border: 1px solid darken($light, 20%); @include border-radius($input-border-radius-sm); - padding: 0; - padding-right: 5px; + padding: 0 5px 0 0; cursor: pointer; - float: left; + display: inline-block; margin-top: 0.3em; margin-right: 5px; } // x button of each selected item in input box .select2-selection__choice__remove { - color: darken($light, 20%); + color: darken($light, 40%); font-weight: bold; - margin-left: 3px; - margin-right: 1px; - padding-right: 3px; - padding-left: 3px; + margin-right: 5px; + padding: 0 5px; float: left; + border: $btn-border-width solid transparent; &:hover { color: $dark; @@ -48,12 +49,19 @@ // all clear button .select2-selection__clear { // overwrite layout.scss + color: darken($light, 60%); float: none; margin-right: 0; position: absolute !important; top: 0; right: 0.7em; + + border: $btn-border-width solid transparent; + + &:hover { + color: $dark; + } } } }