<header class="header">
  <p class="number">#1</p>
  <h1>Custom<br> Checkboxes / radio buttons</h1>
</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>
      
  <ul class="list">
    <li class="list__item">
      <label class="label--radio">
      	<input type="radio" class="radio" checked  name="foo">
          Item 1
      </label>
    </li>
    <li class="list__item">
      <label class="label--radio">
      	<input type="radio" class="radio" name="foo">
          Item 2
      </label>
    </li>
    <li class="list__item">
      <label class="label--radio">
      	<input type="radio" class="radio" name="foo">
          Item 3
      </label>
    </li>
    <li class="list__item">
      <label class="label--radio">
      	<input type="radio" class="radio" name="foo">
          Item 4
      </label>
    </li>
  </ul>
</section>
      
<footer class="footer">
	<a href="https://www.twitter.com/sambego" target="_blank" class="btn btn--twitter">
    <i class="fa fa-twitter"></i>
  </a>
  
  <a href="https://codepen.io/collection/kgtrv/" target="_blank" class="btn">
    <i class="fa fa-check"></i>
    More examples
  </a>
</footer>

@import "bourbon";

$baseFontSize: 16;

$primaryColor: #16a085;
$secondaryColor: #f2f2f2;
$twitter: #2980b9;

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

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

.header,
.content {
  width: 20rem;
  padding: 1rem;
  margin: 0 auto;
}

.header {
  position: relative;
 }

h1 {
  padding: .5rem 1rem;
  margin: .5rem .5rem 0 .5rem;  
  
  border-left: rem(3) solid $primaryColor;
  
  font-family: Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  line-height: 130%;
}

.number {
  position: absolute;
  top: rem(35);
  left: rem(-20);
  
	color: $primaryColor;
  font-size: 2rem;
  font-family: Helvetiva, Arial, sans-serif;
}

.list {
  padding: .5rem 1rem;
  margin: .5rem .5rem 2rem .5rem;  
  
  border-left: rem(3) solid $primaryColor;
}

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

.label--checkbox,
.label--radio {
  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(transform .4s cubic-bezier(.45,1.8,.5,.75));
     @include transform(rotate(-45deg) scale(0, 0));
    
		content: "";
    
		position: absolute;
		left: rem(3);
     top: rem(2);
		z-index: 1;
  
		width: rem(12);
		height: rem(6);
    
		border: 2px solid $primaryColor; 
     border-top-style: none;
  	 border-right-style: none;
  }
  
  &:checked {
    &:before {
       @include transform(rotate(-45deg) scale(1, 1));
      } 
  }
  
  &:after {
    content: "";
    
    position: absolute;
    top: rem(-2);
    left: 0;
    
    width: 1rem;
    height: 1rem;
    
    background: #fff;
    
    border: 2px solid $secondaryColor;
    
    cursor: pointer;
  }
}

.radio {
  position: relative;
  
  margin: 0 1rem 0 0 ;
  
  cursor: pointer;
  
  &:before {
    @include transition(transform .4s cubic-bezier(.45,1.8,.5,.75));
    @include transform(scale(0,0));
    
    content: "";

    position: absolute;
    top: 0;
    left: rem(2);
    z-index: 1;
    
    width: rem(12);
    height: rem(12);
    
    background: $primaryColor;
    
    border-radius: 50%;
  }
  
  &:checked {
    &:before {
     @include transform(scale(1,1)); 
    }
  }
  
  &:after {
    content: "";
    
    position: absolute;
    top: rem(-4);
    left: rem(-2);
    
    width: 1rem;
    height: 1rem;
    
    background: #fff;
    
    border: 2px solid $secondaryColor;
    border-radius: 50%;
  }
}

.footer {
  position: relative;
}

.btn {
  @include transition(background .3s ease-in-out);
  
  position: absolute;
  top: 0;
  right: 4.5rem;
  
  padding: .5rem;
  
  background: $primaryColor;
  
  color: #fff;
  font-family: Helvetica, Arial, sans-serif;
  text-decoration: none;
  
  &:hover {
    background: darken($primaryColor, 5%);
  }
}

.btn--twitter {
  right: 2rem;
  
  background: $twitter;

  &:hover {
    background: darken($twitter, 5%);
  }
}

/*
 * First example of some simple custom checkboxes and radio buttons made with pure (s)css.
 * These only work in chrome, but fallback to the native ones in other browsers.
 *
 * Check back soon for some other examples.
 *
 * Also see: 
 * - https://codepen.io/Sambego/pen/zDLxe
 * - https://codepen.io/Sambego/pen/yiruz
 * - https://codepen.io/Sambego/pen/mIhbk
 */