quasar-framework/src/components/toggle/toggle.ios.styl

Build responsive SPA, SSR, PWA, Hybrid Mobile Apps and Electron apps, all simultaneously using the same codebase

$toggle-width           = 50px
$toggle-height          = 32px
$toggle-span            = 2px
$toggle-handle-size     = $toggle-height - 2 * $toggle-span

.q-toggle-base
  transition all .45s cubic-bezier(.23, 1, .32, 1)
  width 100%
  height $toggle-height
  color $grey-2
  background currentColor
  border-radius 16px
  border 2px solid $light
  border 2px solid var(--q-color-light)
.q-toggle-base-dark
  color darken($light, 10%)
  color var(--q-color-light-d)

.q-toggle-handle
  background white
  box-shadow 0 3px 3px rgba(0, 0, 0, .2), 0 0 0 2px $light // @stylint ignore
  box-shadow 0 3px 3px rgba(0, 0, 0, .2), 0 0 0 2px var(--q-color-light) // @stylint ignore
  transition all 450ms cubic-bezier(.23, 1, .32, 1)
  border-radius 50%
  position absolute
  top $toggle-span
  left $toggle-span
  width $toggle-handle-size
  height $toggle-handle-size
  line-height $toggle-handle-size

.q-toggle .q-option-inner
  height $toggle-height
  width $toggle-width
  min-width $toggle-width
  &.active
    .q-toggle-base
      color currentColor
      border 0
    .q-toggle-handle
      box-shadow $shadow-2
      left ($toggle-width - $toggle-handle-size - $toggle-span)