Browse Source

Varia: revising product views and structure

Allan Cole 5 years ago
parent
commit
ef041900e9

+ 14 - 7
varia/sass/vendors/woocommerce/layout/_structure.scss

@@ -8,12 +8,9 @@
 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 .woocommerce-MyAccount-content,
-body[class*="woocommerce"] #page .woocommerce-EditAccountForm,
-body[class*="woocommerce"] #page .woocommerce-billing-fields,
-body[class*="woocommerce"] #page .woocommerce-shipping-fields,
-body[class*="woocommerce"] #page .woocommerce-checkout,
 body[class*="woocommerce"] #page .up-sells,
+body[class*="woocommerce"] #page .woocommerce-MyAccount-content form,
+body[class*="woocommerce"] #page .woocommerce-address-fields,
 .woocommerce-Reviews #comments {
 
 	& > *:not(:first-child) {
@@ -44,7 +41,16 @@ body[class*="woocommerce"] #page ul.products li.product-category a,
 body[class*="woocommerce"] #page .cart-collaterals .cross-sells,
 body[class*="woocommerce"] #page .cart-collaterals .cart_totals,
 body[class*="woocommerce"] #page .widget_shopping_cart,
-body[class*="woocommerce"] #page .widget_shopping_cart_content {
+body[class*="woocommerce"] #page .widget_shopping_cart_content,
+body[class*="woocommerce"] #page div.product form.variations_form,
+body[class*="woocommerce"] #page div.product form.variations_form .variations,
+body[class*="woocommerce"] #page div.product form.variations_form .single_variation_wrap,
+body[class*="woocommerce"] #page .woocommerce-MyAccount-content,
+body[class*="woocommerce"] #page .woocommerce-EditAccountForm,
+body[class*="woocommerce"] #page .woocommerce-billing-fields,
+body[class*="woocommerce"] #page .woocommerce-shipping-fields,
+body[class*="woocommerce"] #page .woocommerce-checkout,
+body[class*="woocommerce"] #page .woocommerce-address-fields__field-wrapper {
 
 	& > *:not(:first-child) {
 		margin-top: $spacing_unit;
@@ -55,7 +61,8 @@ body[class*="woocommerce"] #page .widget_shopping_cart_content {
 		margin-bottom: $spacing_unit;
 	}
 
-	& > *:not(img):empty + * {
+	& > *:not(img):empty + *,
+	& > .form-row-last {
 		margin-top: 0;
 	}
 

+ 0 - 1
varia/sass/vendors/woocommerce/pages/_products.scss

@@ -9,5 +9,4 @@
 	mark {
 		background: transparent;
 	}
-
 }

+ 6 - 8
varia/sass/vendors/woocommerce/pages/_single-product.scss

@@ -3,15 +3,13 @@
  */
 .single-product #page #woocommerce-wrapper { // adding #content here to override default wc styles without !important
 
-	/**
-	 * Remove the bright yellow background on mark elements.
-	 */
-	mark {
-		background: transparent;
-	}
-
 	div.product {
 
+		& > .onsale {
+			right: auto;
+			left: -0.5em;
+		}
+
 		div.images {
 			margin-bottom: $spacing_vertical;
 
@@ -46,7 +44,7 @@
 
 			span.price,
 			p.price {
-				color: $color_primary;
+				color: $color_foreground_dark;
 				font-size: $fontsize_xl;
 			}
 

+ 0 - 13
varia/style-rtl.css

@@ -2403,11 +2403,6 @@ table th,
 	z-index: 99999;
 }
 
-.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;
@@ -2428,14 +2423,6 @@ table th,
 		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 {
-		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 {

+ 80 - 38
varia/style-woocommerce.css

@@ -926,12 +926,9 @@ body[class*="woocommerce"] #page .woocommerce-tabs .panel .comment-reply-title {
 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 .woocommerce-MyAccount-content > *:not(:first-child),
-body[class*="woocommerce"] #page .woocommerce-EditAccountForm > *:not(:first-child),
-body[class*="woocommerce"] #page .woocommerce-billing-fields > *:not(:first-child),
-body[class*="woocommerce"] #page .woocommerce-shipping-fields > *:not(:first-child),
-body[class*="woocommerce"] #page .woocommerce-checkout > *:not(:first-child),
 body[class*="woocommerce"] #page .up-sells > *:not(:first-child),
+body[class*="woocommerce"] #page .woocommerce-MyAccount-content form > *:not(:first-child),
+body[class*="woocommerce"] #page .woocommerce-address-fields > *:not(:first-child),
 .woocommerce-Reviews #comments > *:not(:first-child) {
 	margin-top: 32px;
 }
@@ -939,12 +936,9 @@ body[class*="woocommerce"] #page .up-sells > *:not(:first-child),
 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 .woocommerce-MyAccount-content > *:not(:last-child),
-body[class*="woocommerce"] #page .woocommerce-EditAccountForm > *:not(:last-child),
-body[class*="woocommerce"] #page .woocommerce-billing-fields > *:not(:last-child),
-body[class*="woocommerce"] #page .woocommerce-shipping-fields > *:not(:last-child),
-body[class*="woocommerce"] #page .woocommerce-checkout > *:not(:last-child),
 body[class*="woocommerce"] #page .up-sells > *:not(:last-child),
+body[class*="woocommerce"] #page .woocommerce-MyAccount-content form > *:not(:last-child),
+body[class*="woocommerce"] #page .woocommerce-address-fields > *:not(:last-child),
 .woocommerce-Reviews #comments > *:not(:last-child) {
 	margin-bottom: 32px;
 }
@@ -955,18 +949,12 @@ body[class*="woocommerce"] #page div.product .woocommerce-tabs .panel > *:empty
 body[class*="woocommerce"] #page div.product .woocommerce-tabs .panel > .form-row-last,
 body[class*="woocommerce"] #page .products.related > *:empty + *,
 body[class*="woocommerce"] #page .products.related > .form-row-last,
-body[class*="woocommerce"] #page .woocommerce-MyAccount-content > *:empty + *,
-body[class*="woocommerce"] #page .woocommerce-MyAccount-content > .form-row-last,
-body[class*="woocommerce"] #page .woocommerce-EditAccountForm > *:empty + *,
-body[class*="woocommerce"] #page .woocommerce-EditAccountForm > .form-row-last,
-body[class*="woocommerce"] #page .woocommerce-billing-fields > *:empty + *,
-body[class*="woocommerce"] #page .woocommerce-billing-fields > .form-row-last,
-body[class*="woocommerce"] #page .woocommerce-shipping-fields > *:empty + *,
-body[class*="woocommerce"] #page .woocommerce-shipping-fields > .form-row-last,
-body[class*="woocommerce"] #page .woocommerce-checkout > *:empty + *,
-body[class*="woocommerce"] #page .woocommerce-checkout > .form-row-last,
 body[class*="woocommerce"] #page .up-sells > *:empty + *,
 body[class*="woocommerce"] #page .up-sells > .form-row-last,
+body[class*="woocommerce"] #page .woocommerce-MyAccount-content form > *:empty + *,
+body[class*="woocommerce"] #page .woocommerce-MyAccount-content form > .form-row-last,
+body[class*="woocommerce"] #page .woocommerce-address-fields > *:empty + *,
+body[class*="woocommerce"] #page .woocommerce-address-fields > .form-row-last,
 .woocommerce-Reviews #comments > *:empty + *,
 .woocommerce-Reviews #comments > .form-row-last {
 	margin-top: 0;
@@ -975,12 +963,9 @@ body[class*="woocommerce"] #page .up-sells > .form-row-last,
 body[class*="woocommerce"] #page div.summary > *:empty,
 body[class*="woocommerce"] #page div.product .woocommerce-tabs .panel > *:empty,
 body[class*="woocommerce"] #page .products.related > *:empty,
-body[class*="woocommerce"] #page .woocommerce-MyAccount-content > *:empty,
-body[class*="woocommerce"] #page .woocommerce-EditAccountForm > *:empty,
-body[class*="woocommerce"] #page .woocommerce-billing-fields > *:empty,
-body[class*="woocommerce"] #page .woocommerce-shipping-fields > *:empty,
-body[class*="woocommerce"] #page .woocommerce-checkout > *:empty,
 body[class*="woocommerce"] #page .up-sells > *:empty,
+body[class*="woocommerce"] #page .woocommerce-MyAccount-content form > *:empty,
+body[class*="woocommerce"] #page .woocommerce-address-fields > *:empty,
 .woocommerce-Reviews #comments > *:empty {
 	margin: 0;
 }
@@ -995,7 +980,16 @@ body[class*="woocommerce"] #page ul.products li.product-category a > *:not(:firs
 body[class*="woocommerce"] #page .cart-collaterals .cross-sells > *:not(:first-child),
 body[class*="woocommerce"] #page .cart-collaterals .cart_totals > *:not(:first-child),
 body[class*="woocommerce"] #page .widget_shopping_cart > *:not(:first-child),
-body[class*="woocommerce"] #page .widget_shopping_cart_content > *:not(:first-child) {
+body[class*="woocommerce"] #page .widget_shopping_cart_content > *:not(:first-child),
+body[class*="woocommerce"] #page div.product form.variations_form > *:not(:first-child),
+body[class*="woocommerce"] #page div.product form.variations_form .variations > *:not(:first-child),
+body[class*="woocommerce"] #page div.product form.variations_form .single_variation_wrap > *:not(:first-child),
+body[class*="woocommerce"] #page .woocommerce-MyAccount-content > *:not(:first-child),
+body[class*="woocommerce"] #page .woocommerce-EditAccountForm > *:not(:first-child),
+body[class*="woocommerce"] #page .woocommerce-billing-fields > *:not(:first-child),
+body[class*="woocommerce"] #page .woocommerce-shipping-fields > *:not(:first-child),
+body[class*="woocommerce"] #page .woocommerce-checkout > *:not(:first-child),
+body[class*="woocommerce"] #page .woocommerce-address-fields__field-wrapper > *:not(:first-child) {
 	margin-top: 16px;
 }
 
