Merge branch 'enhancement/add-wc-support' into enhancement/add-wc-support-shawburn

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

@@ -25,6 +25,11 @@
  */
 @import "../abstracts/mixins";
 
+/**
+ * Varia Responsive Logic
+ */
+@import "../abstracts/responsive-logic";
+
 /**
  * Varia Extends
  */

varia/sass/vendors/woocommerce/components/_mini-cart.scss

@@ -61,17 +61,39 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 
 			.woocommerce-mini-cart__buttons {
 				text-align: right;
+
 				a {
+					clear: right;
 					color: map-deep-get($config-woocommerce, "mini-cart", "button", "color");
 					background-color: map-deep-get($config-woocommerce, "mini-cart", "button", "background-color");
 					margin: 0;
-					text-align: right;
+					float: right;
+
+					// Default WooCommerce View Cart/Checkout buttons
+					&:first-child:nth-last-child(2),
+					&:first-child:nth-last-child(2) ~ a {
+						clear: inherit;
+						float: inherit;
+						margin-bottom: 0;
+
+						&:not(:last-child) {
+							margin-right: #{0.5 * map-deep-get($config-global, "spacing", "horizontal")};
+						}
+					}
 
 					&:not(:last-child) {
-						margin-right: #{0.5 * map-deep-get($config-global, "spacing", "horizontal")};
+						margin-bottom: #{0.5 * map-deep-get($config-global, "spacing", "horizontal")};
+					}
+
+					&.wcppec-cart-widget-button {
+						display: inline-block;
 					}
 				}
 			}
+
+			p.buttons.wcppec-cart-widget-spb {
+				padding: 0;
+			}
 		}
 
 		ul.cart_list li a,

varia/sass/vendors/woocommerce/components/_product-loops.scss

@@ -50,6 +50,10 @@ body[class*="woocommerce"] #page .cart-collaterals .cross-sells {
 			margin-top: inherit;
 		}
 
+		.added_to_cart {
+			margin-top: #{map-deep-get($config-global, "spacing", "unit")};
+		}
+
 		.price {
 			color: map-deep-get($config-global, "color", "foreground", "dark");
 			font-size: map-deep-get($config-global, "font", "size", "md");

varia/sass/vendors/woocommerce/layout/_structure.scss

@@ -9,7 +9,8 @@ body[class*="woocommerce"] #page div.summary,
 body[class*="woocommerce"] #page div.product .woocommerce-tabs .panel,
 body[class*="woocommerce"] #page .products.related,
 body[class*="woocommerce"] #page .up-sells,
-body[class*="woocommerce"] #page .woocommerce-order {
+body[class*="woocommerce"] #page .woocommerce-order,
+.woocommerce-account #page .entry-content .woocommerce {
 
 	& > *:not(:first-child) {
 		margin-top: map-deep-get($config-global, "spacing", "vertical");

varia/sass/vendors/woocommerce/pages/_checkout.scss

@@ -73,9 +73,7 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 	}
 
 	#add_payment_method {
-
 		table.cart {
-
 			.product-thumbnail {
 				min-width: map-deep-get($config-global, "spacing", "horizontal");
 			}
@@ -90,26 +88,29 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 				margin: 0 map-deep-get($config-global, "spacing", "unit") 0 0;
 			}
 		}
+	}
 
-		.wc-proceed-to-checkout {
+	.wc-proceed-to-checkout {
 
-			padding: map-deep-get($config-global, "spacing", "vertical") 0;
+		padding: map-deep-get($config-global, "spacing", "vertical") 0;
 
-			a.checkout-button {
-				margin-bottom: map-deep-get($config-global, "spacing", "vertical");
-				font-size: map-deep-get($config-global, "font", "size", "md");
-				padding: map-deep-get($config-global, "spacing", "unit");
-			}
+		a.checkout-button {
+			margin-bottom: map-deep-get($config-global, "spacing", "unit");
+			font-size: map-deep-get($config-global, "font", "size", "md");
+			padding: map-deep-get($config-global, "spacing", "unit");
 		}
 
-		.checkout .create-account small {
-			font-size: map-deep-get($config-global, "font", "size", "xs");
-			color: map-deep-get($config-global, "color", "foreground", "light");
+		a.wcppec-checkout-buttons__button {
+			padding-top: 0;
 		}
 	}
 
-	#payment {
+	.checkout .create-account small {
+		font-size: map-deep-get($config-global, "font", "size", "xs");
+		color: map-deep-get($config-global, "color", "foreground", "light");
+	}
 
+	#payment {
 		background: transparent;
 		border: map-deep-get($config-woocommerce, "table", "border", "width") solid map-deep-get($config-woocommerce, "table", "border", "color");
 		border-radius: map-deep-get($config-woocommerce, "table", "border", "radius");

varia/sass/vendors/woocommerce/pages/_my-account.scss

@@ -36,3 +36,7 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 		}
 	}
 }
