From 02048afdab713eb8006a7ff781c623dca16b74b0 Mon Sep 17 00:00:00 2001
From: Ignacio Catalina <ignacio.catalina@bigcommerce.com>
Date: Fri, 22 Sep 2017 15:49:52 +1000
Subject: [PATCH] CHECKOUT-2461 Style optimized checkout new checklist radios
 buttons

---
 CHANGELOG.md                        |  1 +
 assets/scss/optimized-checkout.scss | 20 ++++++++++++++++++++
 2 files changed, 21 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f35aac5007..19200398f1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Style optimized checkout new checklist radio buttons [#1088](https://github.com/bigcommerce/cornerstone/pull/1088)
 
 ## 1.9.3 (2017-09-19)
 - Fixes image overlapping details on product page and Quick View on small viewports [#1067](https://github.com/bigcommerce/cornerstone/pull/1067)
diff --git a/assets/scss/optimized-checkout.scss b/assets/scss/optimized-checkout.scss
index 16fd5e410c..2b4f2d3ba0 100644
--- a/assets/scss/optimized-checkout.scss
+++ b/assets/scss/optimized-checkout.scss
@@ -349,6 +349,26 @@ $optimizedCheckout-input--error-boxShadow: 0 0 3px transparentize(stencilColor("
     border-color: stencilColor("optimizedCheckout-formChecklist-borderColor");
 }
 
+.optimizedCheckout-form-checklist-checkbox {
+    ~ .form-label::after,
+    ~ .form-label::before {
+        background-color: stencilColor("optimizedCheckout-formField-backgroundColor");
+        border-color: stencilColor("optimizedCheckout-formField-borderColor");
+    }
+
+    &:focus ~ .form-label {
+        box-shadow: inset 0 0 0 1px stencilColor("optimizedCheckout-colorFocus");
+    }
+
+    &:checked ~ .form-label::before {
+        border-color: stencilColor("optimizedCheckout-formField-inputControlColor");
+    }
+
+    &:checked ~ .form-label::after {
+        background: stencilColor("optimizedCheckout-formField-inputControlColor");
+    }
+}
+
 //
 // Loading Toaster
 // Background & Text Color