From d8d67eaa6ae971959f8b2086c4b7474c39bddda5 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Tue, 5 Jan 2016 23:45:44 -0800
Subject: [PATCH] rewrite custom file input component to use classes over
 nested elements

---
 docs/components/forms.md | 12 ++++-----
 scss/_custom-forms.scss  | 55 +++++++++++++++++++++-------------------
 2 files changed, 35 insertions(+), 32 deletions(-)

diff --git a/docs/components/forms.md b/docs/components/forms.md
index e93e28bd6d..5612afb688 100644
--- a/docs/components/forms.md
+++ b/docs/components/forms.md
@@ -709,14 +709,16 @@ Custom selects degrade nicely in IE9, receiving only a handful of overrides to r
 
 ### File browser
 
+The file input is the most gnarly of the bunch and require additional JavaScript if you'd like to hook them up with functional *Choose file...* and selected file name text.
+
 {% example html %}
-<label class="file">
-  <input type="file" id="file">
-  <span class="file-custom"></span>
+<label class="custom-file">
+  <input type="file" id="file" class="custom-file-input">
+  <span class="custom-file-control"></span>
 </label>
 {% endexample %}
 
-The file input is the most gnarly of the bunch. Here's how it works:
+Here's how it works:
 
 - We wrap the `<input>` in a `<label>` so the custom control properly triggers the file browser.
 - We hide the default file `<input>` via `opacity`.
@@ -725,5 +727,3 @@ The file input is the most gnarly of the bunch. Here's how it works:
 - We declare a `height` on the `<input>` for proper spacing for surrounding content.
 
 In other words, it's an entirely custom element, all generated via CSS.
-
-**Heads up!** The custom file input is currently unable to update the *Choose file...* text with the filename. Without JavaScript, this might not be possible to change, but I'm open to ideas.
diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index 3ca3adccaa..0cf135bf81 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -184,21 +184,27 @@
 //
 // Custom file input.
 
-.file {
+.custom-file {
   position: relative;
   display: inline-block;
   max-width: 100%;
   height: 2.5rem;
   cursor: pointer;
 }
-.file input {
+
+.custom-file-input {
   min-width: 14rem;
   max-width: 100%;
   margin: 0;
   filter: alpha(opacity = 0);
   opacity: 0;
+
+  &:focus ~ .custom-file-control {
+    @include box-shadow(0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9);
+  }
 }
-.file-custom {
+
+.custom-file-control {
   position: absolute;
   top: 0;
   right: 0;
@@ -213,28 +219,25 @@
   border: $input-btn-border-width solid #ddd;
   border-radius: .25rem;
   @include box-shadow(inset 0 .2rem .4rem rgba(0,0,0,.05));
-}
-.file-custom::after {
-  content: "Choose file...";
-}
-.file-custom::before {
-  position: absolute;
-  top: -.075rem;
-  right: -.075rem;
-  bottom: -.075rem;
-  z-index: 6;
-  display: block;
-  height: 2.5rem;
-  padding: .5rem 1rem;
-  line-height: 1.5;
-  color: #555;
-  content: "Browse";
-  background-color: #eee;
-  border: $input-btn-border-width solid #ddd;
-  border-radius: 0 .25rem .25rem 0;
-}
 
-// Focus state
-.file input:focus ~ .file-custom {
-  @include box-shadow(0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9);
+  &::after {
+    content: "Choose file...";
+  }
+
+  &::before {
+    position: absolute;
+    top: -.075rem;
+    right: -.075rem;
+    bottom: -.075rem;
+    z-index: 6;
+    display: block;
+    height: 2.5rem;
+    padding: .5rem 1rem;
+    line-height: 1.5;
+    color: #555;
+    content: "Browse";
+    background-color: #eee;
+    border: $input-btn-border-width solid #ddd;
+    border-radius: 0 .25rem .25rem 0;
+  }
 }
-- 
2.47.2