瀏覽代碼

Merge pull request #3130 from Automattic/fix/seedlet/hover-buttons-outline

Seedlet: Fix for hover state on outline buttons
Maggie 4 年之前
父節點
當前提交
2c4836a9fe
共有 4 個文件被更改,包括 186 次插入96 次删除
  1. 7 0
      seedlet/assets/sass/base/_extends.scss
  2. 25 10
      seedlet/assets/sass/blocks/button/_style.scss
  3. 77 43
      seedlet/style-rtl.css
  4. 77 43
      seedlet/style.css

+ 7 - 0
seedlet/assets/sass/base/_extends.scss

@@ -1,4 +1,9 @@
 @mixin button-style {
 @mixin button-style {
+	@include button-main-styles;
+	@include button-hover-styles;
+}
+
+@mixin button-main-styles {
 	@include crop-text(var(--button--line-height));
 	@include crop-text(var(--button--line-height));
 	color: var(--button--color-text);
 	color: var(--button--color-text);
 	cursor: pointer;
 	cursor: pointer;
@@ -10,7 +15,9 @@
 	border-width: 0;
 	border-width: 0;
 	text-decoration: none;
 	text-decoration: none;
 	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
 	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+}
 
 
+@mixin button-hover-styles {
 	&:not(.has-background) {
 	&:not(.has-background) {
 		&:active {
 		&:active {
 			color: var(--button--color-text-active);
 			color: var(--button--color-text-active);

+ 25 - 10
seedlet/assets/sass/blocks/button/_style.scss

@@ -3,8 +3,7 @@
  */
  */
 button,
 button,
 .button,
 .button,
-input[type="submit"],
-.wp-block-button__link {
+input[type="submit"] {
 	// Extend button style
 	// Extend button style
 	@extend %button-style;
 	@extend %button-style;
 }
 }
@@ -19,28 +18,44 @@ input[type="submit"],
 	font-weight: var(--button--font-weight);
 	font-weight: var(--button--font-weight);
 	line-height: var(--button--line-height);
 	line-height: var(--button--line-height);
 
 
+	&:not(.is-style-outline) .wp-block-button__link {
+		@include button-hover-styles;
+	}
+
+	&.wp-block-button__link,
+	.wp-block-button__link {
+		@include button-main-styles;
+	}
+
 	// Outline Style
 	// Outline Style
 	&.is-style-outline {
 	&.is-style-outline {
 		border: none;
 		border: none;
 
 
 		&.wp-block-button__link,
 		&.wp-block-button__link,
 		.wp-block-button__link {
 		.wp-block-button__link {
-			background: transparent;
 			border: var(--button--border-width) solid currentcolor;
 			border: var(--button--border-width) solid currentcolor;
 			padding: var(--button--padding-vertical) var(--button--padding-horizontal);
 			padding: var(--button--padding-vertical) var(--button--padding-horizontal);
 
 
-			&:not(.has-text-color) {
-				color: var(--button--color-background);
+			&:not(.has-background) {
+				background: transparent;
 			}
 			}
 
 
-			&:active {
+			&:not(.has-text-color) {
 				color: var(--button--color-background);
 				color: var(--button--color-background);
 			}
 			}
 
 
-			&:hover,
-			&:focus,
-			&.has-focus {
-				color: var(--button--color-background-hover);
+			&:not(.has-text-color),
+			&.has-secondary-color{
+
+				&:active {
+					color: var(--button--color-background);
+				}
+
+				&:hover,
+				&:focus,
+				&.has-focus {
+					color: var(--button--color-background-hover);
+				}
 			}
 			}
 		}
 		}
 	}
 	}

+ 77 - 43
seedlet/style-rtl.css

@@ -577,8 +577,7 @@ body {
  */
  */
 button,
 button,
 .button,
 .button,
-input[type="submit"],
-.wp-block-button__link, .a8c-posts-list__view-all, button[data-load-more-btn] {
+input[type="submit"], .a8c-posts-list__view-all, button[data-load-more-btn] {
 	line-height: var(--button--line-height);
 	line-height: var(--button--line-height);
 	color: var(--button--color-text);
 	color: var(--button--color-text);
 	cursor: pointer;
 	cursor: pointer;
@@ -594,11 +593,9 @@ input[type="submit"],
 
 
 button:before,
 button:before,
 .button:before,
 .button:before,
-input[type="submit"]:before,
-.wp-block-button__link:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before, button:after,
+input[type="submit"]:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before, button:after,
 .button:after,
 .button:after,
-input[type="submit"]:after,
-.wp-block-button__link:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
+input[type="submit"]:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
 	content: '';
 	content: '';
 	display: block;
 	display: block;
 	height: 0;
 	height: 0;
@@ -607,36 +604,30 @@ input[type="submit"]:after,
 
 
 button:before,
 button:before,
 .button:before,
 .button:before,
-input[type="submit"]:before,
-.wp-block-button__link:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before {
+input[type="submit"]:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before {
 	margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
 	margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
 }
 }
 
 
 button:after,
 button:after,
 .button:after,
 .button:after,
-input[type="submit"]:after,
-.wp-block-button__link:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
+input[type="submit"]:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
 	margin-top: -calc(.5em * var(--button--line-height) + -.39);
 	margin-top: -calc(.5em * var(--button--line-height) + -.39);
 }
 }
 
 
 button:not(.has-background):active,
 button:not(.has-background):active,
 .button:not(.has-background):active,
 .button:not(.has-background):active,
-input:not(.has-background):active[type="submit"],
-.wp-block-button__link:not(.has-background):active, .a8c-posts-list__view-all:not(.has-background):active {
+input:not(.has-background):active[type="submit"], .a8c-posts-list__view-all:not(.has-background):active {
 	color: var(--button--color-text-active);
 	color: var(--button--color-text-active);
 	background-color: var(--button--color-background-active);
 	background-color: var(--button--color-background-active);
 }
 }
 
 
 button:not(.has-background):hover,
 button:not(.has-background):hover,
 .button:not(.has-background):hover,
 .button:not(.has-background):hover,
-input:not(.has-background):hover[type="submit"],
-.wp-block-button__link:not(.has-background):hover, .a8c-posts-list__view-all:not(.has-background):hover, button:not(.has-background):focus,
+input:not(.has-background):hover[type="submit"], .a8c-posts-list__view-all:not(.has-background):hover, button:not(.has-background):focus,
 .button:not(.has-background):focus,
 .button:not(.has-background):focus,
-input:not(.has-background):focus[type="submit"],
-.wp-block-button__link:not(.has-background):focus, .a8c-posts-list__view-all:not(.has-background):focus, button:not(.has-background).has-focus,
+input:not(.has-background):focus[type="submit"], .a8c-posts-list__view-all:not(.has-background):focus, button:not(.has-background).has-focus,
 .button:not(.has-background).has-focus,
 .button:not(.has-background).has-focus,
-input:not(.has-background).has-focus[type="submit"],
-.wp-block-button__link:not(.has-background).has-focus, .a8c-posts-list__view-all:not(.has-background).has-focus {
+input:not(.has-background).has-focus[type="submit"], .a8c-posts-list__view-all:not(.has-background).has-focus {
 	color: var(--button--color-text-hover);
 	color: var(--button--color-text-hover);
 	background-color: var(--button--color-background-hover);
 	background-color: var(--button--color-background-hover);
 }
 }
@@ -1241,31 +1232,83 @@ object {
 	line-height: var(--button--line-height);
 	line-height: var(--button--line-height);
 }
 }
 
 
+.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):active {
+	color: var(--button--color-text-active);
+	background-color: var(--button--color-background-active);
+}
+
+.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):hover, .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):focus, .wp-block-button:not(.is-style-outline) .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,
+.wp-block-button .wp-block-button__link {
+	line-height: var(--button--line-height);
+	color: var(--button--color-text);
+	cursor: pointer;
+	font-weight: var(--button--font-weight);
+	font-family: var(--button--font-family);
+	font-size: var(--button--font-size);
+	background-color: var(--button--color-background);
+	border-radius: var(--button--border-radius);
+	border-width: 0;
+	text-decoration: none;
+	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+}
+
+.wp-block-button.wp-block-button__link:before, .wp-block-button.wp-block-button__link:after,
+.wp-block-button .wp-block-button__link:before,
+.wp-block-button .wp-block-button__link:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+.wp-block-button.wp-block-button__link:before,
+.wp-block-button .wp-block-button__link:before {
+	margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
+}
+
+.wp-block-button.wp-block-button__link:after,
+.wp-block-button .wp-block-button__link:after {
+	margin-top: -calc(.5em * var(--button--line-height) + -.39);
+}
+
 .wp-block-button.is-style-outline {
 .wp-block-button.is-style-outline {
 	border: none;
 	border: none;
 }
 }
 
 
 .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.is-style-outline .wp-block-button__link {
-	background: transparent;
 	border: var(--button--border-width) solid currentcolor;
 	border: var(--button--border-width) solid currentcolor;
 	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
 	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
 }
 }
 
 
+.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background),
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background) {
+	background: transparent;
+}
+
 .wp-block-button.is-style-outline.wp-block-button__link:not(.has-text-color),
 .wp-block-button.is-style-outline.wp-block-button__link:not(.has-text-color),
 .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) {
 .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) {
 	color: var(--button--color-background);
 	color: var(--button--color-background);
 }
 }
 
 
