Rockfield: Add WooCommerce support.

rockfield/sass/_config-child-theme-deep.scss

@@ -93,10 +93,10 @@ $config-global: (
 			"dark": #D0D0D0,
 		),
 		"alert": (
-			"success": yellowgreen,
-			"info": skyblue,
-			"warning": gold,
-			"error": salmon,
+			"success": #4caf50,
+			"info": #2196f3,
+			"warning": #ffc107,
+			"error": #f44336,
 		),
 		"text-selection": #EAEAEA,
 		"black": black,

rockfield/sass/_config-child-theme-woocommerce.scss

@@ -33,11 +33,11 @@ $config-woocommerce: (
 	"mini-cart": (
 		/* Color */
 		"color": (
-			"background": map-deep-get($config-global, "color", "background", "default"),
+			"background": map-deep-get($config-global, "color", "foreground", "dark"),
 			"border": map-deep-get($config-global, "color", "border", "dark"),
-			"text": map-deep-get($config-global, "color", "foreground", "default"),
-			"subtotal": map-deep-get($config-global, "color", "foreground", "default"),
-			"count": map-deep-get($config-global, "color", "foreground", "light"),
+			"text": map-deep-get($config-global, "color", "background", "default"),
+			"subtotal": map-deep-get($config-global, "color", "background", "default"),
+			"count": map-deep-get($config-global, "color", "background", "default"),
 		),
 		/* Button */
 		"button": (

rockfield/sass/style-child-theme-woocommerce.scss

@@ -58,3 +58,45 @@
 		}
 	}
 }
+
+/* Add outlines to WC buttons */
+body[class*="woocommerce"] #page #respond input#submit,
+body[class*="woocommerce"] #page #respond input#submit.alt,
+body[class*="woocommerce"] #page a.button,
+body[class*="woocommerce"] #page a.button.alt,
+body[class*="woocommerce"] #page button.button,
+body[class*="woocommerce"] #page button.button.alt,
+body[class*="woocommerce"] #page input.button,
+body[class*="woocommerce"] #page input.button.alt,
+body[class*="woocommerce"] #page .cart .button,
+body[class*="woocommerce"] #page .cart input.button,
+body[class*="woocommerce"] #page a.added_to_cart,
+body[class*="woocommerce"] #page .woocommerce #respond input#submit,
+body[class*="woocommerce"] #page .woocommerce a.button,
+body[class*="woocommerce"] #page .woocommerce button.button,
+body[class*="woocommerce"] #page .woocommerce input.button,
+body[class*="woocommerce"] #page .woocommerce .widget_shopping_cart .buttons a,
+body[class*="woocommerce"] #page .woocommerce.widget_shopping_cart .buttons a {
+	outline: 2px solid;
+	outline-offset: -5px;
+}
+
+/* Remove weird square artifact in WC buttons */
+body[class*="woocommerce"] #page #respond input#submit:before,
+body[class*="woocommerce"] #page #respond input#submit.alt:before,
+body[class*="woocommerce"] #page a.button:before,
+body[class*="woocommerce"] #page a.button.alt:before,
+body[class*="woocommerce"] #page button.button:before,
+body[class*="woocommerce"] #page button.button.alt:before,
+body[class*="woocommerce"] #page input.button:before,
+body[class*="woocommerce"] #page input.button.alt:before,
+body[class*="woocommerce"] #page .cart .button:before,
+body[class*="woocommerce"] #page a.added_to_cart:before,
+body[class*="woocommerce"] #page .woocommerce #respond input#submit:before,
+body[class*="woocommerce"] #page .woocommerce a.button:before,
+body[class*="woocommerce"] #page .woocommerce button.button:before,
+body[class*="woocommerce"] #page .woocommerce input.button:before,
+body[class*="woocommerce"] #page .woocommerce .widget_shopping_cart .buttons a:before,
+body[class*="woocommerce"] #page .woocommerce.widget_shopping_cart .buttons a:before {
+	display: none;
+}

rockfield/style-woocommerce-rtl.css

