@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css);

$accent: #8ABA56; $speed: .3s; $ease: ease-in-out;

form {
  width: 100vw; height: 100vh;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  .frame {
    display: flex;
    flex-flow: row nowrap;
    input { display: none; }
    label {
      cursor: pointer;
      position: relative;
      width: 30px; height: 30px;
      margin: 10px;
      background: $accent;
      transition: all $speed $ease;
      font-size: 12pt;
      color: #FFF;
      font-smoothing: antialiased;
      &.radio { border-radius: 100%; }
      &.check { border-radius: 5px; }
      .fa {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        opacity: 0;
        transform: scale(0);
        transition: all $speed $ease;
        line-height: 30px;
        text-align: center;
      }
    }
    input:checked + label { background: shade($accent,25%);
      .fa { opacity: 1; transform: scale(1); }
    }
  }
}