<input type="checkbox" name="modal-toggle" id="modal-toggle" class="modal-toggle" />

<label for="modal-toggle" onclick></label>

<div class="c-modal-manual">
  <div class="c-modal-manual__content">
    Modal
  </div>
</div>

/* Advanced Checkbox Hack */

/* 
 * pseudo-class + general/adjacent sibling doesn't work
 * on Android <= 4.1.2 so we need a hack:
 *
 * A useless animation :D
 */
body { -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} }


body {
  margin: 0;
  padding: 0;
  background-color: #eee;
}
.modal-toggle {
  position: absolute;
  appearance: none;
  left: -100%;
  top: -100%;
}
label { 
  cursor: pointer;
  user-select: none;
}


/* styling */
label {
  display: inline-block;
  font-size: 16px;
  line-height: 2em;
  height: 2em;
  background-color: #26ae90;
  border-radius: 6px;
  padding: 0 1em;
  margin: 1em;
  color: #eee;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  &:after {
    content: "show me"
  }
}
.c-modal-manual {
  position: fixed;
  left: 50%;
  top: 0;
  width: 800px;
  padding: 20px;
  background: #666;
  overflow: hidden;
  box-sizing: border-box;
  transition: all .6s ease-in-out 0s;
	-webkit-transform: translateX(-50%) scaleY(0);
	-o-transform: translateX(-50%) scaleY(0);
	-ms-transform: translateX(-50%) scaleY(0);
	transform: translateX(-50%) scaleY(0);
	-webkit-transform-origin: top;
	-o-transform-origin: top;
	-ms-transform-origin: top;
	transform-origin: top;
}
.c-modal-manual__content {
  line-height: 80px;
  background: #dac;
  color: #eee;
  text-align: center;
}


/* checked */
.modal-toggle:checked {
  & ~ .c-modal-manual {
    -webkit-transform: translateX(-50%) scaleY(1);
    -o-transform: translateX(-50%) scaleY(1);
    -ms-transform: translateX(-50%) scaleY(1);
    transform: translateX(-50%) scaleY(1);
  }
  & + label {
    background: #dd6149;
    &:after {
      content: "put it away"
    }
  }
}

 /**
  Advanced Checkbox Hack
  
  # What? #
  The better Checkbox-Hack because it works for both iOS and Android. 

  ## 1. Android <= 4.1.2
  pseudo-class + general/adjacent sibling doesn't 
  work on Android so we need a hack:

  body { -webkit-animation: bugfix infinite 1s; }
  @-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} }

  ## 2. iOS < 6.0
  Due to a bug on iOS it's not possible to click the label
  to toggle the input (checkbox), so we add an empty 
  onclick to the label:

  <label for="button" onclick>click / touch</label>


  # 2012 by Tim Pietrusky
  # timpietrusky.com
**/