Varia: Cleaning up mini-cart styles

varia/inc/woocommerce.php

@@ -91,7 +91,7 @@ if ( ! function_exists( 'varia_cart_link' ) ) {
 		$link_output = sprintf(
 			'<a class="woocommerce-cart-link" href="%1$s" title="%2$s">
 				%3$s
-				<span class="woocommerce-cart-subtotal">%4$s</span> - <small class="woocommerce-cart-count">%5$s</small>
+				<span class="woocommerce-cart-subtotal">%4$s</span><small class="woocommerce-cart-count">%5$s</small>
 			</a>',
 			esc_url( wc_get_cart_url() ),
 			esc_attr__( 'View your shopping cart', 'varia' ),

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

@@ -11,19 +11,64 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 
 	.main-navigation {
 
-		.woocommerce-cart-link .svg-icon {
-			float: left;
-			height: #{map-deep-get($config-header, "main-nav", "font", "size")};
-			width: #{map-deep-get($config-header, "main-nav", "font", "size")};
+		.woocommerce-cart-link {
+
+			text-decoration: none;
+
+			& > *:not(:last-child) {
+				margin-right: #{0.25 * map-deep-get($config-global, "spacing", "horizontal")};
+			}
+
+			.woocommerce-cart-subtotal {
+				color: #{map-deep-get($config-header, "branding", "color", "text")};
+			}
+
+			.woocommerce-cart-count {
+				color: #{map-deep-get($config-global, "color", "foreground", "light")};
+				font-weight: normal;
+			}
+
+			.svg-icon {
+				float: left;
+				height: #{map-deep-get($config-header, "main-nav", "font", "size")};
+				width: #{map-deep-get($config-header, "main-nav", "font", "size")};
+			}
+
+			& + .sub-menu {
+				padding: 0 #{map-deep-get($config-header, "main-nav", "link-padding")};
+			}
+
+			@include media(mobile) {
+				& + .sub-menu {
+					padding: 0;
+				}
+			}
 		}
 
 		.woocommerce-cart-widget {
-			max-width: #{20 * map-deep-get($config-global, "spacing", "horizontal")};
+			max-width: 100%;
 			padding: #{0.5 * map-deep-get($config-header, "main-nav", "link-padding")} 0;
 
 			@include media(mobile) {
+				max-width: #{20 * map-deep-get($config-global, "spacing", "horizontal")};
 				padding: #{map-deep-get($config-header, "main-nav", "link-padding")};
 			}
+
+			.woocommerce-mini-cart__total {
+				text-align: right;
+			}
+
+			.woocommerce-mini-cart__buttons {
+				text-align: right;
+				a {
+					margin: 0;
+					text-align: right;
+
+					&:not(:last-child) {
+						margin-right: #{0.5 * map-deep-get($config-global, "spacing", "horizontal")};
+					}
+				}
+			}
 		}
 
 		ul.cart_list li a,
@@ -34,7 +79,9 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 		ul.cart_list li .quantity,
 		ul.product_list_widget li .quantity,
 		ul.cart_list li a:not(.remove),
-		ul.product_list_widget li a:not(.remove) {
+		ul.product_list_widget li a:not(.remove),
+		.woocommerce-mini-cart__total {
+			font-family: #{map-deep-get($config-header, "main-nav", "font", "family")};
 			font-size: #{map-deep-get($config-global, "font", "size", "base")};
 		}
 	}

varia/style-rtl.css

@@ -2484,11 +2484,6 @@ table th,
 	z-index: 1;
 }
 
-.main-navigation > div > ul li:hover, .main-navigation > div > ul li[focus-within] {
-	cursor: pointer;
-	z-index: 99999;
-}
-
 .main-navigation > div > ul li:hover, .main-navigation > div > ul li:focus-within {
 	cursor: pointer;
 	z-index: 99999;
@@ -2501,14 +2496,6 @@ table th,
 		/* Submenu display */
 	}
 	.main-navigation > div > ul li:hover > ul,
-	.main-navigation > div > ul li[focus-within] > ul,
-	.main-navigation > div > ul li ul:hover,
-	.main-navigation > div > ul li ul:focus {
-		visibility: visible;
-		opacity: 1;
-		display: block;
-	}
-	.main-navigation > div > ul li:hover > ul,
 	.main-navigation > div > ul li:focus-within > ul,
 	.main-navigation > div > ul li ul:hover,
 	.main-navigation > div > ul li ul:focus {

varia/style-woocommerce.css

@@ -767,23 +767,68 @@ body[class*="woocommerce"] #page .wc-block-grid__product-add-to-cart .added_to_c
 	text-decoration: none;
 }
 
+body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link {
+	text-decoration: none;
+}
+
+body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link > *:not(:last-child) {
+	margin-right: 4px;
+}
+
+body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link .woocommerce-cart-subtotal {
+	color: #444444;
+}
+
+body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link .woocommerce-cart-count {
+	color: #767676;
+	font-weight: normal;
+}
+
 body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link .svg-icon {
 	float: left;
 	height: 1.2rem;
 	width: 1.2rem;
 }
 
+body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link + .sub-menu {
+	padding: 0 16px;
+}
+
+@media only screen and (min-width: 560px) {
+	body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link + .sub-menu {
+		padding: 0;
+	}
+}
+
 body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget {
-	max-width: 320px;
+	max-width: 100%;
 	padding: 8px 0;
 }
 
 @media only screen and (min-width: 560px) {
 	body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget {
+		max-width: 320px;
 		padding: 16px;
 	}
 }
 
+body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget .woocommerce-mini-cart__total {
+	text-align: right;
+}
+
+body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget .woocommerce-mini-cart__buttons {
+	text-align: right;
+}
+
+body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget .woocommerce-mini-cart__buttons a {
+	margin: 0;
+	text-align: right;
+}
+
+body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget .woocommerce-mini-cart__buttons a:not(:last-child) {
+	margin-right: 8px;
+}
+
 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;
@@ -792,7 +837,9 @@ body[class*="woocommerce"] #page .main-navigation ul.product_list_widget li a {
 body[class*="woocommerce"] #page .main-navigation ul.cart_list li .quantity,
 body[class*="woocommerce"] #page .main-navigation ul.product_list_widget li .quantity,
 body[class*="woocommerce"] #page .main-navigation ul.cart_list li a:not(.remove),
-body[class*="woocommerce"] #page .main-navigation ul.product_list_widget li a:not(.remove) {
+body[class*="woocommerce"] #page .main-navigation ul.product_list_widget li a:not(.remove),
+body[class*="woocommerce"] #page .main-navigation .woocommerce-mini-cart__total {
+	font-family: sans-serif;
 	font-size: 1rem;
 }