@@ -1014,18 +1008,62 @@ body[class*="woocommerce"] #page .cart-collaterals .cart_totals > .price,
 body[class*="woocommerce"] #page .widget_shopping_cart > *:not(:last-child),
 body[class*="woocommerce"] #page .widget_shopping_cart > .price,
 body[class*="woocommerce"] #page .widget_shopping_cart_content > *:not(:last-child),
-body[class*="woocommerce"] #page .widget_shopping_cart_content > .price {
+body[class*="woocommerce"] #page .widget_shopping_cart_content > .price,
+body[class*="woocommerce"] #page div.product form.variations_form > *:not(:last-child),
+body[class*="woocommerce"] #page div.product form.variations_form > .price,
+body[class*="woocommerce"] #page div.product form.variations_form .variations > *:not(:last-child),
+body[class*="woocommerce"] #page div.product form.variations_form .variations > .price,
+body[class*="woocommerce"] #page div.product form.variations_form .single_variation_wrap > *:not(:last-child),
+body[class*="woocommerce"] #page div.product form.variations_form .single_variation_wrap > .price,
+body[class*="woocommerce"] #page .woocommerce-MyAccount-content > *:not(:last-child),
+body[class*="woocommerce"] #page .woocommerce-MyAccount-content > .price,
+body[class*="woocommerce"] #page .woocommerce-EditAccountForm > *:not(:last-child),
+body[class*="woocommerce"] #page .woocommerce-EditAccountForm > .price,
+body[class*="woocommerce"] #page .woocommerce-billing-fields > *:not(:last-child),
+body[class*="woocommerce"] #page .woocommerce-billing-fields > .price,
+body[class*="woocommerce"] #page .woocommerce-shipping-fields > *:not(:last-child),
+body[class*="woocommerce"] #page .woocommerce-shipping-fields > .price,
+body[class*="woocommerce"] #page .woocommerce-checkout > *:not(:last-child),
+body[class*="woocommerce"] #page .woocommerce-checkout > .price,
+body[class*="woocommerce"] #page .woocommerce-address-fields__field-wrapper > *:not(:last-child),
+body[class*="woocommerce"] #page .woocommerce-address-fields__field-wrapper > .price {
 	margin-bottom: 16px;
 }
 
 #woocommerce-wrapper ul.products li.product a > *:not(img):empty + *,
