From 88d703e09dc56ab3d471612d6bd5cc69d601fbd2 Mon Sep 17 00:00:00 2001
From: FezVrasta <federico.zivolo@gmail.com>
Date: Mon, 1 Aug 2016 11:34:34 +0200
Subject: [PATCH] styled custom file input

---
 docs/components/forms.md                    |  2 +-
 scss/_core.scss                             |  1 +
 scss/_custom-forms.scss                     | 10 ++++++++++
 scss/_variables.scss                        |  1 +
 scss/variables/bootstrap/_custom-forms.scss |  5 +++++
 5 files changed, 18 insertions(+), 1 deletion(-)
 create mode 100644 scss/_custom-forms.scss
 create mode 100644 scss/variables/bootstrap/_custom-forms.scss

diff --git a/docs/components/forms.md b/docs/components/forms.md
index 649e9b07..5d02acce 100644
--- a/docs/components/forms.md
+++ b/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 %}
 
diff --git a/scss/_core.scss b/scss/_core.scss
index 644cee62..54ab6ded 100644
--- a/scss/_core.scss
+++ b/scss/_core.scss
@@ -8,6 +8,7 @@
 @import "layout";
 @import "buttons";
 @import "checkboxes";
+@import "custom-forms";
 @import "switches";
 @import "radios";
 @import "forms";
diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
new file mode 100644
index 00000000..3cf5ddd0
--- /dev/null
+++ b/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);
+  }
+}
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 7be69af7..862c4488 100644
--- a/scss/_variables.scss
+++ b/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";
diff --git a/scss/variables/bootstrap/_custom-forms.scss b/scss/variables/bootstrap/_custom-forms.scss
new file mode 100644
index 00000000..d6f36447
--- /dev/null
+++ b/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;