Add compatibility with Select2 4.1

- Uses Bootstrap's `custom-select` implementation for uniformity - Use SVG background image for clear button - Add some lints to improve code readability Ref: https://getbootstrap.com/docs/4.6/components/forms/#select-menu Close: #49
ttskch · Mar 2, 2021 · 7a549ba · 7a549ba
1 parent b06f529
commit 7a549ba
Show file tree

Hide file tree

Showing 7 changed files with 180 additions and 246 deletions.
diff --git a/.stylelintrc b/.stylelintrc
@@ -3,6 +3,13 @@
     "stylelint-config-twbs-bootstrap/scss"
   ],
   "rules": {
-    "selector-class-pattern": "^[a-z][a-z0-9\\-_]*[a-z0-9]$"
+    "block-closing-brace-empty-line-before": "never",
+    "declaration-no-important": null,
+    "rule-empty-line-before": ["always", {
+      "except": ["first-nested"],
+      "ignore": ["after-comment"]
+    }],
+    "selector-class-pattern": "^[a-z][a-z0-9\\-_]*[a-z0-9]$",
+    "selector-no-qualifying-type": null
   }
 }
diff --git a/dist/select2-bootstrap4.css b/dist/select2-bootstrap4.css
@@ -18,13 +18,21 @@
 
 .select2-container--bootstrap4 .select2-selection {
   width: 100%;
+  min-height: calc(1.5em + 0.75rem + 2px);
+  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #495057;
+  vertical-align: middle;
   background-color: #fff;
   border: 1px solid #ced4da;
   border-radius: 0.25rem;
-  -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
-  transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
-  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; }
+  -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
+  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
+  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; }
   @media (prefers-reduced-motion: reduce) {
     .select2-container--bootstrap4 .select2-selection {
       -webkit-transition: none;
@@ -35,11 +43,6 @@
   -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
           box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }
 
-.select2-container--bootstrap4.select2-container--focus.select2-container--open .select2-selection {
-  border-bottom: none;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0; }
-
 .select2-container--bootstrap4.select2-container--open.select2-container--above .select2-selection {
   border-top-left-radius: 0;
   border-top-right-radius: 0; }
@@ -66,26 +69,21 @@ select.is-valid ~ .select2-container--bootstrap4 .select2-selection,
 form.was-validated select:valid ~ .select2-container--bootstrap4 .select2-selection {
   border-color: #28a745; }
 
-.select2-container--bootstrap4 .select2-search {
-  width: 100%; }
-
 .select2-container--bootstrap4 .select2-dropdown {
   border-color: #ced4da;
   border-radius: 0; }
   .select2-container--bootstrap4 .select2-dropdown.select2-dropdown--below {
-    border-top: none;
     border-bottom-right-radius: 0.25rem;
     border-bottom-left-radius: 0.25rem; }
   .select2-container--bootstrap4 .select2-dropdown.select2-dropdown--above {
-    border-top: 1px solid #ced4da;
     border-top-left-radius: 0.25rem;
     border-top-right-radius: 0.25rem; }
-  .select2-container--bootstrap4 .select2-dropdown .select2-results__option[aria-selected="true"] {
-    color: #212529;
-    background-color: #f2f2f2; }
 
-.select2-container--bootstrap4 .select2-results__option--highlighted,
-.select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected="true"] {
+.select2-container--bootstrap4 .select2-results__option--selected {
+  color: #212529;
+  background-color: #e6e6e6; }
+
+.select2-container--bootstrap4 .select2-results__option--highlighted {
   color: #fff;
   background-color: #007bff; }
 
@@ -108,42 +106,26 @@ form.was-validated select:valid ~ .select2-container--bootstrap4 .select2-select
 
 .select2-container--bootstrap4 .select2-selection__clear {
   float: right;
-  width: .9em;
-  height: .9em;
-  padding-left: .15em;
-  margin-top: .7em;
-  margin-right: .3em;
-  line-height: .75em;
-  color: #f8f9fa;
-  background-color: #c8c8c8;
+  width: 1em;
+  height: 1em;
+  padding: 0;
+  margin: 0.25em 0 0;
+  font-weight: 700;
+  line-height: 0.75em;
+  color: #495057;
+  background: #e6e6e6 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 16 16'%3e%3cpath fill='%23495057' d='M1 12l4-4-4-4 3-3 4 4 4-4 3 3-4 4 4 4-3 3-4-4-4 4z'/%3e%3c/svg%3e") center no-repeat !important;
   border-radius: 100%; }
+  .select2-container--bootstrap4 .select2-selection__clear span {
+    display: none; }
   .select2-container--bootstrap4 .select2-selection__clear:hover {
-    background-color: #afafaf; }
+    background-color: #d9d9d9 !important; }
 
 .select2-container--bootstrap4 .select2-selection--single {
-  height: calc(1.5em + 0.75rem + 2px) !important; }
+  background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat; }
   .select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder {
-    line-height: calc(1.5em + 0.75rem);
     color: #6c757d; }
-  .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
-    position: absolute;
-    top: 50%;
-    right: 3px;
-    width: 20px; }
-    .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b {
-      position: absolute;
-      top: 60%;
-      left: 50%;
-      width: 0;
-      height: 0;
-      margin-top: -2px;
-      margin-left: -4px;
-      border-color: #343a40 transparent transparent transparent;
-      border-style: solid;
-      border-width: 5px 4px 0; }
   .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
-    padding-left: 0.75rem;
-    line-height: calc(1.5em + 0.75rem);
+    padding: 0;
     color: #495057; }
 
 .select2-search--dropdown .select2-search__field {
@@ -155,44 +137,50 @@ form.was-validated select:valid ~ .select2-container--bootstrap4 .select2-select
   color: #6c757d; }
 
 .select2-container--bootstrap4 .select2-selection--multiple {
-  min-height: calc(1.5em + 0.75rem + 2px) !important; }
+  padding: 0 0.75rem; }
   .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered {
-    -webkit-box-sizing: border-box;
-            box-sizing: border-box;
-    width: 100%;
-    padding: 0 0.375rem;
-    margin: 0;
-    list-style: none; }
+    margin: 0; }
+  .select2-container--bootstrap4 .select2-selection--multiple .select2-search--inline {
+    display: inline-block; }
   .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
-    float: left;
-    padding: 0;
-    padding-right: 0.75rem;
-    margin-top: calc(0.375rem - 2px);
-    margin-right: 0.375rem;
-    color: #495057;
+    position: relative;
+    display: inline-block;
+    padding: 0 5px 0 21px;
+    margin: 0.375rem 0.375rem 0.375rem 0;
+    color: #fff;
+    vertical-align: top;
     cursor: pointer;
-    border: 1px solid #bdc6d0;
+    background-color: #6c757d;
     border-radius: 0.2rem; }
+  .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__display {
+    padding: 0 5px; }
   .select2-container--bootstrap4 .select2-selection--multiple .select2-search__field {
+    height: calc(1.5em + 0.75rem);
+    padding-top: 0.375rem;
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    line-height: 1.5;
     color: #495057; }
-  .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice + .select2-search {
-    width: 0; }
   .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
-    float: left;
-    padding-right: 3px;
-    padding-left: 3px;
-    margin-right: 1px;
-    margin-left: 3px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding: 0 5px;
+    margin: 0;
     font-weight: 700;
-    color: #bdc6d0; }
+    color: rgba(255, 255, 255, 0.75);
+    cursor: pointer;
+    background: none;
+    border: none;
+    border-right: 1px solid #a1a8ae; }
     .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove:hover {
-      color: #343a40; }
+      color: rgba(255, 255, 255, 0.85); }
+  .select2-container--bootstrap4 .select2-selection--multiple.select2-selection--clearable {
+    padding-right: 32px; }
   .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear {
-    position: absolute !important;
-    top: 0;
-    right: .7em;
-    float: none;
-    margin-right: 0; }
+    position: absolute;
+    top: 0.375rem;
+    right: 0.75rem; }
 
 .select2-container--bootstrap4.select2-container--disabled .select2-selection--multiple .select2-selection__choice {
   padding: 0 5px;