+#woocommerce-wrapper ul.products li.product a > .form-row-last,
 #woocommerce-wrapper ul.products li.product-category a > *:not(img):empty + *,
+#woocommerce-wrapper ul.products li.product-category a > .form-row-last,
 body[class*="woocommerce"] #page ul.products li.product a > *:not(img):empty + *,
+body[class*="woocommerce"] #page ul.products li.product a > .form-row-last,
 body[class*="woocommerce"] #page ul.products li.product-category a > *:not(img):empty + *,
+body[class*="woocommerce"] #page ul.products li.product-category a > .form-row-last,
 body[class*="woocommerce"] #page .cart-collaterals .cross-sells > *:not(img):empty + *,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells > .form-row-last,
 body[class*="woocommerce"] #page .cart-collaterals .cart_totals > *:not(img):empty + *,
+body[class*="woocommerce"] #page .cart-collaterals .cart_totals > .form-row-last,
 body[class*="woocommerce"] #page .widget_shopping_cart > *:not(img):empty + *,
-body[class*="woocommerce"] #page .widget_shopping_cart_content > *:not(img):empty + * {
+body[class*="woocommerce"] #page .widget_shopping_cart > .form-row-last,
+body[class*="woocommerce"] #page .widget_shopping_cart_content > *:not(img):empty + *,
+body[class*="woocommerce"] #page .widget_shopping_cart_content > .form-row-last,
+body[class*="woocommerce"] #page div.product form.variations_form > *:not(img):empty + *,
+body[class*="woocommerce"] #page div.product form.variations_form > .form-row-last,
+body[class*="woocommerce"] #page div.product form.variations_form .variations > *:not(img):empty + *,
+body[class*="woocommerce"] #page div.product form.variations_form .variations > .form-row-last,
+body[class*="woocommerce"] #page div.product form.variations_form .single_variation_wrap > *:not(img):empty + *,
+body[class*="woocommerce"] #page div.product form.variations_form .single_variation_wrap > .form-row-last,
+body[class*="woocommerce"] #page .woocommerce-MyAccount-content > *:not(img):empty + *,
+body[class*="woocommerce"] #page .woocommerce-MyAccount-content > .form-row-last,
+body[class*="woocommerce"] #page .woocommerce-EditAccountForm > *:not(img):empty + *,
+body[class*="woocommerce"] #page .woocommerce-EditAccountForm > .form-row-last,
+body[class*="woocommerce"] #page .woocommerce-billing-fields > *:not(img):empty + *,
+body[class*="woocommerce"] #page .woocommerce-billing-fields > .form-row-last,
+body[class*="woocommerce"] #page .woocommerce-shipping-fields > *:not(img):empty + *,
+body[class*="woocommerce"] #page .woocommerce-shipping-fields > .form-row-last,
+body[class*="woocommerce"] #page .woocommerce-checkout > *:not(img):empty + *,
+body[class*="woocommerce"] #page .woocommerce-checkout > .form-row-last,
+body[class*="woocommerce"] #page .woocommerce-address-fields__field-wrapper > *:not(img):empty + *,
+body[class*="woocommerce"] #page .woocommerce-address-fields__field-wrapper > .form-row-last {
 	margin-top: 0;
 }
 
