Canard: fix button styles outside of entry-content (#5272)

* Canard: apply default button styles to all button blocks

Not just those in entry-content

* Add default button colors

* Include buttons in color annotation selectors

* Add missing default border color
This commit is contained in:
Sarah Norris 2022-01-07 09:27:54 +00:00 committed by GitHub
parent 9e7036e6c3
commit a2f379c557
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 33 additions and 11 deletions

View file

@ -236,6 +236,14 @@ p.has-drop-cap:not(:focus)::first-letter {
color: #fff;
}
.wp-block-button .wp-block-button__link:active,
.wp-block-button .wp-block-button__link:focus,
.wp-block-button .wp-block-button__link:hover {
color: #d11415;
background: #fff;
border-color: #d11415;
}
.is-style-outline .wp-block-button__link {
background: transparent;
border-color: currentColor;
@ -245,12 +253,14 @@ p.has-drop-cap:not(:focus)::first-letter {
color: #d11415;
}
.entry-content .wp-block-button .wp-block-button__link:active,
.entry-content .wp-block-button .wp-block-button__link:focus,
.entry-content .wp-block-button .wp-block-button__link:hover {
color: #d11415;
background: #fff;
border-color: #d11415;
.is-style-outline .wp-block-button__link:not(.has-background):active,
.is-style-outline .wp-block-button__link:not(.has-background):hover,
.is-style-outline .wp-block-button__link:not(.has-background):focus,
.is-style-outline .wp-block-button__link:not(.has-text-color):active,
.is-style-outline .wp-block-button__link:not(.has-text-color):hover,
.is-style-outline .wp-block-button__link:not(.has-text-color):focus {
border-color: currentColor;
color: currentColor;
}
/* Seperator */

View file

@ -341,7 +341,10 @@ add_color_rule( 'fg1', '#222222', array(
array(
'.toggled .menu-toggle,
.sidebar-toggle.toggled,
.toggled .search-toggle', 'border-color'
.toggled .search-toggle,
.wp-block-button .wp-block-button__link:active,
.wp-block-button .wp-block-button__link:focus,
.wp-block-button .wp-block-button__link:hover', 'border-color'
),
array(
'.main-navigation.toggled > div:before,
@ -383,7 +386,13 @@ add_color_rule( 'fg1', '#222222', array(
'.rtl .secondary-navigation li + li', 'border-right-color', 'fg1', 2
),
array(
'.site-info .sep', 'color', 'fg1', 2
'.site-info .sep,
.wp-block-button .wp-block-button__link:active,
.wp-block-button .wp-block-button__link:focus,
.wp-block-button .wp-block-button__link:hover,
.is-style-outline>.wp-block-button__link:not(.has-text-color):active,
.is-style-outline>.wp-block-button__link:not(.has-text-color):focus,
.is-style-outline>.wp-block-button__link:not(.has-text-color):hover', 'color', 'fg1', 2
),
// #555555
@ -456,7 +465,8 @@ add_color_rule( 'link', '#d11415', array(
#infinite-handle span button:focus,
#infinite-handle span button:hover,
.widget_akismet_widget .a-stats a,
.milestone-widget .milestone-header', 'background-color', 'bg', 2
.milestone-widget .milestone-header,
.wp-block-button .wp-block-button__link', 'background-color', 'bg', 2
),
array(
'button,
@ -472,7 +482,8 @@ add_color_rule( 'link', '#d11415', array(
#infinite-handle span button:active,
#infinite-handle span button:focus,
#infinite-handle span button:hover,
.widget_akismet_widget .a-stats a', 'border-color', 'bg', 2
.widget_akismet_widget .a-stats a,
.wp-block-button .wp-block-button__link', 'border-color', 'bg', 2
),
array(
'pre', 'border-left-color', 'bg', 2
@ -542,7 +553,8 @@ add_color_rule( 'link', '#d11415', array(
.widget_akismet_widget .a-stats a:hover .count,
.widget_authors > ul > li > a:active,
.widget_authors > ul > li > a:focus,
.widget_authors > ul > li > a:hover', 'color', 'bg', 2
.widget_authors > ul > li > a:hover,
.is-style-outline>.wp-block-button__link:not(.has-text-color)', 'color', 'bg', 2
),
), __( 'Accent' ) );