@@ -782,11 +782,11 @@ body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link > *:not
 }
 
 body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link .woocommerce-cart-subtotal {
-	color: #444444;
+	color: white;
 }
 
 body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link .woocommerce-cart-count {
-	color: #757575;
+	color: white;
 	font-weight: normal;
 }
 
@@ -807,8 +807,8 @@ body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link + .sub-
 }
 
 body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget {
-	background-color: white;
-	color: #444444;
+	background-color: #111111;
+	color: white;
 	max-width: 100%;
 	padding: 8px 0;
 }
@@ -2016,3 +2016,59 @@ body[class*="woocommerce"] #page .widget_price_filter .price_slider_wrapper .ui-
 		margin-left: auto;
 	}
 }
+
+/**
+ * Remove grid-products flexbox layout
+ */
+@media only screen and (min-width: 560px) {
+	body[class*="woocommerce"] #page .widget.woocommerce ul.product_list_widget:not(.woocommerce-mini-cart) {
+		display: inherit;
+	}
+	body[class*="woocommerce"] #page .widget.woocommerce ul.product_list_widget:not(.woocommerce-mini-cart) > li {
+		width: inherit;
+	}
+	body[class*="woocommerce"] #page .widget.woocommerce ul.product_list_widget:not(.woocommerce-mini-cart) > li:nth-child(3n+2):last-child {
+		margin-right: inherit;
+		margin-left: inherit;
+	}
+}
+
+body[class*="woocommerce"] #page #respond input#submit,
+body[class*="woocommerce"] #page #respond input#submit.alt,
+body[class*="woocommerce"] #page a.button,
+body[class*="woocommerce"] #page a.button.alt,
+body[class*="woocommerce"] #page button.button,
+body[class*="woocommerce"] #page button.button.alt,
+body[class*="woocommerce"] #page input.button,
+body[class*="woocommerce"] #page input.button.alt,
+body[class*="woocommerce"] #page .cart .button,
+body[class*="woocommerce"] #page .cart input.button,
+body[class*="woocommerce"] #page a.added_to_cart,
+body[class*="woocommerce"] #page .woocommerce #respond input#submit,
+body[class*="woocommerce"] #page .woocommerce a.button,
+body[class*="woocommerce"] #page .woocommerce button.button,
+body[class*="woocommerce"] #page .woocommerce input.button,
+body[class*="woocommerce"] #page .woocommerce .widget_shopping_cart .buttons a,
+body[class*="woocommerce"] #page .woocommerce.widget_shopping_cart .buttons a {
+	outline: 2px solid;
+	outline-offset: -5px;
+}
+
+body[class*="woocommerce"] #page #respond input#submit:before,
+body[class*="woocommerce"] #page #respond input#submit.alt:before,
+body[class*="woocommerce"] #page a.button:before,
+body[class*="woocommerce"] #page a.button.alt:before,
+body[class*="woocommerce"] #page button.button:before,
+body[class*="woocommerce"] #page button.button.alt:before,
+body[class*="woocommerce"] #page input.button:before,
+body[class*="woocommerce"] #page input.button.alt:before,
+body[class*="woocommerce"] #page .cart .button:before,
+body[class*="woocommerce"] #page a.added_to_cart:before,
+body[class*="woocommerce"] #page .woocommerce #respond input#submit:before,
+body[class*="woocommerce"] #page .woocommerce a.button:before,
+body[class*="woocommerce"] #page .woocommerce button.button:before,
+body[class*="woocommerce"] #page .woocommerce input.button:before,
+body[class*="woocommerce"] #page .woocommerce .widget_shopping_cart .buttons a:before,
+body[class*="woocommerce"] #page .woocommerce.widget_shopping_cart .buttons a:before {
+	display: none;
+}

rockfield/style-woocommerce.css

@@ -321,7 +321,7 @@ body[class*="woocommerce"] #page .woocommerce.widget_shopping_cart .buttons a.ha
  */
 body[class*="woocommerce"] #page span.onsale, #content .wc-block-grid .wc-block-grid__product-onsale {
 	border-radius: 100%;
-	background-color: gold;
+	background-color: #ffc107;
 	color: #111111;
 	font-size: 0.83333rem;
 	font-weight: 700;
