From 4bd9b5e1ce928781f691b07e54b9c7eacaf1ce91 Mon Sep 17 00:00:00 2001
From: Nathan Woltman <nwoltman@outlook.com>
Date: Sat, 13 May 2017 11:11:11 -0400
Subject: [PATCH] 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.
---
 scss/_custom-forms.scss | 11 ++++++-----
 scss/_input-group.scss  |  3 +++
 scss/_variables.scss    |  1 +
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index 9133f7dbdaed..fe2a4d5054cb 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -140,6 +140,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;
   @include border-radius($custom-select-border-radius);
@@ -216,11 +217,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);
@@ -233,9 +236,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;
@@ -243,8 +245,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 0b668bff3c36..0c9920a2c418 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 d62990fb8134..1123bd8a96f6 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -431,6 +431,7 @@ $form-group-margin-bottom:       1rem !default;
 
 $input-group-addon-bg:           $gray-lighter !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;