vuetify/src/stylus/components/_switch.styl

Vue.js 2 Semantic Component Framework

@import '../bootstrap'
@import '../theme'

/** Theme */
v-input--switch($material)
  &__thumb
    color: $material.selection-controls.thumb.inactive

  &__track
    color: $material.selection-controls.track.inactive

  &.v-input--is-disabled
    .v-input--switch__thumb
      color: $material.selection-controls.thumb.disabled !important

    .v-input--switch__track
      color: $material.selection-controls.track.disabled !important

v-input--switch-rtl()
  .v-input--selection-controls__ripple
    left: auto
    right: -14px

  &.v-input--is-dirty
    .v-input--selection-controls__ripple,
    .v-input--switch__thumb
      transform: translate(-16px, 0)

theme(v-input--switch, "v-input--switch")
rtl(v-input--switch-rtl, "v-input--switch")

.v-input--switch
  &__track,
  &__thumb
    background-color: currentColor
    pointer-events: none
    transition: inherit

  &__track
    border-radius: 8px
    height: 14px
    left: 2px
    opacity: .6
    position: absolute
    right: 2px
    top: calc(50% - 7px)

  &__thumb
    border-radius: 50%
    top: calc(50% - 10px)
    height: 20px
    position: relative
    width: 20px
    display: flex
    justify-content: center
    align-items: center
    elevation(4)

  .v-input--selection-controls__input
    width: 38px

  .v-input--selection-controls__ripple
    left: -14px
    top: calc(50% - 24px)

  &.v-input--is-dirty
    .v-input--selection-controls__ripple,
    .v-input--switch__thumb
      transform: translate(16px, 0)