@@ -382,53 +382,53 @@ body[class*="woocommerce"] #page .woocommerce-warning {
 
 body[class*="woocommerce"] #page .woocommerce-notice--message,
 body[class*="woocommerce"] #page .woocommerce-notice--info {
-	color: skyblue;
+	color: #2196f3;
 }
 
 body[class*="woocommerce"] #page .woocommerce-notice--success {
-	color: yellowgreen;
+	color: #4caf50;
 }
 
 body[class*="woocommerce"] #page .woocommerce-notice--error {
-	color: salmon;
+	color: #f44336;
 }
 
 body[class*="woocommerce"] #page .woocommerce-notice--warning {
-	color: gold;
+	color: #ffc107;
 }
 
 body[class*="woocommerce"] #page .woocommerce-message,
 body[class*="woocommerce"] #page .woocommerce-info {
-	border-top-color: skyblue;
+	border-top-color: #2196f3;
 }
 
 body[class*="woocommerce"] #page .woocommerce-message:before,
 body[class*="woocommerce"] #page .woocommerce-info:before {
-	color: skyblue;
+	color: #2196f3;
 }
 
 body[class*="woocommerce"] #page .woocommerce-success {
-	border-top-color: yellowgreen;
+	border-top-color: #4caf50;
 }
 
 body[class*="woocommerce"] #page .woocommerce-success:before {
-	color: yellowgreen;
+	color: #4caf50;
 }
 
 body[class*="woocommerce"] #page .woocommerce-error {
-	border-top-color: salmon;
+	border-top-color: #f44336;
 }
 
 body[class*="woocommerce"] #page .woocommerce-error:before {
-	color: salmon;
+	color: #f44336;
 }
 
 body[class*="woocommerce"] #page .woocommerce-warning {
-	border-top-color: gold;
+	border-top-color: #ffc107;
 }
 
 body[class*="woocommerce"] #page .woocommerce-warning:before {
-	color: gold;
+	color: #ffc107;
 }
 
 /**
@@ -445,22 +445,22 @@ body[class*="woocommerce"] #page .woocommerce-password-strength {
 }
 
 body[class*="woocommerce"] #page .woocommerce-password-strength.strong {
-	background-color: yellowgreen;
+	background-color: #4caf50;
 	border-color: none;
 }
 
 body[class*="woocommerce"] #page .woocommerce-password-strength.good {
-	background-color: gold;
+	background-color: #ffc107;
 	border-color: none;
 }
 
 body[class*="woocommerce"] #page .woocommerce-password-strength.short {
-	background-color: salmon;
+	background-color: #f44336;
 	border-color: none;
 }
 
 body[class*="woocommerce"] #page .woocommerce-password-strength.bad {
-	background-color: salmon;
+	background-color: #f44336;
 	border-color: none;
 }
 
@@ -497,17 +497,17 @@ body[class*="woocommerce"] #page small.note {
  * Star ratings
  */
 body[class*="woocommerce"] #page .star-rating::before {
-	color: gold;
+	color: #ffc107;
 	content: "\53\53\53\53\53";
 	opacity: 0.4;
 }
 
 body[class*="woocommerce"] #page .star-rating span {
-	color: gold;
+	color: #ffc107;
 }
 
 body[class*="woocommerce"] #page p.stars a {
