Radcliffe 2: Fixes WooCommerce styling

radcliffe-2/rtl.css

@@ -9,7 +9,6 @@ https://codex.wordpress.org/Right-to-Left_Language_Support
 
 */
 
-
 body {
 	direction: rtl;
 	unicode-bidi: embed;
@@ -55,8 +54,8 @@ th {
 
 /* Small menu. */
 .menu-toggle .icon {
-	margin-left: 0;
-	margin-right: 6px;
+	margin-left: 6px;
+	margin-right: 0;
 }
 
 /* Jetpack social menu */
@@ -170,6 +169,7 @@ th {
 /*--------------------------------------------------------------
 ## Comments
 --------------------------------------------------------------*/
+
 .comments .children {
 	margin-left: 0;
 	margin-right: 5%;
@@ -215,19 +215,352 @@ ol.children ol.children {
 /*--------------------------------------------------------------
 # Infinite scroll
 --------------------------------------------------------------*/
+
 #infinite-handle span {
 	float: right;
 }
 
 /*--------------------------------------------------------------
-# Media Queries
+# WooCommerce
 --------------------------------------------------------------*/
 
-@media all and  (max-width: 768px) {
+.woocommerce .site-main > .woocommerce-message {
+	text-align: right;
+}
+
+.woocommerce .site-main > .woocommerce-message .button {
+	float: left;
+}
+
+.woocommerce-sorting-wrap {
+	text-align: right;
+}
+
+table.shop_table_responsive tr td {
+	text-align: right;
+}
+
+table.shop_table_responsive tr td::before{
+	float: right;
+}
+
+table.shop_table_responsive tr td.product-remove a {
+	text-align: right;
+}
+
+table.shop_table_responsive.my_account_orders .order-actions{
+	text-align: left;
+}
+
+@media screen and (min-width: 768px) {
+
+	table.shop_table_responsive tr td {
+		text-align: left;
+	}
+
+	table.shop_table_responsive tr th,
+	table.shop_table_responsive tr td {
+		text-align: right;
+	}
+
+	table.shop_table_responsive tbody .coupon {
+		float: right;
+	}
+
+	table.shop_table_responsive tbody input[name="update_cart"] {
+		float: left;
+	}
+}
+
+ul.products li.product a.added_to_cart {
+	margin-left: 0px;
+	margin-right: 6px;
+}
+
+@media screen and (min-width: 768px) {
+
+	ul.products li.product {
+		float: right;
+		margin-left: 3.8%;
+		margin-right: 0;
+	}
+
+	ul.products li.product.last {
+		margin-left: 0;
+	}
+}
+
+.single-product div.product .onsale {
+	left: auto;
+	right: 4%;
+}
+
+.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
+	left: 0;
+	right: auto;
+}
+
+.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-2 .flex-control-thumbs li:nth-child(2n) {
+	margin-left: 0;
+}
+
+.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-3 .flex-control-thumbs li:nth-child(3n) {
+	margin-left: 0;
+}
+
+.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(4n) {
+	margin-left: 0;
+}
+
+.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li:nth-child(5n) {
+	margin-left: 0;
+}
+
+.single-product div.product .cart {
+	float: right;
+	margin: 0 0 3em 40px;
+}
+
+.single-product div.product .product_meta {
+	float: left;
+}
+
+@media screen and (min-width: 768px) {
+
+	.single-product div.product .onsale {
+		left: auto;
+		right: 25%;
+	}
+}
+
+.single-product div.product .commentlist .comment-text .meta {
+	margin-right: 5px;
+	margin-left: 0;
+}
+
+.single-product div.product .comment .avatar {
+	left: auto;
+	right: inherit;
+}
+
+.woocommerce-cart td.actions {
+	text-align: left;
+}
+
+.woocommerce-cart .cart_totals h2 {
+	text-align: right;
+}
+
+.woocommerce-cart .cart_totals .shop_table {
+	text-align: right;
+}
+
+.woocommerce-cart .wc-proceed-to-checkout {
+	text-align: right;
+}
+
+.woocommerce-checkout .shop_table {
+	text-align: right;
+}
+
+.woocommerce #payment [for="payment_method_paypal"]>img {
+	margin-right: 40px;
+	margin-left: 0;
+	float: left;
+}
+
+@media screen and (min-width: 768px) {
+
+	.woocommerce-address-fields__field-wrapper .form-row-first,
+	.col2-set .form-row-first {
+		float: right;
+		margin-left: 40px;
+		margin-right: 0;
+	}
+
+	.woocommerce-address-fields__field-wrapper .form-row-last,
+	.col2-set .form-row-last {
+		float: left;
+		margin-left: 0;
+	}
+}
+
+@media screen and (min-width: 48em) {
+
+	.woocommerce-account .woocommerce .col-1 {
+		float: right;
+	}
 
-	.menu-toggle {
-		margin: 0 4% 40px 0;
+	.woocommerce-account .woocommerce .col-2 {
+		float: left;
 	}
+}
+
+.woocommerce-MyAccount-navigation ul {
+	padding-right: 0;
+}
+
+.woocommerce-MyAccount-navigation a .icon {
+	margin-left: 0;
+	margin-right: 6px;
+}
+
+.woocommerce-MyAccount-navigation ul ul ul {
+	left: auto;
+	right: -999em;
+}
+
+.woocommerce-MyAccount-navigation ul li:hover>ul,
+.woocommerce-MyAccount-navigation ul li.focus>ul {
+	right: auto;
+}
+
+.woocommerce-MyAccount-navigation ul ul li:hover>ul,
+.woocommerce-MyAccount-navigation ul ul li.focus>ul {
+	left: auto;
+	right: 100%;
+}
+
+.woocommerce-MyAccount-content {
+	text-align: right;
+}
+
+.site-header-cart ul {
+	padding-right: 0;
+}
+
+.site-header-cart .cart-contents .icon {
+	margin-left: 6px;
+	margin-right: 0;
+}
+
+.site-header-cart ul ul ul {
+	left: auto;
+	right: -999em;
+}
+
+.site-header-cart ul li:hover>ul,
+.site-header-cart ul li.focus>ul {
+	right: auto;
+}
+
+.site-header-cart ul ul li:hover>ul,
+.site-header-cart ul ul li.focus>ul {
+	left: auto;
+	right: 100%;
+}
+
+@media screen and (min-width: 768px) {
+
+	.site-header-cart {
+		text-align: left;
+	}
+
+	.site-header-cart>li:last-of-type {}
+	.site-header-cart .widget_shopping_cart {
+		left: auto;
+		right: -999em;
+	}
+
+	.site-header-cart:hover .widget_shopping_cart,
+	.site-header-cart.focus .widget_shopping_cart {
+		left: 0;
+		right: auto;
+	}
+
+	.site-header-cart .widget_shopping_cart_content {
+		float: left;
+	}
+
+	.menu-1-empty .site-header-cart .widget_shopping_cart_content {
+		float: right;
+	}
+
+	.site-header-cart .widget_shopping_cart_content:after {
+		left: 60px;
+		right: auto;
+		margin-right: -10px;
+		margin-left: 0;
+	}
+
+
+	#site-header-cart .widget_shopping_cart_content .mini_cart_item {
+		margin-left: 6.5%;
+		margin-right: 0;
+	}
+
+	#site-header-cart .widget_shopping_cart_content .mini_cart_item:nth-child(4n),
+	#site-header-cart .widget_shopping_cart_content .mini_cart_item:last-child {
+		margin-left: 0;
+	}
+}
+
+.star-rating:before {
+	float: right;
+	left: auto;
+	right: 0;
+}
+
+.star-rating span {
+	float: right;
+	left: auto;
+	right: 0;
+}
+
+.star-rating span:before {
+	left: auto;
+	right: 0;
+}
+
+p.stars a {
+	margin-left: 1px;
+	margin-right: 0;
+}
+
+p.stars a:before {
+	left: auto;
+	right: 0;
+}
+
+.woocommerce-password-strength {
+	text-align: left;
+}
+
+.woocommerce-info .woocommerce-Button {
+	float: left;
+}
+
+.woocommerce.widget_shopping_cart .woocommerce-mini-cart__buttons a {
+	margin-left: 1em;
+	margin-right: 0;
+}
+
+.woocommerce.widget_rating_filter .star-rating {
+	float: right;
+}
+
+.widget_price_filter .price_slider_amount {
+	text-align: left;
+}
+
+.widget_price_filter .price_slider_amount .button {
+	float: right;
+}
+
+.widget_price_filter .ui-slider {
+	text-align: right;
+}
+
+.widget_price_filter .ui-slider .ui-slider-handle:last-child {
+	margin-left: 0;
+	margin-right: -1em;
+}
+
+/*--------------------------------------------------------------
+# Media Queries
+--------------------------------------------------------------*/
+
+@media all and  (max-width: 768px) {
 
 	.dropdown-toggle {
 		left: 6px;
@@ -244,6 +577,7 @@ ol.children ol.children {
 }
 
 @media all and (min-width: 600px) {
+
 	.jetpack-social-navigation {
 		margin-right: 0;
 	}
@@ -290,6 +624,7 @@ ol.children ol.children {
 }
 
 @media screen and (min-width: 768px) {
+
 	.contact-info-area span.contact-info-label {
 		right: auto;
 	}

radcliffe-2/style.css

@@ -908,7 +908,7 @@ textarea {
 	color: #666;
 	border: 1px solid #ccc;
 	border-radius: 3px;
-	padding: 3px;
+	padding: 3px 7px;
 	max-width: 100%;
 }
 

radcliffe-2/woocommerce.css

@@ -51,10 +51,14 @@
 	margin-right: auto;
 	max-width: 84%;
 	padding: 20px 10px;
-	text-align: center;
+	text-align: left;
 	width: 740px;
 }
 
+.woocommerce .site-main > .woocommerce-message .button {
+	float: right;
+}
+
 .woocommerce-products-header {
 	border-top: 1px solid #ddd;
 	padding: 54px 0;
@@ -117,7 +121,15 @@ table.shop_table_responsive tbody th {
 }
 
 table.shop_table_responsive tr td {
-	clear: both;
+	display:block;
+	text-align:right;
+	clear:both
+}
+
+table.shop_table_responsive tr td::before{
+	content: attr(data-title) ": ";
+	font-weight: 600;
+	float: left;
 }
 
 table.shop_table_responsive thead th,
@@ -128,7 +140,7 @@ table.shop_table_responsive tbody tr {
 table.shop_table_responsive thead th .quantity .qty,
 table.shop_table_responsive tbody tr .quantity .qty {
 	font-size: 1em;
-	width: 2em;
+	width: 3em;
 }
 
 table.shop_table_responsive tr td.product-thumbnail a {
@@ -136,9 +148,17 @@ table.shop_table_responsive tr td.product-thumbnail a {
 }
 
 table.shop_table_responsive tr td.product-remove a {
+	font-size: 1.5em;
 	text-align: left;
 }
 
+table.shop_table_responsive tr td.product-remove {
+	background: #fff;
+	border-top: 1.618em solid #fff;
+	padding: 0;
+	position: relative;
+}
+
 table.shop_table_responsive tr td.product-remove:before {
 	display: none;
 }
@@ -153,13 +173,29 @@ table.shop_table_responsive tr td.download-actions .button {
 	text-align: center;
 }
 
+table.shop_table_responsive.my_account_orders .order-actions{
+	text-align: right;
+}
+
+table.shop_table_responsive.my_account_orders .order-actions::before{
+	display: none;
+}
+
 table.shop_table_responsive tbody .coupon {
-	margin-bottom: 18px;
+	padding-bottom: 1em;
+	margin-bottom: 1em;
+	border-bottom: 1px solid #ddd;
 }
 
 table.shop_table_responsive tbody .coupon #coupon_code {
-	font-size: 1em;
-	width: 5em;
+	display: block;
+	font-size: 0.9em;
+	margin-top: 1em;
+	width: 100%;
+}
+
+table.shop_table_responsive tbody .coupon .button {
+	margin-top: 1em;
 }
 
 @media screen and (min-width: 768px) {
@@ -172,10 +208,29 @@ table.shop_table_responsive tbody .coupon #coupon_code {
 		text-align: right;
 	}
 
+	table.shop_table_responsive tr td::before {
+		display: none;
+	}
+
 	table.shop_table_responsive tr td.product-thumbnail {
 		width: 100px;
 	}
 
+	table.shop_table_responsive tr td.product-remove {
+		background: transparent;
+		border: 0;
+		display: table-cell;
+		text-align: center;
+	}
+
+	table tbody > tr:nth-child(2n+1) > td.product-remove {
+		background: #f9f9f9;
+	}
+
+	table.shop_table_responsive tr td.product-remove a {
+		font-size: 1em;
+	}
+
 	table.shop_table_responsive tbody th {
 		display: table-cell;
 	}
@@ -187,14 +242,22 @@ table.shop_table_responsive tbody .coupon #coupon_code {
 	}
 
 	table.shop_table_responsive tbody .coupon {
+		border-bottom: 0;
 		float: left;
 		margin-bottom: 0;
+		padding-bottom: 0;
 	}
 
 	table.shop_table_responsive tbody .coupon #coupon_code {
+		display: inline-block;
+		margin-top: 0;
 		width: auto;
 	}
 
+	table.shop_table_responsive tbody .coupon .button {
+		margin-top: 0;
+	}
+
 	table.shop_table_responsive tbody input[name="update_cart"] {
 		float: right;
 	}
@@ -238,18 +301,21 @@ ul.products li.product a {
 
 ul.products li.product a.added_to_cart {
 	background: #ca2017;
-    border-radius: 3px;
-    color: #fff;
+	border-radius: 3px;
+	color: #fff;
+	display: inline-block;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
 	font-size: 14px;
-    font-size: 1.4rem;
-    line-height: 1;
-    margin-left: 6px;
-    padding: 10px 14px;
+	font-size: 1.4rem;
+	line-height: 1.29;
+	margin-left: 6px;
+	padding: 9px 14px;
 }
+
 ul.products li.product a.added_to_cart:hover {
 	background: #222;
 }
+
 ul.products li.product .woocommerce-loop-product__title {
 	color: #000;
 	font-size: 20px;
@@ -299,6 +365,7 @@ ul.products li.product .button {
 }
 
 @media screen and (min-width: 768px) {
+
 	ul.products li.product {
 		width: 22.15%;
 		float: left;
@@ -653,6 +720,38 @@ ul.products li.product .button {
 /* !Cart */
 /**/
 
+.woocommerce-cart td.actions {
+	text-align: right;
+	margin-top: 2em;
+}
+
+.woocommerce-cart td.actions label {
+	display: none;
+}
+
+.woocommerce-cart td.actions .button {
+	vertical-align: top;
+}
+
+.woocommerce-cart td.actions button[name="update_cart"] {
+	margin-bottom: 1em;
+}
+
+.woocommerce-cart .product-thumbnail {
+	float: none;
+}
+
+.woocommerce-cart .product-thumbnail::before {
+	display: none;
+}
+
+.woocommerce-cart .product-thumbnail img {
+	display: block;
+	margin: 0 auto;
+	max-width: 3.706325903em;
+	height: auto;
+}
+
 .woocommerce-cart .woocommerce > .woocommerce-message {
 	padding: 10px;
 	text-align: center;
@@ -690,6 +789,10 @@ ul.products li.product .button {
 	width: 100%;
 }
 
+.woocommerce-cart .cart-collaterals input {
+	width: 100%;
+}
+
 .woocommerce-cart .cart-collaterals .cross-sells {
 	display: none;
 }
@@ -704,6 +807,10 @@ ul.products li.product .button {
 
 @media screen and (min-width: 768px) {
 
+	.woocommerce-cart td.actions {
+		margin-top: 0em;
+	}
+
 	.woocommerce-cart [data-title="Subtotal"] {
 		width: 33%;
 	}
@@ -711,6 +818,10 @@ ul.products li.product .button {
 	.woocommerce-cart .cart-collaterals .cross-sells {
 		display: block;
 	}
+
+	.woocommerce-cart td.actions button[name="update_cart"] {
+		margin-bottom: 0;
+	}
 }
 
 /**/
@@ -757,7 +868,6 @@ ul.products li.product .button {
 .woocommerce #payment [for="payment_method_paypal"]>img {
 	margin-left: 40px;
 	float: right;
-	width: 40%;
 }
 
 .woocommerce #payment .payment_box p,
@@ -790,6 +900,19 @@ ul.products li.product .button {
 	border-bottom: none;
 }
 
+.woocommerce-checkout .woocommerce-form-coupon {
+	margin-bottom: 1em;
+}
+
+.woocommerce-checkout .woocommerce-form-coupon p {
+	margin-bottom: 1em;
+	margin-top: 0;
+}
+
+.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
+	margin-bottom: 1em;
+}
+
 .woocommerce-checkout .col-2 {
 	clear: both;
 }
@@ -799,20 +922,24 @@ ul.products li.product .button {
 }
 
 @media screen and (min-width: 768px) {
+
 	.woocommerce-address-fields__field-wrapper .form-row-first,
 	.col2-set .form-row-first {
 		float: left;
 		margin-right: 40px;
 	}
+
 	.woocommerce-address-fields__field-wrapper .form-row-last,
 	.col2-set .form-row-last {
 		float: right;
 		margin-right: 0;
 	}
+
 	.woocommerce-address-fields__field-wrapper .form-row-wide,
 	.col2-set .form-row-wide {
 		clear: both;
 	}
+
 	.woocommerce-address-fields__field-wrapper .form-row-first,
 	.woocommerce-address-fields__field-wrapper .form-row-last,
 	.col2-set .form-row-first,
@@ -1183,6 +1310,7 @@ ul.products li.product .button {
 .site-header-cart .current-menu-ancestor>a {}
 
 @media all and (max-width: 768px) {
+
 	.site-header-cart .count {
 		display: none;
 	}
@@ -1192,6 +1320,7 @@ ul.products li.product .button {
 }
 
 @media screen and (min-width: 768px) {
+
 	.site-header-cart {
 		flex: 0 0 auto;
 		margin-bottom: 0;
@@ -1199,6 +1328,7 @@ ul.products li.product .button {
 		text-align: right;
 		top: inherit;
 	}
+
 	.site-header-cart>li:last-of-type {}
 	.site-header-cart .widget_shopping_cart {
 		font-size: ms(-1);
@@ -1209,12 +1339,14 @@ ul.products li.product .button {
 		top: 100%;
 		z-index: 999999;
 	}
+
 	.site-header-cart:hover .widget_shopping_cart,
 	.site-header-cart.focus .widget_shopping_cart {
 		display: block;
 		left: auto;
 		right: 0;
 	}
+
 	.site-header-cart .widget_shopping_cart_content {
 		border-radius: 6px;
 		box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
@@ -1227,9 +1359,11 @@ ul.products li.product .button {
 		flex-wrap: wrap;
 		flex-flow: column;
 	}
+
 	.menu-1-empty .site-header-cart .widget_shopping_cart_content {
 		float: left;
 	}
+
 	.site-header-cart .widget_shopping_cart_content:after {
 		border: 10px solid transparent;
 		border-bottom-color: #222;
@@ -1241,46 +1375,62 @@ ul.products li.product .button {
 		right: 60px;
 		top: 3px;
 	}
+
 	.site-header-cart .widget_shopping_cart_content .product_list_widget {
 		display: flex;
 		flex-wrap: wrap;
 		justify-content: space-evenly;
 		margin-bottom: 1em;
 	}
+
 	#site-header-cart .widget_shopping_cart_content .mini_cart_item {
 		font-weight: 400;
 		padding: 0;
+		margin-right: 6.5%;
 		text-transform: none;
 		width: 20%;
 	}
+
+	#site-header-cart .widget_shopping_cart_content .mini_cart_item:nth-child(4n),
+	#site-header-cart .widget_shopping_cart_content .mini_cart_item:last-child {
+		margin-right: 0;
+	}
+
 	.site-header-cart .widget_shopping_cart_content .mini_cart_item a img {
 		display: block;
 		margin: 0 auto;
 	}
+
 	.site-header-cart .widget_shopping_cart_content .mini_cart_item .remove:hover {
 		text-decoration: none;
 	}
+
 	.site-header-cart .widget_shopping_cart_content .mini_cart_item .remove {
 		font-size: 25px;
 	}
+
 	.site-header-cart .widget_shopping_cart_content .mini_cart_item .quantity {
 		display: block;
 		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
 		padding: 0 12px 10px;
 	}
+
 	.site-header-cart .widget_shopping_cart_content .woocommerce-mini-cart__total {
 		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
 		margin-bottom: .5em;
 		text-align: center;
 	}
+
 	.site-header-cart .widget_shopping_cart_content .woocommerce-mini-cart__buttons {
 		margin: 0;
 		text-align: center;
 	}
+
 	.site-header-cart .widget_shopping_cart_content .woocommerce-mini-cart__buttons a {
 		display: inline-block;
 		margin: 0 .5em;
 	}
+
 	.site-header-cart .cart-contents .icon {
 		display: inline;
 	}
@@ -1457,6 +1607,10 @@ p.stars.selected a:not(.active):before {
 	cursor: default;
 }
 
+.single-product div.product  .shop_attributes p {
+	margin-bottom: 0;
+}
+
 /**/
 /* !Password strength meter */
 /**/