quasar/src/components/toggle/toggle.ios.styl at v0.14 · hipertracker/quasar · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
$toggle-width           = 42px
$toggle-height          = 24px
$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 white
  background-color currentColor
  border-radius 16px
  border 2px solid $grey-3

.q-toggle-handle
  background-color white
  border 1px solid $grey-3
  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
      left ($toggle-width - $toggle-handle-size - $toggle-span)