Varia: Adding support for featured product block, code reorganization and tidying.

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

@@ -4,22 +4,29 @@
  */
 
 /**
- * Abstracts
+ * Varia Abstracts
  * - Mixins, variables and functions
  */
 @import "sass/abstracts/functions";
 @import "sass/abstracts/config-global";
 @import "sass/abstracts/mixins";
-@import "sass/abstracts/extends";
-// WooCommerce Abstracts
+
+/**
+ * WooCommerce Abstracts
+ */
 @import "sass/vendors/woocommerce/abstracts/imports";
 
 /**
- * Child Theme Deep
+ * Child Theme Name Variables
  */
 @import "config-child-theme-deep";
 
 /**
- * WooCommerce
+ * Varia Extends
+ */
+@import "sass/base/extends";
+
+/**
+ * WooCommerce Styles
  */
 @import "sass/vendors/woocommerce";

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

@@ -4,3 +4,4 @@
 
 @import "button/style";
 @import "block-grid/style";
+@import "featured-product/style";

varia/sass/vendors/woocommerce/blocks/block-grid/_style.scss

@@ -56,6 +56,7 @@
 		ins {
 			color: map-deep-get($config-global, "color", "alert", "success");
 			font-weight: bold;
+			text-decoration: none;
 		}
 	}
 

varia/sass/vendors/woocommerce/blocks/featured-product/_style.scss

@@ -0,0 +1,22 @@
+/**
+ * WooCommerce Featured Product
+ */
+
+#content .wc-block-featured-product {
+
+	.wc-block-featured-product__description:empty,
+	.wc-block-featured-product__link:empty,
+	.wc-block-featured-product__price:empty,
+	.wc-block-featured-product__title:empty,
+	.wc-block-featured-product__variation:empty {
+		padding: 0;
+	}
+
+	.wc-block-featured-product__price {
+		font-size: map-deep-get($config-global, "font", "size", "xl");
+
+		ins {
+			text-decoration: none;
+		}
+	}
+}

varia/sass/vendors/woocommerce/components/_cart-sidebar.scss

@@ -35,16 +35,21 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 	.widget_shopping_cart {
 
 		.total {
-			border-top: 1px solid map-deep-get($config-global, "color", "border", "default");
-			padding-top: map-deep-get($config-global, "spacing", "unit");
+			border-top: none;
+			padding-top: 0;
 		}
 
-		.cart_list li {
-			border-top: 1px solid map-deep-get($config-global, "color", "border", "default");
-			padding: map-deep-get($config-global, "spacing", "unit") 0 map-deep-get($config-global, "spacing", "unit") #{2 * map-deep-get($config-global, "spacing", "horizontal")};
+		.cart_list {
 
-			a.remove {
-				top: map-deep-get($config-global, "spacing", "unit");
+			border-bottom: 1px solid map-deep-get($config-global, "color", "border", "default");
+
+			li {
+				border-top: 1px solid map-deep-get($config-global, "color", "border", "default");
+				padding: map-deep-get($config-global, "spacing", "unit") 0 map-deep-get($config-global, "spacing", "unit") #{2 * map-deep-get($config-global, "spacing", "horizontal")};
+
+				a.remove {
+					top: map-deep-get($config-global, "spacing", "unit");
+				}
 			}
 		}
 	}

varia/sass/vendors/woocommerce/components/_reviews.scss

@@ -27,6 +27,8 @@ body[class*="woocommerce"] #page { // adding #content here to override default w
 
 			ol.commentlist {
 
+				padding-left: 0;
+
 				li {
 					margin-bottom: map-deep-get($config-global, "spacing", "unit");
 
@@ -37,7 +39,7 @@ body[class*="woocommerce"] #page { // adding #content here to override default w
 
 					img.avatar {
 						padding: 0;
-						width: map-deep-get($config-global, "spacing", "vertical");
+						width: #{1.5 * map-deep-get($config-global, "spacing", "vertical")};
 						height: auto;
 						background: transparent;
 						border-color: map-deep-get($config-global, "color", "border", "default");
@@ -50,7 +52,7 @@ body[class*="woocommerce"] #page { // adding #content here to override default w
 					}
 
 					.comment-text {
-						margin-left: #{3 * map-deep-get($config-global, "spacing", "unit")};
+						margin-left: #{4 * map-deep-get($config-global, "spacing", "unit")};
 						border: 1px solid map-deep-get($config-global, "color", "border", "default");
 						border-radius: 4px;
 						padding: 1em 1em 0;

varia/sass/vendors/woocommerce/elements/_star-rating.scss

@@ -16,4 +16,8 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 			color: map-deep-get($config-global, "color", "secondary", "default");
 		}
 	}
+
+	p.stars a {
+		color: map-deep-get($config-global, "color", "secondary", "default");
+	}
 }

varia/sass/vendors/woocommerce/elements/_tables.scss

@@ -23,6 +23,7 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 		border-top-color: map-deep-get($config-global, "color", "border", "default");
 		border-top-style: solid;
 		margin-bottom: map-deep-get($config-global, "spacing", "vertical");
+		border-bottom: 1px solid map-deep-get($config-global, "color", "border", "default");
 
 		th {
 			padding: (0.5 * map-deep-get($config-global, "spacing", "unit"));

varia/style-woocommerce.css

@@ -113,6 +113,15 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  * Crop Text Boundry
  * - Sets a fixed-width on content within alignwide and alignfull blocks
  */
+/**
+ * WooCommerce Abstracts
+ */
+/**
+ * Abstracts Imports
+ */
+/**
+ * Varia Extends
+ */
 /**
  * Button Placeholder style
  * - Since buttons appear in various blocks,
@@ -277,10 +286,7 @@ body[class*="woocommerce"] #page span.onsale, #content .wc-block-grid .wc-block-
 }
 
 /**
- * Abstracts Imports
- */
-/**
- * WooCommerce
+ * WooCommerce Styles
  */
 /**
  * Main WooCommerce styles
@@ -413,6 +419,10 @@ body[class*="woocommerce"] #page .star-rating span {
 	color: red;
 }
 
+body[class*="woocommerce"] #page p.stars a {
+	color: red;
+}
+
 /**
  * Tables
  */
@@ -434,6 +444,7 @@ body[class*="woocommerce"] #page table.shop_attributes {
 	border-top-color: #DDDDDD;
 	border-top-style: solid;
 	margin-bottom: 32px;
+	border-bottom: 1px solid #DDDDDD;
 }
 
 body[class*="woocommerce"] #page table.shop_attributes th {
@@ -554,6 +565,7 @@ body[class*="woocommerce"] #page .woocommerce input.button:disabled[disabled]:ho
 #content .wc-block-grid .wc-block-grid__product-price ins {
 	color: yellowgreen;
 	font-weight: bold;
+	text-decoration: none;
 }
 
 #content .wc-block-grid .wc-block-grid__product .wc-block-grid__product-onsale {
@@ -561,6 +573,25 @@ body[class*="woocommerce"] #page .woocommerce input.button:disabled[disabled]:ho
 	margin: 0;
 }
 
