Skip to content

Commit

Permalink
Extract input placeholder colors to variables (#2168)
Browse files Browse the repository at this point in the history
* 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.
  • Loading branch information
ariejan authored and jgthms committed Oct 28, 2018
1 parent 9917b9f commit cee7e5c
Showing 1 changed file with 4 additions and 2 deletions.
6 changes: 4 additions & 2 deletions sass/elements/form.sass
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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

Expand Down Expand Up @@ -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
Expand All @@ -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
Expand Down

0 comments on commit cee7e5c

Please sign in to comment.