Todo List Card

By Kevin Ball

card todo dashboard

How do I use This?

A simple dismissable card containing a todo list.

HTML

<div data-closable="fade-out" class="todo-list-card card">
  <div class="card-divider">
    <h3>To Do List</h3>
    <button class="close-button" data-close>x</button>
  </div>
  <div class="card-section">
    <ul>
      <li><input id="item1" type="checkbox"></input><label for="item1"></label>Item 1</li>
      <li><input id="item2" type="checkbox"></input><label for="item2"></label>Item 2</li>
      <li><input id="item3" type="checkbox"></input><label for="item3"></label>Item 3</li>
      <li><input id="item4" type="checkbox"></input><label for="item4"></label>Item 4</li>
      <li><input id="item5" type="checkbox"></input><label for="item5"></label>Item 5</li>
      <li><input id="item6" type="checkbox"></input><label for="item6"></label>Item 6</li>
    </ul>
  </div>
</div>

.todo-list-card {
  background-color: $white;
  border-radius: $global-radius;
  max-width: 300px;

  .card-divider {
    border-bottom: 2px solid $medium-gray;
    background: inherit;
    display: flex;
    justify-content: space-between;
    h3 {
      margin-bottom: 0;
    }
    .close-button {
      position: inherit;
    }
  }


  ul {
    list-style-type: none;
    margin: 0;
    li {
      background-color: $light-gray;
      margin: 10px 0;
      padding: 10px;
    }
    input[type="checkbox"] {
      position: absolute;
      visibility: hidden;
      left: -99999px;
    }
    input[type="checkbox"] ~ label{
      position: relative;
      margin-left: 2rem;
    }
    input[type="checkbox"] ~ label::after {
      background: $white;
      border: 1px solid $light-gray;
      content: '';
      display: block;
      height: 20px;
      left: -2rem;
      width: 20px;
      position: absolute;
      top: 50%;
      transform: translateY(-80%);
    }
    // Active state
    input[type="checkbox"]:checked ~ label:after {
      font: normal normal normal 14px/1 FontAwesome;
      font-size: 18px;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      content: "\f00c";
      color: $primary-color;
      border: 1px solid $primary-color;
    }
  }
}

.todo-list-card {
  background-color: #fefefe;
  border-radius: 0;
  max-width: 300px;
}

.todo-list-card .card-divider {
  border-bottom: 2px solid #cacaca;
  background: inherit;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.todo-list-card .card-divider h3 {
  margin-bottom: 0;
}

.todo-list-card .card-divider .close-button {
  position: inherit;
}

.todo-list-card ul {
  list-style-type: none;
  margin: 0;
}

.todo-list-card ul li {
  background-color: #e6e6e6;
  margin: 10px 0;
  padding: 10px;
}

.todo-list-card ul input[type="checkbox"] {
  position: absolute;
  visibility: hidden;
  left: -99999px;
}

.todo-list-card ul input[type="checkbox"] ~ label {
  position: relative;
  margin-left: 2rem;
}

.todo-list-card ul input[type="checkbox"] ~ label::after {
  background: #fefefe;
  border: 1px solid #e6e6e6;
  content: '';
  display: block;
  height: 20px;
  left: -2rem;
  width: 20px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-80%);
      -ms-transform: translateY(-80%);
          transform: translateY(-80%);
}

.todo-list-card ul input[type="checkbox"]:checked ~ label:after {
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 18px;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f00c";
  color: #1779ba;
  border: 1px solid #1779ba;
}

Todo List Card

By Kevin Ball

Portfolio Resume Scrolling Container

Checkout Summary

Sticky Footer with CSS Only

Todo List Card

By Kevin Ball

Similar Building Blocks

Portfolio Resume Scrolling Container

Checkout Summary

Sticky Footer with CSS Only