From: Nathan Woltman <nwoltman@outlook.com>
Date: Sat, 13 May 2017 15:11:11 +0000 (-0400)
Subject: Fix border on input group elements and custom form inputs
X-Git-Tag: v4.0.0-beta.2~446
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=f95282c27ee3e7642e313870cbd10d7137de5650;p=thirdparty%2Fbootstrap.git

Fix border on input group elements and custom form inputs

c3e4cbd changed the border of input elements to be translucent. This commit makes
input group elements and custom form inputs follow the same pattern.
---

diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index d1fbf954f9..ceb0278f4a 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -139,6 +139,7 @@
   color: $custom-select-color;
   vertical-align: middle;
   background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center;
+  background-clip: padding-box;
   background-size: $custom-select-bg-size;
   border: $custom-select-border-width solid $custom-select-border-color;
   @if $enable-rounded {
@@ -215,11 +216,13 @@
   z-index: 5;
   height: $custom-file-height;
   padding: $custom-file-padding-x $custom-file-padding-y;
+  overflow: hidden;
   line-height: $custom-file-line-height;
   color: $custom-file-color;
   pointer-events: none;
   user-select: none;
   background-color: $custom-file-bg;
+  background-clip: padding-box;
   border: $custom-file-border-width solid $custom-file-border-color;
   @include border-radius($custom-file-border-radius);
   @include box-shadow($custom-file-box-shadow);
@@ -232,9 +235,8 @@
 
   &::before {
     position: absolute;
-    top: -$custom-file-border-width;
-    right: -$custom-file-border-width;
-    bottom: -$custom-file-border-width;
+    top: 0;
+    right: 0;
     z-index: 6;
     display: block;
     height: $custom-file-height;
@@ -242,8 +244,7 @@
     line-height: $custom-file-line-height;
     color: $custom-file-button-color;
     background-color: $custom-file-button-bg;
-    border: $custom-file-border-width solid $custom-file-border-color;
-    @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
+    border-left: $custom-file-border-width solid $custom-file-border-color;
   }
 
   @each $lang, $text in map-get($custom-file-text, button-label) {
diff --git a/scss/_input-group.scss b/scss/_input-group.scss
index 0b668bff3c..0c9920a2c4 100644
--- a/scss/_input-group.scss
+++ b/scss/_input-group.scss
@@ -74,6 +74,7 @@
   color: $input-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);
 
@@ -144,6 +145,8 @@
   // 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);
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 794d12d83f..29fd3b627e 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -400,6 +400,7 @@ $form-group-margin-bottom:       1rem !default;
 
 $input-group-addon-bg:           $gray-200 !default;
 $input-group-addon-border-color: $input-border-color !default;
+$input-group-btn-border-color:   $input-border-color !default;
 
 $custom-control-gutter:   1.5rem !default;
 $custom-control-spacer-y: .25rem !default;