+
+.woocommerce-account .entry-content .woocommerce > h2 {
+	font-size: map-deep-get($config-global, "font", "size", "lg");
+}

varia/sass/vendors/woocommerce/pages/_single-product.scss

@@ -125,9 +125,21 @@
 
 			div.quantity,
 			button {
+
 				float: inherit;
 				display: inline-block;
 				vertical-align: middle;
+
+				&.hidden {
+					display: none;
+				}
+			}
+		}
+
+		.woo_pp_cart_buttons_div {
+			text-align: left;
+			.wcppec-checkout-buttons__button {
+				padding-top: 0;
 			}
 		}
 	}

varia/sass/vendors/woocommerce/widgets/_imports.scss

@@ -3,3 +3,4 @@
  */
 
 @import "price-filter";
+@import "product-lists";

varia/sass/vendors/woocommerce/widgets/_product-lists.scss

@@ -0,0 +1,21 @@
+/**
+ * Filter by Product List Widgets
+ */
+body[class*="woocommerce"] #page { // adding #page here to override default wc styles without !important
+
+	.widget.woocommerce ul.product_list_widget:not(.woocommerce-mini-cart) {
+
+		@include media(mobile) {
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: space-between;
+
+			& > li {
+				flex: 0 1 auto;
+				margin-bottom: #{map-deep-get($config-global, "spacing", "vertical")};
+				padding: 0;
+				width: calc((100% / 3) - #{map-deep-get($config-global, "spacing", "unit")});
+			}
+		}
+	}
+}

varia/style-woocommerce.css

@@ -122,6 +122,13 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  * Crop Text Boundry
  * - Sets a fixed-width on content within alignwide and alignfull blocks
  */
+/**
+ * Varia Responsive Logic
+ */
+/**
+ * Page Layout Styles & Repsonsive Styles
+ */
+/* Responsive width-content overrides */
 /**
  * Varia Extends
  */
@@ -823,16 +830,37 @@ body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget .wooc
 }
 
 body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget .woocommerce-mini-cart__buttons a {
+	clear: right;
 	color: white;
 	background-color: blue;
 	margin: 0;
-	text-align: right;
+	float: right;
 }
 
-body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget .woocommerce-mini-cart__buttons a:not(:last-child) {
+body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget .woocommerce-mini-cart__buttons a:first-child:nth-last-child(2),
+body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget .woocommerce-mini-cart__buttons a:first-child:nth-last-child(2) ~ a {
+	clear: inherit;
+	float: inherit;
+	margin-bottom: 0;
+}
+
+body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget .woocommerce-mini-cart__buttons a:first-child:nth-last-child(2):not(:last-child),
+body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget .woocommerce-mini-cart__buttons a:first-child:nth-last-child(2) ~ a:not(:last-child) {
 	margin-right: 8px;
 }
 
+body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget .woocommerce-mini-cart__buttons a:not(:last-child) {
+	margin-bottom: 8px;
+}
+
+body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget .woocommerce-mini-cart__buttons a.wcppec-cart-widget-button {
+	display: inline-block;
+}
+
+body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget p.buttons.wcppec-cart-widget-spb {
+	padding: 0;
+}
+
 body[class*="woocommerce"] #page .main-navigation ul.cart_list li a,
 body[class*="woocommerce"] #page .main-navigation ul.product_list_widget li a {
 	padding: 0;
@@ -958,6 +986,12 @@ body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.p
 	margin-top: inherit;
 }
 
+#woocommerce-wrapper ul.products li.product .added_to_cart,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells ul.products li.product .added_to_cart,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.product .added_to_cart {
+	margin-top: 16px;
+}
+
 #woocommerce-wrapper ul.products li.product .price,
 body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells ul.products li.product .price,
 body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.product .price {
@@ -1167,7 +1201,8 @@ body[class*="woocommerce"] #page div.summary > *:not(:first-child),
 body[class*="woocommerce"] #page div.product .woocommerce-tabs .panel > *:not(:first-child),
 body[class*="woocommerce"] #page .products.related > *:not(:first-child),
 body[class*="woocommerce"] #page .up-sells > *:not(:first-child),
-body[class*="woocommerce"] #page .woocommerce-order > *:not(:first-child) {
+body[class*="woocommerce"] #page .woocommerce-order > *:not(:first-child),
+.woocommerce-account #page .entry-content .woocommerce > *:not(:first-child) {
 	margin-top: 32px;
 }
 
@@ -1175,7 +1210,8 @@ body[class*="woocommerce"] #page div.summary > *:not(:last-child),
 body[class*="woocommerce"] #page div.product .woocommerce-tabs .panel > *:not(:last-child),
 body[class*="woocommerce"] #page .products.related > *:not(:last-child),
 body[class*="woocommerce"] #page .up-sells > *:not(:last-child),
