6/2/2016 - 11:31 AM

Radio buttons

Radio buttons

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

    @extend .sr-only

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

        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

        border-color: $radio-color-active
        color: $radio-color-active
        transform: scale($radio-color-scale-active)

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

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