cozy-labs/cozy-desktop

View on GitHub
gui/styles/_toggle.styl

Summary

Maintainability
Test Coverage
// copy pasted from cozy-ui

.coz-form-toggle
  .toggle
      display block
      width   40px
      height  24px
      float right
      margin .5em 1em

  .checkbox
      display none

  .label
      position      relative
      display       inline-block
      width         100%
      height        100%
      border-radius 1em
      background-color    var(--silver)
      transition    all .2s ease-out
      cursor        pointer

      // added, unlinke other app cozy-desktop is not
      // full border-box.
      box-sizing: border-box;

  .label:before
      position      absolute
      top           0
      bottom        0
      left          2px
      display       inline-block
      width         20px
      height        20px
      margin        auto
      border-radius 50%
      content       ''
      background-color    var(--white)
      transition    all .2s ease-out

  .checkbox:checked + .label
      background-color var(--emerald)

      &:before
        left 18px