Change custom file markup

2 files changed, 31 insertions, 33 deletions

diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index 86edabaa16..ce49f3060a 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -315,16 +315,6 @@
   &[disabled] ~ .custom-file-label {
     background-color: $custom-file-disabled-bg;
   }
-
-  @each $lang, $value in $custom-file-text {
-    &:lang(#{$lang}) ~ .custom-file-label::after {
-      content: $value;
-    }
-  }
-
-  ~ .custom-file-label[data-browse]::after {
-    content: attr(data-browse);
-  }
 }
 
 .custom-file-label {
@@ -333,33 +323,43 @@
   right: 0;
   left: 0;
   z-index: 1;
+  display: flex;
   height: $custom-file-height;
+  border-color: $custom-file-border-color;
+  @include border-radius($custom-file-border-radius);
+  @include box-shadow($custom-file-box-shadow);
+}
+
+.custom-file-text {
+  display: block;
+  flex-grow: 1;
   padding: $custom-file-padding-y $custom-file-padding-x;
+  overflow: hidden;
   font-family: $custom-file-font-family;
   font-weight: $custom-file-font-weight;
   line-height: $custom-file-line-height;
   color: $custom-file-color;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   background-color: $custom-file-bg;
-  border: $custom-file-border-width solid $custom-file-border-color;
-  @include border-radius($custom-file-border-radius);
-  @include box-shadow($custom-file-box-shadow);
+  border-color: inherit;
+  border-style: solid;
+  border-width: $custom-file-border-width;
+  @include border-left-radius(inherit);
+}
 
-  &::after {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 3;
-    display: block;
-    height: $custom-file-height-inner;
-    padding: $custom-file-padding-y $custom-file-padding-x;
-    line-height: $custom-file-line-height;
-    color: $custom-file-button-color;
-    content: "Browse";
-    @include gradient-bg($custom-file-button-bg);
-    border-left: inherit;
-    @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
-  }
+.custom-file-button {
+  display: block;
+  flex-shrink: 0;
+  padding: $custom-file-padding-y $custom-file-padding-x;
+  margin-left: -$custom-file-border-width;
+  line-height: $custom-file-line-height;
+  color: $custom-file-button-color;
+  @include gradient-bg($custom-file-button-bg);
+  border-color: inherit;
+  border-style: solid;
+  border-width: $custom-file-border-width;
+  @include border-right-radius(inherit);
 }
 
 // Range
@@ -507,6 +507,8 @@
 
 .custom-control-label::before,
 .custom-file-label,
+.custom-file-text,
+.custom-file-button,
 .custom-select {
   @include transition($custom-forms-transition);
 }
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 48d82f67a3..aea16fc644 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -622,7 +622,6 @@ $custom-range-thumb-active-bg:               lighten($component-active-bg, 35%)
 $custom-range-thumb-disabled-bg:             $gray-500 !default;
 
 $custom-file-height:                $input-height !default;
-$custom-file-height-inner:          $input-height-inner !default;
 $custom-file-focus-border-color:    $input-focus-border-color !default;
 $custom-file-focus-box-shadow:      $input-focus-box-shadow !default;
 $custom-file-disabled-bg:           $input-disabled-bg !default;
@@ -640,9 +639,6 @@ $custom-file-border-radius:         $input-border-radius !default;
 $custom-file-box-shadow:            $input-box-shadow !default;
 $custom-file-button-color:          $custom-file-color !default;
 $custom-file-button-bg:             $input-group-addon-bg !default;
-$custom-file-text: (
-  en: "Browse"
-) !default;
 
 
 // Form validation