+/**
+ * WooCommerce Featured Product
+ */
+#content .wc-block-featured-product .wc-block-featured-product__description:empty,
+#content .wc-block-featured-product .wc-block-featured-product__link:empty,
+#content .wc-block-featured-product .wc-block-featured-product__price:empty,
+#content .wc-block-featured-product .wc-block-featured-product__title:empty,
+#content .wc-block-featured-product .wc-block-featured-product__variation:empty {
+	padding: 0;
+}
+
+#content .wc-block-featured-product .wc-block-featured-product__price {
+	font-size: 1.728rem;
+}
+
+#content .wc-block-featured-product .wc-block-featured-product__price ins {
+	text-decoration: none;
+}
+
 /**
  * Components Imports
  */
@@ -597,8 +628,12 @@ body[class*="woocommerce"] #page ul.product_list_widget li dl dd {
 }
 
 body[class*="woocommerce"] #page .widget_shopping_cart .total {
-	border-top: 1px solid #DDDDDD;
-	padding-top: 16px;
+	border-top: none;
+	padding-top: 0;
+}
+
+body[class*="woocommerce"] #page .widget_shopping_cart .cart_list {
+	border-bottom: 1px solid #DDDDDD;
 }
 
 body[class*="woocommerce"] #page .widget_shopping_cart .cart_list li {
@@ -860,6 +895,10 @@ body[class*="woocommerce"] #page #reviews h2 small a {
 	color: currentColor;
 }
 
+body[class*="woocommerce"] #page #reviews #comments ol.commentlist {
+	padding-left: 0;
+}
+
 body[class*="woocommerce"] #page #reviews #comments ol.commentlist li {
 	margin-bottom: 16px;
 }
@@ -871,7 +910,7 @@ body[class*="woocommerce"] #page #reviews #comments ol.commentlist li .meta {
 
 body[class*="woocommerce"] #page #reviews #comments ol.commentlist li img.avatar {
 	padding: 0;
-	width: 32px;
+	width: 48px;
 	height: auto;
 	background: transparent;
 	border-color: #DDDDDD;
@@ -884,7 +923,7 @@ body[class*="woocommerce"] #page #reviews #comments ol.commentlist li .woocommer
 }
 
 body[class*="woocommerce"] #page #reviews #comments ol.commentlist li .comment-text {
-	margin-left: 48px;
+	margin-left: 64px;
 	border: 1px solid #DDDDDD;
 	border-radius: 4px;
 	padding: 1em 1em 0;

varia/style-woocommerce.scss

@@ -10,11 +10,18 @@
 @import "sass/abstracts/functions";
 @import "sass/abstracts/config-global";
 @import "sass/abstracts/mixins";
-@import "sass/abstracts/extends";
-// WooCommerce Abstracts
+
+/**
+ * WooCommerce Abstracts
+ */
 @import "sass/vendors/woocommerce/abstracts/imports";
 
 /**
- * WooCommerce
+ * Varia Extends
+ */
+@import "sass/base/extends";
+
+/**
+ * WooCommerce Styles
  */
 @import "sass/vendors/woocommerce";