-.wp-block-button.is-style-outline.wp-block-button__link:active,
-.wp-block-button.is-style-outline .wp-block-button__link:active {
+.wp-block-button.is-style-outline.wp-block-button__link:not(.has-text-color):active, .wp-block-button.is-style-outline.wp-block-button__link.has-secondary-color:active,
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color):active,
+.wp-block-button.is-style-outline .wp-block-button__link.has-secondary-color:active {
 	color: var(--button--color-background);
 	color: var(--button--color-background);
 }
 }
 
 
-.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-block-button.is-style-outline.wp-block-button__link:not(.has-text-color):hover, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-text-color):focus, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-text-color).has-focus, .wp-block-button.is-style-outline.wp-block-button__link.has-secondary-color:hover, .wp-block-button.is-style-outline.wp-block-button__link.has-secondary-color:focus, .wp-block-button.is-style-outline.wp-block-button__link.has-secondary-color.has-focus,
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color):hover,
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color):focus,
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-focus,
+.wp-block-button.is-style-outline .wp-block-button__link.has-secondary-color:hover,
+.wp-block-button.is-style-outline .wp-block-button__link.has-secondary-color:focus,
+.wp-block-button.is-style-outline .wp-block-button__link.has-secondary-color.has-focus {
 	color: var(--button--color-background-hover);
 	color: var(--button--color-background-hover);
 }
 }
 
 
