Procházet zdrojové kódy

Varia: Clean up default price color to match shop and single products.

Allan Cole před 5 roky
rodič
revize
1d84cc0a8e

+ 37 - 9
varia/sass/vendors/woocommerce/pages/_single-product.scss

@@ -5,11 +5,6 @@
 
 	div.product {
 
-		& > .onsale {
-			right: auto;
-			left: -0.5em;
-		}
-
 		div.images {
 			margin-bottom: map-deep-get($config-global, "spacing", "vertical");
 
@@ -46,6 +41,24 @@
 			p.price {
 				color: map-deep-get($config-global, "color", "foreground", "dark");
 				font-size: map-deep-get($config-global, "font", "size", "xl");
+				line-height: map-deep-get($config-global, "font", "line-height", "heading");
+
+				del {
+					color: currentColor;
+					opacity: 0.5;
+					display: inline-block;
+				}
+
+				ins {
+					background: none;
+					font-weight: 700;
+					display: inline-block;
+				}
+
+				.from {
+					font-size: map-deep-get($config-global, "font", "size", "xs");
+					color: map-deep-get($config-global, "color", "alert", "warning");
+				}
 			}
 
 			p.stock {
@@ -66,20 +79,35 @@
 
 		}
 
-		div.social {
-			margin-bottom: map-deep-get($config-global, "spacing", "vertical");
-		}
-
 		.product_meta > * {
 			display: block;
 		}
 
+		// Sale
+		& > .onsale {
+			right: auto;
+			left: -0.5em;
+		}
+
+		&.sale div.summary .span.price,
+		&.sale div.summary p.price {
+			ins {
+				color: map-deep-get($config-global, "color", "alert", "success");
+			}
+		}
+
+		// Social
+		div.social {
+			margin-bottom: map-deep-get($config-global, "spacing", "vertical");
+		}
+
 		.up-sells {
 			& > h2 {
 				font-size: map-deep-get($config-global, "font", "size", "lg");
 			}
 		}
 
+		// Add to cart form
 		p.cart {
 			margin-bottom: map-deep-get($config-global, "spacing", "vertical");
 		}

+ 35 - 9
varia/style-woocommerce-rtl.css

@@ -1828,11 +1828,6 @@ body[class*="woocommerce"] #page .woocommerce-ordering select {
 /**
  * Single Product Page
  */
-.single-product #page #woocommerce-wrapper div.product > .onsale {
-	left: auto;
-	right: -0.5em;
-}
-
 .single-product #page #woocommerce-wrapper div.product div.images {
 	margin-bottom: 32px;
 }
@@ -1870,6 +1865,27 @@ body[class*="woocommerce"] #page .woocommerce-ordering select {
 .single-product #page #woocommerce-wrapper div.product div.summary p.price {
 	color: #111111;
 	font-size: 1.728rem;
+	line-height: 1.125;
+}
+
+.single-product #page #woocommerce-wrapper div.product div.summary span.price del,
+.single-product #page #woocommerce-wrapper div.product div.summary p.price del {
+	color: currentColor;
+	opacity: 0.5;
+	display: inline-block;
+}
+
+.single-product #page #woocommerce-wrapper div.product div.summary span.price ins,
+.single-product #page #woocommerce-wrapper div.product div.summary p.price ins {
+	background: none;
+	font-weight: 700;
+	display: inline-block;
+}
+
+.single-product #page #woocommerce-wrapper div.product div.summary span.price .from,
+.single-product #page #woocommerce-wrapper div.product div.summary p.price .from {
+	font-size: 0.69444rem;
+	color: gold;
 }
 
 .single-product #page #woocommerce-wrapper div.product div.summary p.stock {
@@ -1888,14 +1904,24 @@ body[class*="woocommerce"] #page .woocommerce-ordering select {
 	margin-top: -32px;
 }
 
-.single-product #page #woocommerce-wrapper div.product div.social {
-	margin-bottom: 32px;
-}
-
 .single-product #page #woocommerce-wrapper div.product .product_meta > * {
 	display: block;
 }
 
+.single-product #page #woocommerce-wrapper div.product > .onsale {
+	left: auto;
+	right: -0.5em;
+}
+
+.single-product #page #woocommerce-wrapper div.product.sale div.summary .span.price ins,
+.single-product #page #woocommerce-wrapper div.product.sale div.summary p.price ins {
+	color: yellowgreen;
+}
+
+.single-product #page #woocommerce-wrapper div.product div.social {
+	margin-bottom: 32px;
+}
+
 .single-product #page #woocommerce-wrapper div.product .up-sells > h2 {
 	font-size: 1.44rem;
 }

+ 35 - 9
varia/style-woocommerce.css

@@ -1828,11 +1828,6 @@ body[class*="woocommerce"] #page .woocommerce-ordering select {
 /**
  * Single Product Page
  */
-.single-product #page #woocommerce-wrapper div.product > .onsale {
-	right: auto;
-	left: -0.5em;
-}
-
 .single-product #page #woocommerce-wrapper div.product div.images {
 	margin-bottom: 32px;
 }
@@ -1870,6 +1865,27 @@ body[class*="woocommerce"] #page .woocommerce-ordering select {
 .single-product #page #woocommerce-wrapper div.product div.summary p.price {
 	color: #111111;
 	font-size: 1.728rem;
+	line-height: 1.125;
+}
+
+.single-product #page #woocommerce-wrapper div.product div.summary span.price del,
+.single-product #page #woocommerce-wrapper div.product div.summary p.price del {
+	color: currentColor;
+	opacity: 0.5;
+	display: inline-block;
+}
+
+.single-product #page #woocommerce-wrapper div.product div.summary span.price ins,
+.single-product #page #woocommerce-wrapper div.product div.summary p.price ins {
+	background: none;
+	font-weight: 700;
+	display: inline-block;
+}
+
+.single-product #page #woocommerce-wrapper div.product div.summary span.price .from,
+.single-product #page #woocommerce-wrapper div.product div.summary p.price .from {
+	font-size: 0.69444rem;
+	color: gold;
 }
 
 .single-product #page #woocommerce-wrapper div.product div.summary p.stock {
@@ -1888,14 +1904,24 @@ body[class*="woocommerce"] #page .woocommerce-ordering select {
 	margin-top: -32px;
 }
 
-.single-product #page #woocommerce-wrapper div.product div.social {
-	margin-bottom: 32px;
-}
-
 .single-product #page #woocommerce-wrapper div.product .product_meta > * {
 	display: block;
 }
 
+.single-product #page #woocommerce-wrapper div.product > .onsale {
+	right: auto;
+	left: -0.5em;
+}
+
+.single-product #page #woocommerce-wrapper div.product.sale div.summary .span.price ins,
+.single-product #page #woocommerce-wrapper div.product.sale div.summary p.price ins {
+	color: yellowgreen;
+}
+
+.single-product #page #woocommerce-wrapper div.product div.social {
+	margin-bottom: 32px;
+}
+
 .single-product #page #woocommerce-wrapper div.product .up-sells > h2 {
 	font-size: 1.44rem;
 }