Skip to content
This repository has been archived by the owner on Feb 17, 2025. It is now read-only.

Curator: update link and button styles #6028

Merged
merged 12 commits into from
Jun 1, 2022
Merged

Curator: update link and button styles #6028

Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
1f4dc68
Add underline to nav item on hover
mikachan May 23, 2022
d735f23
Tweak focus and active styles for nav item link
mikachan May 23, 2022
587df17
Tweak button link state styles
mikachan May 23, 2022
b297f53
Tweak outline button link state styles
mikachan May 23, 2022
fb94177
Tweak search button styles
mikachan May 23, 2022
6357a54
Add nav item content to link styles exclusion list
mikachan May 24, 2022
ea4781f
Remove text-decoration from button focus state
mikachan May 25, 2022
dc74145
Specify border color of outline button focus state
mikachan May 25, 2022
fbedc69
Attempt to fix button visited state color
mikachan May 25, 2022
b3628d4
Remove fill button padding override
mikachan May 31, 2022
c982cf7
Tweak fill button focus styles
mikachan May 31, 2022
b2f5b24
Remove padding on default fill buttons
mikachan Jun 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 35 additions & 16 deletions curator/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,28 +23,41 @@ Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, feature
}

/*
* Button hover styles.
* Button pseudo-class styles.
* Necessary until the following issue is resolved in Gutenberg:
* https://github.com/WordPress/gutenberg/issues/27075
*/

.wp-block-button:not(.is-style-outline) .wp-block-button__link {
.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background) {
padding: 0;
}
.wp-block-button__link:hover {
.wp-block-button__link:visited {
color: currentColor;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
text-decoration: underline;
color: var(--wp--preset--color--foreground);
color: var(--wp--preset--color--primary);
}
.wp-block-button__link.wp-block-button__link:active {
.wp-block-button:is(.is-style-outline) .wp-block-button__link:hover {
background: var(--wp--preset--color--foreground);
border-color: var(--wp--preset--color--foreground);
color: var(--wp--preset--color--background);
background-color: var(--wp--preset--color--primary);
}
.wp-block-button__link.wp-block-button__link:active {
color: var(--wp--preset--color--primary);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:focus {
color: var(--wp--preset--color--foreground);
border-bottom: 1px dashed var(--wp--preset--color--foreground);
color: var(--wp--preset--color--primary);
text-decoration-line: underline;
text-decoration-thickness: .08rem;
text-decoration-style: dotted;
text-underline-offset: .1rem;
}
.wp-block-button:is(.is-style-outline) .wp-block-button__link:focus {
outline: 1px dashed var(--wp--preset--color--foreground);
background-color: var(--wp--preset--color--primary);
border-color: var(--wp--preset--color--primary);
color: var(--wp--preset--color--background);
outline: 1px dotted var(--wp--preset--color--primary);
}

.wp-block-search__button.wp-block-search__button,
Expand Down Expand Up @@ -72,7 +85,8 @@ Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, feature
):is(
:focus
) {
outline: 1px dashed var(--wp--preset--color--foreground);
border: 1px solid var(--wp--preset--color--background);
outline: 1px dotted var(--wp--preset--color--foreground);
}

/*
Expand All @@ -86,7 +100,7 @@ Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, feature
.wp-block-file .wp-block-file__button {
background-color: var(--wp--preset--color--foreground);
border-radius: 0;
border: none;
border: 1px solid var(--wp--preset--color--foreground);
color: var(--wp--preset--color--background);
font-size: var(--wp--preset--typography--font-size--normal);
padding: calc(0.667em + 2px) calc(1.333em + 2px);
Expand Down Expand Up @@ -120,7 +134,9 @@ a:not(

a:not(
.wp-block-search__button,
.wp-block-button__link
.wp-block-button__link,
.wp-block-navigation-link__content,
.wp-block-navigation-item__content
):active {
text-decoration: none;
background-color: var(--wp--preset--color--tertiary);
Expand All @@ -132,24 +148,27 @@ a:not(

:is(
.wp-block-pages-list__item .wp-block-pages-list__item__link,
.wp-block-navigation-link__content
.wp-block-navigation-link__content,
.wp-block-navigation-item__content
):hover {
text-decoration: underline;
}

:is(
.wp-block-pages-list__item .wp-block-pages-list__item__link,
.wp-block-navigation-link__content
.wp-block-navigation-link__content,
.wp-block-navigation-item__content
):focus {
text-decoration-line: underline;
text-decoration-style: dotted;
}

:is(
.wp-block-pages-list__item .wp-block-pages-list__item__link,
.wp-block-navigation-link__content
.wp-block-navigation-link__content,
.wp-block-navigation-item__content
):active {
background-color: var(--wp--preset--color--tertiary);
text-decoration: underline;
}


Expand Down