Fix visibility of WooCommerce checkboxes and radios (#598)

* Fix visibility of checkboxes and radios * tweak * Remove & .selector in WooCommerce scss files
godaddy-wordpress · Nov 16, 2020 · 03a0739 · 03a0739
1 parent ef40958
commit 03a0739
Show file tree

Hide file tree

Showing 12 changed files with 125 additions and 115 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,16 +3,16 @@ body {
 
 	&.woocommerce-cart {
 
-		& .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;
 
@@ -21,23 +21,23 @@ body {
 			}
 		}
 
-		& table.cart th,
-		& table.cart td {
+		table.cart th,
+		table.cart td {
 			text-align: center;
 		}
 
-		& .product-thumbnail img {
+		.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;
 		}
@@ -47,7 +47,7 @@ body {
 	&.woocommerce,
 	&.woocommerce-page {
 
-		& .input-text {
+		.input-text {
 			width: 180px;
 		}
 	}

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;
 

diff --git a/.dev/assets/shared/css/woocommerce/pagination.scss b/.dev/assets/shared/css/woocommerce/pagination.scss
@@ -2,15 +2,15 @@
 .woocommerce nav.woocommerce-pagination {
 	text-align: center;
 
-	& ul,
-	& ul li {
+	ul,
+	ul li {
 		border: none;
 	}
 
-	& ul li {
+	ul li {
 
-		& a,
-		& span {
+		a,
+		span {
 			border-bottom: 0;
 			font-weight: 700;
 			margin: 0 1px;
@@ -41,8 +41,8 @@
 		}
 	}
 
-	& .prev,
-	& .next {
+	.prev,
+	.next {
 		font-size: 1rem;
 		position: relative;
 		text-indent: -9999px;
@@ -59,11 +59,11 @@
 		}
 	}
 
-	& .next {
+	.next {
 		margin-left: 0.25rem;
 	}
 
-	& .prev {
+	.prev {
 		margin-right: 0.25rem;
 
 		&::before {

diff --git a/.dev/assets/shared/css/woocommerce/product.scss b/.dev/assets/shared/css/woocommerce/product.scss
@@ -10,11 +10,11 @@
 	}
 
 	/* Avoid last child bottom margin */
-	& .wc-block-grid__product-link,
-	& .woocommerce-loop-product__link {
+	.wc-block-grid__product-link,
+	.woocommerce-loop-product__link {
 		display: block;
 
-		& > *:last-child {
+		> *:last-child {
 			margin-bottom: 0;
 		}
 	}
@@ -108,7 +108,7 @@ table.variations tbody tr:nth-child(odd) {
 	display: block;
 	width: 100%;
 
-	& label {
+	label {
 		margin-bottom: 0;
 		padding: 0;
 	}
@@ -125,30 +125,30 @@ table.variations tbody tr:nth-child(odd) {
 /* Input qty and add to cart button when HAS variations */
 .cart.variations_form {
 
-	& .single_variation_wrap {
+	.single_variation_wrap {
 
-		& .woocommerce-variation-add-to-cart {
+		.woocommerce-variation-add-to-cart {
 			align-items: center;
 			display: flex;
 			justify-content: center;
 
-			& .quantity {
+			.quantity {
 				flex: 1;
 
-				& input {
+				input {
 					margin-bottom: 0;
 					padding: var(--go-input--padding--y) 36px var(--go-input--padding--y) var(--go-input--padding--x);
 					width: 100%;
 				}
 			}
 
-			& button[type="submit"] {
+			button[type="submit"] {
 				flex: 1;
 				margin-right: 1em;
 			}
 		}
 
-		& .woocommerce-variation-price {
+		.woocommerce-variation-price {
 			margin: 0 0 1.5rem;
 		}
 	}

diff --git a/.dev/assets/shared/css/woocommerce/radio.scss b/.dev/assets/shared/css/woocommerce/radio.scss
@@ -1,12 +1,14 @@
 .woocommerce-page {
 
-	& .wc_payment_methods {
+	.wc_payment_methods,
+	.woocommerce-shipping-methods {
 
-		& input[name="payment_method"] {
+		input[name="payment_method"],
+		.shipping_method {
 			display: none;
 		}
 
-		& label {
+		label {
 			@include checkbox-radio-label;
 			position: relative;
 
@@ -21,4 +23,11 @@
 			}
 		}
 	}
+
+	.woocommerce-shipping-methods {
+
+		label::before {
+			top: 3px;
+		}
+	}
 }