add visual feedback for :focus

[johlrich]

There should probably be some kind of visual feedback for when the switch is focused. In particular, it's nice for when tabbing through a form with keyboard.

I added the following snippet to achieve this, but not sure if this is necessarily the prettiest approach or if both elements need the feedback. Defaults were taken from the bulma button's defaults for focus.

$switch-focus-border-color: $link-focus-border !default
$switch-focus-box-shadow-size: 0 0 0 0.125em !default
$switch-focus-box-shadow-color: rgba($link, 0.25) !default

.switch[type="checkbox"]
  &:focus
    + label
      &::before
        border: 1px solid $switch-focus-border-color
        box-shadow: $switch-focus-box-shadow-size $switch-focus-box-shadow-color

      &::after
        border: 1px solid $switch-focus-border-color
        box-shadow: $switch-focus-box-shadow-size $switch-focus-box-shadow-color

Comparing focused/unfocused:

Thanks for all your work on these nice bulma extensions!