From 265e3e82b280b74e8258cc60850b94a2a9df3a0e Mon Sep 17 00:00:00 2001
From: Vinicius Depizzol <vdepizzol@gmail.com>
Date: Tue, 30 Jul 2019 10:53:48 -0700
Subject: [PATCH] add input-dark

---
 pages/css/components/forms.md |  9 +++++++++
 src/forms/form-control.scss   | 18 ++++++++++++++++++
 2 files changed, 27 insertions(+)

diff --git a/pages/css/components/forms.md b/pages/css/components/forms.md
index dad68e6f..356f1ce4 100644
--- a/pages/css/components/forms.md
+++ b/pages/css/components/forms.md
@@ -114,6 +114,15 @@ Make inputs smaller, larger, or full-width with an additional class.
 </form>
 ```
 
+##### Dark
+
+```html
+<div class="bg-gray-dark p-4 mt-n4 ml-n4 mr-n4">
+  <input class="form-control input-dark" type="text" placeholder="Dark input" aria-label="Dark input">
+  <input class="form-control input-dark input-sm" type="text" placeholder="Dark input small" aria-label="Dark input">
+</div>
+``` 
+
 ##### Hide webkit's contact info autofill icon
 Webkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.
 
diff --git a/src/forms/form-control.scss b/src/forms/form-control.scss
index 3e9bc97b..e0c590c1 100644
--- a/src/forms/form-control.scss
+++ b/src/forms/form-control.scss
@@ -51,6 +51,24 @@ label {
   &:focus { background-color: $bg-white; }
 }
 
+// Inputs to be used against dark backgrounds.
+.input-dark {
+  background-color: $white-fade-15;
+  color: $text-white;
+  border-color: transparent;
+
+  &::placeholder {
+    color: inherit;
+    opacity: 0.6; // inceases contrast ratio to 4.52
+  }
+  
+  &.focus,
+  &:focus {
+    border-color: $black-fade-30;
+    box-shadow: 0 0 0 0.2em rgba($blue-300, 0.4);
+  }
+}
+
 // Custom styling for HTML5 validation bubbles (WebKit only)
 ::placeholder {
   color: $text-gray-light;