From fc9f6fe71a12bfe775871ef262430c0500358bf4 Mon Sep 17 00:00:00 2001
From: Seghir Nadir <nadir.seghir@gmail.com>
Date: Tue, 11 Aug 2020 09:59:59 +0100
Subject: [PATCH] Use SVG for checkbox
 (https://github.com/woocommerce/woocommerce-blocks/pull/2320)

* use svg for checkbox

* update borders

* switch to rems

* define a rem function

* fix ie11 issue

* fix focus

* add ie hack

* fix spacing and switch to em

* switch to rem
---
 .../base/components/checkbox-control/index.js |  9 ++++
 .../components/checkbox-control/style.scss    | 44 +++++++++++--------
 2 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/plugins/woocommerce-blocks/assets/js/base/components/checkbox-control/index.js b/plugins/woocommerce-blocks/assets/js/base/components/checkbox-control/index.js
index 5089fb15b63..b7d3eee9b70 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/checkbox-control/index.js
+++ b/plugins/woocommerce-blocks/assets/js/base/components/checkbox-control/index.js
@@ -38,6 +38,15 @@ const CheckboxControl = ( {
 				onChange={ ( event ) => onChange( event.target.checked ) }
 				{ ...rest }
 			/>
+			<svg
+				className="wc-block-components-checkbox__mark"
+				aria-hidden="true"
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 24 20"
+			>
+				<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
+			</svg>
+
 			<span className="wc-block-components-checkbox__label">
 				{ label }
 			</span>
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/checkbox-control/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/checkbox-control/style.scss
index c447f341e26..25c59ef9756 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/checkbox-control/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/base/components/checkbox-control/style.scss
@@ -7,37 +7,45 @@
 
 	.wc-block-components-checkbox__input[type="checkbox"] {
 		appearance: none;
-		border: 1px solid currentColor;
-		height: 1em;
+		border: 2px solid currentColor;
+		border-radius: 2px;
+		height: em(18px);
+		width: em(18px);
 		margin: 0;
-		min-height: 16px;
-		min-width: 16px;
+		min-height: 18px;
+		min-width: 18px;
 		overflow: hidden;
 		position: static;
 		vertical-align: middle;
-		width: 1em;
+		background-color: #fff;
 
 		&:checked {
 			background: currentColor;
 			border-color: currentColor;
+		}
 
-			&::before {
-				color: #fff;
-				content: "\2713";
-				display: block;
-				height: calc(1rem - 2px);
-				min-height: 14px;
-				min-width: 14px;
-				margin: 0;
-				line-height: 100%;
-				text-align: center;
-				width: calc(1rem - 2px);
-			}
+		&:not(:checked) + .wc-block-components-checkbox__mark {
+			display: none;
 		}
 	}
 
-	.wc-block-components-checkbox__input[type="checkbox"] + .wc-block-components-checkbox__label {
+	.wc-block-components-checkbox__mark {
+		fill: #fff;
+		position: absolute;
+		left: em(1px);
+		top: em(-2px);
+		width: em(16px);
+		height: em(16px);
+	}
+
+	.wc-block-components-checkbox__label {
 		padding-left: $gap-smaller;
 		vertical-align: middle;
 	}
 }
+
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+	.wc-block-components-checkbox__mark {
+		display: none;
+	}
+}