<header class="header">
    
</header>

<section class="content">
  <ul class="list">
    <li class="list__item">
      <label class="label--checkbox">
          <input type="checkbox" class="checkbox" checked>
            Item 1
      </label>
    </li>
    <li class="list__item">
      <label class="label--checkbox">
          <input type="checkbox" class="checkbox">
            Item 2
      </label>
    </li>
    <li class="list__item">
      <label class="label--checkbox">
          <input type="checkbox" class="checkbox">
            Item 3
      </label>
    </li>
    <li class="list__item">
      <label class="label--checkbox">
          <input type="checkbox" class="checkbox">
            Item 4
      </label>
    </li>
  </ul>
</section>
      
<a href="https://www.twitter.com/sambego" target="_blank" class="button--round button--sticky">
  <i class="fa fa-twitter"></i> 
</a>

@import "bourbon";

$baseFontSize: 16;

$green: #009688;
$blue: #5677fc;
$blueDark: #3b50ce;

$slideDistance: 100;
$slideDuration: .4s;

@function rem($val) {
  @return #{$val / $baseFontSize}rem;
}

body {
  font-size: #{$baseFontSize}px;
}

.header {
  height: 8rem;
  
  background:  $green;
}

.content {
  @extend %slide-up;
  
  width: 20rem;
  margin: -4rem auto 0 auto;
  padding: 1rem;
  
  background: #fff;
  
  border-radius: rem(2);
  box-shadow: 0 rem(2) rem(5) 0 rgba(0, 0, 0, 0.25);
}

.list {
  margin: .5rem;  
}

.list__item {
  margin: 0 0 .5rem 0;
  padding: 0;
}

.label--checkbox {
  position: relative;

  margin: .5rem;
  
  font-family: Arial, sans-serif;
  line-height: 135%;
  
  cursor: pointer;
}

.checkbox {
  position: relative;
  top: rem(-6);
  
  margin: 0 1rem 0 0 ;
  
  cursor: pointer;
  
  &:before {
    @include transition(all .3s ease-in-out);
    
    content: "";
    
    position: absolute;
    left: 0;
    z-index: 1;
  
    width: 1rem;
    height: 1rem;
    
    border: 2px solid #f2f2f2; 
  }
  
  &:checked {
    &:before {
       @include transform(rotate(-45deg));
  
      height: .5rem;
  
      border-color: $green;
      border-top-style: none;
      border-right-style: none;
    } 
  }
  
  &:after {
    content: "";
    
    position: absolute;
    top: rem(-2);
    left: 0;
    
    width: 1.1rem;
    height: 1.1rem;
    
    background: #fff;
    
    cursor: pointer;
  }
}

.button--round { 
  @include transition(.3s background ease-in-out);
  
  width: 2rem;
  height: 2rem;
  
  background: $blue;
  
  border-radius: 50%;
  box-shadow: 0 rem(2) rem(5) 0 rgba(0, 0, 0, 0.25);
  
  color: #fff;
  text-decoration: none;
  text-align: center;
  
  i {
    font-size: 1rem;
    line-height: 220%;
    vertical-align: middle;
  }
  
  &:hover {
    background: $blueDark;
  }
}

.button--sticky {
  position: fixed;
  right: 2rem;
  top: 16rem;
}

%slide-up {
  -webkit-animation-duration: $slideDuration;
  animation-duration: $slideDuration;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: slideUp;
  animation-name: slideUp;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@-webkit-keyframes slideUp {
  0% {
    -webkit-transform: translateY(rem($slideDistance));
    transform: translateY(rem($slideDistance));
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes slideUp {
  0% {
    -webkit-transform: translateY(rem($slideDistance));
    transform: translateY(rem($slideDistance));
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

/* Checkboxes based upon the material design implementation of the polymer checkboxes. 
 * They don't fully replicate these but are just an exercise to imitate them with just css.
 * These only work in chrome :)
 *
 * See:
 * - https://www.google.com/design/spec
 * - http://www.polymer-project.org/components/paper-elements/demo.html#paper-checkbox
 * 
 * Other checkbox experiments:
 *  - https://codepen.io/Sambego/pen/yiruz
 *  - https://codepen.io/Sambego/pen/ICsjd
 *  - https://codepen.io/Sambego/pen/mIhbk
 */