@@ -4116,8 +4159,7 @@ img#wpstats {
 
 
 button,
 button,
 .button,
 .button,
-input[type="submit"],
-.wp-block-button__link, .a8c-posts-list__view-all, button[data-load-more-btn] {
+input[type="submit"], .a8c-posts-list__view-all, button[data-load-more-btn] {
 	line-height: var(--button--line-height);
 	line-height: var(--button--line-height);
 	color: var(--button--color-text);
 	color: var(--button--color-text);
 	cursor: pointer;
 	cursor: pointer;
@@ -4133,11 +4175,9 @@ input[type="submit"],
 
 
 button:before,
 button:before,
 .button:before,
 .button:before,
-input[type="submit"]:before,
-.wp-block-button__link:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before, button:after,
+input[type="submit"]:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before, button:after,
 .button:after,
 .button:after,
-input[type="submit"]:after,
-.wp-block-button__link:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
+input[type="submit"]:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
 	content: '';
 	content: '';
 	display: block;
 	display: block;
 	height: 0;
 	height: 0;
@@ -4146,36 +4186,30 @@ input[type="submit"]:after,
 
 
 button:before,
 button:before,
 .button:before,
 .button:before,
-input[type="submit"]:before,
-.wp-block-button__link:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before {
+input[type="submit"]:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before {
 	margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
 	margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
 }
 }
 
 
 button:after,
 button:after,
 .button:after,
 .button:after,
-input[type="submit"]:after,
-.wp-block-button__link:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
+input[type="submit"]:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
 	margin-top: -calc(.5em * var(--button--line-height) + -.39);
 	margin-top: -calc(.5em * var(--button--line-height) + -.39);
 }
 }
 
 
 button:not(.has-background):active,
 button:not(.has-background):active,
 .button:not(.has-background):active,
 .button:not(.has-background):active,
