From 3fccf450f9cd8220d6ded68394325a98febdd3e0 Mon Sep 17 00:00:00 2001
From: FezVrasta <federico.zivolo@gmail.com>
Date: Mon, 9 Mar 2015 18:01:22 +0100
Subject: [PATCH] improved accessibility (#425)

---
 less/_radios.less | 167 ++++++++++++++++++++++++----------------------
 1 file changed, 86 insertions(+), 81 deletions(-)

diff --git a/less/_radios.less b/less/_radios.less
index 6251705d..84d512bf 100644
--- a/less/_radios.less
+++ b/less/_radios.less
@@ -1,95 +1,100 @@
 .form-horizontal .radio {
-    margin-bottom: 10px;
+  margin-bottom: 10px;
 }
 .radio {
-    label {
-        cursor: pointer;
-        padding-left: 45px;
-        position: relative;
-        span {
-            display: block;
-            position: absolute;
-            left: 10px;
-            top: 2px;
-            transition-duration: 0.2s;
-        }
-        .circle {
-            border: 2px solid @lightbg-text;
-            height: 15px;
-            width: 15px;
-            border-radius: 100%;
-        }
-        .check {
-            height: 15px;
-            width: 15px;
-            border-radius: 100%;
-            background-color: @radio-default;
-            transform: scale(0);
-        }
-        .check:after {
-            display: block;
-            position: absolute;
-            content: "";
-            background-color: @lightbg-text;
-            left: -18px;
-            top: -18px;
-            height: 50px;
-            width: 50px;
-            border-radius: 100%;
-            z-index: 1;
-            opacity: 0;
-            margin: 0;
-            transform: scale(1.5);
-        }
-        input[type=radio]:not(:checked) ~ .check:after {
-            animation: rippleOff 500ms;
-        }
-        input[type=radio]:checked ~ .check:after {
-            animation: rippleOn 500ms;
-        }
-
+  label {
+    cursor: pointer;
+    padding-left: 45px;
+    position: relative;
+    span {
+      display: block;
+      position: absolute;
+      left: 10px;
+      top: 2px;
+      transition-duration: 0.2s;
     }
-    .variations(~" input[type=radio]:checked ~ .check", background-color, @radio-default);
-    .variations(~" input[type=radio]:checked ~ .circle", border-color, @radio-default);
-
-    input[type=radio][disabled] ~ .check,
-    input[type=radio][disabled] ~ .circle {
-        opacity: 0.5;
+    .circle {
+      border: 2px solid @lightbg-text;
+      height: 15px;
+      width: 15px;
+      border-radius: 100%;
+    }
+    .check {
+      height: 15px;
+      width: 15px;
+      border-radius: 100%;
+      background-color: @radio-default;
+      transform: scale(0);
+    }
+    .check:after {
+      display: block;
+      position: absolute;
+      content: "";
+      background-color: @lightbg-text;
+      left: -18px;
+      top: -18px;
+      height: 50px;
+      width: 50px;
+      border-radius: 100%;
+      z-index: 1;
+      opacity: 0;
+      margin: 0;
+      transform: scale(1.5);
+    }
+    input[type=radio]:not(:checked) ~ .check:after {
+      animation: rippleOff 500ms;
+    }
+    input[type=radio]:checked ~ .check:after {
+      animation: rippleOn 500ms;
     }
 
-    input[type=radio] { display: none; }
-    input[type=radio]:checked ~ .check {
-        transform: scale(0.55);
-    }
-    input[type=radio][disabled] ~ .circle {
-        border-color: @lightbg-text;
-    }
-    input[type=radio][disabled] ~ .check {
-        background-color: @lightbg-text;
-    }
+  }
+  .variations(~" input[type=radio]:checked ~ .check", background-color, @radio-default);
+  .variations(~" input[type=radio]:checked ~ .circle", border-color, @radio-default);
+
+  input[type=radio][disabled] ~ .check,
+  input[type=radio][disabled] ~ .circle {
+    opacity: 0.5;
+  }
+
+  input[type=radio] {
+    opacity: 0;
+    height: 0;
+    width: 0;
+    overflow: hidden;
+  } }
+input[type=radio]:checked ~ .check {
+  transform: scale(0.55);
+}
+input[type=radio][disabled] ~ .circle {
+  border-color: @lightbg-text;
+}
+input[type=radio][disabled] ~ .check {
+  background-color: @lightbg-text;
+}
 
 }
 
 @keyframes rippleOn {
-    0% {
-        opacity: 0;
-    }
-    50% {
-        opacity: 0.2;
-    }
-    100% {
-        opacity: 0;
-    }
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 0;
+  }
 }
 
 @keyframes rippleOff {
-    0% {
-        opacity: 0;
-    }
-    50% {
-        opacity: 0.2;
-    }
-    100% {
-        opacity: 0;
-    }
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 0;
+  }
 }