From cfda56b56ef21033312f4ca9b6cf3da2382405ff Mon Sep 17 00:00:00 2001
From: elclanrs <elclanrs@gmail.com>
Date: Wed, 9 Oct 2013 03:24:11 -0400
Subject: [PATCH] radiocheck css-only style improvements

---
 README.md                 |  3 ++-
 css/jquery.idealforms.css |  2 +-
 styl/idealradiocheck.styl | 30 +++++++++++++++++++-----------
 styl/vars.styl            |  1 +
 4 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/README.md b/README.md
index 1d0a9ac..e80b0df 100644
--- a/README.md
+++ b/README.md
@@ -780,7 +780,8 @@ icon = true // disable icons (must disable in plugin options too)
 icon-size = 16px // must be square icon
 icon-padding = 8px // padding between icon, input and error
 
-radiocheck-sprite = true // `false` for css only style, no sprite (IE9 buggy)
+radiocheck-sprite = false // `true` to use sprite
+radiocheck-size = 18px // size for css-only radiocheck
 group-horizontal = false // group checkbox and radio horizontally
 
 ```
diff --git a/css/jquery.idealforms.css b/css/jquery.idealforms.css
index 808ba46..0302a8e 100644
--- a/css/jquery.idealforms.css
+++ b/css/jquery.idealforms.css
@@ -80,7 +80,7 @@ form.idealforms.adaptive .idealforms-field-checkbox .error,form.idealforms.adapt
 .idealsteps-container.adaptive .idealsteps-nav li:last-child a{-webkit-border-bottom-left-radius:3.01px;border-bottom-left-radius:3.01px;-webkit-border-bottom-right-radius:3.01px;border-bottom-right-radius:3.01px;}
 .idealsteps-container.adaptive .idealsteps-nav li.idealsteps-step-active a{padding-right:1.5em}
 .idealsteps-container.adaptive .idealsteps-nav .counter{position:relative;float:right;right:0}
-form.idealforms .ideal-radiocheck-label{display:inline-block;margin:.1em 0 !important;cursor:pointer;}
+form.idealforms .ideal-radiocheck-label{display:inline-block;padding:.25em 0 !important;cursor:pointer;}
 form.idealforms .ideal-radiocheck-label input{float:left}
 form.idealforms .ideal-check,form.idealforms .ideal-radio{float:left;margin-right:10px !important;width:20px;height:20px;background:url("../img/radiocheck.png") 0 0}
 form.idealforms .ideal-check.focus{background-position:-20px 0}
diff --git a/styl/idealradiocheck.styl b/styl/idealradiocheck.styl
index 278ae51..93a7f0a 100644
--- a/styl/idealradiocheck.styl
+++ b/styl/idealradiocheck.styl
@@ -5,7 +5,7 @@ form.idealforms
 
   .ideal-radiocheck-label
     display: inline-block
-    margin: .1em 0 !important
+    padding: .25em 0 !important
     cursor: pointer
 
     if group-horizontal
@@ -50,10 +50,10 @@ form.idealforms
       position: relative
       float: left
       margin-right: 10px !important
-      width: 18px
-      height: 18px
+      width: radiocheck-size
+      height: radiocheck-size
       background: linear-gradient(white, #eee)
-      border: 1px solid #bbb
+      border: 1px solid #aaa
       border-radius: 4px
       box-shadow: 0 1px 1px rgba(black, .2)
       &:after
@@ -68,20 +68,28 @@ form.idealforms
 
     .ideal-check:after, .ideal-radio:after
       content: "×"
+      font-family: Arial, sans-serif
       position: absolute
       left: 50%
-      height: 18px
-      width: 18px
-      line-height: 18px
-      margin-left: -9px
+      width: radiocheck-size
+      margin-left: -(radiocheck-size/2)
+      line-height: radiocheck-size
       text-align: center
-      font-size: 20px
+      font-size: radiocheck-size
       color: #888
       text-shadow: 1px 1px 0 white
 
     .ideal-radio:after
-      content: "•"
-      font-size: 22px
+      size = (radiocheck-size/4)
+      content: ""
+      height: size
+      width: size
+      top: 50%
+      left: 50%
+      margin-top: -(size/2)
+      margin-left: -(size/2)
+      border-radius: size
+      background: #888
 
     .ideal-check.checked
     .ideal-check.checked.focus
diff --git a/styl/vars.styl b/styl/vars.styl
index 53bf66d..4d029a6 100644
--- a/styl/vars.styl
+++ b/styl/vars.styl
@@ -20,6 +20,7 @@ icon-size = 16px
 icon-padding = 8px
 
 radiocheck-sprite = true
+radiocheck-size = 18px
 group-horizontal = false
 
 // jQuery data