<div class="todoList">
  <h1>My To-Do List</h1>
  <div class="items">
    <input id="item1" type="checkbox" checked>
    <label for="item1">Create a to-do list</label>

    <input id="item2" type="checkbox">
    <label for="item2">Take down Christmas tree</label>

    <input id="item3" type="checkbox">
    <label for="item3">Learn Ember.js</label>

    <input id="item4" type="checkbox">
    <label for="item4">Binge watch every episode of MacGyver</label>

    <input id="item5" type="checkbox">
    <label for="item5">Alphabetize everything in the fridge</label>

    <h2 class="done">Done</h2>
    <h2 class="pending">Pending</h2>
  </div>
</div>
@import 'compass'
*,
*:before,
*:after
  +box-sizing(border-box)
  
html 
  min-height: 100%

body
  font: 16px/1.8 sans-serif
  +background-image(linear-gradient(-30deg, #E6F0FC, #BDE5D1))
    
.todoList
  +box-shadow(0 4px 16px #aaa)
  width: 500px
  margin: 30px auto
  border-top: solid 8px teal
  > *
    padding: 10px 20px
  h1
    margin: 0
    background: #fff
    line-height: 1
  .items
    +display-flex
    +flex-direction(column)
    padding: 20px
    counter-reset: done-items pending-items
  h2
    margin: 0
    padding: 10px 0
    font-size: 16px
    line-height: 1
    position: relative    
    &::before
      content: ''
      display: block
      position: absolute
      left: -20px
      top: 15%
      width: 1px
      height: 70%
      border-left: solid 4px teal
    &::after
      +border-radius(6px)
      display: block
      float: right
      background: teal
      color: #fff
      padding: 4px
      min-width: 1.5em
      text-align: center
  .done
    +order(1)
    &::after
      content: counter(done-items)
  .pending
    +order(3)
    &::after
      content: counter(pending-items)
  input
    position: absolute
    left: -999px
    &:focus + label
      background: rgba(#fff, .4)
    &:checked + label
      +order(2)
      +animation(done .6s)
      counter-increment: done-items
      &::before
        content: '\f058'
  label
    +order(4)  
    +animation(pending .6s)
    display: block
    position: relative
    padding: 10px 0 10px 40px
    border-top: dashed 1px #fff
    cursor: pointer
    counter-increment: pending-items
    &:hover
      background: rgba(#fff, .4)
    &::before
      content: '\f10c'
      font: 28px 'FontAwesome'
      display: block
      position: absolute
      left: 10px
      top: 8px
    
+keyframes(done)
  0%
    +transform(translateY(20px))
    +opacity(0)
    background: rgba(#fff,.4)
  50%
    +opacity(1)
    background: rgba(#fff,.4)
 
+keyframes(pending)
  0%
    +transform(translateY(-20px))
    +opacity(0)
    background: rgba(#fff,.4)
  50%
    +opacity(1)
    background: rgba(#fff,.4)
View Compiled

External CSS

  1. //maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.