styled custom file input

docs/components/forms.md

@@ -908,7 +908,7 @@ The file input is the most gnarly of the bunch and require additional JavaScript
 {% example html %}
 <label class="custom-file">
   <input type="file" id="file" class="custom-file-input">
-  <span class="custom-file-control"></span>
+  <span class="custom-file-control" tabindex="0"></span>
 </label>
 {% endexample %}
 

scss/_core.scss

@@ -8,6 +8,7 @@
 @import "layout";
 @import "buttons";
 @import "checkboxes";
+@import "custom-forms";
 @import "switches";
 @import "radios";
 @import "forms";

scss/_custom-forms.scss

@@ -0,0 +1,10 @@
+.custom-file-control {
+  @extend .form-control;
+  @include bmd-form-color($bmd-label-color, $bmd-label-color-focus, $input-border-color);
+
+  &::before {
+    @extend .btn;
+    position: absolute;
+    height: calc(100% - 1px);
+  }
+}

scss/_variables.scss

@@ -20,6 +20,7 @@ $bmd-label-color-inner-focus: $gray !default; // e.g. radio label or text-muted
 
 // Customized BS variables
 @import "variables/bootstrap/components";
+@import "variables/bootstrap/custom-forms";
 @import "variables/bootstrap/spacing";
 @import "variables/bootstrap/body";
 @import "variables/bootstrap/brand";

scss/variables/bootstrap/_custom-forms.scss

@@ -0,0 +1,5 @@
+$custom-file-bg: transparent !default;
+$custom-file-border-width: 0 !default;
+$custom-file-box-shadow: none !default;
+$custom-file-border-radius: 0 !default;
+$custom-file-line-height: 1.3 !default;