input-group border radius

angel-vladov · Jan 29, 2020 · 9a0adf6 · 9a0adf6
1 parent 8de55f5
commit 9a0adf6
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 53 deletions.
diff --git a/README.md b/README.md
@@ -1,12 +1,12 @@
 A [Select2](https://select2.github.io/) v4 [Theme](https://select2.github.io/examples.html#themes) for Bootstrap 4  
-![select2-theme-bootstrap version](https://img.shields.io/badge/select2--theme--bootstrap-v0.2.0--beta.4-brightgreen.svg)
+![select2-theme-bootstrap version](https://img.shields.io/badge/select2--theme--bootstrap-v0.2.0--beta.5-brightgreen.svg)
 [![License](http://img.shields.io/badge/License-MIT-blue.svg)](http://opensource.org/licenses/MIT)
 
 Demonstrations [available](https://angel-vladov.github.io/select2-bootstrap-theme/).
 
 #### Compatibility
 
-Built and tested with Bootstrap v4.0.0 and Select2 v4.0.3 in latest Chrome, Firefox and Safari (Mac) and Internet Explorer 11.
+Built and tested with Bootstrap v4 and Select2 v4.0.5 in latest Chrome, Firefox and Safari (Mac) and Internet Explorer 11.
 
 #### Installation
 
@@ -59,6 +59,9 @@ $.fn.select2.defaults.set( "theme", "bootstrap" );
 
 #### Changelog
 
+##### 0.2.1
+* CSS adjustments for input-group border radius
+
 ##### 0.2.0-beta.4
 * Use `~` for Bootstrap imports
 

diff --git a/dist/select2-bootstrap.css b/dist/select2-bootstrap.css
@@ -1,6 +1,6 @@
 /*!
- * Select2 Bootstrap Theme v0.2.0-beta.4 (https://angel-vladov.github.io/select2-bootstrap-theme)
- * Copyright 2015-2019 Florian Kissling and contributors (https://github.com/select2/select2-bootstrap-theme/graphs/contributors)
+ * Select2 Bootstrap Theme v0.2.0-beta.5 (https://angel-vladov.github.io/select2-bootstrap-theme)
+ * Copyright 2015-2020 Florian Kissling and contributors (https://github.com/select2/select2-bootstrap-theme/graphs/contributors)
  * Licensed under MIT (https://github.com/select2/select2-bootstrap-theme/blob/master/LICENSE)
  */
 
@@ -741,28 +741,23 @@
  * Select2 widgets in Bootstrap Input Groups
  *
  * @see https://getbootstrap.com/docs/4.0/components/input-group/
- * @see https://github.com/twbs/bootstrap/blob/v4.0.0-beta.2/scss/_input-group.scss
+ * @see https://github.com/twbs/bootstrap/blob/v4.4.1/scss/_input-group.scss
  */
 /**
  * Reset rounded corners
  */
-.input-group > .select2-hidden-accessible:first-child + .select2-container--bootstrap > .selection > .select2-selection,
-.input-group > .select2-hidden-accessible:first-child + .select2-container--bootstrap > .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--bootstrap:not(:last-child) > .selection > .select2-selection,
-.input-group > .select2-hidden-accessible:not(:first-child) + .select2-container--bootstrap:not(:last-child) > .selection > .select2-selection.form-control {
-  border-radius: 0;
-}
-
-.input-group > .select2-hidden-accessible:not(:first-child):not(:last-child) + .select2-container--bootstrap:last-child > .selection > .select2-selection,
-.input-group > .select2-hidden-accessible:not(:first-child):not(:last-child) + .select2-container--bootstrap:last-child > .selection > .select2-selection.form-control {
+.input-group > .select2-hidden-accessible:not(:first-child) + .select2-container--bootstrap > .selection > .select2-selection
+.input-group > .select2-hidden-accessible:not(:first-child) + .select2-container--bootstrap > .selection > .select2-selection.form-control {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 
+.input-group > .select2-hidden-accessible + .select2-container--bootstrap:not(:last-child) > .selection > .select2-selection,
+.input-group > .select2-hidden-accessible + .select2-container--bootstrap:not(:last-child) > .selection > .select2-selection.form-control {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
 .input-group > .select2-container--bootstrap {
   -webkit-box-flex: 1;
   -webkit-flex: 1 1 auto;
@@ -781,7 +776,7 @@
    * Multi Select2's height which - depending on how many elements have been selected -
    * may grow taller than its initial size.
    *
-   * @see https://github.com/twbs/bootstrap/blob/v4.0.0-beta.2/scss/_input-group.scss
+   * @see https://github.com/twbs/bootstrap/blob/v4.4.1/scss/_input-group.scss
    */
 }
 

diff --git a/dist/select2-bootstrap.min.css b/dist/select2-bootstrap.min.css
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
@@ -143,6 +143,16 @@ <h1 id="input-groups">Input Groups</h1>
 				</div>
 			</div>
 
+			<div class="form-group">
+				<label for="input-group-only" class="control-label">Select2 in input-group <em>(no append or prepend)</em></label>
+				<div class="input-group">
+					<select id="input-group-only" class="form-control select2-multiple" multiple>
+						<option></option>
+						{% include select2-select.html %}
+					</select>
+				</div>
+			</div>
+
 			<div class="page-header">
 				<h1 id="rtl-support-and-control-sizing">
 					RTL Support and Bootstrap Control Sizing

diff --git a/docs/css/select2-bootstrap.css b/docs/css/select2-bootstrap.css
@@ -1,6 +1,6 @@
 /*!
- * Select2 Bootstrap Theme v0.2.0-beta.4 (https://angel-vladov.github.io/select2-bootstrap-theme)
- * Copyright 2015-2019 Florian Kissling and contributors (https://github.com/select2/select2-bootstrap-theme/graphs/contributors)
+ * Select2 Bootstrap Theme v0.2.0-beta.5 (https://angel-vladov.github.io/select2-bootstrap-theme)
+ * Copyright 2015-2020 Florian Kissling and contributors (https://github.com/select2/select2-bootstrap-theme/graphs/contributors)
  * Licensed under MIT (https://github.com/select2/select2-bootstrap-theme/blob/master/LICENSE)
  */
 
@@ -741,28 +741,23 @@
  * Select2 widgets in Bootstrap Input Groups
  *
  * @see https://getbootstrap.com/docs/4.0/components/input-group/
- * @see https://github.com/twbs/bootstrap/blob/v4.0.0-beta.2/scss/_input-group.scss
+ * @see https://github.com/twbs/bootstrap/blob/v4.4.1/scss/_input-group.scss
  */
 /**
  * Reset rounded corners
  */
-.input-group > .select2-hidden-accessible:first-child + .select2-container--bootstrap > .selection > .select2-selection,
-.input-group > .select2-hidden-accessible:first-child + .select2-container--bootstrap > .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--bootstrap:not(:last-child) > .selection > .select2-selection,
-.input-group > .select2-hidden-accessible:not(:first-child) + .select2-container--bootstrap:not(:last-child) > .selection > .select2-selection.form-control {
-  border-radius: 0;
-}
-
-.input-group > .select2-hidden-accessible:not(:first-child):not(:last-child) + .select2-container--bootstrap:last-child > .selection > .select2-selection,
-.input-group > .select2-hidden-accessible:not(:first-child):not(:last-child) + .select2-container--bootstrap:last-child > .selection > .select2-selection.form-control {
+.input-group > .select2-hidden-accessible:not(:first-child) + .select2-container--bootstrap > .selection > .select2-selection
+.input-group > .select2-hidden-accessible:not(:first-child) + .select2-container--bootstrap > .selection > .select2-selection.form-control {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 
+.input-group > .select2-hidden-accessible + .select2-container--bootstrap:not(:last-child) > .selection > .select2-selection,
+.input-group > .select2-hidden-accessible + .select2-container--bootstrap:not(:last-child) > .selection > .select2-selection.form-control {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
 .input-group > .select2-container--bootstrap {
   -webkit-box-flex: 1;
   -webkit-flex: 1 1 auto;
@@ -781,7 +776,7 @@
    * Multi Select2's height which - depending on how many elements have been selected -
    * may grow taller than its initial size.
    *
-   * @see https://github.com/twbs/bootstrap/blob/v4.0.0-beta.2/scss/_input-group.scss
+   * @see https://github.com/twbs/bootstrap/blob/v4.4.1/scss/_input-group.scss
    */
 }
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "select2-theme-bootstrap4",
-  "version": "0.2.0-beta.4",
+  "version": "0.2.0-beta.5",
   "description": "A theme for Select2 v4 and Bootstrap 4.",
   "main": "",
   "style": "dist/select2-bootstrap.css",

diff --git a/src/select2-bootstrap.scss b/src/select2-bootstrap.scss
@@ -800,27 +800,22 @@ $s2bs-form-control-transition: $input-transition !default;
  * Select2 widgets in Bootstrap Input Groups
  *
  * @see https://getbootstrap.com/docs/4.0/components/input-group/
- * @see https://github.com/twbs/bootstrap/blob/v4.0.0-beta.2/scss/_input-group.scss
+ * @see https://github.com/twbs/bootstrap/blob/v4.4.1/scss/_input-group.scss
  */
 
 /**
  * Reset rounded corners
  */
 
 .input-group > .select2-hidden-accessible {
-  &:first-child + .select2-container--bootstrap > .selection > .select2-selection,
-  &:first-child + .select2-container--bootstrap > .selection > .select2-selection.form-control {
-    @include border-right-radius(0);
-  }
-
-  &:not(:first-child) + .select2-container--bootstrap:not(:last-child) > .selection > .select2-selection,
-  &:not(:first-child) + .select2-container--bootstrap:not(:last-child) > .selection > .select2-selection.form-control {
-    border-radius: 0;
+  &:not(:first-child) + .select2-container--bootstrap > .selection > .select2-selection
+  &:not(:first-child) + .select2-container--bootstrap > .selection > .select2-selection.form-control {
+    @include border-left-radius(0);
   }
 
-  &:not(:first-child):not(:last-child) + .select2-container--bootstrap:last-child > .selection > .select2-selection,
-  &:not(:first-child):not(:last-child) + .select2-container--bootstrap:last-child > .selection > .select2-selection.form-control {
-    @include border-left-radius(0);
+  + .select2-container--bootstrap:not(:last-child) > .selection > .select2-selection,
+  + .select2-container--bootstrap:not(:last-child) > .selection > .select2-selection.form-control {
+    @include border-right-radius(0);
   }
 }
 
@@ -855,7 +850,7 @@ $s2bs-form-control-transition: $input-transition !default;
    * Multi Select2's height which - depending on how many elements have been selected -
    * may grow taller than its initial size.
    *
-   * @see https://github.com/twbs/bootstrap/blob/v4.0.0-beta.2/scss/_input-group.scss
+   * @see https://github.com/twbs/bootstrap/blob/v4.4.1/scss/_input-group.scss
    */
 
   &,