From 20f8edba4bfec8dfdef871c2e81bbf67f7a4a5ea Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Wed, 20 Apr 2016 12:14:02 +0100
Subject: [PATCH] Use icons for order review radios/checkboxes

---
 assets/sass/woocommerce/woocommerce.scss      | 48 ++++++++++++++-----
 .../class-storefront-customizer.php           |  3 +-
 2 files changed, 37 insertions(+), 14 deletions(-)

diff --git a/assets/sass/woocommerce/woocommerce.scss b/assets/sass/woocommerce/woocommerce.scss
index 072195eac..df4302fdd 100644
--- a/assets/sass/woocommerce/woocommerce.scss
+++ b/assets/sass/woocommerce/woocommerce.scss
@@ -1001,9 +1001,9 @@ form.checkout {
 
 		li {
 			list-style: none !important;
-			padding: 1.387em !important;
 			margin-left: 0;
 			margin-bottom: 1px;
+			position: relative;
 
 			img {
 				float: right;
@@ -1018,10 +1018,24 @@ form.checkout {
 			}
 
 			label {
-				width: 92%;
-				padding-top: 0 !important;
-				margin-left: .618em;
-				font-weight: bold;
+				display: block;
+				padding: 1.387em;
+				cursor: pointer;
+
+				&:before {
+					@include fa-icon();
+					content: "\f10c";
+					margin-right: .53em;
+					@include transition(color, ease, .2s);
+				}
+			}
+
+			input[type=radio]:first-child {
+				@include screen-reader-text();
+
+				&:checked + label:before {
+					content: "\f192";
+				}
 			}
 
 			p {
@@ -1030,7 +1044,6 @@ form.checkout {
 
 			.payment_box {
 				padding: 1.387em;
-				margin: 1.387em -1.387em -1.387em -1.387em;
 
 				fieldset {
 					border: 0;
@@ -1123,15 +1136,24 @@ form.checkout {
 		margin-bottom: 1em;
 
 		label {
-			display: inline-block;
-			margin-left: .618em;
+			display: block;
+			cursor: pointer;
+
+			&:before {
+				@include fa-icon();
+				content: "\f0c8";
+				margin-right: .53em;
+				opacity: .25;
+			}
 		}
 
-		input {
-			display: inline-block;
-			width: auto;
-			float: left;
-			margin: .327em .53em 0 0;
+		input[type=checkbox] {
+			@include screen-reader-text();
+
+			&:checked + label:before {
+				content: "\f14a";
+				opacity: 1;
+			}
 		}
 	}
 
diff --git a/inc/customizer/class-storefront-customizer.php b/inc/customizer/class-storefront-customizer.php
index 6a3d50feb..e863621be 100644
--- a/inc/customizer/class-storefront-customizer.php
+++ b/inc/customizer/class-storefront-customizer.php
@@ -684,7 +684,8 @@ public function get_woocommerce_css() {
 			.quantity .plus, .quantity .minus,
 			p.stars a:hover:after,
 			p.stars a:after,
-			.star-rating span:before {
+			.star-rating span:before,
+			#payment .payment_methods li input[type=radio]:first-child:checked+label:before {
 				color: ' . $storefront_theme_mods['accent_color'] . ';
 			}