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

Blockbase: separated mixins from rules for the button block (#3985)

Browse source 
* separated mixins from rules for the button block
* Removed unnecessary stylistic hover styles that were breaking on Chrome

Co-authored-by: Jason Crist <jcrist@pbking.com>
This commit is contained in:
Maggie 2021-06-04 18:21:16 +02:00 • committed by GitHub
parent e62ba85888
commit 8ee9e7e37a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 80 additions and 746 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

505
blockbase/assets/ponyfill.css
View file

@ -261,26 +261,6 @@ input[type=checkbox] + label {
fill: var(--wp--custom--button--color--text);
}
.wp-block-button.wp-block-button__link:hover, .wp-block-button.wp-block-button__link:focus, .wp-block-button.wp-block-button__link.has-focus,
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus,
.wp-block-button .wp-block-button__link.has-focus {
--wp--custom--button--border--radius: var(--wp--custom--button--hover--border--radius);
--wp--custom--button--spacing--padding--top: var(--wp--custom--button--hover--spacing--padding--top);
--wp--custom--button--spacing--padding--bottom: var(--wp--custom--button--hover--spacing--padding--bottom);
--wp--custom--button--spacing--padding--left: var(--wp--custom--button--hover--spacing--padding--left);
--wp--custom--button--spacing--padding--right: var(--wp--custom--button--hover--spacing--padding--right);
--wp--custom--button--typography--font-weight: var(--wp--custom--button--hover--typography--font-weight)
--wp--custom--button--typography--font-family: var(--wp--custom--button--hover--typography--font-family);
--wp--custom--button--typography--font-size: var(--wp--custom--button--hover--typography--font-size);
--wp--custom--button--typography--line-height: var(--wp--custom--button--hover--typography--line-height);
font-weight: var(--wp--custom--button--typography--font-weight);
font-family: var(--wp--custom--button--typography--font-family);
font-size: var(--wp--custom--button--typography--font-size);
line-height: var(--wp--custom--button--typography--line-height);
text-decoration: none;
}
.wp-block-button.wp-block-button__link svg,
.wp-block-button .wp-block-button__link svg {
fill: var(--wp--custom--button--color--text);
@ -323,26 +303,6 @@ input[type=checkbox] + label {
fill: var(--wp--custom--button--color--text);
}
.wp-block-button.is-style-outline.wp-block-button__link:hover, .wp-block-button.is-style-outline.wp-block-button__link:focus, .wp-block-button.is-style-outline.wp-block-button__link.has-focus,
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus,
.wp-block-button.is-style-outline .wp-block-button__link.has-focus {
--wp--custom--button--border--radius: var(--wp--custom--button--hover--border--radius);
--wp--custom--button--spacing--padding--top: var(--wp--custom--button--hover--spacing--padding--top);
--wp--custom--button--spacing--padding--bottom: var(--wp--custom--button--hover--spacing--padding--bottom);
--wp--custom--button--spacing--padding--left: var(--wp--custom--button--hover--spacing--padding--left);
--wp--custom--button--spacing--padding--right: var(--wp--custom--button--hover--spacing--padding--right);
--wp--custom--button--typography--font-weight: var(--wp--custom--button--hover--typography--font-weight)
--wp--custom--button--typography--font-family: var(--wp--custom--button--hover--typography--font-family);
--wp--custom--button--typography--font-size: var(--wp--custom--button--hover--typography--font-size);
--wp--custom--button--typography--line-height: var(--wp--custom--button--hover--typography--line-height);
font-weight: var(--wp--custom--button--typography--font-weight);
font-family: var(--wp--custom--button--typography--font-family);
font-size: var(--wp--custom--button--typography--font-size);
line-height: var(--wp--custom--button--typography--line-height);
text-decoration: none;
}
.wp-block-button.is-style-outline.wp-block-button__link svg,
.wp-block-button.is-style-outline .wp-block-button__link svg {
fill: var(--wp--custom--button--color--text);
@ -406,143 +366,6 @@ p.has-drop-cap:not(:focus):first-letter {
font-weight: var(--wp--custom--post-author--font-weight);
}
/**
* Button
*/
/**
* Block Options
*/
.wp-block-button.wp-block-button__link,
.wp-block-button .wp-block-button__link {
border-width: 0;
padding-top: calc( var(--wp--custom--button--spacing--padding--top) + var(--wp--custom--button--border--width));
padding-bottom: calc( var(--wp--custom--button--spacing--padding--bottom) + var(--wp--custom--button--border--width));
padding-left: calc( var(--wp--custom--button--spacing--padding--left) + var(--wp--custom--button--border--width));
padding-right: calc( var(--wp--custom--button--spacing--padding--right) + var(--wp--custom--button--border--width));
font-weight: var(--wp--custom--button--typography--font-weight);
font-family: var(--wp--custom--button--typography--font-family);
font-size: var(--wp--custom--button--typography--font-size);
line-height: var(--wp--custom--button--typography--line-height);
text-decoration: none;
opacity: 1;
color: var(--wp--custom--button--color--text);
background-color: var(--wp--custom--button--color--background);
border-color: currentColor;
border-radius: var(--wp--custom--button--border--radius);
}
.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 {
--wp--custom--button--color--text: var(--wp--custom--button--hover--color--text);
--wp--custom--button--color--background: var(--wp--custom--button--hover--color--background);
--wp--custom--button--border--color: var(--wp--custom--button--hover--border--color);
opacity: 1;
color: var(--wp--custom--button--color--text);
background-color: var(--wp--custom--button--color--background);
border-color: currentColor;
border-color: var(--wp--custom--button--border--color);
}
.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--text);
}
.wp-block-button.wp-block-button__link:hover, .wp-block-button.wp-block-button__link:focus, .wp-block-button.wp-block-button__link.has-focus,
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus,
.wp-block-button .wp-block-button__link.has-focus {
--wp--custom--button--border--radius: var(--wp--custom--button--hover--border--radius);
--wp--custom--button--spacing--padding--top: var(--wp--custom--button--hover--spacing--padding--top);
--wp--custom--button--spacing--padding--bottom: var(--wp--custom--button--hover--spacing--padding--bottom);
--wp--custom--button--spacing--padding--left: var(--wp--custom--button--hover--spacing--padding--left);
--wp--custom--button--spacing--padding--right: var(--wp--custom--button--hover--spacing--padding--right);
--wp--custom--button--typography--font-weight: var(--wp--custom--button--hover--typography--font-weight)
--wp--custom--button--typography--font-family: var(--wp--custom--button--hover--typography--font-family);
--wp--custom--button--typography--font-size: var(--wp--custom--button--hover--typography--font-size);
--wp--custom--button--typography--line-height: var(--wp--custom--button--hover--typography--line-height);
font-weight: var(--wp--custom--button--typography--font-weight);
font-family: var(--wp--custom--button--typography--font-family);
font-size: var(--wp--custom--button--typography--font-size);
line-height: var(--wp--custom--button--typography--line-height);
text-decoration: none;
}
.wp-block-button.wp-block-button__link svg,
.wp-block-button .wp-block-button__link svg {
fill: var(--wp--custom--button--color--text);
}
.wp-block-button.is-style-outline.wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
--wp--custom--button--color--text: var(--wp--custom--button--border--color);
--wp--custom--button--color--background: transparent;
border-style: var(--wp--custom--button--border--style);
border-width: var(--wp--custom--button--border--width);
padding-top: var(--wp--custom--button--spacing--padding--top);
padding-bottom: var(--wp--custom--button--spacing--padding--bottom);
padding-left: var(--wp--custom--button--spacing--padding--left);
padding-right: var(--wp--custom--button--spacing--padding--right);
opacity: 1;
color: var(--wp--custom--button--color--text);
background-color: var(--wp--custom--button--color--background);
border-color: currentColor;
}
.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus,
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover,
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus,
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus {
--wp--custom--button--color--text: var(--wp--custom--button--hover--color--text);
--wp--custom--button--color--background: var(--wp--custom--button--hover--color--background);
--wp--custom--button--border--color: var(--wp--custom--button--hover--border--color);
opacity: 1;
color: var(--wp--custom--button--color--text);
background-color: var(--wp--custom--button--color--background);
border-color: currentColor;
border-color: var(--wp--custom--button--border--color);
}
.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover svg, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus svg, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg,
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover svg,
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus svg,
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg {
fill: var(--wp--custom--button--color--text);
}
.wp-block-button.is-style-outline.wp-block-button__link:hover, .wp-block-button.is-style-outline.wp-block-button__link:focus, .wp-block-button.is-style-outline.wp-block-button__link.has-focus,
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus,
.wp-block-button.is-style-outline .wp-block-button__link.has-focus {
--wp--custom--button--border--radius: var(--wp--custom--button--hover--border--radius);
--wp--custom--button--spacing--padding--top: var(--wp--custom--button--hover--spacing--padding--top);
--wp--custom--button--spacing--padding--bottom: var(--wp--custom--button--hover--spacing--padding--bottom);
--wp--custom--button--spacing--padding--left: var(--wp--custom--button--hover--spacing--padding--left);
--wp--custom--button--spacing--padding--right: var(--wp--custom--button--hover--spacing--padding--right);
--wp--custom--button--typography--font-weight: var(--wp--custom--button--hover--typography--font-weight)
--wp--custom--button--typography--font-family: var(--wp--custom--button--hover--typography--font-family);
--wp--custom--button--typography--font-size: var(--wp--custom--button--hover--typography--font-size);
--wp--custom--button--typography--line-height: var(--wp--custom--button--hover--typography--line-height);
font-weight: var(--wp--custom--button--typography--font-weight);
font-family: var(--wp--custom--button--typography--font-family);
font-size: var(--wp--custom--button--typography--font-size);
line-height: var(--wp--custom--button--typography--line-height);
text-decoration: none;
}
.wp-block-button.is-style-outline.wp-block-button__link svg,
.wp-block-button.is-style-outline .wp-block-button__link svg {
fill: var(--wp--custom--button--color--text);
}
.wp-block-buttons .wp-block-button:last-child {
margin-bottom: 0;
}
.wp-block-post-comments .comment {
font-size: var(--wp--custom--form--typography--font-size);
}
@ -588,23 +411,6 @@ p.has-drop-cap:not(:focus):first-letter {
fill: var(--wp--custom--button--color--text);
}
.wp-block-post-comments input[type="submit"]:hover, .wp-block-post-comments input[type="submit"]:focus, .wp-block-post-comments input[type="submit"].has-focus, .wp-block-post-comments .reply a:hover, .wp-block-post-comments .reply a:focus, .wp-block-post-comments .reply a.has-focus {
--wp--custom--button--border--radius: var(--wp--custom--button--hover--border--radius);
--wp--custom--button--spacing--padding--top: var(--wp--custom--button--hover--spacing--padding--top);
--wp--custom--button--spacing--padding--bottom: var(--wp--custom--button--hover--spacing--padding--bottom);
--wp--custom--button--spacing--padding--left: var(--wp--custom--button--hover--spacing--padding--left);
--wp--custom--button--spacing--padding--right: var(--wp--custom--button--hover--spacing--padding--right);
--wp--custom--button--typography--font-weight: var(--wp--custom--button--hover--typography--font-weight)
--wp--custom--button--typography--font-family: var(--wp--custom--button--hover--typography--font-family);
--wp--custom--button--typography--font-size: var(--wp--custom--button--hover--typography--font-size);
--wp--custom--button--typography--line-height: var(--wp--custom--button--hover--typography--line-height);
font-weight: var(--wp--custom--button--typography--font-weight);
font-family: var(--wp--custom--button--typography--font-family);
font-size: var(--wp--custom--button--typography--font-size);
line-height: var(--wp--custom--button--typography--line-height);
text-decoration: none;
}
.wp-block-post-comments .reply a {
display: inline-block;
}
@ -700,143 +506,6 @@ p.has-drop-cap:not(:focus):first-letter {
font-style: var(--wp--custom--quote--citation--typography--font-style);
}
/**
* Button
*/
/**
* Block Options
*/
.wp-block-button.wp-block-button__link,
.wp-block-button .wp-block-button__link {
border-width: 0;
padding-top: calc( var(--wp--custom--button--spacing--padding--top) + var(--wp--custom--button--border--width));
padding-bottom: calc( var(--wp--custom--button--spacing--padding--bottom) + var(--wp--custom--button--border--width));
padding-left: calc( var(--wp--custom--button--spacing--padding--left) + var(--wp--custom--button--border--width));
padding-right: calc( var(--wp--custom--button--spacing--padding--right) + var(--wp--custom--button--border--width));
font-weight: var(--wp--custom--button--typography--font-weight);
font-family: var(--wp--custom--button--typography--font-family);
font-size: var(--wp--custom--button--typography--font-size);
line-height: var(--wp--custom--button--typography--line-height);
text-decoration: none;
opacity: 1;
color: var(--wp--custom--button--color--text);
background-color: var(--wp--custom--button--color--background);
border-color: currentColor;
border-radius: var(--wp--custom--button--border--radius);
}
.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 {
--wp--custom--button--color--text: var(--wp--custom--button--hover--color--text);
--wp--custom--button--color--background: var(--wp--custom--button--hover--color--background);
--wp--custom--button--border--color: var(--wp--custom--button--hover--border--color);
opacity: 1;
color: var(--wp--custom--button--color--text);
background-color: var(--wp--custom--button--color--background);
border-color: currentColor;
border-color: var(--wp--custom--button--border--color);
}
.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--text);
}
.wp-block-button.wp-block-button__link:hover, .wp-block-button.wp-block-button__link:focus, .wp-block-button.wp-block-button__link.has-focus,
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus,
.wp-block-button .wp-block-button__link.has-focus {
--wp--custom--button--border--radius: var(--wp--custom--button--hover--border--radius);
--wp--custom--button--spacing--padding--top: var(--wp--custom--button--hover--spacing--padding--top);
--wp--custom--button--spacing--padding--bottom: var(--wp--custom--button--hover--spacing--padding--bottom);
--wp--custom--button--spacing--padding--left: var(--wp--custom--button--hover--spacing--padding--left);
--wp--custom--button--spacing--padding--right: var(--wp--custom--button--hover--spacing--padding--right);
--wp--custom--button--typography--font-weight: var(--wp--custom--button--hover--typography--font-weight)
--wp--custom--button--typography--font-family: var(--wp--custom--button--hover--typography--font-family);
--wp--custom--button--typography--font-size: var(--wp--custom--button--hover--typography--font-size);
--wp--custom--button--typography--line-height: var(--wp--custom--button--hover--typography--line-height);
font-weight: var(--wp--custom--button--typography--font-weight);
font-family: var(--wp--custom--button--typography--font-family);
font-size: var(--wp--custom--button--typography--font-size);
line-height: var(--wp--custom--button--typography--line-height);
text-decoration: none;
}
.wp-block-button.wp-block-button__link svg,
.wp-block-button .wp-block-button__link svg {
fill: var(--wp--custom--button--color--text);
}
.wp-block-button.is-style-outline.wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
--wp--custom--button--color--text: var(--wp--custom--button--border--color);
--wp--custom--button--color--background: transparent;
border-style: var(--wp--custom--button--border--style);
border-width: var(--wp--custom--button--border--width);
padding-top: var(--wp--custom--button--spacing--padding--top);
padding-bottom: var(--wp--custom--button--spacing--padding--bottom);
padding-left: var(--wp--custom--button--spacing--padding--left);
padding-right: var(--wp--custom--button--spacing--padding--right);
opacity: 1;
color: var(--wp--custom--button--color--text);
background-color: var(--wp--custom--button--color--background);
border-color: currentColor;
}
.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus,
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover,
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus,
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus {
--wp--custom--button--color--text: var(--wp--custom--button--hover--color--text);
--wp--custom--button--color--background: var(--wp--custom--button--hover--color--background);
--wp--custom--button--border--color: var(--wp--custom--button--hover--border--color);
opacity: 1;
color: var(--wp--custom--button--color--text);
background-color: var(--wp--custom--button--color--background);
border-color: currentColor;
border-color: var(--wp--custom--button--border--color);
}
.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover svg, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus svg, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg,
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover svg,
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus svg,
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg {
fill: var(--wp--custom--button--color--text);
}
.wp-block-button.is-style-outline.wp-block-button__link:hover, .wp-block-button.is-style-outline.wp-block-button__link:focus, .wp-block-button.is-style-outline.wp-block-button__link.has-focus,
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus,
.wp-block-button.is-style-outline .wp-block-button__link.has-focus {
--wp--custom--button--border--radius: var(--wp--custom--button--hover--border--radius);
--wp--custom--button--spacing--padding--top: var(--wp--custom--button--hover--spacing--padding--top);
--wp--custom--button--spacing--padding--bottom: var(--wp--custom--button--hover--spacing--padding--bottom);
--wp--custom--button--spacing--padding--left: var(--wp--custom--button--hover--spacing--padding--left);
--wp--custom--button--spacing--padding--right: var(--wp--custom--button--hover--spacing--padding--right);
--wp--custom--button--typography--font-weight: var(--wp--custom--button--hover--typography--font-weight)
--wp--custom--button--typography--font-family: var(--wp--custom--button--hover--typography--font-family);
--wp--custom--button--typography--font-size: var(--wp--custom--button--hover--typography--font-size);
--wp--custom--button--typography--line-height: var(--wp--custom--button--hover--typography--line-height);
font-weight: var(--wp--custom--button--typography--font-weight);
font-family: var(--wp--custom--button--typography--font-family);
font-size: var(--wp--custom--button--typography--font-size);
line-height: var(--wp--custom--button--typography--line-height);
text-decoration: none;
}
.wp-block-button.is-style-outline.wp-block-button__link svg,
.wp-block-button.is-style-outline .wp-block-button__link svg {
fill: var(--wp--custom--button--color--text);
}
.wp-block-buttons .wp-block-button:last-child {
margin-bottom: 0;
}
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
padding: var(--wp--custom--form--padding);
border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
@ -897,26 +566,6 @@ 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:hover, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:focus, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button.has-focus,
.wp-block-search .wp-block-search__button:hover,
.wp-block-search .wp-block-search__button:focus,
.wp-block-search .wp-block-search__button.has-focus {
--wp--custom--button--border--radius: var(--wp--custom--button--hover--border--radius);
--wp--custom--button--spacing--padding--top: var(--wp--custom--button--hover--spacing--padding--top);
--wp--custom--button--spacing--padding--bottom: var(--wp--custom--button--hover--spacing--padding--bottom);
--wp--custom--button--spacing--padding--left: var(--wp--custom--button--hover--spacing--padding--left);
--wp--custom--button--spacing--padding--right: var(--wp--custom--button--hover--spacing--padding--right);
--wp--custom--button--typography--font-weight: var(--wp--custom--button--hover--typography--font-weight)
--wp--custom--button--typography--font-family: var(--wp--custom--button--hover--typography--font-family);
--wp--custom--button--typography--font-size: var(--wp--custom--button--hover--typography--font-size);
--wp--custom--button--typography--line-height: var(--wp--custom--button--hover--typography--line-height);
font-weight: var(--wp--custom--button--typography--font-weight);
font-family: var(--wp--custom--button--typography--font-family);
font-size: var(--wp--custom--button--typography--font-size);
line-height: var(--wp--custom--button--typography--line-height);
text-decoration: none;
}
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button.has-icon,
.wp-block-search .wp-block-search__button.has-icon {
line-height: 0;
@ -931,143 +580,6 @@ p.has-drop-cap:not(:focus):first-letter {
width: var(--wp--custom--separator--width);
}
/**
* Button
*/
/**
* Block Options
*/
.wp-block-button.wp-block-button__link,
.wp-block-button .wp-block-button__link {
border-width: 0;
padding-top: calc( var(--wp--custom--button--spacing--padding--top) + var(--wp--custom--button--border--width));
padding-bottom: calc( var(--wp--custom--button--spacing--padding--bottom) + var(--wp--custom--button--border--width));
padding-left: calc( var(--wp--custom--button--spacing--padding--left) + var(--wp--custom--button--border--width));
padding-right: calc( var(--wp--custom--button--spacing--padding--right) + var(--wp--custom--button--border--width));
font-weight: var(--wp--custom--button--typography--font-weight);
font-family: var(--wp--custom--button--typography--font-family);
font-size: var(--wp--custom--button--typography--font-size);
line-height: var(--wp--custom--button--typography--line-height);
text-decoration: none;
opacity: 1;
color: var(--wp--custom--button--color--text);
background-color: var(--wp--custom--button--color--background);
border-color: currentColor;
border-radius: var(--wp--custom--button--border--radius);
}
.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 {
--wp--custom--button--color--text: var(--wp--custom--button--hover--color--text);
--wp--custom--button--color--background: var(--wp--custom--button--hover--color--background);
--wp--custom--button--border--color: var(--wp--custom--button--hover--border--color);
opacity: 1;
color: var(--wp--custom--button--color--text);
background-color: var(--wp--custom--button--color--background);
border-color: currentColor;
border-color: var(--wp--custom--button--border--color);
}
.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--text);
}
.wp-block-button.wp-block-button__link:hover, .wp-block-button.wp-block-button__link:focus, .wp-block-button.wp-block-button__link.has-focus,
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus,
.wp-block-button .wp-block-button__link.has-focus {
--wp--custom--button--border--radius: var(--wp--custom--button--hover--border--radius);
--wp--custom--button--spacing--padding--top: var(--wp--custom--button--hover--spacing--padding--top);
--wp--custom--button--spacing--padding--bottom: var(--wp--custom--button--hover--spacing--padding--bottom);
--wp--custom--button--spacing--padding--left: var(--wp--custom--button--hover--spacing--padding--left);
--wp--custom--button--spacing--padding--right: var(--wp--custom--button--hover--spacing--padding--right);
--wp--custom--button--typography--font-weight: var(--wp--custom--button--hover--typography--font-weight)
--wp--custom--button--typography--font-family: var(--wp--custom--button--hover--typography--font-family);
--wp--custom--button--typography--font-size: var(--wp--custom--button--hover--typography--font-size);
--wp--custom--button--typography--line-height: var(--wp--custom--button--hover--typography--line-height);
font-weight: var(--wp--custom--button--typography--font-weight);
font-family: var(--wp--custom--button--typography--font-family);
font-size: var(--wp--custom--button--typography--font-size);
line-height: var(--wp--custom--button--typography--line-height);
text-decoration: none;
}
.wp-block-button.wp-block-button__link svg,
.wp-block-button .wp-block-button__link svg {
fill: var(--wp--custom--button--color--text);
}
.wp-block-button.is-style-outline.wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
--wp--custom--button--color--text: var(--wp--custom--button--border--color);
--wp--custom--button--color--background: transparent;
border-style: var(--wp--custom--button--border--style);
border-width: var(--wp--custom--button--border--width);
padding-top: var(--wp--custom--button--spacing--padding--top);
padding-bottom: var(--wp--custom--button--spacing--padding--bottom);
padding-left: var(--wp--custom--button--spacing--padding--left);
padding-right: var(--wp--custom--button--spacing--padding--right);
opacity: 1;
color: var(--wp--custom--button--color--text);
background-color: var(--wp--custom--button--color--background);
border-color: currentColor;
}
.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus,
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover,
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus,
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus {
--wp--custom--button--color--text: var(--wp--custom--button--hover--color--text);
--wp--custom--button--color--background: var(--wp--custom--button--hover--color--background);
--wp--custom--button--border--color: var(--wp--custom--button--hover--border--color);
opacity: 1;
color: var(--wp--custom--button--color--text);
background-color: var(--wp--custom--button--color--background);
border-color: currentColor;
border-color: var(--wp--custom--button--border--color);
}
.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover svg, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus svg, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg,
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover svg,
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus svg,
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg {
fill: var(--wp--custom--button--color--text);
}
.wp-block-button.is-style-outline.wp-block-button__link:hover, .wp-block-button.is-style-outline.wp-block-button__link:focus, .wp-block-button.is-style-outline.wp-block-button__link.has-focus,
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus,
.wp-block-button.is-style-outline .wp-block-button__link.has-focus {
--wp--custom--button--border--radius: var(--wp--custom--button--hover--border--radius);
--wp--custom--button--spacing--padding--top: var(--wp--custom--button--hover--spacing--padding--top);
--wp--custom--button--spacing--padding--bottom: var(--wp--custom--button--hover--spacing--padding--bottom);
--wp--custom--button--spacing--padding--left: var(--wp--custom--button--hover--spacing--padding--left);
--wp--custom--button--spacing--padding--right: var(--wp--custom--button--hover--spacing--padding--right);
--wp--custom--button--typography--font-weight: var(--wp--custom--button--hover--typography--font-weight)
--wp--custom--button--typography--font-family: var(--wp--custom--button--hover--typography--font-family);
--wp--custom--button--typography--font-size: var(--wp--custom--button--hover--typography--font-size);
--wp--custom--button--typography--line-height: var(--wp--custom--button--hover--typography--line-height);
font-weight: var(--wp--custom--button--typography--font-weight);
font-family: var(--wp--custom--button--typography--font-family);
font-size: var(--wp--custom--button--typography--font-size);
line-height: var(--wp--custom--button--typography--line-height);
text-decoration: none;
}
.wp-block-button.is-style-outline.wp-block-button__link svg,
.wp-block-button.is-style-outline .wp-block-button__link svg {
fill: var(--wp--custom--button--color--text);
}
.wp-block-buttons .wp-block-button:last-child {
margin-bottom: 0;
}
.wp-block-file .wp-block-file__button {
border-width: 0;
padding-top: calc( var(--wp--custom--button--spacing--padding--top) + var(--wp--custom--button--border--width));
@ -1106,23 +618,6 @@ p.has-drop-cap:not(:focus):first-letter {
fill: var(--wp--custom--button--color--text);
}
.wp-block-file .wp-block-file__button:hover, .wp-block-file .wp-block-file__button:focus, .wp-block-file .wp-block-file__button.has-focus {
--wp--custom--button--border--radius: var(--wp--custom--button--hover--border--radius);
--wp--custom--button--spacing--padding--top: var(--wp--custom--button--hover--spacing--padding--top);
--wp--custom--button--spacing--padding--bottom: var(--wp--custom--button--hover--spacing--padding--bottom);
--wp--custom--button--spacing--padding--left: var(--wp--custom--button--hover--spacing--padding--left);
--wp--custom--button--spacing--padding--right: var(--wp--custom--button--hover--spacing--padding--right);
--wp--custom--button--typography--font-weight: var(--wp--custom--button--hover--typography--font-weight)
--wp--custom--button--typography--font-family: var(--wp--custom--button--hover--typography--font-family);
--wp--custom--button--typography--font-size: var(--wp--custom--button--hover--typography--font-size);
--wp--custom--button--typography--line-height: var(--wp--custom--button--hover--typography--line-height);
font-weight: var(--wp--custom--button--typography--font-weight);
font-family: var(--wp--custom--button--typography--font-family);
font-size: var(--wp--custom--button--typography--font-size);
line-height: var(--wp--custom--button--typography--line-height);
text-decoration: none;
}
.wp-block-table figcaption {
font-size: var(--wp--custom--table--figcaption--typography--font-size);
text-align: center;

2
blockbase/sass/base/_mixins.scss
View file

@ -11,4 +11,4 @@
position: absolute;
width: 1px;
word-wrap: normal !important;
}
}

