Toggle and Check

[abstracthat]

Continuing the conversation from here... static-dev/axis#165

I don't use toggles too often but I just pulled the stylus from the last project I did one and it looks like...

.toggle
  display inline-block
  width 80px
  height 26px
  background color
  margin .38rem 0 0 .5rem
  position relative
  border-radius 50px
  vertical-align top

  &:after
    content 'OFF'
    color color2
    absolute top 2px right 10px
    z-index 0

  &:before
    content 'ON'
    color color1
    absolute top 2px left 10px
    z-index 0

  label
    display block
    width 34px
    height 20px
    cursor pointer
    absolute top 3px left 3px
    z-index 1
    background #fcfff4
    border-radius 50px
    transition all .4s ease

  input[type=checkbox]
    visibility hidden
    &:checked + label
      left 43px

with this markup...

.toggle
  input(type='checkbox', name='toggle', checked)
  label(for='toggle')

And here's a check box from the same project. It uses an icon font though.

.check
  label
    cursor pointer
    font-family "icons"
    font-size 2rem
    display inline-block
    text-align center
    &:before
      content '\e80b'
      opacity .8
      display block
      padding .2rem 1rem
      border-radius .4rem 0 0 .4rem
      background rgba(white,.4)
      transition()
      color white
    &:hover::before
      opacity 1
      color shade(color1,10%)
      transition()

  input[type=checkbox]
    visibility hidden
    display none
    &:checked + label:before
      opacity 1
      color rgba(blue,60%)
      transition()

with this markup...

ol.todo
  li
    input#step(type='checkbox', checked)
    label(for='step')
    a(href='#) Step

I think the markup there is right... i had to strip the app logic out and I don't have time to make a fiddle at the moment.

Anyway, hope that helps. I might be able to contribute more at some point, but I'm pretty swamped right now. Cheers!

[rhythnic]

@abstracthat I like the look of the toggle and checkbox. I'm pretty busy with a project these days too. I hope to contribute more in in a month or so.