From 4972b81697fbf5b9ac12a211010c623e625ab3ab Mon Sep 17 00:00:00 2001
From: Robin Whittleton <robin.whittleton@digital.cabinet-office.gov.uk>
Date: Tue, 30 Aug 2016 16:12:03 +0100
Subject: [PATCH] Use currentColor instead of $black for custom radios /
 checkboxes

Users who want to redefine their browser colours should have the radios / checkboxes follow suit.
---
 .../sass/elements/forms/_form-block-labels.scss   | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/public/sass/elements/forms/_form-block-labels.scss b/public/sass/elements/forms/_form-block-labels.scss
index 090b863da..c5171673c 100644
--- a/public/sass/elements/forms/_form-block-labels.scss
+++ b/public/sass/elements/forms/_form-block-labels.scss
@@ -39,9 +39,9 @@
   .js-enabled & {
     &.selection-button-radio::before {
       content: "";
-      border: 2px solid $black;
+      border: 2px solid currentColor;
       border-radius: 50%;
-      background: $white;
+      background: transparent;
       width: 33px;
       height: 33px;
       position: absolute;
@@ -51,9 +51,9 @@
 
     &.selection-button-radio.selected::after {
       content: "";
-      border: 2px solid $black;
+      border: 2px solid currentColor;
       border-radius: 50%;
-      background: $black;
+      background: currentColor;
       width: 19px;
       height: 19px;
       position: absolute;
@@ -63,8 +63,8 @@
 
     &.selection-button-checkbox::before {
       content: "";
-      border: 2px solid $black;
-      background: $white;
+      border: 2px solid currentColor;
+      background: transparent;
       width: 33px;
       height: 33px;
       position: absolute;
@@ -74,8 +74,9 @@
 
     &.selection-button-checkbox.selected::after {
       content: "";
-      border: solid $black;
+      border: solid currentColor;
       border-width: 0 0 4px 4px;
+      background: transparent;
       width: 15px;
       height: 9px;
       position: absolute;