feat: 🎸 beautify around the clear button of multiple selector

ttskch · ttskch · commit e047b0d733ff · 2020-04-24T19:01:12.000+09:00
diff --git a/dist/select2-bootstrap4.css b/dist/select2-bootstrap4.css
@@ -60,6 +60,12 @@
     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: 0.7em; }
 
 .select2-container {
   display: block; }
diff --git a/dist/select2-bootstrap4.min.css b/dist/select2-bootstrap4.min.css
diff --git a/docs/index.html b/docs/index.html
@@ -36,11 +36,26 @@ <h3>Example of <a href="https://github.com/ttskch/select2-bootstrap4-theme" targ
     <div class="form-group">
       <label>Example of multiple select</label>
       <select multiple data-placeholder="Choose anything" data-allow-clear="1">
-        <option>1</option>
-        <option>2</option>
-        <option>3</option>
-        <option>4</option>
-        <option>5</option>
+        <option>Tommy Yount</option>
+        <option>Hye Panter</option>
+        <option>Vi Yohe</option>
+        <option>Keva Bandy</option>
+        <option>Hannelore Corning</option>
+        <option>Delorse Whitcher</option>
+        <option>Katharyn Marrinan</option>
+        <option>Jeannine Tope</option>
+        <option>Jamila Braggs</option>
+        <option>Eden Cunniff</option>
+        <option>Suzy Schoen</option>
+        <option>Elza Mccook</option>
+        <option>Liana Goris</option>
+        <option>Pauletta Schlabach</option>
+        <option>Synthia Dupuis</option>
+        <option>Scarlett Kestler</option>
+        <option>Magdalen Mele</option>
+        <option>Susanna Schenk</option>
+        <option>Else Stupka</option>
+        <option>Pennie Khang</option>
       </select>
     </div>
     <div class="form-group">
diff --git a/src/_multiple.scss b/src/_multiple.scss
@@ -44,5 +44,16 @@
         color: $dark;
       }
     }
+
+    // all clear button
+    .select2-selection__clear {
+      // overwrite layout.scss
+      float: none;
+      margin-right: 0;
+
+      position: absolute !important;
+      top: 0;
+      right: 0.7em;
+    }
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -44,5 +44,16 @@`
`44`	`44`	`color: $dark;`
`45`	`45`	`}`
`46`	`46`	`}`
	`47`	`+`
	`48`	`+ // all clear button`
	`49`	`+ .select2-selection__clear {`
	`50`	`+ // overwrite layout.scss`
	`51`	`+ float: none;`
	`52`	`+ margin-right: 0;`
	`53`	`+`
	`54`	`+ position: absolute !important;`
	`55`	`+ top: 0;`
	`56`	`+ right: 0.7em;`
	`57`	`+ }`
`47`	`58`	`}`
`48`	`59`	`}`