64
blockbase/sass/blocks/_button-mixins.scss Normal file
View file

@ -0,0 +1,64 @@
// NOTE: These remain for the styling of buttons that are NOT blocks and is used elsewhere. This can be removed when those no longer exist.
@mixin button-main-styles {
@include button-padding-styles;
@include button-typography-styles;
@include button-color-styles;
border-radius: var(--wp--custom--button--border--radius);
}
@mixin button-color-styles {
opacity: 1;
color: var(--wp--custom--button--color--text);
background-color: var(--wp--custom--button--color--background);
border-color: currentColor;
svg {
fill: var(--wp--custom--button--color--text);
}
}
//standard Button padding. Account for desired padding size and the size of the border width (so that the total height of
//standard and outline buttons are equal.
@mixin button-padding-styles {
border-width: 0;
padding-top: calc( var(--wp--custom--button--spacing--padding--top) + var(--wp--custom--button--border--width) );
padding-bottom: calc( var(--wp--custom--button--spacing--padding--bottom) + var(--wp--custom--button--border--width) );
padding-left: calc( var(--wp--custom--button--spacing--padding--left) + var(--wp--custom--button--border--width) );
padding-right: calc( var(--wp--custom--button--spacing--padding--right) + var(--wp--custom--button--border--width) );
}
@mixin button-typography-styles {
font-weight: var(--wp--custom--button--typography--font-weight);
font-family: var(--wp--custom--button--typography--font-family);
font-size: var(--wp--custom--button--typography--font-size);
line-height: var(--wp--custom--button--typography--line-height);
text-decoration: none; // Needed because link styles inside .entry-content add a text decoration
}
//apply outline styles. apply padding that does NOT account for border width (as the border width is applied here).
@mixin button-border-styles {
border-style: var(--wp--custom--button--border--style);
border-width: var(--wp--custom--button--border--width);
padding-top: var(--wp--custom--button--spacing--padding--top);
padding-bottom: var(--wp--custom--button--spacing--padding--bottom);
padding-left: var(--wp--custom--button--spacing--padding--left);
padding-right: var(--wp--custom--button--spacing--padding--right);
}
// NOTE: These remain for the hover styling of blocks. This can be removed when the button block has configurable hover states.
// The mechanism below ONLY CHANGES CSS VARIABLES that are already applied to properties (above)
@mixin button-hover-styles {
//The following changes should ONLY be changed if the user has NOT set a custom color
&:not(.has-background):not(.has-text-color) {
&:hover,
&:focus,
&.has-focus {
//change the color variables to the hover equivalent
--wp--custom--button--color--text: var(--wp--custom--button--hover--color--text);
--wp--custom--button--color--background: var(--wp--custom--button--hover--color--background);
--wp--custom--button--border--color: var(--wp--custom--button--hover--border--color);
@include button-color-styles;
border-color: var(--wp--custom--button--border--color);
}
}
}

