Skip to content

Commit

Permalink
feat(forms): add placeholder text color variable
Browse files Browse the repository at this point in the history
  • Loading branch information
@codysherman
codysherman committed Apr 21, 2019
1 parent 4c4820a commit 38a4f6b
Show file tree
Hide file tree
Showing 6 changed files with 80 additions and 5 deletions.
3 changes: 3 additions & 0 deletions _variables.sass
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,9 @@ $form-color-primary: $gray-darker !default
//** Form light color
$form-color-secondary: $gray-light !default

//** Form placeholder color
$form-placeholder-color: $gray-light !default

//** Form focus size
$form-focus-size: 1.15 !default

Expand Down
32 changes: 32 additions & 0 deletions dist/frow.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -509,11 +509,27 @@ input {
padding: 8px 5px 4px;
width: 100%;
transition: border-color 0.4s, color 0.4s; }
input::-webkit-input-placeholder {
opacity: 1;
color: #9E9E9E; }
input::-moz-placeholder {
opacity: 1;
color: #9E9E9E; }
input:-ms-input-placeholder {
opacity: 1;
color: #9E9E9E; }
input::-ms-input-placeholder {
opacity: 1;
color: #9E9E9E; }
input::placeholder {
opacity: 1;
color: #9E9E9E; }
input:placeholder-shown {
color: #9E9E9E; }
input::-webkit-input-placeholder {
color: #9E9E9E; }
input::-moz-placeholder {
opacity: 1;
color: #9E9E9E; }
input:-ms-input-placeholder {
color: #9E9E9E; }
Expand Down Expand Up @@ -858,11 +874,27 @@ textarea {
transition: border-color 0.4s, color 0.4s;
min-height: 50px;
resize: vertical; }
textarea::-webkit-input-placeholder {
opacity: 1;
color: #9E9E9E; }
textarea::-moz-placeholder {
opacity: 1;
color: #9E9E9E; }
textarea:-ms-input-placeholder {
opacity: 1;
color: #9E9E9E; }
textarea::-ms-input-placeholder {
opacity: 1;
color: #9E9E9E; }
textarea::placeholder {
opacity: 1;
color: #9E9E9E; }
textarea:placeholder-shown {
color: #9E9E9E; }
textarea::-webkit-input-placeholder {
color: #9E9E9E; }
textarea::-moz-placeholder {
opacity: 1;
color: #9E9E9E; }
textarea:-ms-input-placeholder {
color: #9E9E9E; }
Expand Down
2 changes: 1 addition & 1 deletion dist/frow.min.css
View file

Large diffs are not rendered by default.

3 changes: 3 additions & 0 deletions docs/customize.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -296,6 +296,9 @@ <h5 id="form-elements">
<!-- --><span class="fake-comment">// Form light color</span>
<!-- -->$form-color-secondary: $gray-light;
<!-- -->
<!-- --><span class="fake-comment">// Form placeholder text color</span>
<!-- -->$form-placeholder-color: $gray-light;
<!-- -->
<!-- --><span class="fake-comment">// Form focus size</span>
<!-- -->$form-focus-size: 1.15;
<!-- -->
Expand Down
32 changes: 32 additions & 0 deletions docs/styles/frow.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -510,11 +510,27 @@ input {
padding: 8px 5px 4px;
width: 100%;
transition: border-color 0.4s, color 0.4s; }
input::-webkit-input-placeholder {
opacity: 1;
color: #9E9E9E; }
input::-moz-placeholder {
opacity: 1;
color: #9E9E9E; }
input:-ms-input-placeholder {
opacity: 1;
color: #9E9E9E; }
input::-ms-input-placeholder {
opacity: 1;
color: #9E9E9E; }
input::placeholder {
opacity: 1;
color: #9E9E9E; }
input:placeholder-shown {
color: #9E9E9E; }
input::-webkit-input-placeholder {
color: #9E9E9E; }
input::-moz-placeholder {
opacity: 1;
color: #9E9E9E; }
input:-ms-input-placeholder {
color: #9E9E9E; }
Expand Down Expand Up @@ -859,11 +875,27 @@ textarea {
transition: border-color 0.4s, color 0.4s;
min-height: 50px;
resize: vertical; }
textarea::-webkit-input-placeholder {
opacity: 1;
color: #9E9E9E; }
textarea::-moz-placeholder {
opacity: 1;
color: #9E9E9E; }
textarea:-ms-input-placeholder {
opacity: 1;
color: #9E9E9E; }
textarea::-ms-input-placeholder {
opacity: 1;
color: #9E9E9E; }
textarea::placeholder {
opacity: 1;
color: #9E9E9E; }
textarea:placeholder-shown {
color: #9E9E9E; }
textarea::-webkit-input-placeholder {
color: #9E9E9E; }
textarea::-moz-placeholder {
opacity: 1;
color: #9E9E9E; }
textarea:-ms-input-placeholder {
color: #9E9E9E; }
Expand Down
13 changes: 9 additions & 4 deletions src/_scaffolding.sass
View file
Original file line number Diff line number Diff line change
Expand Up @@ -169,17 +169,22 @@
width: 100%
transition: border-color $animate-speed, color $animate-speed

&::placeholder
opacity: 1;
color: $form-placeholder-color

&:placeholder-shown
color: $form-color-secondary
color: $form-placeholder-color

&::-webkit-input-placeholder
color: $form-color-secondary
color: $form-placeholder-color

&::-moz-placeholder
color: $form-color-secondary
opacity: 1;
color: $form-placeholder-color

&:-ms-input-placeholder
color: $form-color-secondary
color: $form-placeholder-color

&:hover, &:focus
border-color: $form-color-primary
Expand Down

0 comments on commit 38a4f6b

Please sign in to comment.