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