radiocheck css-only style improvements

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
 
 ```

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}

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

styl/vars.styl

@@ -20,6 +20,7 @@ icon-size = 16px
 icon-padding = 8px
 
 radiocheck-sprite = true
+radiocheck-size = 18px
 group-horizontal = false
 
 // jQuery data