From e76ca342c6384dea6cb982419793d967596645a6 Mon Sep 17 00:00:00 2001
From: Alex Windett <alex@bigfish.co.uk>
Date: Thu, 27 Oct 2016 10:12:04 +0100
Subject: [PATCH] Radio Input - Refactoring CSS

---
 ui/.postcss.js                    | 11 +++++++++++
 ui/src/components/radio/readme.md |  2 +-
 ui/src/components/radio/style.css |  9 ++-------
 3 files changed, 14 insertions(+), 8 deletions(-)
 create mode 100644 ui/.postcss.js

diff --git a/ui/.postcss.js b/ui/.postcss.js
new file mode 100644
index 00000000..d5ed8363
--- /dev/null
+++ b/ui/.postcss.js
@@ -0,0 +1,11 @@
+var calc = require('postcss-calc');
+
+module.exports = function (postcss) {
+  return postcss([
+      require('postcss-at-rules-variables')(),
+      require('postcss-modules-values'),
+      require('postcss-mixins')(),
+      require('postcss-for'),
+      require('postcss-cssnext')(),
+   ])
+}
diff --git a/ui/src/components/radio/readme.md b/ui/src/components/radio/readme.md
index 35b1a3b3..0a8cd9de 100644
--- a/ui/src/components/radio/readme.md
+++ b/ui/src/components/radio/readme.md
@@ -1,4 +1,4 @@
-# `<Radio>`
+# `<Radio >`
 
 ## demo
 
diff --git a/ui/src/components/radio/style.css b/ui/src/components/radio/style.css
index 38f33d23..be8fdb35 100644
--- a/ui/src/components/radio/style.css
+++ b/ui/src/components/radio/style.css
@@ -1,5 +1,6 @@
 :root {
   --radio-radius: 20px;
+  --radio-border-size: calc( var(--radio-radius) / 4 );
   --dot-color: #646464;
   --border-color: #cfd1d1;
 }
@@ -18,7 +19,7 @@
 
     &:before {
       content: '';
-      border : calc( var(--radio-radius) / 4 ) solid white;
+      border : var(--radio-border-size) solid white;
       border-radius: 50%;
       box-shadow: 0 0 0 1px var(--border-color);
       display: inline-block;
@@ -38,12 +39,6 @@
     &:checked {
       & ~ span:before {
         background: var(--dot-color);
-        border : calc( var(--radio-radius) / 4 ) solid white;
-        border-radius: 50%;
-        box-shadow: 0 0 0 1px var(--border-color);
-        height: var(--radio-radius);
-        position: absolute;
-        width: var(--radio-radius);
       }
     }
   }