From f95282c27ee3e7642e313870cbd10d7137de5650 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 d1fbf954f..ceb0278f4 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 0b668bff3..0c9920a2c 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 794d12d83..29fd3b627 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;