-input:not(.has-background):active[type="submit"],
-.wp-block-button__link:not(.has-background):active, .a8c-posts-list__view-all:not(.has-background):active {
+input:not(.has-background):active[type="submit"], .a8c-posts-list__view-all:not(.has-background):active {
 	color: var(--button--color-text-active);
 	color: var(--button--color-text-active);
 	background-color: var(--button--color-background-active);
 	background-color: var(--button--color-background-active);
 }
 }
 
 
 button:not(.has-background):hover,
 button:not(.has-background):hover,
 .button:not(.has-background):hover,
 .button:not(.has-background):hover,
-input:not(.has-background):hover[type="submit"],
-.wp-block-button__link:not(.has-background):hover, .a8c-posts-list__view-all:not(.has-background):hover, button:not(.has-background):focus,
+input:not(.has-background):hover[type="submit"], .a8c-posts-list__view-all:not(.has-background):hover, button:not(.has-background):focus,
 .button:not(.has-background):focus,
 .button:not(.has-background):focus,
-input:not(.has-background):focus[type="submit"],
-.wp-block-button__link:not(.has-background):focus, .a8c-posts-list__view-all:not(.has-background):focus, button:not(.has-background).has-focus,
+input:not(.has-background):focus[type="submit"], .a8c-posts-list__view-all:not(.has-background):focus, button:not(.has-background).has-focus,
 .button:not(.has-background).has-focus,
 .button:not(.has-background).has-focus,
-input:not(.has-background).has-focus[type="submit"],
-.wp-block-button__link:not(.has-background).has-focus, .a8c-posts-list__view-all:not(.has-background).has-focus {
+input:not(.has-background).has-focus[type="submit"], .a8c-posts-list__view-all:not(.has-background).has-focus {
 	color: var(--button--color-text-hover);
 	color: var(--button--color-text-hover);
 	background-color: var(--button--color-background-hover);
 	background-color: var(--button--color-background-hover);
 }
 }

+ 77 - 43
seedlet/style.css

@@ -577,8 +577,7 @@ body {
  */
  */
 button,
 button,
 .button,
 .button,
-input[type="submit"],
-.wp-block-button__link, .a8c-posts-list__view-all, button[data-load-more-btn] {
+input[type="submit"], .a8c-posts-list__view-all, button[data-load-more-btn] {
 	line-height: var(--button--line-height);
 	line-height: var(--button--line-height);
 	color: var(--button--color-text);
 	color: var(--button--color-text);
 	cursor: pointer;
 	cursor: pointer;
@@ -594,11 +593,9 @@ input[type="submit"],
 
 
 button:before,
 button:before,
 .button:before,
 .button:before,
-input[type="submit"]:before,
-.wp-block-button__link:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before, button:after,
+input[type="submit"]:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before, button:after,
 .button:after,
 .button:after,
-input[type="submit"]:after,
-.wp-block-button__link:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
+input[type="submit"]:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
 	content: '';
 	content: '';
 	display: block;
 	display: block;
 	height: 0;
 	height: 0;
@@ -607,36 +604,30 @@ input[type="submit"]:after,
 
 
 button:before,
 button:before,
 .button:before,
 .button:before,
-input[type="submit"]:before,
-.wp-block-button__link:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before {
+input[type="submit"]:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before {
 	margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
 	margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
 }
 }
 
 
 button:after,
 button:after,
 .button:after,
 .button:after,
-input[type="submit"]:after,
-.wp-block-button__link:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
+input[type="submit"]:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
 	margin-top: -calc(.5em * var(--button--line-height) + -.39);
 	margin-top: -calc(.5em * var(--button--line-height) + -.39);
 }
 }
 
 
 button:not(.has-background):active,
 button:not(.has-background):active,
 .button:not(.has-background):active,
 .button:not(.has-background):active,
-input:not(.has-background):active[type="submit"],
-.wp-block-button__link:not(.has-background):active, .a8c-posts-list__view-all:not(.has-background):active {
+input:not(.has-background):active[type="submit"], .a8c-posts-list__view-all:not(.has-background):active {
 	color: var(--button--color-text-active);
 	color: var(--button--color-text-active);
 	background-color: var(--button--color-background-active);
 	background-color: var(--button--color-background-active);
 }
 }
 
 
 button:not(.has-background):hover,
 button:not(.has-background):hover,
 .button:not(.has-background):hover,
 .button:not(.has-background):hover,
-input:not(.has-background):hover[type="submit"],
-.wp-block-button__link:not(.has-background):hover, .a8c-posts-list__view-all:not(.has-background):hover, button:not(.has-background):focus,
+input:not(.has-background):hover[type="submit"], .a8c-posts-list__view-all:not(.has-background):hover, button:not(.has-background):focus,
 .button:not(.has-background):focus,
 .button:not(.has-background):focus,
-input:not(.has-background):focus[type="submit"],
-.wp-block-button__link:not(.has-background):focus, .a8c-posts-list__view-all:not(.has-background):focus, button:not(.has-background).has-focus,
+input:not(.has-background):focus[type="submit"], .a8c-posts-list__view-all:not(.has-background):focus, button:not(.has-background).has-focus,
 .button:not(.has-background).has-focus,
 .button:not(.has-background).has-focus,
-input:not(.has-background).has-focus[type="submit"],
-.wp-block-button__link:not(.has-background).has-focus, .a8c-posts-list__view-all:not(.has-background).has-focus {
+input:not(.has-background).has-focus[type="submit"], .a8c-posts-list__view-all:not(.has-background).has-focus {
 	color: var(--button--color-text-hover);
 	color: var(--button--color-text-hover);
 	background-color: var(--button--color-background-hover);
 	background-color: var(--button--color-background-hover);
 }
 }
@@ -1241,31 +1232,83 @@ object {
 	line-height: var(--button--line-height);
 	line-height: var(--button--line-height);
 }
 }
 
 