-body[class*="woocommerce"] #page .woocommerce-order > *:not(:last-child) {
+body[class*="woocommerce"] #page .woocommerce-order > *:not(:last-child),
+.woocommerce-account #page .entry-content .woocommerce > *:not(:last-child) {
 	margin-bottom: 32px;
 }
 
@@ -1188,7 +1224,9 @@ body[class*="woocommerce"] #page .products.related > .form-row-last,
 body[class*="woocommerce"] #page .up-sells > *:empty + *,
 body[class*="woocommerce"] #page .up-sells > .form-row-last,
 body[class*="woocommerce"] #page .woocommerce-order > *:empty + *,
-body[class*="woocommerce"] #page .woocommerce-order > .form-row-last {
+body[class*="woocommerce"] #page .woocommerce-order > .form-row-last,
+.woocommerce-account #page .entry-content .woocommerce > *:empty + *,
+.woocommerce-account #page .entry-content .woocommerce > .form-row-last {
 	margin-top: 0;
 }
 
@@ -1196,7 +1234,8 @@ body[class*="woocommerce"] #page div.summary > *:not(img):empty,
 body[class*="woocommerce"] #page div.product .woocommerce-tabs .panel > *:not(img):empty,
 body[class*="woocommerce"] #page .products.related > *:not(img):empty,
 body[class*="woocommerce"] #page .up-sells > *:not(img):empty,
-body[class*="woocommerce"] #page .woocommerce-order > *:not(img):empty {
+body[class*="woocommerce"] #page .woocommerce-order > *:not(img):empty,
+.woocommerce-account #page .entry-content .woocommerce > *:not(img):empty {
 	margin: 0;
 }
 
@@ -1511,17 +1550,21 @@ body[class*="woocommerce"] #page #add_payment_method table.cart td.actions .coup
 	margin: 0 16px 0 0;
 }
 
-body[class*="woocommerce"] #page #add_payment_method .wc-proceed-to-checkout {
+body[class*="woocommerce"] #page .wc-proceed-to-checkout {
 	padding: 32px 0;
 }
 
-body[class*="woocommerce"] #page #add_payment_method .wc-proceed-to-checkout a.checkout-button {
-	margin-bottom: 32px;
+body[class*="woocommerce"] #page .wc-proceed-to-checkout a.checkout-button {
+	margin-bottom: 16px;
 	font-size: 1.2rem;
 	padding: 16px;
 }
 
-body[class*="woocommerce"] #page #add_payment_method .checkout .create-account small {
+body[class*="woocommerce"] #page .wc-proceed-to-checkout a.wcppec-checkout-buttons__button {
+	padding-top: 0;
+}
+
+body[class*="woocommerce"] #page .checkout .create-account small {
 	font-size: 0.69444rem;
 	color: #767676;
 }
@@ -1680,6 +1723,10 @@ body[class*="woocommerce"] #page .addresses .title .edit {
 	line-height: 1;
 }
 
+.woocommerce-account .entry-content .woocommerce > h2 {
+	font-size: 1.44rem;
+}
+
 /**
  * Products Page
  */
@@ -1825,6 +1872,19 @@ body[class*="woocommerce"] #page .woocommerce-ordering select {
 	vertical-align: middle;
 }
 
+.single-product #page #woocommerce-wrapper div.product form.cart div.quantity.hidden,
+.single-product #page #woocommerce-wrapper div.product form.cart button.hidden {
+	display: none;
+}
+
+.single-product #page #woocommerce-wrapper div.product .woo_pp_cart_buttons_div {
+	text-align: left;
+}
+
+.single-product #page #woocommerce-wrapper div.product .woo_pp_cart_buttons_div .wcppec-checkout-buttons__button {
+	padding-top: 0;
+}
+
 /**
  * Widget Imports
  */
@@ -1839,3 +1899,20 @@ body[class*="woocommerce"] #page .widget_price_filter .ui-slider .ui-slider-hand
 body[class*="woocommerce"] #page .widget_price_filter .price_slider_wrapper .ui-widget-content {
 	background-color: #767676;
 }
+
+/**
+ * Filter by Product List Widgets
+ */
+@media only screen and (min-width: 560px) {
+	body[class*="woocommerce"] #page .widget.woocommerce ul.product_list_widget:not(.woocommerce-mini-cart) {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+	}
+	body[class*="woocommerce"] #page .widget.woocommerce ul.product_list_widget:not(.woocommerce-mini-cart) > li {
+		flex: 0 1 auto;
+		margin-bottom: 32px;
+		padding: 0;
+		width: calc((100% / 3) - 16px);
+	}
+}

varia/style-woocommerce.scss

@@ -20,6 +20,11 @@
  */
 @import "sass/abstracts/mixins";
 
+/**
+ * Varia Responsive Logic
+ */
+@import "sass/abstracts/responsive-logic";
+
 /**
  * Varia Extends
  */