0ct0pu5/themes-wordpress
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Blockbase: Add focus styles (#4684)

Browse source
This commit is contained in:
Ben Dwyer 2021-09-23 13:12:47 +01:00 • committed by GitHub
parent 40845224b0
commit 802475c209
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 50 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
blockbase/assets/ponyfill.css
View file

@ -233,6 +233,11 @@ a:hover, a:focus {
text-decoration: none;
}
a:not(.ab-item):not(.screen-reader-shortcut):active, a:not(.ab-item):not(.screen-reader-shortcut):focus {
outline: 1px dotted currentColor;
text-decoration: none;
}
input.wp-block-search__input,
input[type="text"],
input[type="email"],
@ -276,8 +281,17 @@ input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
color: var(--wp--custom--form--color--text);
border-color: var(--custom--form--color--border);
color: var(--wp--custom--form--color--text);
outline: 1px dotted currentColor;
outline-offset: 2px;
}
input[type="checkbox"]:focus,
input[type="submit"]:focus,
button:focus {
outline: 1px dotted currentColor;
outline-offset: 2px;
}
select {
@ -562,6 +576,11 @@ p.has-drop-cap:not(:focus):first-letter {
font-size: var(--wp--custom--form--checkbox--checked--font-size);
}
.wp-block-post-comments form .comment-form-cookies-consent input[type="checkbox"]:focus + ::before {
outline: 1px dotted currentColor;
outline-offset: 2px;
}
.wp-block-post-comments .comment-reply-title small {
float: right;
font-size: 14px;

7
blockbase/sass/blocks/_post-comments.scss
View file

@ -114,6 +114,11 @@
height: var(--wp--custom--form--checkbox--checked--sizing--height);
font-size: var(--wp--custom--form--checkbox--checked--font-size);
}
&:focus + ::before {
outline: 1px dotted currentColor;
outline-offset: 2px;
}
}
}
}
@ -132,7 +137,7 @@
font-size: var(--wp--custom--post-comment--typography--font-size);
line-height: var(--wp--custom--post-comment--typography--line-height);
margin-bottom: var(--wp--custom--gap--vertical);
margin-top: var(--wp--custom--gap--vertical);
margin-top: var(--wp--custom--gap--vertical);
}
}
}

13
blockbase/sass/elements/_forms.scss
View file

@ -24,8 +24,19 @@ textarea {
padding: var(--wp--custom--form--padding);
&:focus {
color: var(--wp--custom--form--color--text);
border-color: var(--custom--form--color--border);
color: var(--wp--custom--form--color--text);
outline: 1px dotted currentColor;
outline-offset: 2px;
}
}
input[type="checkbox"],
input[type="submit"],
button {
&:focus {
outline: 1px dotted currentColor;
outline-offset: 2px;
}
}

9
blockbase/sass/elements/_links.scss
View file

@ -20,3 +20,12 @@ a {
text-decoration: none;
}
}
// Select the focus states of all non-wpadmin and screen reader links
a:not(.ab-item):not(.screen-reader-shortcut) {
&:active,
&:focus {
outline: 1px dotted currentColor;
text-decoration: none;
}
}

1
quadrat/assets/theme.css
View file

@ -469,6 +469,7 @@ input[type="submit"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
input[type="checkbox"]:focus,
textarea:focus {
outline: 1px dotted currentColor;
}

3
quadrat/sass/elements/_forms.scss
View file

@ -14,8 +14,9 @@ input[type="submit"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
input[type="checkbox"],
textarea {
&:focus {
outline: 1px dotted currentColor;
}
}
}