artero
6/2/2016 - 11:31 AM

Radio buttons

Radio buttons

radio.md
content_copyfile_download
  • Rendered
  • Source

What is happening here:

  • The input has to go before the label, at the same level
  • The input is sr-only allow tab focus
  • The id and for attributes need to be well defined so that the label can properly check and uncheck the input when you click on it
  • The label has a :before pseudo-element that mimics the radio appearance
  • Using the CSS selector :checked we can style the checked appearance
_radio.sass
content_copyfile_download
$radio-color-active: $brand-primary !default
$radio-color-scale-active: 1.1 !default
$radio-box-size: 1.2em !default
$radio-box-size-padding: 2px !default
$radio-box-top: 0.05em !default
$radio-box-padding: $radio-box-size + .75em !default

.radio
  input[type="radio"]
    @extend .sr-only

    + label
      display: inline-block
      padding-left: $radio-box-padding
      position: relative
      z-index: 1

      &:before
        content: ''
        display: block
        position: absolute
        top: $radio-box-top
        left: $radio-box-size/4
        width: $radio-box-size
        height: $radio-box-size
        border: 1px solid
        border-radius: 50%
        transition: all 0.3s ease-out
        transform: scale(1)
        background-color: transparent
        background-clip: content-box

      &:hover:before
        border-color: $radio-color-active
        color: $radio-color-active
        transform: scale($radio-color-scale-active)

    &:focus
      + label:before
        border-color: $radio-color-active
        transform: scale($radio-color-scale-active)

    &:checked
      + label:before
        padding: $radio-box-size-padding
        background-color: $radio-color-active
        transform: scale(1)