quasar/ui/src/components/toggle/QToggle.sass at v1 · 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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
$toggle-transition: .22s cubic-bezier(.4,0,.2,1)

.q-toggle
  vertical-align: middle

  &__native
    width: 1px
    height: 1px

  &__track
    height: .35em
    border-radius: .175em
    opacity: .38
    background: currentColor

  &__thumb
    top: .25em
    left: .25em
    width: .5em
    height: .5em
    transition: left $toggle-transition
    user-select: none
    z-index: 0

    &:after
      content: ''
      position: absolute
      top: 0
      right: 0
      bottom: 0
      left: 0
      border-radius: 50%
      background: #fff
      box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12)

    .q-icon
      font-size: .3em
      min-width: 1em
      color: #000
      opacity: .54
      z-index: 1

  &__inner
    font-size: 40px
    width: 1.4em
    min-width: 1.4em
    height: 1em
    padding: .325em .3em
    -webkit-print-color-adjust: exact

    &--indet
      .q-toggle__thumb
        left: .45em

    &--truthy
      color: $primary
      color: var(--q-color-primary)
      .q-toggle__track
        opacity: .54
      .q-toggle__thumb
        left: .65em

        &:after
          background-color: currentColor

        .q-icon
          color: #fff
          opacity: 1

  &.disabled
    opacity: .75 !important

  &--dark
    .q-toggle__inner
      color: #fff
      &--truthy
        color: $primary
        color: var(--q-color-primary)
    .q-toggle__thumb:before
      opacity: .32 !important

  &--dense

    .q-toggle__inner
      width: .8em
      min-width: .8em
      height: .5em
      padding: .07625em 0

    .q-toggle__thumb
      top: 0
      left: 0

    .q-toggle__inner--indet
      .q-toggle__thumb
        left: .15em
    .q-toggle__inner--truthy
      .q-toggle__thumb
        left: .3em

    .q-toggle__label
      padding-left: .5em

    &.reverse .q-toggle__label
      padding-left: 0
      padding-right: .5em

body.desktop

  .q-toggle:not(.disabled)
    .q-toggle__thumb:before
      content: ''
      position: absolute
      top: 0
      right: 0
      bottom: 0
      left: 0
      border-radius: 50%
      background: currentColor
      opacity: .12
      transform: scale3d(0, 0, 1)
      transition: transform $option-focus-transition

    &:focus,
    &:hover
      .q-toggle__thumb:before
        transform: scale3d(2, 2, 1)

  .q-toggle--dense:not(.disabled)
    &:focus,
    &:hover
      .q-toggle__thumb:before
        transform: scale3d(1.5, 1.5, 1)