81
blockbase/sass/blocks/_button.scss
View file

@ -1,87 +1,8 @@
@import 'button-mixins';
/**
* Button
*/
// NOTE: These remain for the styling of buttons that are NOT blocks and is used elsewhere. This can be removed when those no longer exist.
@mixin button-main-styles {
@include button-padding-styles;
@include button-typography-styles;
@include button-color-styles;
border-radius: var(--wp--custom--button--border--radius);
}
@mixin button-color-styles {
opacity: 1;
color: var(--wp--custom--button--color--text);
background-color: var(--wp--custom--button--color--background);
border-color: currentColor;
svg {
fill: var(--wp--custom--button--color--text);
}
}
//standard Button padding. Account for desired padding size and the size of the border width (so that the total height of
//standard and outline buttons are equal.
@mixin button-padding-styles {
border-width: 0;
padding-top: calc( var(--wp--custom--button--spacing--padding--top) + var(--wp--custom--button--border--width) );
padding-bottom: calc( var(--wp--custom--button--spacing--padding--bottom) + var(--wp--custom--button--border--width) );
padding-left: calc( var(--wp--custom--button--spacing--padding--left) + var(--wp--custom--button--border--width) );
padding-right: calc( var(--wp--custom--button--spacing--padding--right) + var(--wp--custom--button--border--width) );
}
@mixin button-typography-styles {
font-weight: var(--wp--custom--button--typography--font-weight);
font-family: var(--wp--custom--button--typography--font-family);
font-size: var(--wp--custom--button--typography--font-size);
line-height: var(--wp--custom--button--typography--line-height);
text-decoration: none; // Needed because link styles inside .entry-content add a text decoration
}
//apply outline styles. apply padding that does NOT account for border width (as the border width is applied here).
@mixin button-border-styles {
border-style: var(--wp--custom--button--border--style);
border-width: var(--wp--custom--button--border--width);
padding-top: var(--wp--custom--button--spacing--padding--top);
padding-bottom: var(--wp--custom--button--spacing--padding--bottom);
padding-left: var(--wp--custom--button--spacing--padding--left);
padding-right: var(--wp--custom--button--spacing--padding--right);
}
// NOTE: These remain for the hover styling of blocks. This can be removed when the button block has configurable hover states.
// The mechanism below ONLY CHANGES CSS VARIABLES that are already applied to properties (above)
@mixin button-hover-styles {
//The following changes should ONLY be changed if the user has NOT set a custom color
&:not(.has-background):not(.has-text-color) {
&:hover,
&:focus,
&.has-focus {
//change the color variables to the hover equivalent
--wp--custom--button--color--text: var(--wp--custom--button--hover--color--text);
--wp--custom--button--color--background: var(--wp--custom--button--hover--color--background);
--wp--custom--button--border--color: var(--wp--custom--button--hover--border--color);
@include button-color-styles;
border-color: var(--wp--custom--button--border--color);
}
}
//The following styles can ALWAYS be changed, even if the user has set a custom color.
&:hover,
&:focus,
&.has-focus {
--wp--custom--button--border--radius: var(--wp--custom--button--hover--border--radius);
--wp--custom--button--spacing--padding--top: var(--wp--custom--button--hover--spacing--padding--top);
--wp--custom--button--spacing--padding--bottom: var(--wp--custom--button--hover--spacing--padding--bottom);
--wp--custom--button--spacing--padding--left: var(--wp--custom--button--hover--spacing--padding--left);
--wp--custom--button--spacing--padding--right: var(--wp--custom--button--hover--spacing--padding--right);
--wp--custom--button--typography--font-weight: var(--wp--custom--button--hover--typography--font-weight)
--wp--custom--button--typography--font-family: var(--wp--custom--button--hover--typography--font-family);
--wp--custom--button--typography--font-size: var(--wp--custom--button--hover--typography--font-size);
--wp--custom--button--typography--line-height: var(--wp--custom--button--hover--typography--line-height);
@include button-typography-styles;
}
}
/**
* Block Options
*/