-	color: gold;
+	color: #ffc107;
 }
 
 /**
@@ -676,7 +676,7 @@ body[class*="woocommerce"] #page .woocommerce input.button:disabled[disabled]:ho
 }
 
 #content .wc-block-grid .wc-block-grid__product-price ins {
-	color: yellowgreen;
+	color: #4caf50;
 	font-weight: bold;
 	text-decoration: none;
 }
@@ -754,7 +754,7 @@ body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cart_tot
 
 body[class*="woocommerce"] #page .cart-collaterals .cart_totals .discount td,
 body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cart_totals .discount td {
-	color: gold;
+	color: #ffc107;
 }
 
 body[class*="woocommerce"] #page .cart-collaterals .shipping-calculator-button,
@@ -782,11 +782,11 @@ body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link > *:not
 }
 
 body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link .woocommerce-cart-subtotal {
-	color: #444444;
+	color: white;
 }
 
 body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link .woocommerce-cart-count {
-	color: #757575;
+	color: white;
 	font-weight: normal;
 }
 
@@ -807,8 +807,8 @@ body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link + .sub-
 }
 
 body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget {
-	background-color: white;
-	color: #444444;
+	background-color: #111111;
+	color: white;
 	max-width: 100%;
 	padding: 8px 0;
 }
@@ -1050,13 +1050,13 @@ body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.p
 body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells ul.products li.product .price .from,
 body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.product .price .from {
 	font-size: 0.69444rem;
-	color: gold;
+	color: #ffc107;
 }
 
 #woocommerce-wrapper ul.products li.product.sale a > .price ins,
 body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells ul.products li.product.sale a > .price ins,
 body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.product.sale a > .price ins {
-	color: yellowgreen;
+	color: #4caf50;
 }
 
 /**
@@ -1711,7 +1711,7 @@ body[class*="woocommerce"] #page .woocommerce-terms-and-conditions {
 }
 
 body[class*="woocommerce"] #page .woocommerce-invalid #terms {
-	outline-color: salmon;
+	outline-color: #f44336;
 }
 
 body[class*="woocommerce"] #page .checkout h3 {
@@ -1726,7 +1726,7 @@ body[class*="woocommerce"] #page .woocommerce-terms-and-conditions {
 }
 
 body[class*="woocommerce"] #page .woocommerce-invalid #terms {
-	outline-color: salmon;
+	outline-color: #f44336;
 }
 
 /**
@@ -2032,3 +2032,45 @@ body[class*="woocommerce"] #page .widget_price_filter .price_slider_wrapper .ui-
 		margin-right: inherit;
 	}
 }
+
+/* Add outlines to WC buttons */
+body[class*="woocommerce"] #page #respond input#submit,
+body[class*="woocommerce"] #page #respond input#submit.alt,
+body[class*="woocommerce"] #page a.button,
+body[class*="woocommerce"] #page a.button.alt,
+body[class*="woocommerce"] #page button.button,
+body[class*="woocommerce"] #page button.button.alt,
+body[class*="woocommerce"] #page input.button,
+body[class*="woocommerce"] #page input.button.alt,
+body[class*="woocommerce"] #page .cart .button,
+body[class*="woocommerce"] #page .cart input.button,
+body[class*="woocommerce"] #page a.added_to_cart,
+body[class*="woocommerce"] #page .woocommerce #respond input#submit,
+body[class*="woocommerce"] #page .woocommerce a.button,
+body[class*="woocommerce"] #page .woocommerce button.button,
+body[class*="woocommerce"] #page .woocommerce input.button,
+body[class*="woocommerce"] #page .woocommerce .widget_shopping_cart .buttons a,
+body[class*="woocommerce"] #page .woocommerce.widget_shopping_cart .buttons a {
+	outline: 2px solid;
+	outline-offset: -5px;
+}
+
+/* Remove weird square artifact in WC buttons */
+body[class*="woocommerce"] #page #respond input#submit:before,
+body[class*="woocommerce"] #page #respond input#submit.alt:before,
+body[class*="woocommerce"] #page a.button:before,
+body[class*="woocommerce"] #page a.button.alt:before,
+body[class*="woocommerce"] #page button.button:before,
+body[class*="woocommerce"] #page button.button.alt:before,
+body[class*="woocommerce"] #page input.button:before,
+body[class*="woocommerce"] #page input.button.alt:before,
+body[class*="woocommerce"] #page .cart .button:before,
+body[class*="woocommerce"] #page a.added_to_cart:before,
+body[class*="woocommerce"] #page .woocommerce #respond input#submit:before,
+body[class*="woocommerce"] #page .woocommerce a.button:before,
+body[class*="woocommerce"] #page .woocommerce button.button:before,
+body[class*="woocommerce"] #page .woocommerce input.button:before,
+body[class*="woocommerce"] #page .woocommerce .widget_shopping_cart .buttons a:before,
+body[class*="woocommerce"] #page .woocommerce.widget_shopping_cart .buttons a:before {
+	display: none;
+}