scss 使用Enfold进行WooCommerce的两列检查

Posted 2021-05-17

/* =============================================================================
   WooCommerce Modifications
   ========================================================================== */
$color-black-darker: #999999;
$color-black-dark: #848484;
$color-grey-tabs-border: #e4e4e4;

#top div.woocommerce-message {
	background-color: $color-green;
	color: $color-white-hard;
}

#top table.shop_table .actions .coupon .button,
#top table.shop_table .actions .button {
	background-color: $color-black-darker;
	border-color: $color-black-dark;

	&:hover {
		background-color: $color-purple-lighter;
		border-color: $color-purple-lighter-border;
	}
}

.woocommerce-cart {
	.cart-collaterals .cart_totals a.button.alt {
		background-color: $color-green;
		border-color: $color-green;
		width: 100%;
	}

	.woocommerce form {
		display: inline-block;
	}

	.cart-collaterals {
		display: inline-block;
		float: right;
		
		.cart_totals {
			float: right;
			width: 90%;
		}
	}
}

.entry-content .woocommerce {

	.checkout .col-1,
	.checkout .col-2 {
		width: 100%;
	}

	#customer_details {
		width: 55%;
	}

	.cart_totals.calculated_shipping {
		border: 2px solid $color-grey-tabs-border;
		padding: 30px;
		@include border-radius(3px);
	}

	h3#order_review_heading {
		padding: 30px 30px 15px 30px;
		border-top: 2px solid $color-grey-tabs-border;
		border-right: 2px solid $color-grey-tabs-border;
		border-left: 2px solid $color-grey-tabs-border;
		@include border-radius-all(3px, 3px, 0px, 3px);
	}

	#order_review {
		padding: 0px 30px 30px 30px;
		border-bottom: 2px solid $color-grey-tabs-border;
		border-right: 2px solid $color-grey-tabs-border;
		border-left: 2px solid $color-grey-tabs-border;
		@include border-radius-all(0px, 3px, 3px, 3px);
	}

	#order_review,
	#order_review_heading {
	    width: 42%;
    	display: inline-block;
    	margin-left: 3%;
    	margin-bottom: 0px;
	}

	#payment #place_order {
		background-color: $color-green;
		border-color: $color-green;
		width: 100%;
	}
}


@media (min-width: 991px) {
	.woocommerce-cart {
		.woocommerce form {
			width: 70%;
		}

		.cart-collaterals {
			width: 30%;
		}
	}
}

@media (min-width: 768px) and (max-width: 990px) {
	.woocommerce-cart {
		.woocommerce form {
			width: 65%;
		}

		.cart-collaterals {
			width: 35%;
		}
	}
}

@media (max-width: 767px) {
	.entry-content .woocommerce {
		.checkout .col-1,
		.checkout .col-2,
		#customer_details,
		#order_review,
		#order_review_heading,
		.cart_totals.calculated_shipping {
			width: 100% !important;
		}

		#order_review,
		#order_review_heading {
			border: none !important;
			padding: 0px !important;
			margin-left: 0%;
		}
	}
}

@media (max-width: 567px) {
	.woocommerce-cart {

		.cart-collaterals {

			.cart_totals {

				float: left;
				width: 100%;

				a.button.alt {
					width: 100%;
				}
			}
		}
	}
}