From 3df0d493abf33c41e633fd0aa24070ccd2ec9248 Mon Sep 17 00:00:00 2001 From: djibe Date: Sun, 13 May 2018 17:48:38 +0200 Subject: [PATCH 1/7] BS 4.1.1 functionnal --- README.md | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 589f288..079b6df 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ #### Compatibility -Tested with Bootstrap v4.0.0-beta.2 and Select2 v4.0.5 in latest Chrome and Safari (Mac). +Tested with Bootstrap v4.1.1 and Select2 v4.0.6rc1 in latest Firefox, Chrome and Safari (Mac). #### Installation @@ -41,6 +41,10 @@ $.fn.select2.defaults.set( "theme", "bootstrap4" ); #### Changelog +##### Version 1.0.2 + +* Latest build for Bootstrap 4.1.1 + ##### Version 1.0.1 * Fixed some bugs when running `npm run dev`; @@ -52,4 +56,4 @@ $.fn.select2.defaults.set( "theme", "bootstrap4" ); #### Copyright and license -The license is available within the repository in the [LICENSE](LICENSE) file. \ No newline at end of file +The license is available within the repository in the [LICENSE](LICENSE) file. From 876b944f54ec7a3bc771382e68990a2462c35c8b Mon Sep 17 00:00:00 2001 From: djibe Date: Sun, 13 May 2018 18:30:46 +0200 Subject: [PATCH 2/7] Latest build with BS 4.1.1 --- dist/select2-bootstrap4.css | 50 +++++++++++++++++++++++-------------- 1 file changed, 31 insertions(+), 19 deletions(-) diff --git a/dist/select2-bootstrap4.css b/dist/select2-bootstrap4.css index 8bddb6a..7e4ad38 100644 --- a/dist/select2-bootstrap4.css +++ b/dist/select2-bootstrap4.css @@ -1,12 +1,14 @@ /*! - * Select2 Bootstrap4 Theme v1.0.0 (https://github.com/berkan52/select2-bootstrap4-theme) + * Select2 Bootstrap4 Theme v1.0.2 (https://github.com/berkan52/select2-bootstrap4-theme) * - * A theme for Select2 v4 and Bootstrap 4.0.0-beta.2 + * A theme for Select2 v4 and Bootstrap 4.1.1 * - * Release v1.0.0 - 12-12-2017 - * Copyright 2017 Berkan Akyürek + * Release v1.0.2 - 13/05/2018 + * Copyright 2017 Berkan Akyürek + * Latest build by djibe (with autoprefixer) * Licensed under MIT */ + .select2-container--bootstrap4 { display: block; } @@ -32,17 +34,17 @@ outline: 0; } .select2-container--bootstrap4 .select2-search__field::-webkit-input-placeholder { - color: #868e96; + color: #6c757d; } .select2-container--bootstrap4 .select2-search__field:-moz-placeholder { - color: #868e96; + color: #6c757d; } .select2-container--bootstrap4 .select2-search__field::-moz-placeholder { - color: #868e96; + color: #6c757d; opacity: 1; } .select2-container--bootstrap4 .select2-search__field:-ms-input-placeholder { - color: #868e96; + color: #6c757d; } .select2-container--bootstrap4 .select2-results__option { padding: 0.75rem 0.375rem; @@ -52,7 +54,7 @@ padding: 0; } .select2-container--bootstrap4 .select2-results__option[aria-disabled=true] { - color: #868e96; + color: #6c757d; cursor: not-allowed; } .select2-container--bootstrap4 .select2-results__option[aria-selected=true] { @@ -90,7 +92,7 @@ padding-left: 2.25rem; } .select2-container--bootstrap4 .select2-results__group { - color: #868e96; + color: #6c757d; display: block; padding: 0.75rem 0.375rem; font-size: 75%; @@ -98,11 +100,20 @@ white-space: nowrap; } .select2-container--bootstrap4.select2-container--focus .select2-selection, .select2-container--bootstrap4.select2-container--open .select2-selection { + -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s; + transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s; transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; + transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s; border-color: #80bdff; } +@media screen and (prefers-reduced-motion: reduce) { + .select2-container--bootstrap4.select2-container--focus .select2-selection, .select2-container--bootstrap4.select2-container--open .select2-selection { + -webkit-transition: none; + transition: none; + } +} .select2-container--bootstrap4.select2-container--open .select2-selection .select2-selection__arrow b { - border-color: transparent transparent #868e96 transparent; + border-color: transparent transparent #6c757d transparent; border-width: 0 0.25rem 0.25rem 0.25rem; } .select2-container--bootstrap4.select2-container--open.select2-container--below .select2-selection { @@ -116,7 +127,7 @@ border-top-color: transparent; } .select2-container--bootstrap4 .select2-selection__clear { - color: #868e96; + color: #6c757d; cursor: pointer; float: right; font-weight: bold; @@ -166,7 +177,7 @@ width: 0.25rem; } .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b { - border-color: #868e96 transparent transparent transparent; + border-color: #6c757d transparent transparent transparent; border-style: solid; border-width: 0.25rem 0.25rem 0 0.25rem; height: 0; @@ -182,7 +193,7 @@ padding: 0; } .select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder { - color: #868e96; + color: #6c757d; } .select2-container--bootstrap4 .select2-selection--multiple { min-height: calc(2.25rem + 2px); @@ -190,7 +201,8 @@ height: auto; } .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered { - box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; display: block; line-height: 1; list-style: none; @@ -202,7 +214,7 @@ white-space: nowrap; } .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__placeholder { - color: #868e96; + color: #6c757d; float: left; margin-top: 5px; } @@ -225,7 +237,7 @@ min-width: 5em; } .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove { - color: #868e96; + color: #6c757d; cursor: pointer; display: inline-block; font-weight: bold; @@ -306,11 +318,11 @@ margin-top: 1rem; } .select2-container--bootstrap4 .select2-selection.input-lg.select2-container--open .select2-selection--single .select2-selection__arrow b { - border-color: transparent transparent #868e96 transparent; + border-color: transparent transparent #6c757d transparent; border-width: 0 0.3125rem 0.3125rem 0.3125rem; } .input-group-lg .select2-container--bootstrap4 .select2-selection.select2-container--open .select2-selection--single .select2-selection__arrow b { - border-color: transparent transparent #868e96 transparent; + border-color: transparent transparent #6c757d transparent; border-width: 0 0.3125rem 0.3125rem 0.3125rem; } .select2-container--bootstrap4[dir="rtl"] .select2-selection--single { From 8a41937a52d2f1d6ae6cc99d120a670ecea98850 Mon Sep 17 00:00:00 2001 From: djibe Date: Sun, 13 May 2018 18:34:17 +0200 Subject: [PATCH 3/7] BS 4.1.1 compile --- dist/select2-bootstrap4.min.css | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/dist/select2-bootstrap4.min.css b/dist/select2-bootstrap4.min.css index b62f332..ca3008c 100644 --- a/dist/select2-bootstrap4.min.css +++ b/dist/select2-bootstrap4.min.css @@ -1,10 +1,11 @@ /*! - * Select2 Bootstrap4 Theme v1.0.0 (https://github.com/berkan52/select2-bootstrap4-theme) + * Select2 Bootstrap4 Theme v1.0.2 (https://github.com/berkan52/select2-bootstrap4-theme) * - * A theme for Select2 v4 and Bootstrap 4.0.0-beta.2 + * A theme for Select2 v4 and Bootstrap 4.1.1 * - * Release v1.0.0 - 12-12-2017 - * Copyright 2017 Berkan Akyürek + * Release v1.0.2 - 13/05/2018 + * Copyright 2017 Berkan Akyürek + * Latest build by djibe (with autoprefixer) * Licensed under MIT */ -.select2-container--bootstrap4{display:block}.select2-container--bootstrap4 .select2-selection{background-color:#fff;border:1px solid #ced4da;border-radius:.25rem;color:#495057;font-size:1rem;outline:0}.select2-container--bootstrap4 .select2-selection.form-control{border-radius:.25rem}.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field{background-color:#fff;border:1px solid #ced4da;border-radius:.25rem;color:#495057;font-size:1rem}.select2-container--bootstrap4 .select2-search__field{outline:0}.select2-container--bootstrap4 .select2-search__field::-webkit-input-placeholder{color:#868e96}.select2-container--bootstrap4 .select2-search__field:-moz-placeholder{color:#868e96}.select2-container--bootstrap4 .select2-search__field::-moz-placeholder{color:#868e96;opacity:1}.select2-container--bootstrap4 .select2-search__field:-ms-input-placeholder{color:#868e96}.select2-container--bootstrap4 .select2-results__option{padding:.75rem .375rem;font-size:1rem}.select2-container--bootstrap4 .select2-results__option[role=group]{padding:0}.select2-container--bootstrap4 .select2-results__option[aria-disabled=true]{color:#868e96;cursor:not-allowed}.select2-container--bootstrap4 .select2-results__option[aria-selected=true]{background-color:#f8f9fa;color:#16181b}.select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected]{background-color:#007bff;color:#fff}.select2-container--bootstrap4 .select2-results__option .select2-results__option{padding:.75rem .375rem}.select2-container--bootstrap4 .select2-results__option .select2-results__option .select2-results__group{padding-left:0}.select2-container--bootstrap4 .select2-results__option .select2-results__option .select2-results__option{margin-left:-.375rem;padding-left:.75rem}.select2-container--bootstrap4 .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-.75rem;padding-left:1.125rem}.select2-container--bootstrap4 .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-1.125rem;padding-left:1.5rem}.select2-container--bootstrap4 .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-1.5rem;padding-left:1.875rem}.select2-container--bootstrap4 .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-1.875rem;padding-left:2.25rem}.select2-container--bootstrap4 .select2-results__group{color:#868e96;display:block;padding:.75rem .375rem;font-size:75%;line-height:1;white-space:nowrap}.select2-container--bootstrap4.select2-container--focus .select2-selection,.select2-container--bootstrap4.select2-container--open .select2-selection{transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;border-color:#80bdff}.select2-container--bootstrap4.select2-container--open .select2-selection .select2-selection__arrow b{border-color:transparent transparent #868e96 transparent;border-width:0 .25rem .25rem .25rem}.select2-container--bootstrap4.select2-container--open.select2-container--below .select2-selection{border-bottom-right-radius:0;border-bottom-left-radius:0;border-bottom-color:transparent}.select2-container--bootstrap4.select2-container--open.select2-container--above .select2-selection{border-top-left-radius:0;border-top-right-radius:0;border-top-color:transparent}.select2-container--bootstrap4 .select2-selection__clear{color:#868e96;cursor:pointer;float:right;font-weight:700;margin-right:10px}.select2-container--bootstrap4 .select2-selection__clear:hover{color:#343a40}.select2-container--bootstrap4.select2-container--disabled .select2-selection{border-color:#ced4da}.select2-container--bootstrap4.select2-container--disabled .select2-search__field,.select2-container--bootstrap4.select2-container--disabled .select2-selection{cursor:not-allowed}.select2-container--bootstrap4.select2-container--disabled .select2-selection,.select2-container--bootstrap4.select2-container--disabled .select2-selection--multiple .select2-selection__choice{background-color:#e9ecef}.select2-container--bootstrap4.select2-container--disabled .select2-selection--multiple .select2-selection__choice__remove,.select2-container--bootstrap4.select2-container--disabled .select2-selection__clear{display:none}.select2-container--bootstrap4 .select2-dropdown{border-color:#80bdff;border-width:1px;overflow-x:hidden;margin-top:-1px}.select2-container--bootstrap4 .select2-dropdown--above{margin-top:1px}.select2-container--bootstrap4 .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}.select2-container--bootstrap4 .select2-selection--single{height:calc(2.25rem + 2px);line-height:1;padding:.75rem 1.125rem .75rem .375rem}.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow{position:absolute;bottom:0;right:.375rem;top:0;width:.25rem}.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b{border-color:#868e96 transparent transparent transparent;border-style:solid;border-width:.25rem .25rem 0 .25rem;height:0;left:0;margin-left:-.25rem;margin-top:-.125rem;position:absolute;top:50%;width:0}.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered{color:#495057;padding:0}.select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder{color:#868e96}.select2-container--bootstrap4 .select2-selection--multiple{min-height:calc(2.25rem + 2px);padding:0;height:auto}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered{box-sizing:border-box;display:block;line-height:1;list-style:none;margin:0;overflow:hidden;padding:.75rem .375rem 0 .75rem;width:100%;text-overflow:ellipsis;white-space:nowrap}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__placeholder{color:#868e96;float:left;margin-top:5px}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice{color:#495057;background:0 0;border:1px solid #343a40;border-radius:.25rem;cursor:default;float:left;margin:-.25rem 0 0 .1875rem;padding:0 .75rem}.select2-container--bootstrap4 .select2-selection--multiple .select2-search--inline .select2-search__field{background:0 0;padding:0 .375rem;height:calc(2.25rem + 2px) -2;line-height:1;margin-top:0;min-width:5em}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove{color:#868e96;cursor:pointer;display:inline-block;font-weight:700;margin-right:.375rem}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove:hover{color:#343a40}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear{margin-top:.75rem}.form-group-sm .select2-container--bootstrap4 .select2-selection--single,.input-group-sm .select2-container--bootstrap4 .select2-selection--single,.select2-container--bootstrap4 .select2-selection--single.input-sm{border-radius:.2rem;font-size:75%;height:calc(1.8125rem + 2px);line-height:1;padding:.5rem 1rem .5rem .25rem}.form-group-sm .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b,.input-group-sm .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b,.select2-container--bootstrap4 .select2-selection--single.input-sm .select2-selection__arrow b{margin-left:-.5rem}.form-group-sm .select2-container--bootstrap4 .select2-selection--multiple,.input-group-sm .select2-container--bootstrap4 .select2-selection--multiple,.select2-container--bootstrap4 .select2-selection--multiple.input-sm{min-height:calc(1.8125rem + 2px);border-radius:.2rem}.form-group-sm .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered,.input-group-sm .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered,.select2-container--bootstrap4 .select2-selection--multiple.input-sm .select2-selection__rendered{padding:.5rem .25rem 0 .5rem}.form-group-sm .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice,.input-group-sm .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice,.select2-container--bootstrap4 .select2-selection--multiple.input-sm .select2-selection__choice{font-size:75%;line-height:1;margin:0 0 0 .125rem;padding:0 .5rem}.form-group-sm .select2-container--bootstrap4 .select2-selection--multiple .select2-search--inline .select2-search__field,.input-group-sm .select2-container--bootstrap4 .select2-selection--multiple .select2-search--inline .select2-search__field,.select2-container--bootstrap4 .select2-selection--multiple.input-sm .select2-search--inline .select2-search__field{padding:0 .25rem;font-size:75%;height:calc(1.8125rem + 2px) -2;line-height:1}.form-group-sm .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear,.input-group-sm .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear,.select2-container--bootstrap4 .select2-selection--multiple.input-sm .select2-selection__clear{margin-top:.5rem}.form-group-lg .select2-container--bootstrap4 .select2-selection--single,.input-group-lg .select2-container--bootstrap4 .select2-selection--single,.select2-container--bootstrap4 .select2-selection--single.input-lg{border-radius:.3rem;font-size:1.25rem;height:calc(2.875rem + 2px);line-height:1;padding:1rem 1.4375rem 1rem .5rem}.form-group-lg .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow,.input-group-lg .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow,.select2-container--bootstrap4 .select2-selection--single.input-lg .select2-selection__arrow{width:.3125rem}.form-group-lg .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b,.input-group-lg .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b,.select2-container--bootstrap4 .select2-selection--single.input-lg .select2-selection__arrow b{border-width:.3125rem .3125rem 0 .3125rem;margin-left:-.3125rem;margin-left:-1rem;margin-top:-.15625rem}.form-group-lg .select2-container--bootstrap4 .select2-selection--multiple,.input-group-lg .select2-container--bootstrap4 .select2-selection--multiple,.select2-container--bootstrap4 .select2-selection--multiple.input-lg{min-height:calc(2.875rem + 2px);border-radius:.3rem}.form-group-lg .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice,.input-group-lg .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice,.select2-container--bootstrap4 .select2-selection--multiple.input-lg .select2-selection__choice{font-size:1.25rem;line-height:1;border-radius:.25rem;margin:0 0 0 .25rem;padding:0 1rem}.form-group-lg .select2-container--bootstrap4 .select2-selection--multiple .select2-search--inline .select2-search__field,.input-group-lg .select2-container--bootstrap4 .select2-selection--multiple .select2-search--inline .select2-search__field,.select2-container--bootstrap4 .select2-selection--multiple.input-lg .select2-search--inline .select2-search__field{padding:0 .5rem;font-size:1.25rem;height:calc(2.875rem + 2px) -2;line-height:1}.form-group-lg .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear,.input-group-lg .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear,.select2-container--bootstrap4 .select2-selection--multiple.input-lg .select2-selection__clear{margin-top:1rem}.select2-container--bootstrap4 .select2-selection.input-lg.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #868e96 transparent;border-width:0 .3125rem .3125rem .3125rem}.input-group-lg .select2-container--bootstrap4 .select2-selection.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #868e96 transparent;border-width:0 .3125rem .3125rem .3125rem}.select2-container--bootstrap4[dir=rtl] .select2-selection--single{padding-left:1.125rem;padding-right:.375rem}.select2-container--bootstrap4[dir=rtl] .select2-selection--single .select2-selection__rendered{padding-right:0;padding-left:0;text-align:right}.select2-container--bootstrap4[dir=rtl] .select2-selection--single .select2-selection__clear{float:left}.select2-container--bootstrap4[dir=rtl] .select2-selection--single .select2-selection__arrow{left:.375rem;right:auto}.select2-container--bootstrap4[dir=rtl] .select2-selection--single .select2-selection__arrow b{margin-left:0}.select2-container--bootstrap4[dir=rtl] .select2-selection--multiple .select2-search--inline,.select2-container--bootstrap4[dir=rtl] .select2-selection--multiple .select2-selection__choice,.select2-container--bootstrap4[dir=rtl] .select2-selection--multiple .select2-selection__placeholder{float:right}.select2-container--bootstrap4[dir=rtl] .select2-selection--multiple .select2-selection__choice{margin-left:0;margin-right:.1875rem}.select2-container--bootstrap4[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;margin-right:auto}.has-warning .select2-dropdown,.has-warning .select2-selection{border-color:#ffc107}.has-warning .select2-container--focus .select2-selection,.has-warning .select2-container--open .select2-selection{border-color:#d39e00}.has-warning.select2-drop-active{border-color:#d39e00}.has-warning.select2-drop-active.select2-drop.select2-drop-above{border-top-color:#d39e00}.has-error .select2-dropdown,.has-error .select2-selection{border-color:#dc3545}.has-error .select2-container--focus .select2-selection,.has-error .select2-container--open .select2-selection{border-color:#bd2130}.has-error.select2-drop-active{border-color:#bd2130}.has-error.select2-drop-active.select2-drop.select2-drop-above{border-top-color:#bd2130}.has-success .select2-dropdown,.has-success .select2-selection{border-color:#28a745}.has-success .select2-container--focus .select2-selection,.has-success .select2-container--open .select2-selection{border-color:#1e7e34}.has-success.select2-drop-active{border-color:#1e7e34}.has-success.select2-drop-active.select2-drop.select2-drop-above{border-top-color:#1e7e34}.input-group>.select2-hidden-accessible:first-child+.select2-container--bootstrap4>.selection>.select2-selection,.input-group>.select2-hidden-accessible:first-child+.select2-container--bootstrap4>.selection>.select2-selection.form-control{border-top-right-radius:0;border-bottom-right-radius:0}.input-group>.select2-hidden-accessible:not(:first-child)+.select2-container--bootstrap4:not(:last-child)>.selection>.select2-selection,.input-group>.select2-hidden-accessible:not(:first-child)+.select2-container--bootstrap4:not(:last-child)>.selection>.select2-selection.form-control{border-radius:0}.input-group>.select2-hidden-accessible:not(:first-child):not(:last-child)+.select2-container--bootstrap4:last-child>.selection>.select2-selection,.input-group>.select2-hidden-accessible:not(:first-child):not(:last-child)+.select2-container--bootstrap4:last-child>.selection>.select2-selection.form-control{border-top-left-radius:0;border-bottom-left-radius:0}.input-group>.select2-container--bootstrap4{display:table;table-layout:fixed;position:relative;z-index:2;width:100%;margin-bottom:0}.input-group>.select2-container--bootstrap4>.selection>.select2-selection.form-control{float:none}.input-group>.select2-container--bootstrap4.select2-container--focus,.input-group>.select2-container--bootstrap4.select2-container--open{z-index:3}.input-group>.select2-container--bootstrap4,.input-group>.select2-container--bootstrap4 .input-group-btn,.input-group>.select2-container--bootstrap4 .input-group-btn .btn{vertical-align:top}.form-control.select2-hidden-accessible{position:absolute!important;width:1px!important}@media (min-width:576px){.form-inline .select2-container--bootstrap4{display:inline-block}} \ No newline at end of file +.select2-container--bootstrap4{display:block}.select2-container--bootstrap4 .select2-selection{background-color:#fff;border:1px solid #ced4da;border-radius:.25rem;color:#495057;font-size:1rem;outline:0}.select2-container--bootstrap4 .select2-selection.form-control{border-radius:.25rem}.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field{background-color:#fff;border:1px solid #ced4da;border-radius:.25rem;color:#495057;font-size:1rem}.select2-container--bootstrap4 .select2-search__field{outline:0}.select2-container--bootstrap4 .select2-search__field::-webkit-input-placeholder{color:#6c757d}.select2-container--bootstrap4 .select2-search__field:-moz-placeholder{color:#6c757d}.select2-container--bootstrap4 .select2-search__field::-moz-placeholder{color:#6c757d;opacity:1}.select2-container--bootstrap4 .select2-search__field:-ms-input-placeholder{color:#6c757d}.select2-container--bootstrap4 .select2-results__option{padding:.75rem .375rem;font-size:1rem}.select2-container--bootstrap4 .select2-results__option[role=group]{padding:0}.select2-container--bootstrap4 .select2-results__option[aria-disabled=true]{color:#6c757d;cursor:not-allowed}.select2-container--bootstrap4 .select2-results__option[aria-selected=true]{background-color:#f8f9fa;color:#16181b}.select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected]{background-color:#007bff;color:#fff}.select2-container--bootstrap4 .select2-results__option .select2-results__option{padding:.75rem .375rem}.select2-container--bootstrap4 .select2-results__option .select2-results__option .select2-results__group{padding-left:0}.select2-container--bootstrap4 .select2-results__option .select2-results__option .select2-results__option{margin-left:-0.375rem;padding-left:.75rem}.select2-container--bootstrap4 .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-.75rem;padding-left:1.125rem}.select2-container--bootstrap4 .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-1.125rem;padding-left:1.5rem}.select2-container--bootstrap4 .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-1.5rem;padding-left:1.875rem}.select2-container--bootstrap4 .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-1.875rem;padding-left:2.25rem}.select2-container--bootstrap4 .select2-results__group{color:#6c757d;display:block;padding:.75rem .375rem;font-size:75%;line-height:1;white-space:nowrap}.select2-container--bootstrap4.select2-container--focus .select2-selection,.select2-container--bootstrap4.select2-container--open .select2-selection{-webkit-transition:border-color ease-in-out 0.15s,-webkit-box-shadow ease-in-out 0.15s;transition:border-color ease-in-out 0.15s,-webkit-box-shadow ease-in-out 0.15s;transition:border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s;transition:border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s,-webkit-box-shadow ease-in-out 0.15s;border-color:#80bdff}@media screen and (prefers-reduced-motion: reduce){.select2-container--bootstrap4.select2-container--focus .select2-selection,.select2-container--bootstrap4.select2-container--open .select2-selection{-webkit-transition:none;transition:none}}.select2-container--bootstrap4.select2-container--open .select2-selection .select2-selection__arrow b{border-color:transparent transparent #6c757d transparent;border-width:0 .25rem .25rem .25rem}.select2-container--bootstrap4.select2-container--open.select2-container--below .select2-selection{border-bottom-right-radius:0;border-bottom-left-radius:0;border-bottom-color:transparent}.select2-container--bootstrap4.select2-container--open.select2-container--above .select2-selection{border-top-left-radius:0;border-top-right-radius:0;border-top-color:transparent}.select2-container--bootstrap4 .select2-selection__clear{color:#6c757d;cursor:pointer;float:right;font-weight:bold;margin-right:10px}.select2-container--bootstrap4 .select2-selection__clear:hover{color:#343a40}.select2-container--bootstrap4.select2-container--disabled .select2-selection{border-color:#ced4da}.select2-container--bootstrap4.select2-container--disabled .select2-selection,.select2-container--bootstrap4.select2-container--disabled .select2-search__field{cursor:not-allowed}.select2-container--bootstrap4.select2-container--disabled .select2-selection,.select2-container--bootstrap4.select2-container--disabled .select2-selection--multiple .select2-selection__choice{background-color:#e9ecef}.select2-container--bootstrap4.select2-container--disabled .select2-selection__clear,.select2-container--bootstrap4.select2-container--disabled .select2-selection--multiple .select2-selection__choice__remove{display:none}.select2-container--bootstrap4 .select2-dropdown{border-color:#80bdff;border-width:1px;overflow-x:hidden;margin-top:-1px}.select2-container--bootstrap4 .select2-dropdown--above{margin-top:1px}.select2-container--bootstrap4 .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}.select2-container--bootstrap4 .select2-selection--single{height:calc(2.25rem + 2px);line-height:1;padding:.75rem 1.125rem .75rem .375rem}.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow{position:absolute;bottom:0;right:.375rem;top:0;width:.25rem}.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b{border-color:#6c757d transparent transparent transparent;border-style:solid;border-width:.25rem .25rem 0 .25rem;height:0;left:0;margin-left:-0.25rem;margin-top:-.125rem;position:absolute;top:50%;width:0}.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered{color:#495057;padding:0}.select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder{color:#6c757d}.select2-container--bootstrap4 .select2-selection--multiple{min-height:calc(2.25rem + 2px);padding:0;height:auto}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered{-webkit-box-sizing:border-box;box-sizing:border-box;display:block;line-height:1;list-style:none;margin:0;overflow:hidden;padding:.75rem .375rem 0 .75rem;width:100%;text-overflow:ellipsis;white-space:nowrap}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__placeholder{color:#6c757d;float:left;margin-top:5px}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice{color:#495057;background:transparent;border:1px solid #343a40;border-radius:.25rem;cursor:default;float:left;margin:-.25rem 0 0 .1875rem;padding:0 .75rem}.select2-container--bootstrap4 .select2-selection--multiple .select2-search--inline .select2-search__field{background:transparent;padding:0 .375rem;height:calc(2.25rem + 2px)-2;line-height:1;margin-top:0;min-width:5em}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove{color:#6c757d;cursor:pointer;display:inline-block;font-weight:bold;margin-right:.375rem}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove:hover{color:#343a40}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear{margin-top:.75rem}.select2-container--bootstrap4 .select2-selection--single.input-sm,.input-group-sm .select2-container--bootstrap4 .select2-selection--single,.form-group-sm .select2-container--bootstrap4 .select2-selection--single{border-radius:.2rem;font-size:75%;height:calc(1.8125rem + 2px);line-height:1;padding:.5rem 1rem .5rem .25rem}.select2-container--bootstrap4 .select2-selection--single.input-sm .select2-selection__arrow b,.input-group-sm .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b,.form-group-sm .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b{margin-left:-0.5rem}.select2-container--bootstrap4 .select2-selection--multiple.input-sm,.input-group-sm .select2-container--bootstrap4 .select2-selection--multiple,.form-group-sm .select2-container--bootstrap4 .select2-selection--multiple{min-height:calc(1.8125rem + 2px);border-radius:.2rem}.select2-container--bootstrap4 .select2-selection--multiple.input-sm .select2-selection__rendered,.input-group-sm .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered,.form-group-sm .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered{padding:.5rem .25rem 0 .5rem}.select2-container--bootstrap4 .select2-selection--multiple.input-sm .select2-selection__choice,.input-group-sm .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice,.form-group-sm .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice{font-size:75%;line-height:1;margin:0 0 0 .125rem;padding:0 .5rem}.select2-container--bootstrap4 .select2-selection--multiple.input-sm .select2-search--inline .select2-search__field,.input-group-sm .select2-container--bootstrap4 .select2-selection--multiple .select2-search--inline .select2-search__field,.form-group-sm .select2-container--bootstrap4 .select2-selection--multiple .select2-search--inline .select2-search__field{padding:0 .25rem;font-size:75%;height:calc(1.8125rem + 2px)-2;line-height:1}.select2-container--bootstrap4 .select2-selection--multiple.input-sm .select2-selection__clear,.input-group-sm .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear,.form-group-sm .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear{margin-top:.5rem}.select2-container--bootstrap4 .select2-selection--single.input-lg,.input-group-lg .select2-container--bootstrap4 .select2-selection--single,.form-group-lg .select2-container--bootstrap4 .select2-selection--single{border-radius:.3rem;font-size:1.25rem;height:calc(2.875rem + 2px);line-height:1;padding:1rem 1.4375rem 1rem .5rem}.select2-container--bootstrap4 .select2-selection--single.input-lg .select2-selection__arrow,.input-group-lg .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow,.form-group-lg .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow{width:.3125rem}.select2-container--bootstrap4 .select2-selection--single.input-lg .select2-selection__arrow b,.input-group-lg .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b,.form-group-lg .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b{border-width:.3125rem .3125rem 0 .3125rem;margin-left:-0.3125rem;margin-left:-1rem;margin-top:-.15625rem}.select2-container--bootstrap4 .select2-selection--multiple.input-lg,.input-group-lg .select2-container--bootstrap4 .select2-selection--multiple,.form-group-lg .select2-container--bootstrap4 .select2-selection--multiple{min-height:calc(2.875rem + 2px);border-radius:.3rem}.select2-container--bootstrap4 .select2-selection--multiple.input-lg .select2-selection__choice,.input-group-lg .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice,.form-group-lg .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice{font-size:1.25rem;line-height:1;border-radius:.25rem;margin:0rem 0 0 .25rem;padding:0 1rem}.select2-container--bootstrap4 .select2-selection--multiple.input-lg .select2-search--inline .select2-search__field,.input-group-lg .select2-container--bootstrap4 .select2-selection--multiple .select2-search--inline .select2-search__field,.form-group-lg .select2-container--bootstrap4 .select2-selection--multiple .select2-search--inline .select2-search__field{padding:0 .5rem;font-size:1.25rem;height:calc(2.875rem + 2px)-2;line-height:1}.select2-container--bootstrap4 .select2-selection--multiple.input-lg .select2-selection__clear,.input-group-lg .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear,.form-group-lg .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear{margin-top:1rem}.select2-container--bootstrap4 .select2-selection.input-lg.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #6c757d transparent;border-width:0 .3125rem .3125rem .3125rem}.input-group-lg .select2-container--bootstrap4 .select2-selection.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #6c757d transparent;border-width:0 .3125rem .3125rem .3125rem}.select2-container--bootstrap4[dir="rtl"] .select2-selection--single{padding-left:1.125rem;padding-right:.375rem}.select2-container--bootstrap4[dir="rtl"] .select2-selection--single .select2-selection__rendered{padding-right:0;padding-left:0;text-align:right}.select2-container--bootstrap4[dir="rtl"] .select2-selection--single .select2-selection__clear{float:left}.select2-container--bootstrap4[dir="rtl"] .select2-selection--single .select2-selection__arrow{left:.375rem;right:auto}.select2-container--bootstrap4[dir="rtl"] .select2-selection--single .select2-selection__arrow b{margin-left:0}.select2-container--bootstrap4[dir="rtl"] .select2-selection--multiple .select2-selection__choice,.select2-container--bootstrap4[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder,.select2-container--bootstrap4[dir="rtl"] .select2-selection--multiple .select2-search--inline{float:right}.select2-container--bootstrap4[dir="rtl"] .select2-selection--multiple .select2-selection__choice{margin-left:0;margin-right:.1875rem}.select2-container--bootstrap4[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;margin-right:auto}.has-warning .select2-dropdown,.has-warning .select2-selection{border-color:#ffc107}.has-warning .select2-container--focus .select2-selection,.has-warning .select2-container--open .select2-selection{border-color:#d39e00}.has-warning.select2-drop-active{border-color:#d39e00}.has-warning.select2-drop-active.select2-drop.select2-drop-above{border-top-color:#d39e00}.has-error .select2-dropdown,.has-error .select2-selection{border-color:#dc3545}.has-error .select2-container--focus .select2-selection,.has-error .select2-container--open .select2-selection{border-color:#bd2130}.has-error.select2-drop-active{border-color:#bd2130}.has-error.select2-drop-active.select2-drop.select2-drop-above{border-top-color:#bd2130}.has-success .select2-dropdown,.has-success .select2-selection{border-color:#28a745}.has-success .select2-container--focus .select2-selection,.has-success .select2-container--open .select2-selection{border-color:#1e7e34}.has-success.select2-drop-active{border-color:#1e7e34}.has-success.select2-drop-active.select2-drop.select2-drop-above{border-top-color:#1e7e34}.input-group>.select2-hidden-accessible:first-child+.select2-container--bootstrap4>.selection>.select2-selection,.input-group>.select2-hidden-accessible:first-child+.select2-container--bootstrap4>.selection>.select2-selection.form-control{border-top-right-radius:0;border-bottom-right-radius:0}.input-group>.select2-hidden-accessible:not(:first-child)+.select2-container--bootstrap4:not(:last-child)>.selection>.select2-selection,.input-group>.select2-hidden-accessible:not(:first-child)+.select2-container--bootstrap4:not(:last-child)>.selection>.select2-selection.form-control{border-radius:0}.input-group>.select2-hidden-accessible:not(:first-child):not(:last-child)+.select2-container--bootstrap4:last-child>.selection>.select2-selection,.input-group>.select2-hidden-accessible:not(:first-child):not(:last-child)+.select2-container--bootstrap4:last-child>.selection>.select2-selection.form-control{border-top-left-radius:0;border-bottom-left-radius:0}.input-group>.select2-container--bootstrap4{display:table;table-layout:fixed;position:relative;z-index:2;width:100%;margin-bottom:0}.input-group>.select2-container--bootstrap4>.selection>.select2-selection.form-control{float:none}.input-group>.select2-container--bootstrap4.select2-container--open,.input-group>.select2-container--bootstrap4.select2-container--focus{z-index:3}.input-group>.select2-container--bootstrap4,.input-group>.select2-container--bootstrap4 .input-group-btn,.input-group>.select2-container--bootstrap4 .input-group-btn .btn{vertical-align:top}.form-control.select2-hidden-accessible{position:absolute !important;width:1px !important}@media (min-width: 576px){.form-inline .select2-container--bootstrap4{display:inline-block}} From 8b4885496bfcd1db73ee2d338e4d2a5a286a63c9 Mon Sep 17 00:00:00 2001 From: djibe Date: Sun, 13 May 2018 18:41:57 +0200 Subject: [PATCH 4/7] Init universal CSS to fit in everyone's custom theme using CSS variables --- dist/select2-bootstrap4-universal | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 dist/select2-bootstrap4-universal diff --git a/dist/select2-bootstrap4-universal b/dist/select2-bootstrap4-universal new file mode 100644 index 0000000..f45008f --- /dev/null +++ b/dist/select2-bootstrap4-universal @@ -0,0 +1,12 @@ +/*! + * Select2 Bootstrap4 Theme v1.0.2 (https://github.com/berkan52/select2-bootstrap4-theme) + * + * A universal theme for Select2 v4 and Bootstrap 4.1.1 : it uses CSS variables to be compatible with your BS4 theme without any compilation. + * + * Release v1.0.2 - 13/05/2018 + * Copyright 2017 Berkan Akyürek + * Latest build by djibe (with autoprefixer) + * Licensed under MIT + */ + + WIP From c5baee65c017049c8a0e9972f4915b7f0203f23b Mon Sep 17 00:00:00 2001 From: djibe Date: Sun, 13 May 2018 18:42:11 +0200 Subject: [PATCH 5/7] Rename select2-bootstrap4-universal to select2-bootstrap4-universal.css --- ...ect2-bootstrap4-universal => select2-bootstrap4-universal.css} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename dist/{select2-bootstrap4-universal => select2-bootstrap4-universal.css} (100%) diff --git a/dist/select2-bootstrap4-universal b/dist/select2-bootstrap4-universal.css similarity index 100% rename from dist/select2-bootstrap4-universal rename to dist/select2-bootstrap4-universal.css From 12890dd5b166a39baf7dd530d27cfd0be1d93c4a Mon Sep 17 00:00:00 2001 From: djibe Date: Sun, 13 May 2018 22:28:22 +0200 Subject: [PATCH 6/7] Delete select2-bootstrap4-universal.css --- dist/select2-bootstrap4-universal.css | 12 ------------ 1 file changed, 12 deletions(-) delete mode 100644 dist/select2-bootstrap4-universal.css diff --git a/dist/select2-bootstrap4-universal.css b/dist/select2-bootstrap4-universal.css deleted file mode 100644 index f45008f..0000000 --- a/dist/select2-bootstrap4-universal.css +++ /dev/null @@ -1,12 +0,0 @@ -/*! - * Select2 Bootstrap4 Theme v1.0.2 (https://github.com/berkan52/select2-bootstrap4-theme) - * - * A universal theme for Select2 v4 and Bootstrap 4.1.1 : it uses CSS variables to be compatible with your BS4 theme without any compilation. - * - * Release v1.0.2 - 13/05/2018 - * Copyright 2017 Berkan Akyürek - * Latest build by djibe (with autoprefixer) - * Licensed under MIT - */ - - WIP From 1ac31831f8a3d7aea5aee847fa9bc29f1bf49acd Mon Sep 17 00:00:00 2001 From: Jamie R Rytlewski Date: Fri, 26 Oct 2018 14:08:31 -0400 Subject: [PATCH 7/7] Update src/select2-bootstrap4.scss Making it work better with names that go below the line, such as Wyoming. Matches with custom-select a little more. --- src/select2-bootstrap4.scss | 28 +++++++++------------------- 1 file changed, 9 insertions(+), 19 deletions(-) diff --git a/src/select2-bootstrap4.scss b/src/select2-bootstrap4.scss index a3ccfa7..135071a 100644 --- a/src/select2-bootstrap4.scss +++ b/src/select2-bootstrap4.scss @@ -29,7 +29,7 @@ $s2bs-padding-small-horizontal: $input-btn-padding-y-sm !default; $s2bs-padding-base-vertical: $custom-select-padding-x !default; $s2bs-padding-large-vertical: $input-btn-padding-x-lg !default; $s2bs-padding-small-vertical: $input-btn-padding-x-sm !default; -$s2bs-line-height: 1 !default; +$s2bs-line-height: $custom-select-line-height !default; $s2bs-input-bg: $input-bg !default; $s2bs-input-bg-disabled: $input-disabled-bg !default; $s2bs-input-color: $input-color !default; @@ -300,7 +300,7 @@ $s2bs-form-control-transition: border-color ease-in-out .15s, box-shadow ease-in .select2-selection--single { height: $s2bs-input-height-base; line-height: $s2bs-line-height; - padding: $s2bs-padding-base-vertical ($s2bs-padding-base-horizontal + $s2bs-caret-width-base*3) $s2bs-padding-base-vertical $s2bs-padding-base-horizontal; + padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x; .select2-selection__arrow { position: absolute; @@ -345,7 +345,7 @@ $s2bs-form-control-transition: border-color ease-in-out .15s, box-shadow ease-in list-style: none; margin: 0; overflow: hidden; - padding: $s2bs-padding-base-vertical $s2bs-padding-base-horizontal 0 $s2bs-padding-base-vertical; + padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x; width: 100%; text-overflow: ellipsis; white-space: nowrap; @@ -364,7 +364,7 @@ $s2bs-form-control-transition: border-color ease-in-out .15s, box-shadow ease-in @include border-radius($s2bs-selection-choice-border-radius); cursor: default; float: left; - margin: ($s2bs-padding-base-vertical - 1) 0 0 $s2bs-padding-base-horizontal/2; + margin: 0 0 0 $s2bs-padding-base-horizontal/2; padding: 0 $s2bs-padding-base-vertical; } @@ -390,10 +390,6 @@ $s2bs-form-control-transition: border-color ease-in-out .15s, box-shadow ease-in color: $s2bs-remove-choice-hover-color; } } - - .select2-selection__clear { - margin-top: $s2bs-padding-base-vertical; - } } .select2-selection--single.input-sm, @@ -403,7 +399,6 @@ $s2bs-form-control-transition: border-color ease-in-out .15s, box-shadow ease-in font-size: $s2bs-font-size-small; height: $s2bs-input-height-small; line-height: $s2bs-line-height; - padding: $s2bs-padding-small-vertical $s2bs-padding-small-horizontal + $s2bs-caret-width-base*3 $s2bs-padding-small-vertical $s2bs-padding-small-horizontal; .select2-selection__arrow b { margin-left: -$s2bs-padding-small-vertical; @@ -418,11 +413,14 @@ $s2bs-form-control-transition: border-color ease-in-out .15s, box-shadow ease-in .select2-selection__rendered { - padding: $s2bs-padding-small-vertical $s2bs-padding-small-horizontal 0 $s2bs-padding-small-vertical; + height: $custom-select-height-sm; + padding-top: $input-padding-y-sm; + padding-bottom: $input-padding-y-sm; + padding-left: $input-padding-x-sm; + font-size: $font-size-sm; } .select2-selection__choice { - font-size: $s2bs-font-size-small; line-height: $s2bs-line-height; margin: 0 0 0 $s2bs-padding-small-horizontal/2; padding: 0 $s2bs-padding-small-vertical; @@ -434,10 +432,6 @@ $s2bs-form-control-transition: border-color ease-in-out .15s, box-shadow ease-in height: $s2bs-input-height-small - 2; line-height: $s2bs-line-height; } - - .select2-selection__clear { - margin-top: $s2bs-padding-small-vertical; - } } .select2-selection--single.input-lg, @@ -481,10 +475,6 @@ $s2bs-form-control-transition: border-color ease-in-out .15s, box-shadow ease-in height: $s2bs-input-height-large - 2; line-height: $s2bs-line-height; } - - .select2-selection__clear { - margin-top: $s2bs-padding-large-vertical; - } } .select2-selection.input-lg.select2-container--open {