quasar/src/vue-components/toggle/toggle.mat.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
$toggle-size             ?= $generic-input-size
$toggle-width-factor     ?= 1.8

$toggle-height           = $toggle-size
$toggle-width            = $toggle-width-factor * $toggle-size

$toggle-handle-size      = $toggle-size
$toggle-area-width       = $toggle-width
$toggle-area-active-left = ($toggle-width - $toggle-handle-size)

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

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

  div
    position relative
    &:before, &:after
      content ''
      position absolute
      transition all .3s ease
    &:before
      vertical-align middle
      top (.15 * $toggle-height)
      left 0
      width $toggle-area-width
      height (.7 * $toggle-height)
      border-radius 16px
      background $form-lighter-color
    &:after
      border-radius 50%
      top 0
      left 2px
      width $toggle-handle-size
      height $toggle-handle-size
      background white
      box-shadow $form-shadow
      transform translateX(0)

  input:checked + div
    &:before
      background lighten($form-active-color, 60%)
    &:after
      transform translateX(($toggle-area-active-left - 2px))
      background $form-active-color

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


  for $name, $color in $colors
    &.{$name} input:checked + div
      &:before
        background lighten($color, 60%)
      &:after
        background $color