add input-dark

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.
 

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;