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:
parent
631b1ff451
commit
21ef6ad1d5
6 changed files with 63 additions and 3 deletions
|
@ -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);
|
||||
|
|
|
@ -29,4 +29,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
}
|
||||
.wp-block-search__input {
|
||||
&::placeholder {
|
||||
color: var(--wp--custom--form--color--text);
|
||||
opacity: 0.66;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -38,6 +38,11 @@ button {
|
|||
outline: 1px dotted currentColor;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--wp--custom--form--color--text);
|
||||
opacity: 0.66;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
.wp-block-search .wp-block-search__button {
|
||||
border: none;
|
||||
.wp-block-search {
|
||||
.wp-block-search__button {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -19,4 +19,5 @@ textarea {
|
|||
&:focus {
|
||||
outline: 1px dotted currentColor;
|
||||
}
|
||||
font-size: var(--wp--preset--font-size--normal);
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue