diff options
1 files changed, 26 insertions, 16 deletions
| -rw-r--r-- | src/forms.less | 42 |
diff --git a/src/forms.less b/src/forms.less index a1b3b65..e4b50dc 100644 --- a/src/forms.less +++ b/src/forms.less @@ -139,14 +139,21 @@ // Form element: Checkbox and radio .form-checkbox, +.form-radio, +.form-switch { + input { + display: none; + } +} +.form-checkbox, .form-radio { line-height: 1.8rem; - padding: .3rem 1.8rem; + padding: .3rem 2rem; cursor: pointer; display: inline-block; position: relative; - input { + .form-icon { font-size: 1.4rem; line-height: 2.4rem; vertical-align: top; @@ -161,20 +168,21 @@ cursor: pointer; outline: none; -webkit-appearance: none; - - &:hover { - border-color: darken(@control-color, 15%); - } - &:checked { - background-color: @core-color; - border-color: @core-color; - } + } + &:hover .form-icon { + border-color: darken(@control-color, 15%); + } + input:checked + .form-icon { + background-color: @core-color; + border-color: @core-color; } } -.form-checkbox input { - border-radius: .2rem; +.form-checkbox { + .form-icon { + border-radius: .2rem; + } - &:checked { + input:checked + .form-icon { &::after { width: .6rem; height: 1rem; @@ -191,10 +199,12 @@ } } } -.form-radio input { - border-radius: .7rem; +.form-radio { + .form-icon { + border-radius: .7rem; + } - &:checked { + input:checked + .form-icon { &::after { width: .4rem; height: .4rem; |