Extract input placeholder colors to variables (#2168)

* Extract input placeholder colors to variables

This makes it easier to override the color colour of the placeholder text in an input.

* Remove semicolon, because SASS.

This is SASS, not SCSS.

diff --git a/sass/elements/form.sass b/sass/elements/form.sass
index c73f10fdf539061228d0591ffd0148739f68c0ba..c722ba4492e12eb072251b370dd2318dd526fdd8 100644 (file)
--- a/sass/elements/form.sass
+++ b/sass/elements/form.sass
@@ -3,6 +3,7 @@ $input-background-color: $white !default
 $input-border-color: $grey-lighter !default
 $input-height: $control-height !default
 $input-shadow: inset 0 1px 2px rgba($black, 0.1) !default
+$input-placeholder-color: rgba($input-color, 0.3) !default
 
 $input-hover-color: $grey-darker !default
 $input-hover-border-color: $grey-light !default
@@ -15,6 +16,7 @@ $input-focus-box-shadow-color: rgba($link, 0.25) !default
 $input-disabled-color: $text-light !default
 $input-disabled-background-color: $background !default
 $input-disabled-border-color: $background !default
+$input-disabled-placeholder-color: rgba($input-disabled-color, 0.3) !default
 
 $input-arrow: $link !default
 
@@ -47,7 +49,7 @@ $help-size: $size-small !default
   border-color: $input-border-color
   color: $input-color
   +placeholder
-    color: rgba($input-color, 0.3)
+    color: $input-placeholder-color
   &:hover,
   &.is-hovered
     border-color: $input-hover-border-color
@@ -63,7 +65,7 @@ $help-size: $size-small !default
     box-shadow: none
     color: $input-disabled-color
     +placeholder
-      color: rgba($input-disabled-color, 0.3)
+      color: $input-disabled-placeholder-color
 
 .input,
 .textarea