Rockfield: Ensure full-width items inside of columns do not overlap.

- Applies button style bissue in #1757
- Requires: #1902

rockfield/style-editor.css

@@ -475,6 +475,7 @@ object {
 	background-color: #222222;
 	border-radius: 0;
 	border-width: 0;
+	text-decoration: none;
 	padding: 16px 20px;
 }
 
@@ -558,6 +559,30 @@ object {
 	border-radius: 0;
 }
 
+/* Default Style */
+.button {
+	color: white;
+	font-weight: bold;
+	font-family: Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-size: 0.83333em;
+	line-height: 1;
+	background-color: #222222;
+	border-radius: 0;
+	padding: 16px 20px;
+}
+
+.button:hover, .button:focus, .button.has-focus {
+	color: white;
+	background-color: #444444;
+}
+
+.wp-block-columns .wp-block[data-align=full],
+.wp-block-columns .alignfull {
+	margin-left: inherit;
+	margin-right: inherit;
+}
+
 .wp-block-cover,
 .wp-block-cover-image {
 	background-color: #444444;

rockfield/style-rtl.css

@@ -194,8 +194,7 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  *   let’s use a placeholder to keep them all
  *   in-sync
  */
-button[data-load-more-btn], button,
-.button,
+button[data-load-more-btn], .button, button,
 input[type="submit"],
 .wp-block-button__link,
 .wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
@@ -209,15 +208,14 @@ input[type="submit"],
 	background-color: #222222;
 	border-radius: 0;
 	border-width: 0;
+	text-decoration: none;
 	padding: 16px 20px;
 }
 
-button[data-load-more-btn]:before, button:before,
-.button:before,
+button[data-load-more-btn]:before, .button:before, button:before,
 input[type="submit"]:before,
 .wp-block-button__link:before,
-.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after,
-.button:after,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, .button:after, button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
 .wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
@@ -227,32 +225,27 @@ input[type="submit"]:after,
 	width: 0;
 }
 
-button[data-load-more-btn]:before, button:before,
-.button:before,
+button[data-load-more-btn]:before, .button:before, button:before,
 input[type="submit"]:before,
 .wp-block-button__link:before,
 .wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
 	margin-bottom: -0.12em;
 }
 
-button[data-load-more-btn]:after, button:after,
-.button:after,
+button[data-load-more-btn]:after, .button:after, button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
 .wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
 	margin-top: -0.11em;
 }
 
-button:hover,
-.button:hover,
+.button:hover, button:hover,
 input:hover[type="submit"],
 .wp-block-button__link:hover,
-.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
-.button:focus,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, .button:focus, button:focus,
 input:focus[type="submit"],
 .wp-block-button__link:focus,
-.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
-.has-focus.button,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, .has-focus.button, button.has-focus,
 input.has-focus[type="submit"],
 .has-focus.wp-block-button__link,
 .has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
@@ -1321,8 +1314,7 @@ object {
  *   let’s use a placeholder to keep them all
  *   in-sync
  */
-button[data-load-more-btn], button,
-.button,
+button[data-load-more-btn], .button, button,
 input[type="submit"],
 .wp-block-button__link,
 .wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
@@ -1336,15 +1328,14 @@ input[type="submit"],
 	background-color: #222222;
 	border-radius: 0;
 	border-width: 0;
+	text-decoration: none;
 	padding: 16px 20px;
 }
 
-button[data-load-more-btn]:before, button:before,
-.button:before,
+button[data-load-more-btn]:before, .button:before, button:before,
 input[type="submit"]:before,
 .wp-block-button__link:before,
-.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after,
-.button:after,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, .button:after, button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
 .wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
@@ -1354,32 +1345,27 @@ input[type="submit"]:after,
 	width: 0;
 }
 
-button[data-load-more-btn]:before, button:before,
-.button:before,
+button[data-load-more-btn]:before, .button:before, button:before,
 input[type="submit"]:before,
 .wp-block-button__link:before,
 .wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
 	margin-bottom: -0.12em;
 }
 
-button[data-load-more-btn]:after, button:after,
-.button:after,
+button[data-load-more-btn]:after, .button:after, button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
 .wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
 	margin-top: -0.11em;
 }
 
-button:hover,
-.button:hover,
+.button:hover, button:hover,
 input:hover[type="submit"],
 .wp-block-button__link:hover,
-.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
-.button:focus,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, .button:focus, button:focus,
 input:focus[type="submit"],
 .wp-block-button__link:focus,
-.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
-.has-focus.button,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, .has-focus.button, button.has-focus,
 input.has-focus[type="submit"],
 .has-focus.wp-block-button__link,
 .has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
@@ -1393,13 +1379,15 @@ input.has-focus[type="submit"],
  *   let’s use a placeholder to keep them all
  *   in-sync
  */
