Tweaks, update to cart template, show title and remove button on mobile

godaddy-wordpress · Nov 16, 2020 · e791ba9 · e791ba9
2 parents 0e7a41d + 2cd622c
commit e791ba9
Show file tree

Hide file tree

Showing 12 changed files with 190 additions and 130 deletions.
diff --git a/.dev/assets/shared/css/woocommerce/blocks.scss b/.dev/assets/shared/css/woocommerce/blocks.scss
@@ -8,25 +8,25 @@
 
 .wp-block-woocommerce-all-reviews {
 
-	& .wc-block-sort-select__select {
+	.wc-block-sort-select__select {
 		-moz-appearance: none;
 		-webkit-appearance: none;
 		display: inline;
 		padding: 5px 10px !important;
 		width: auto;
 	}
 
-	& .wc-block-review-list {
+	.wc-block-review-list {
 		padding-left: 0;
 
-		& .wc-block-review-list-item__item {
+		.wc-block-review-list-item__item {
 			margin: 0 0 40px;
 
 			&:last-child {
 				margin: 0;
 			}
 
-			& .wc-block-review-list-item__rating__stars span::before {
+			.wc-block-review-list-item__rating__stars span::before {
 				color: var(--go--color--primary);
 				color: var(--go--hyperlink--color--text, var(--go--color--primary));
 			}
@@ -48,24 +48,24 @@ h2 + .wc-block-grid {
 
 .wc-block-grid {
 
-	& .wc-block-grid__product-rating {
+	.wc-block-grid__product-rating {
 		margin-bottom: 1em;
 
-		& .star-rating span::before {
+		.star-rating span::before {
 			color: var(--go--color--primary);
 			color: var(--go--hyperlink--color--text, var(--go--color--primary));
 		}
 	}
 
-	& .wc-block-grid__product-link {
+	.wc-block-grid__product-link {
 		text-decoration: none;
 	}
 
-	& .wc-block-grid__product-image {
+	.wc-block-grid__product-image {
 		margin-bottom: 0;
 	}
 
-	& .wc-block-grid__product-onsale {
+	.wc-block-grid__product-onsale {
 		background-color: transparent;
 		border-radius: unset;
 		display: inline-block;
@@ -80,20 +80,20 @@ h2 + .wc-block-grid {
 		width: unset;
 	}
 
-	& li .price {
+	li .price {
 		margin: 0.5em 0;
 
-		& + .wc-block-grid__product-add-to-cart {
+		+ .wc-block-grid__product-add-to-cart {
 			margin-top: 1em;
 		}
 	}
 
-	& ul {
+	ul {
 		justify-content: space-between;
 		max-width: 100%;
 		width: 100%;
 
-		& li {
+		li {
 			margin: 0;
 		}
 	}

diff --git a/.dev/assets/shared/css/woocommerce/button.scss b/.dev/assets/shared/css/woocommerce/button.scss
@@ -4,9 +4,9 @@ body {
 	&.woocommerce-page {
 
 		/* Primary Button */
-		& #respond input#submit.alt,
-		& .button.alt,
-		& .button {
+		#respond input#submit.alt,
+		.button.alt,
+		.button {
 			@include button;
 
 			&:hover,
@@ -16,19 +16,19 @@ body {
 			}
 		}
 
-		& .button.disabled,
-		& .button.alt.disabled,
-		& .button.disabled:hover,
-		& .button.alt.disabled:hover,
-		& .woocommerce button.button:disabled,
-		& .woocommerce button.button:disabled[disabled] {
+		.button.disabled,
+		.button.alt.disabled,
+		.button.disabled:hover,
+		.button.alt.disabled:hover,
+		.woocommerce button.button:disabled,
+		.woocommerce button.button:disabled[disabled] {
 			@include button;
 		}
 
 		/* Secondary Button */
-		& #respond input#submit,
-		& .button,
-		& .wp-block-button__link.add_to_cart_button {
+		#respond input#submit,
+		.button,
+		.wp-block-button__link.add_to_cart_button {
 			@include button;
 
 			&:hover,
@@ -66,7 +66,7 @@ body {
 		}
 	}
 
-	& .widget_shopping_cart a.wc-forward {
+	.widget_shopping_cart a.wc-forward {
 		@include button;
 
 		&:hover,

diff --git a/.dev/assets/shared/css/woocommerce/cart.scss b/.dev/assets/shared/css/woocommerce/cart.scss
@@ -3,11 +3,11 @@ body {
 
 	&.woocommerce-cart {
 
-		& .content-area .woocommerce {
+		.content-area .woocommerce {
 			max-width: 100% !important;
 			width: 100% !important;
 
-			& .shop_table {
+			.shop_table {
 
 				thead {
 					border-bottom: 1px solid;
@@ -23,16 +23,16 @@ body {
 			}
 		}
 
-		& .coupon {
+		.coupon {
 			display: flex;
 
-			& #coupon_code {
+			#coupon_code {
 				padding: var(--go-input--padding--y) var(--go-input--padding--x);
 				width: auto !important;
 			}
 		}
 
-		& td.product-remove a {
+		td.product-remove a {
 			color: var(--go--color--primary) !important;
 			margin: 0 auto;
 
@@ -41,27 +41,36 @@ body {
 			}
 		}
 
-		& .product-thumbnail {
-			padding-left: 0 !important;
+		.product-thumbnail {
+				padding-left: 0 !important;
 
-			a:first-child {
-				display: inline-block;
+				a:first-child {
+					display: inline-block;
+				}
+
+				img {
+					margin-right: 10px;
+					width: 150px;
+				}
+
+			table.cart th,
+			table.cart td {
+				text-align: center;
 			}
 
-			& img {
-				margin-right: 10px;
+			.product-thumbnail img {
 				width: 150px;
 			}
 		}
 
-		& .cart-empty-icon {
+		.cart-empty-icon {
 			margin: 0 auto;
 			max-width: 75px;
 			text-align: center;
 			width: 100%;
 		}
 
-		& .return-to-shop {
+		.return-to-shop {
 			margin-top: 1em;
 			text-align: center;
 		}
@@ -75,12 +84,12 @@ body {
 
 		.product-thumbnail {
 
-			& .actions {
+			.actions {
 				display: inline-block;
 				margin-left: 5px;
 			}
 
-			& a {
+			a {
 				text-decoration: none;
 
 				&:hover {
@@ -125,7 +134,7 @@ body {
 	&.woocommerce,
 	&.woocommerce-page {
 
-		& .input-text {
+		.input-text {
 			width: 180px;
 		}
 	}
@@ -135,12 +144,12 @@ body {
 	border: none;
 	border-collapse: collapse;
 
-	& td {
+	td {
 		border-top: 0 !important;
 	}
 
-	& td,
-	& th {
+	td,
+	th {
 		border: none !important;
 	}
 
@@ -153,27 +162,68 @@ body {
 @media (max-width:768px) {
 	body.woocommerce-cart {
 
-		& .coupon {
+		.coupon {
 			display: inline-block;
 			width: 100%;
 
-			& #coupon_code {
+			#coupon_code {
 				float: none;
 				width: 100% !important;
 			}
 
-			& button[type="submit"] {
+			button[type="submit"] {
 				width: 100% !important;
 				margin: 0.5rem 0;
 			}
 		}
 
-		& .cart_totals  {
+		.cart_totals  {
 			width: 100% !important;
 
-			& .checkout-button {
+			.checkout-button {
 				width: 100%;
 			}
 		}
 	}
+
+	.woocommerce-page table.shop_table_responsive .product-thumbnail {
+
+		&::before {
+			display: none;
+		}
+
+		.actions {
+			align-items: center;
+			align-content: space-between;
+			display: flex;
+			flex-wrap: wrap;
+			padding-left: 9px;
+			width: 100%;
+
+			br {
+				display: none;
+			}
+
+			a {
+				font-weight: 600;
+				text-decoration: underline;
+
+				&.remove {
+					font-weight: 400;
+					margin-left: auto;
+				}
+			}
+		}
+	}
+
+	.woocommerce #content table.cart .product-thumbnail,
+	.woocommerce table.cart .product-thumbnail,
+	.woocommerce-page #content table.cart .product-thumbnail,
+	.woocommerce-page table.cart .product-thumbnail {
+		display: block;
+
+		img {
+			display: none;
+		}
+	}
 }
diff --git a/.dev/assets/shared/css/woocommerce/checkbox.scss b/.dev/assets/shared/css/woocommerce/checkbox.scss
@@ -1,6 +1,7 @@
 /*! WooCommerce: Checkbox */
 .woocommerce-page input[type="checkbox"] {
 	appearance: checkbox;
+	opacity: 1;
 }
 
 .woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme {

diff --git a/.dev/assets/shared/css/woocommerce/forms.scss b/.dev/assets/shared/css/woocommerce/forms.scss
@@ -186,7 +186,7 @@
 .comment-form-cookies-consent {
 	position: relative;
 
-	& input[type="checkbox"] {
+	input[type="checkbox"] {
 		display: none;
 	}
 }
@@ -195,7 +195,7 @@
 	border: none;
 	padding: 0;
 
-	& legend {
+	legend {
 		border-top: 1px solid var(--go-input--border-color, var(--go-heading--color--text));
 		display: block;
 		margin: 0 0 1.5rem;

diff --git a/.dev/assets/shared/css/woocommerce/notice.scss b/.dev/assets/shared/css/woocommerce/notice.scss
@@ -12,7 +12,7 @@
 	top: inherit;
 	z-index: 9998;
 
-	& a {
+	a {
 		color: var(--go--color--white);
 		text-decoration: underline;