rake update[v4-dev]

1 files changed, 18 insertions, 7 deletions

diff --git a/assets/stylesheets/bootstrap/_input-group.scss b/assets/stylesheets/bootstrap/_input-group.scss
index 95b17be..a1d16e3 100644
--- a/assets/stylesheets/bootstrap/_input-group.scss
+++ b/assets/stylesheets/bootstrap/_input-group.scss
@@ -1,3 +1,5 @@
+// stylelint-disable selector-no-qualifying-type
+
 //
 // Base styles
 //
@@ -5,7 +7,7 @@
 .input-group {
   position: relative;
   display: flex;
-  align-items: center;
+  align-items: stretch;
   width: 100%;
 
   .form-control {
@@ -29,6 +31,8 @@
 .input-group-addon,
 .input-group-btn,
 .input-group .form-control {
+  display: flex;
+  align-items: center;
   &:not(:first-child):not(:last-child) {
     @include border-radius(0);
   }
@@ -70,7 +74,6 @@
   color: $input-group-addon-color;
   text-align: center;
   background-color: $input-group-addon-bg;
-  background-clip: padding-box;
   border: $input-btn-border-width solid $input-group-addon-border-color;
   @include border-radius($input-border-radius);
 
@@ -87,13 +90,11 @@
     @include border-radius($input-border-radius-lg);
   }
 
-  // scss-lint:disable QualifyingElement
   // Nuke default margins from checkboxes and radios to vertically center within.
   input[type="radio"],
   input[type="checkbox"] {
     margin-top: 0;
   }
-  // scss-lint:enable QualifyingElement
 }
 
 
@@ -132,6 +133,7 @@
 
 .input-group-btn {
   position: relative;
+  align-items: stretch;
   // Jankily prevent input button groups from wrapping with `white-space` and
   // `font-size` in combination with `inline-block` on buttons.
   font-size: 0;
@@ -141,8 +143,6 @@
   // element above the siblings.
   > .btn {
     position: relative;
-    background-clip: padding-box;
-    border: $input-btn-border-width solid $input-group-btn-border-color;
 
     + .btn {
       margin-left: (-$input-btn-border-width);
@@ -154,6 +154,10 @@
     }
   }
 
+  &:first-child > .btn + .btn {
+    margin-left: 0;
+  }
+
   // Negative margin to only have a single, shared border between the two
   &:not(:last-child) {
     > .btn,
@@ -165,7 +169,14 @@
     > .btn,
     > .btn-group {
       z-index: 2;
-      margin-left: (-$input-btn-border-width);
+      // remove nagative margin ($input-btn-border-width) to solve overlapping issue with button.
+      margin-left: 0;
+
+      // When input is first, overlap the right side of it with the button(-group)
+      &:first-child {
+        margin-left: (-$input-btn-border-width);
+      }
+
       // Because specificity
       @include hover-focus-active {
         z-index: 3;