+.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):active {
+	color: var(--button--color-text-active);
+	background-color: var(--button--color-background-active);
+}
+
+.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):hover, .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):focus, .wp-block-button:not(.is-style-outline) .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,
+.wp-block-button .wp-block-button__link {
+	line-height: var(--button--line-height);
+	color: var(--button--color-text);
+	cursor: pointer;
+	font-weight: var(--button--font-weight);
+	font-family: var(--button--font-family);
+	font-size: var(--button--font-size);
+	background-color: var(--button--color-background);
+	border-radius: var(--button--border-radius);
+	border-width: 0;
+	text-decoration: none;
+	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+}
+
+.wp-block-button.wp-block-button__link:before, .wp-block-button.wp-block-button__link:after,
+.wp-block-button .wp-block-button__link:before,
+.wp-block-button .wp-block-button__link:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+.wp-block-button.wp-block-button__link:before,
+.wp-block-button .wp-block-button__link:before {
+	margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
+}
+
+.wp-block-button.wp-block-button__link:after,
+.wp-block-button .wp-block-button__link:after {
+	margin-top: -calc(.5em * var(--button--line-height) + -.39);
+}
+
 .wp-block-button.is-style-outline {
 .wp-block-button.is-style-outline {
 	border: none;
 	border: none;
 }
 }
 
 
 .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.is-style-outline .wp-block-button__link {
-	background: transparent;
 	border: var(--button--border-width) solid currentcolor;
 	border: var(--button--border-width) solid currentcolor;
 	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
 	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
 }
 }
 
 
+.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background),
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background) {
+	background: transparent;
+}
+
 .wp-block-button.is-style-outline.wp-block-button__link:not(.has-text-color),
 .wp-block-button.is-style-outline.wp-block-button__link:not(.has-text-color),
 .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) {
 .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) {
 	color: var(--button--color-background);
 	color: var(--button--color-background);
 }
 }
 
 
-.wp-block-button.is-style-outline.wp-block-button__link:active,
-.wp-block-button.is-style-outline .wp-block-button__link:active {
+.wp-block-button.is-style-outline.wp-block-button__link:not(.has-text-color):active, .wp-block-button.is-style-outline.wp-block-button__link.has-secondary-color:active,
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color):active,
+.wp-block-button.is-style-outline .wp-block-button__link.has-secondary-color:active {
 	color: var(--button--color-background);
 	color: var(--button--color-background);
 }
 }
 
 
