quasar/src/vue-components/toggle/toggle.ios.styl at v0.13 · 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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
$toggle-size           ?= $generic-input-size
$toggle-width-factor   ?= 1.5

$toggle-height          = $toggle-size
$toggle-width           = $toggle-width-factor * $toggle-size
$toggle-border-size     = 1px

$toggle-handle-size     = ($toggle-size - 2 * $toggle-border-size)
$toggle-handle-top      = $toggle-border-size
$toggle-handle-left     = $toggle-border-size

$toggle-area-width      = ($toggle-width - $toggle-border-size)
$toggle-area-height     = $toggle-height
$toggle-area-active-left = ($toggle-width - $toggle-handle-size - 2 * $toggle-border-size)

.q-toggle
  display inline-block
  height $toggle-height
  width $toggle-width
  vertical-align middle
  position relative

  input
    display none
  i
    color $grey-6
    line-height $toggle-size
    font-size (.65 * $toggle-size)
    position absolute
    top 0
    bottom 0
    left (.23 * $toggle-handle-size)
    transition all .3s ease

  div
    position relative

    &:before, &:after
      content ''
      position absolute
      transition all .3s ease
      background white

    &:before
      vertical-align middle
      top 0
      left 0
      width $toggle-area-width
      height $toggle-area-height
      border-radius $toggle-handle-size
      border $toggle-border-size solid $form-lighter-color

    &:after
      border-radius 50%
      top $toggle-handle-top
      left 1px
      width $toggle-handle-size
      height $toggle-handle-size
      box-shadow $form-shadow
      transform translateX($toggle-handle-left)

  input:checked + div
    &:before
      background $form-active-color
      border $toggle-border-size solid $form-active-color

    &:after
      box-shadow $shadow-1
      transform translateX($toggle-area-active-left - 1px)

  input:checked ~ i
    color $form-active-color
    transform translateX(($toggle-area-active-left - 2px))

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