Ver Fonte

Quadrat: fixing hover styles for buttons inside the subscribe form (#5033)

* Quadrat: fixing hover styles for buttons inside the subscribe form

* Quadrat: fix contact form submit button font weight

* Jetpack issue workaround: adding TODO commets to remove the CSS when the Jetpack issue is fixed

* Revert "Jetpack issue workaround: adding TODO commets to remove the CSS when the Jetpack issue is fixed"

This reverts commit b04559d5dea3a9daf967ec0bd7dcf3f4cb6d448d.

* Revert "Quadrat: fix contact form submit button font weight"

This reverts commit 49573f481bbd76a53402c6994db4246abc66e8a4.

* Revert "Quadrat: fixing hover styles for buttons inside the subscribe form"

This reverts commit efeb97a6ea069907b4fc59280ebaa2219dc8fc9b.

* Blockbase: Fixing button font-weight and hover styles
Matias Benedetto há 3 anos atrás
pai
commit
b9a4661d58
2 ficheiros alterados com 25 adições e 8 exclusões
  1. 23 7
      blockbase/assets/ponyfill.css
  2. 2 1
      blockbase/sass/blocks/_button.scss

+ 23 - 7
blockbase/assets/ponyfill.css

@@ -342,19 +342,24 @@ input[type=checkbox] + label {
  * Block Options
  */
 .wp-block-button.wp-block-button__link,
-.wp-block-button .wp-block-button__link {
+.wp-block-button .wp-block-button__link, .wp-block-button__link.wp-block-button__link,
+.wp-block-button__link .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));
 	text-decoration: none;
+	font-weight: var(--wp--custom--button--typography--font-weight);
 }
 
 .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-block-button .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus, .wp-block-button__link.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button__link.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button__link.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus,
+.wp-block-button__link .wp-block-button__link:not(.has-background):not(.has-text-color):hover,
+.wp-block-button__link .wp-block-button__link:not(.has-background):not(.has-text-color):focus,
+.wp-block-button__link .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);
@@ -368,12 +373,16 @@ input[type=checkbox] + label {
 .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 {
+.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg, .wp-block-button__link.wp-block-button__link:not(.has-background):not(.has-text-color):hover svg, .wp-block-button__link.wp-block-button__link:not(.has-background):not(.has-text-color):focus svg, .wp-block-button__link.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg,
+.wp-block-button__link .wp-block-button__link:not(.has-background):not(.has-text-color):hover svg,
+.wp-block-button__link .wp-block-button__link:not(.has-background):not(.has-text-color):focus svg,
+.wp-block-button__link .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,
-.wp-block-button.is-style-outline .wp-block-button__link {
+.wp-block-button.is-style-outline .wp-block-button__link, .wp-block-button__link.is-style-outline.wp-block-button__link,
+.wp-block-button__link.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);
@@ -391,7 +400,10 @@ input[type=checkbox] + label {
 .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-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus, .wp-block-button__link.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button__link.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button__link.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus,
+.wp-block-button__link.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover,
+.wp-block-button__link.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus,
+.wp-block-button__link.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);
@@ -405,12 +417,16 @@ input[type=checkbox] + label {
 .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 {
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg, .wp-block-button__link.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover svg, .wp-block-button__link.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus svg, .wp-block-button__link.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg,
+.wp-block-button__link.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover svg,
+.wp-block-button__link.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus svg,
+.wp-block-button__link.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 svg,
-.wp-block-button.is-style-outline .wp-block-button__link svg {
+.wp-block-button.is-style-outline .wp-block-button__link svg, .wp-block-button__link.is-style-outline.wp-block-button__link svg,
+.wp-block-button__link.is-style-outline .wp-block-button__link svg {
 	fill: var(--wp--custom--button--color--text);
 }
 

+ 2 - 1
blockbase/sass/blocks/_button.scss

@@ -6,12 +6,13 @@
 /**
  * Block Options
  */
-.wp-block-button {
+ .wp-block-button, .wp-block-button__link {
 	&.wp-block-button__link,
 	.wp-block-button__link {
 		@include button-hover-styles;
 		@include button-padding-styles;
 		text-decoration: none;
+		font-weight: var(--wp--custom--button--typography--font-weight);
 	}
 	&.is-style-outline {
 		&.wp-block-button__link,