@@ -1036,7 +1074,16 @@ body[class*="woocommerce"] #page ul.products li.product-category a > *:empty,
 body[class*="woocommerce"] #page .cart-collaterals .cross-sells > *:empty,
 body[class*="woocommerce"] #page .cart-collaterals .cart_totals > *:empty,
 body[class*="woocommerce"] #page .widget_shopping_cart > *:empty,
-body[class*="woocommerce"] #page .widget_shopping_cart_content > *:empty {
+body[class*="woocommerce"] #page .widget_shopping_cart_content > *:empty,
+body[class*="woocommerce"] #page div.product form.variations_form > *:empty,
+body[class*="woocommerce"] #page div.product form.variations_form .variations > *:empty,
+body[class*="woocommerce"] #page div.product form.variations_form .single_variation_wrap > *:empty,
+body[class*="woocommerce"] #page .woocommerce-MyAccount-content > *:empty,
+body[class*="woocommerce"] #page .woocommerce-EditAccountForm > *:empty,
+body[class*="woocommerce"] #page .woocommerce-billing-fields > *:empty,
+body[class*="woocommerce"] #page .woocommerce-shipping-fields > *:empty,
+body[class*="woocommerce"] #page .woocommerce-checkout > *:empty,
+body[class*="woocommerce"] #page .woocommerce-address-fields__field-wrapper > *:empty {
 	margin: 0;
 }
 
@@ -1267,14 +1314,9 @@ body[class*="woocommerce"] #page .woocommerce-invalid #terms {
 /**
  * Single Product Page
  */
-.single-product #page #woocommerce-wrapper {
-	/**
-	 * Remove the bright yellow background on mark elements.
-	 */
-}
-
-.single-product #page #woocommerce-wrapper mark {
-	background: transparent;
+.single-product #page #woocommerce-wrapper div.product > .onsale {
+	right: auto;
+	left: -0.5em;
 }
 
 .single-product #page #woocommerce-wrapper div.product div.images {
@@ -1312,7 +1354,7 @@ body[class*="woocommerce"] #page .woocommerce-invalid #terms {
 
 .single-product #page #woocommerce-wrapper div.product div.summary span.price,
 .single-product #page #woocommerce-wrapper div.product div.summary p.price {
-	color: blue;
+	color: #111111;
 	font-size: 1.728rem;
 }
 

+ 13 - 0
varia/style.css

@@ -2420,6 +2420,11 @@ table th,
 	z-index: 99999;
 }
 
+.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;
@@ -2440,6 +2445,14 @@ table th,
 		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 {
+		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 {