-button[data-load-more-btn] {
+button[data-load-more-btn], .button {
 	display: inline-block;
 }
 
 .has-background:not(.has-background-background-color) button[data-load-more-btn],
 [class*="background-color"]:not(.has-background-background-color) button[data-load-more-btn],
-[style*="background-color"] button[data-load-more-btn] {
+[style*="background-color"] button[data-load-more-btn], .has-background:not(.has-background-background-color) .button,
+[class*="background-color"]:not(.has-background-background-color) .button,
+[style*="background-color"] .button {
 	background-color: transparent;
 	border: 2px solid currentColor;
 	color: currentColor;
@@ -1418,6 +1406,10 @@ button[data-load-more-btn] {
 	padding: 14px 20px;
 }
 
+.wp-block-button.is-style-outline .wp-block-button__link:active {
+	color: #222222;
+}
+
 .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 {
 	color: #444444;
 }

rockfield/style-woocommerce.css

@@ -209,6 +209,7 @@ body[class*="woocommerce"] #page .woocommerce.widget_shopping_cart .buttons a {
 	background-color: #222222;
 	border-radius: 0;
 	border-width: 0;
+	text-decoration: none;
 	padding: 16px 20px;
 }
 

rockfield/style.css

@@ -194,8 +194,7 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  *   let’s use a placeholder to keep them all
  *   in-sync
  */
-button[data-load-more-btn], button,
-.button,
+button[data-load-more-btn], .button, button,
 input[type="submit"],
 .wp-block-button__link,
 .wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
@@ -209,15 +208,14 @@ input[type="submit"],
 	background-color: #222222;
 	border-radius: 0;
 	border-width: 0;
+	text-decoration: none;
 	padding: 16px 20px;
 }
 
-button[data-load-more-btn]:before, button:before,
-.button:before,
+button[data-load-more-btn]:before, .button:before, button:before,
 input[type="submit"]:before,
 .wp-block-button__link:before,
-.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after,
-.button:after,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, .button:after, button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
 .wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
@@ -227,32 +225,27 @@ input[type="submit"]:after,
 	width: 0;
 }
 
-button[data-load-more-btn]:before, button:before,
-.button:before,
+button[data-load-more-btn]:before, .button:before, button:before,
 input[type="submit"]:before,
 .wp-block-button__link:before,
 .wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
 	margin-bottom: -0.12em;
 }
 
-button[data-load-more-btn]:after, button:after,
-.button:after,
+button[data-load-more-btn]:after, .button:after, button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
 .wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
 	margin-top: -0.11em;
 }
 
-button:hover,
-.button:hover,
+.button:hover, button:hover,
 input:hover[type="submit"],
 .wp-block-button__link:hover,
-.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
-.button:focus,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, .button:focus, button:focus,
 input:focus[type="submit"],
 .wp-block-button__link:focus,
-.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
-.has-focus.button,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, .has-focus.button, button.has-focus,
 input.has-focus[type="submit"],
 .has-focus.wp-block-button__link,
 .has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
@@ -1321,8 +1314,7 @@ object {
  *   let’s use a placeholder to keep them all
  *   in-sync
  */
-button[data-load-more-btn], button,
-.button,
+button[data-load-more-btn], .button, button,
 input[type="submit"],
 .wp-block-button__link,
 .wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
@@ -1336,15 +1328,14 @@ input[type="submit"],
 	background-color: #222222;
 	border-radius: 0;
 	border-width: 0;
+	text-decoration: none;
 	padding: 16px 20px;
 }
 
-button[data-load-more-btn]:before, button:before,
-.button:before,
+button[data-load-more-btn]:before, .button:before, button:before,
 input[type="submit"]:before,
 .wp-block-button__link:before,
-.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after,
-.button:after,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, .button:after, button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
 .wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
@@ -1354,32 +1345,27 @@ input[type="submit"]:after,
 	width: 0;
 }
 
-button[data-load-more-btn]:before, button:before,
-.button:before,
+button[data-load-more-btn]:before, .button:before, button:before,
 input[type="submit"]:before,
 .wp-block-button__link:before,
 .wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
 	margin-bottom: -0.12em;
 }
 
-button[data-load-more-btn]:after, button:after,
-.button:after,
+button[data-load-more-btn]:after, .button:after, button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
 .wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
 	margin-top: -0.11em;
 }
 
-button:hover,
-.button:hover,
+.button:hover, button:hover,
 input:hover[type="submit"],
 .wp-block-button__link:hover,
-.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
-.button:focus,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, .button:focus, button:focus,
 input:focus[type="submit"],
 .wp-block-button__link:focus,
-.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
-.has-focus.button,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, .has-focus.button, button.has-focus,
 input.has-focus[type="submit"],
 .has-focus.wp-block-button__link,
 .has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
@@ -1393,13 +1379,15 @@ input.has-focus[type="submit"],
  *   let’s use a placeholder to keep them all
  *   in-sync
  */
-button[data-load-more-btn] {
+button[data-load-more-btn], .button {
 	display: inline-block;
 }
 
 .has-background:not(.has-background-background-color) button[data-load-more-btn],
 [class*="background-color"]:not(.has-background-background-color) button[data-load-more-btn],
-[style*="background-color"] button[data-load-more-btn] {
+[style*="background-color"] button[data-load-more-btn], .has-background:not(.has-background-background-color) .button,
+[class*="background-color"]:not(.has-background-background-color) .button,
+[style*="background-color"] .button {
 	background-color: transparent;
 	border: 2px solid currentColor;
 	color: currentColor;
@@ -1418,6 +1406,10 @@ button[data-load-more-btn] {
 	padding: 14px 20px;
 }
 
+.wp-block-button.is-style-outline .wp-block-button__link:active {
+	color: #222222;
+}
+
 .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 {
 	color: #444444;
 }