Added font color and size styles to form input placeholder (#4667)

* Added font color and size styles to form input placeholder

* Update quadrat/sass/elements/_forms.scss

* Quadrat: Fix search form placeholder color in the editor

* Quadrat: Remove accidental theme.json changes

* Move fix to blockbase

Co-authored-by: Ben Dwyer <ben@scruffian.com>
Co-authored-by: Daniel Dudzic <daniel.dudzic@automattic.com>
This commit is contained in:
Jason Crist 2021-10-07 04:39:44 -04:00 committed by GitHub
parent 631b1ff451
commit 21ef6ad1d5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 63 additions and 3 deletions

View file

@ -331,6 +331,27 @@ button:focus {
outline-offset: 2px;
}
input.wp-block-search__input::placeholder,
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="url"]::placeholder,
input[type="password"]::placeholder,
input[type="search"]::placeholder,
input[type="number"]::placeholder,
input[type="tel"]::placeholder,
input[type="range"]::placeholder,
input[type="date"]::placeholder,
input[type="month"]::placeholder,
input[type="week"]::placeholder,
input[type="time"]::placeholder,
input[type="datetime"]::placeholder,
input[type="datetime-local"]::placeholder,
input[type="color"]::placeholder,
textarea::placeholder {
color: var(--wp--custom--form--color--text);
opacity: 0.66;
}
select {
font-family: inherit;
font-size: 100%;
@ -822,6 +843,11 @@ div.wp-block-query-pagination .wp-block-query-pagination-numbers .current {
line-height: 0;
}
.wp-block-search .wp-block-search__input::placeholder {
color: var(--wp--custom--form--color--text);
opacity: 0.66;
}
.wp-block-separator {
margin: var(--wp--custom--separator--margin);
opacity: var(--wp--custom--separator--opacity);

View file

@ -29,4 +29,10 @@
}
}
}
.wp-block-search__input {
&::placeholder {
color: var(--wp--custom--form--color--text);
opacity: 0.66;
}
}
}

View file

@ -38,6 +38,11 @@ button {
outline: 1px dotted currentColor;
outline-offset: 2px;
}
&::placeholder {
color: var(--wp--custom--form--color--text);
opacity: 0.66;
}
}
select {

View file

@ -486,6 +486,26 @@ a:not(.ab-item):not(.screen-reader-shortcut):active, a:not(.ab-item):not(.screen
text-decoration: none;
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="submit"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
font-size: var(--wp--preset--font-size--normal);
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,

View file

@ -1,3 +1,5 @@
.wp-block-search .wp-block-search__button {
border: none;
.wp-block-search {
.wp-block-search__button {
border: none;
}
}

View file

@ -19,4 +19,5 @@ textarea {
&:focus {
outline: 1px dotted currentColor;
}
font-size: var(--wp--preset--font-size--normal);
}