// Custom Jade Code Here
.container
	.checkboxes
		.check
			input(id="check" type="checkbox")
			label(for="check")
				.box
					i.fa.fa-check

		.check
			input(id="check1" type="checkbox")
			label(for="check1")
				.box
					i.fa.fa-check

		.check
			input(id="check2" type="checkbox")
			label(for="check2")
				.box
					i.fa.fa-check

		.check
			input(id="check3" type="checkbox")
			label(for="check3")
				.box
					i.fa.fa-check
				
				
				
	p This is updated version of checkboxes. Used css3 transform to achive better performance! Thank you for your <3.

@import 'https://fonts.googleapis.com/css?family=Poiret+One'

$boxSize: 50

body
	background: #123456
	display: flex
	justify-content: center
	flex-direction: column
	align-items: center
	font-family: 'Poiret One', cursive
	color: #fff
	font-size: 100%
	height: 100vh

/* Custom Code Here */
.container
	max-width: 400px

	.checkboxes
		display: flex
		justify-content: center
		margin-bottom: 50px
	
		+ p
			text-align: center
	
	.check
		input
			display: none
	
			&:checked + label
				.box
					// old animation
					//animation: animOn 0.8s 1 forwards
					
					animation: animOnTransform 1s 1 forwards
					background: rgba(#000, 0.5)
		
					i
						transform: translate(-50%, -50%) scale(1)
						transition-duration: 200ms
						transition-delay: 400ms
						opacity: 1
	
		label
			min-width: 100px
			display: flex
			justify-content: center
			align-items: center
			flex-direction: row
			min-height: 60px
			cursor: pointer
			
			.box
				background: rgba(#000, 0.3)
				border-radius: 5px
				position: relative
				width: #{$boxSize}px
				height: #{$boxSize}px
				transition: background 300ms ease
		
				&:hover 
					background: rgba(#000, 0.5)
				
				i
					position: absolute
					top: 50%
					left: 50%
					font-size: 20px
					display: inline-block
					opacity: 0
					pointer-events: none
					transition: all 0.2s ease-in-out
					transition-delay: 200ms
					transform: translate(-50%, -50%) scale(4)
				
// old way
@keyframes animOn
	40%
		height: 20px
		width: 100px

	50%
		height: 60px
		width: 30px

	60%
		height: 40px
		width: 70px

	70%
		height: 55px
		width: 45px

	100%
		height: 50px
		width: 50px

// better way using transform (preformance enchance)

@keyframes animOnTransform
	40%
		transform: scale(1.5, 0.5)

	50%
		transform: scale(0.5, 1.5)

	60%
		transform: scale(1.3, 0.6)

	70%
		transform: scale(0.8, 1.2)

	100%
		transform: scale(1, 1)

/* end of custom code */

$(document).ready(function(){
	console.log('ready!')
	// Custom jQuery Functions Here
})