2
blockbase/sass/blocks/_file.scss
View file

@ -1,4 +1,4 @@
@import 'button';
@import 'button-mixins';
// TODO: Remove when https://github.com/WordPress/gutenberg/issues/27760 is fixed
.wp-block-file .wp-block-file__button {

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

@ -1,4 +1,4 @@
@import 'button';
@import 'button-mixins';
.wp-block-post-comments {
.comment {

2
blockbase/sass/blocks/_search.scss
View file

@ -1,4 +1,4 @@
@import 'button';
@import 'button-mixins';
.wp-block-search {

1
blockbase/theme.json
View file

@ -64,6 +64,7 @@
},
"hover": {
"color": {
"text": "var(--wp--custom--color--background)",
"background": "#006ba1"
},
"border": {

5
mayland-blocks/theme.json
View file

@ -72,6 +72,7 @@
},
"hover": {
"color": {
"text": "var(--wp--custom--color--background)",
"background": "var(--wp--custom--color--tertiary)"
},
"border": {
@ -167,8 +168,8 @@
},
"post-content": {
"padding": {
"left": "var(--wp--custom--margin--horizontal)",
"right": "var(--wp--custom--margin--horizontal)"
"left": "20px",
"right": "20px"
}
},
"pullquote": {

145
quadrat/assets/theme.css
View file

@ -209,143 +209,6 @@ ul ul {
align-items: flex-end;
}
/**
* Button
*/
/**
* Block Options
*/
.wp-block-button.wp-block-button__link,
.wp-block-button .wp-block-button__link {
border-width: 0;
padding-top: calc( var(--wp--custom--button--spacing--padding--top) + var(--wp--custom--button--border--width));
padding-bottom: calc( var(--wp--custom--button--spacing--padding--bottom) + var(--wp--custom--button--border--width));
padding-left: calc( var(--wp--custom--button--spacing--padding--left) + var(--wp--custom--button--border--width));
padding-right: calc( var(--wp--custom--button--spacing--padding--right) + var(--wp--custom--button--border--width));
font-weight: var(--wp--custom--button--typography--font-weight);
font-family: var(--wp--custom--button--typography--font-family);
font-size: var(--wp--custom--button--typography--font-size);
line-height: var(--wp--custom--button--typography--line-height);
text-decoration: none;
opacity: 1;
color: var(--wp--custom--button--color--text);
background-color: var(--wp--custom--button--color--background);
border-color: currentColor;
border-radius: var(--wp--custom--button--border--radius);
}
.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 {
--wp--custom--button--color--text: var(--wp--custom--button--hover--color--text);
--wp--custom--button--color--background: var(--wp--custom--button--hover--color--background);
--wp--custom--button--border--color: var(--wp--custom--button--hover--border--color);
opacity: 1;
color: var(--wp--custom--button--color--text);
background-color: var(--wp--custom--button--color--background);
border-color: currentColor;
border-color: var(--wp--custom--button--border--color);
}
.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--text);
}
.wp-block-button.wp-block-button__link:hover, .wp-block-button.wp-block-button__link:focus, .wp-block-button.wp-block-button__link.has-focus,
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus,
.wp-block-button .wp-block-button__link.has-focus {
--wp--custom--button--border--radius: var(--wp--custom--button--hover--border--radius);
--wp--custom--button--spacing--padding--top: var(--wp--custom--button--hover--spacing--padding--top);
--wp--custom--button--spacing--padding--bottom: var(--wp--custom--button--hover--spacing--padding--bottom);
--wp--custom--button--spacing--padding--left: var(--wp--custom--button--hover--spacing--padding--left);
--wp--custom--button--spacing--padding--right: var(--wp--custom--button--hover--spacing--padding--right);
--wp--custom--button--typography--font-weight: var(--wp--custom--button--hover--typography--font-weight)
--wp--custom--button--typography--font-family: var(--wp--custom--button--hover--typography--font-family);
--wp--custom--button--typography--font-size: var(--wp--custom--button--hover--typography--font-size);
--wp--custom--button--typography--line-height: var(--wp--custom--button--hover--typography--line-height);
font-weight: var(--wp--custom--button--typography--font-weight);
font-family: var(--wp--custom--button--typography--font-family);
font-size: var(--wp--custom--button--typography--font-size);
line-height: var(--wp--custom--button--typography--line-height);
text-decoration: none;
}
.wp-block-button.wp-block-button__link svg,
.wp-block-button .wp-block-button__link svg {
fill: var(--wp--custom--button--color--text);
}
.wp-block-button.is-style-outline.wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
--wp--custom--button--color--text: var(--wp--custom--button--border--color);
--wp--custom--button--color--background: transparent;
border-style: var(--wp--custom--button--border--style);
border-width: var(--wp--custom--button--border--width);
padding-top: var(--wp--custom--button--spacing--padding--top);
padding-bottom: var(--wp--custom--button--spacing--padding--bottom);
padding-left: var(--wp--custom--button--spacing--padding--left);
padding-right: var(--wp--custom--button--spacing--padding--right);
opacity: 1;
color: var(--wp--custom--button--color--text);
background-color: var(--wp--custom--button--color--background);
border-color: currentColor;
}
.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus,
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover,
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus,
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus {
--wp--custom--button--color--text: var(--wp--custom--button--hover--color--text);
--wp--custom--button--color--background: var(--wp--custom--button--hover--color--background);
--wp--custom--button--border--color: var(--wp--custom--button--hover--border--color);
opacity: 1;
color: var(--wp--custom--button--color--text);
background-color: var(--wp--custom--button--color--background);
border-color: currentColor;
border-color: var(--wp--custom--button--border--color);
}
.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover svg, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus svg, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg,
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover svg,
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus svg,
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg {
fill: var(--wp--custom--button--color--text);
}
.wp-block-button.is-style-outline.wp-block-button__link:hover, .wp-block-button.is-style-outline.wp-block-button__link:focus, .wp-block-button.is-style-outline.wp-block-button__link.has-focus,
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus,
.wp-block-button.is-style-outline .wp-block-button__link.has-focus {
--wp--custom--button--border--radius: var(--wp--custom--button--hover--border--radius);
--wp--custom--button--spacing--padding--top: var(--wp--custom--button--hover--spacing--padding--top);
--wp--custom--button--spacing--padding--bottom: var(--wp--custom--button--hover--spacing--padding--bottom);
--wp--custom--button--spacing--padding--left: var(--wp--custom--button--hover--spacing--padding--left);
--wp--custom--button--spacing--padding--right: var(--wp--custom--button--hover--spacing--padding--right);
--wp--custom--button--typography--font-weight: var(--wp--custom--button--hover--typography--font-weight)
--wp--custom--button--typography--font-family: var(--wp--custom--button--hover--typography--font-family);
--wp--custom--button--typography--font-size: var(--wp--custom--button--hover--typography--font-size);
--wp--custom--button--typography--line-height: var(--wp--custom--button--hover--typography--line-height);
font-weight: var(--wp--custom--button--typography--font-weight);
font-family: var(--wp--custom--button--typography--font-family);
font-size: var(--wp--custom--button--typography--font-size);
line-height: var(--wp--custom--button--typography--line-height);
text-decoration: none;
}
.wp-block-button.is-style-outline.wp-block-button__link svg,
.wp-block-button.is-style-outline .wp-block-button__link svg {
fill: var(--wp--custom--button--color--text);
}
.wp-block-buttons .wp-block-button:last-child {
margin-bottom: 0;
}
.wp-block-post-comments {
font-size: var(--wp--preset--font-size--normal);
line-height: var(--wp--custom--line-height--body);
@ -530,19 +393,11 @@ ul ul {
border-top: 1px solid var(--wp--custom--color--primary);
}
.wp-block-query-pagination .wp-block-query-pagination-previous {
justify-self: start;
}
.wp-block-query-pagination .wp-block-query-pagination-previous::before {
content: "←";
margin-right: 0.5em;
}
.wp-block-query-pagination .wp-block-query-pagination-next {
justify-self: end;
}
.wp-block-query-pagination .wp-block-query-pagination-next::after {
content: "→";
margin-left: 0.5em;

2
quadrat/sass/blocks/_post-comments.scss
View file

@ -1,4 +1,4 @@
@import "../../../blockbase/sass/blocks/button";
@import "../../../blockbase/sass/blocks/button-mixins";
.wp-block-post-comments {

8
quadrat/theme.json
View file

@ -8,10 +8,6 @@
{
"name": "footer",
"area": "footer"
},
{
"name": "navigation",
"area": "navigation"
}
],
"settings": {
@ -68,8 +64,8 @@
},
"hover": {
"color": {
"background": "var(--wp--custom--color--background)",
"text": "var(--wp--custom--color--foreground)"
"text": "var(--wp--custom--color--foreground)",
"background": "var(--wp--custom--color--background)"
},
"border": {
"color": "var(--wp--custom--color--foreground)"

7
seedlet-blocks/theme.json
View file

@ -110,6 +110,7 @@
},
"hover": {
"color": {
"text": "var(--wp--custom--color--background)",
"background": "#336D58"
},
"border": {
@ -205,8 +206,8 @@
},
"post-content": {
"padding": {
"left": "var(--wp--custom--margin--horizontal)",
"right": "var(--wp--custom--margin--horizontal)"
"left": "20px",
"right": "20px"
}
},
"pullquote": {
@ -371,7 +372,7 @@
},
"core/navigation": {
"typography": {
"fontSize": "var(--wp--preset--font-size--small)"
"fontSize": "var(--wp--preset--font-size--normal)"
}
},
"core/navigation-link": {