quasar-framework/src/vue-components/radio/radio.mat.styl

Simultaneously build desktop/mobile SPA websites & phone/tablet apps with VueJS

$radio-size         ?= $generic-input-size
$radio-border-width ?= $generic-input-border-width


.quasar-radio
  display inline-block
  height $checkbox-size
  width $checkbox-size
  vertical-align middle

  input
    display none !important

  input + div
    position relative

    &:before, &:after
      content ''
      position absolute
      top 0
      left 0
      border-radius 50%
      transition .3s ease

    &:before
      width $radio-size
      height $radio-size
      border $radio-border-width solid $form-darker-color
    &:after
      transform scale(0)
      margin (3 * $radio-border-width)
      width ($radio-size - 6 * $radio-border-width)
      height ($radio-size - 6 * $radio-border-width)

  input:checked + div
    &:before
      border $radio-border-width solid $form-active-color
    &:after
      background $form-active-color
      transform scale(1.02)

  for $name, $color in $colors
    &.{$name} input:checked + div
      &:before
        border-color $color
      &:after
        background $color