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

fixed hover states for buttons on bcb

Browse source
This commit is contained in:
Maggie Cabrera 2021-03-30 18:01:35 +02:00
parent c647e8d132
commit 4e17dacd51
2 changed files with 53 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

122
blank-canvas-blocks/assets/ponyfill.css
View file

@ -232,24 +232,19 @@ input[type=checkbox] + label {
text-decoration: none;
}
.wp-block-button.wp-block-button__link:not(.has-background):active,
.wp-block-button .wp-block-button__link:not(.has-background):active {
color: var(--button--color-text-active);
background-color: var(--button--color-background-active);
.wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus,
.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):hover,
.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):focus,
.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus {
color: var(--wp--custom--button--color--hover-text);
background-color: var(--wp--custom--button--color--hover-background);
border-color: var(--wp--custom--button--color--hover-background);
}
.wp-block-button.wp-block-button__link:not(.has-background):hover, .wp-block-button.wp-block-button__link:not(.has-background):focus, .wp-block-button.wp-block-button__link:not(.has-background).has-focus,
.wp-block-button .wp-block-button__link:not(.has-background):hover,
.wp-block-button .wp-block-button__link:not(.has-background):focus,
.wp-block-button .wp-block-button__link:not(.has-background).has-focus {
color: var(--button--color-text-hover);
background-color: var(--button--color-background-hover);
}
.wp-block-button.wp-block-button__link:not(.has-background):hover svg, .wp-block-button.wp-block-button__link:not(.has-background):focus svg, .wp-block-button.wp-block-button__link:not(.has-background).has-focus svg,
.wp-block-button .wp-block-button__link:not(.has-background):hover svg,
.wp-block-button .wp-block-button__link:not(.has-background):focus svg,
.wp-block-button .wp-block-button__link:not(.has-background).has-focus svg {
.wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover svg, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus svg, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg,
.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):hover svg,
.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):focus svg,
.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg {
fill: var(--wp--custom--button--color--hover-text);
}
@ -464,24 +459,19 @@ p.has-drop-cap:not(:focus):first-letter {
text-decoration: none;
}
.wp-block-button.wp-block-button__link:not(.has-background):active,
.wp-block-button .wp-block-button__link:not(.has-background):active {
color: var(--button--color-text-active);
background-color: var(--button--color-background-active);
.wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus,
.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):hover,
.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):focus,
.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus {
color: var(--wp--custom--button--color--hover-text);
background-color: var(--wp--custom--button--color--hover-background);
border-color: var(--wp--custom--button--color--hover-background);
}
.wp-block-button.wp-block-button__link:not(.has-background):hover, .wp-block-button.wp-block-button__link:not(.has-background):focus, .wp-block-button.wp-block-button__link:not(.has-background).has-focus,
.wp-block-button .wp-block-button__link:not(.has-background):hover,
.wp-block-button .wp-block-button__link:not(.has-background):focus,
.wp-block-button .wp-block-button__link:not(.has-background).has-focus {
color: var(--button--color-text-hover);
background-color: var(--button--color-background-hover);
}
.wp-block-button.wp-block-button__link:not(.has-background):hover svg, .wp-block-button.wp-block-button__link:not(.has-background):focus svg, .wp-block-button.wp-block-button__link:not(.has-background).has-focus svg,
.wp-block-button .wp-block-button__link:not(.has-background):hover svg,
.wp-block-button .wp-block-button__link:not(.has-background):focus svg,
.wp-block-button .wp-block-button__link:not(.has-background).has-focus svg {
.wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover svg, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus svg, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg,
.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):hover svg,
.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):focus svg,
.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg {
fill: var(--wp--custom--button--color--hover-text);
}
@ -523,24 +513,19 @@ p.has-drop-cap:not(:focus):first-letter {
fill: var(--wp--custom--button--color--text);
}
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):active,
.wp-block-search .wp-block-search__button:not(.has-background):active {
color: var(--button--color-text-active);
background-color: var(--button--color-background-active);
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color):hover, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color):focus, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color).has-focus,
.wp-block-search .wp-block-search__button:not(.has-background):not(.has-text-color):hover,
.wp-block-search .wp-block-search__button:not(.has-background):not(.has-text-color):focus,
.wp-block-search .wp-block-search__button:not(.has-background):not(.has-text-color).has-focus {
color: var(--wp--custom--button--color--hover-text);
background-color: var(--wp--custom--button--color--hover-background);
border-color: var(--wp--custom--button--color--hover-background);
}
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):hover, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):focus, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background).has-focus,
.wp-block-search .wp-block-search__button:not(.has-background):hover,
.wp-block-search .wp-block-search__button:not(.has-background):focus,
.wp-block-search .wp-block-search__button:not(.has-background).has-focus {
color: var(--button--color-text-hover);
background-color: var(--button--color-background-hover);
}
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):hover svg, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):focus svg, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background).has-focus svg,
.wp-block-search .wp-block-search__button:not(.has-background):hover svg,
.wp-block-search .wp-block-search__button:not(.has-background):focus svg,
.wp-block-search .wp-block-search__button:not(.has-background).has-focus svg {
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color):hover svg, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color):focus svg, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color).has-focus svg,
.wp-block-search .wp-block-search__button:not(.has-background):not(.has-text-color):hover svg,
.wp-block-search .wp-block-search__button:not(.has-background):not(.has-text-color):focus svg,
.wp-block-search .wp-block-search__button:not(.has-background):not(.has-text-color).has-focus svg {
fill: var(--wp--custom--button--color--hover-text);
}
@ -569,24 +554,19 @@ p.has-drop-cap:not(:focus):first-letter {
text-decoration: none;
}
.wp-block-button.wp-block-button__link:not(.has-background):active,
.wp-block-button .wp-block-button__link:not(.has-background):active {
color: var(--button--color-text-active);
background-color: var(--button--color-background-active);
.wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus,
.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):hover,
.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):focus,
.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus {
color: var(--wp--custom--button--color--hover-text);
background-color: var(--wp--custom--button--color--hover-background);
border-color: var(--wp--custom--button--color--hover-background);
}
.wp-block-button.wp-block-button__link:not(.has-background):hover, .wp-block-button.wp-block-button__link:not(.has-background):focus, .wp-block-button.wp-block-button__link:not(.has-background).has-focus,
.wp-block-button .wp-block-button__link:not(.has-background):hover,
.wp-block-button .wp-block-button__link:not(.has-background):focus,
.wp-block-button .wp-block-button__link:not(.has-background).has-focus {
color: var(--button--color-text-hover);
background-color: var(--button--color-background-hover);
}
.wp-block-button.wp-block-button__link:not(.has-background):hover svg, .wp-block-button.wp-block-button__link:not(.has-background):focus svg, .wp-block-button.wp-block-button__link:not(.has-background).has-focus svg,
.wp-block-button .wp-block-button__link:not(.has-background):hover svg,
.wp-block-button .wp-block-button__link:not(.has-background):focus svg,
.wp-block-button .wp-block-button__link:not(.has-background).has-focus svg {
.wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover svg, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus svg, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg,
.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):hover svg,
.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):focus svg,
.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg {
fill: var(--wp--custom--button--color--hover-text);
}
@ -612,17 +592,13 @@ p.has-drop-cap:not(:focus):first-letter {
fill: var(--wp--custom--button--color--text);
}
.wp-block-file .wp-block-file__button:not(.has-background):active {
color: var(--button--color-text-active);
background-color: var(--button--color-background-active);
.wp-block-file .wp-block-file__button:not(.has-background):not(.has-text-color):hover, .wp-block-file .wp-block-file__button:not(.has-background):not(.has-text-color):focus, .wp-block-file .wp-block-file__button:not(.has-background):not(.has-text-color).has-focus {
color: var(--wp--custom--button--color--hover-text);
background-color: var(--wp--custom--button--color--hover-background);
border-color: var(--wp--custom--button--color--hover-background);
}
.wp-block-file .wp-block-file__button:not(.has-background):hover, .wp-block-file .wp-block-file__button:not(.has-background):focus, .wp-block-file .wp-block-file__button:not(.has-background).has-focus {
color: var(--button--color-text-hover);
background-color: var(--button--color-background-hover);
}
.wp-block-file .wp-block-file__button:not(.has-background):hover svg, .wp-block-file .wp-block-file__button:not(.has-background):focus svg, .wp-block-file .wp-block-file__button:not(.has-background).has-focus svg {
.wp-block-file .wp-block-file__button:not(.has-background):not(.has-text-color):hover svg, .wp-block-file .wp-block-file__button:not(.has-background):not(.has-text-color):focus svg, .wp-block-file .wp-block-file__button:not(.has-background):not(.has-text-color).has-focus svg {
fill: var(--wp--custom--button--color--hover-text);
}

12
blank-canvas-blocks/sass/blocks/_button.scss
View file

@ -21,17 +21,13 @@
// NOTE: These remain for the hover styling of blocks. This can be removed when the button block has configurable hover states.
@mixin button-hover-styles {
&:not(.has-background) {
&:active {
color: var(--button--color-text-active);
background-color: var(--button--color-background-active);
}
&:not(.has-background):not(.has-text-color) {
&:hover,
&:focus,
&.has-focus {
color: var(--button--color-text-hover);
background-color: var(--button--color-background-hover);
color: var(--wp--custom--button--color--hover-text);
background-color: var(--wp--custom--button--color--hover-background);
border-color: var(--wp--custom--button--color--hover-background);
svg {
fill: var(--wp--custom--button--color--hover-text);
}