-.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-block-button.is-style-outline.wp-block-button__link:not(.has-text-color):hover, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-text-color):focus, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-text-color).has-focus, .wp-block-button.is-style-outline.wp-block-button__link.has-secondary-color:hover, .wp-block-button.is-style-outline.wp-block-button__link.has-secondary-color:focus, .wp-block-button.is-style-outline.wp-block-button__link.has-secondary-color.has-focus,
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color):hover,
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color):focus,
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-focus,
+.wp-block-button.is-style-outline .wp-block-button__link.has-secondary-color:hover,
+.wp-block-button.is-style-outline .wp-block-button__link.has-secondary-color:focus,
+.wp-block-button.is-style-outline .wp-block-button__link.has-secondary-color.has-focus {
 	color: var(--button--color-background-hover);
 	color: var(--button--color-background-hover);
 }
 }
 
 
@@ -4137,8 +4180,7 @@ img#wpstats {
 
 
 button,
 button,
 .button,
 .button,
-input[type="submit"],
-.wp-block-button__link, .a8c-posts-list__view-all, button[data-load-more-btn] {
+input[type="submit"], .a8c-posts-list__view-all, button[data-load-more-btn] {
 	line-height: var(--button--line-height);
 	line-height: var(--button--line-height);
 	color: var(--button--color-text);
 	color: var(--button--color-text);
 	cursor: pointer;
 	cursor: pointer;
@@ -4154,11 +4196,9 @@ input[type="submit"],
 
 
 button:before,
 button:before,
 .button:before,
 .button:before,
-input[type="submit"]:before,
-.wp-block-button__link:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before, button:after,
+input[type="submit"]:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before, button:after,
 .button:after,
 .button:after,
-input[type="submit"]:after,
-.wp-block-button__link:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
+input[type="submit"]:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
 	content: '';
 	content: '';
 	display: block;
 	display: block;
 	height: 0;
 	height: 0;
@@ -4167,36 +4207,30 @@ input[type="submit"]:after,
 
 
 button:before,
 button:before,
 .button:before,
 .button:before,
-input[type="submit"]:before,
-.wp-block-button__link:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before {
+input[type="submit"]:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before {
 	margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
 	margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
 }
 }
 
 
 button:after,
 button:after,
 .button:after,
 .button:after,
-input[type="submit"]:after,
-.wp-block-button__link:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
+input[type="submit"]:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
 	margin-top: -calc(.5em * var(--button--line-height) + -.39);
 	margin-top: -calc(.5em * var(--button--line-height) + -.39);
 }
 }
 
 
 button:not(.has-background):active,
 button:not(.has-background):active,
 .button:not(.has-background):active,
 .button:not(.has-background):active,
-input:not(.has-background):active[type="submit"],
-.wp-block-button__link:not(.has-background):active, .a8c-posts-list__view-all:not(.has-background):active {
+input:not(.has-background):active[type="submit"], .a8c-posts-list__view-all:not(.has-background):active {
 	color: var(--button--color-text-active);
 	color: var(--button--color-text-active);
 	background-color: var(--button--color-background-active);
 	background-color: var(--button--color-background-active);
 }
 }
 
 
 button:not(.has-background):hover,
 button:not(.has-background):hover,
 .button:not(.has-background):hover,
 .button:not(.has-background):hover,
-input:not(.has-background):hover[type="submit"],
-.wp-block-button__link:not(.has-background):hover, .a8c-posts-list__view-all:not(.has-background):hover, button:not(.has-background):focus,
+input:not(.has-background):hover[type="submit"], .a8c-posts-list__view-all:not(.has-background):hover, button:not(.has-background):focus,
 .button:not(.has-background):focus,
 .button:not(.has-background):focus,
-input:not(.has-background):focus[type="submit"],
-.wp-block-button__link:not(.has-background):focus, .a8c-posts-list__view-all:not(.has-background):focus, button:not(.has-background).has-focus,
+input:not(.has-background):focus[type="submit"], .a8c-posts-list__view-all:not(.has-background):focus, button:not(.has-background).has-focus,
 .button:not(.has-background).has-focus,
 .button:not(.has-background).has-focus,
-input:not(.has-background).has-focus[type="submit"],
-.wp-block-button__link:not(.has-background).has-focus, .a8c-posts-list__view-all:not(.has-background).has-focus {
+input:not(.has-background).has-focus[type="submit"], .a8c-posts-list__view-all:not(.has-background).has-focus {
 	color: var(--button--color-text-hover);
 	color: var(--button--color-text-hover);
 	background-color: var(--button--color-background-hover);
 	background-color: var(--button--color-background-hover);
 }
 }