link(rel='stylesheet', type='text/css', href='https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/11.0.0/nouislider.min.css')
script(src='https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/11.0.0/nouislider.js')
.pen-description
  .note Try submitting an order without toppings!
#ex_1.example-wrapper
  section.container
    #card
      figure.front
        .example-container
          .example-header
            span.step-name Choose your toppings.
            span.icon.align-right(data-icon='close') Close
          | 				
          .example-content
            .option.clearfix
              .form-checkbox
                input#pineapple(type='checkbox', checked='checked')
                | 						
                label.blue-checkbox(for='pineapple') Pineapple
                |              
                span.input-wrapper
                  input#input_1.percentage(maxlength='3')
              | 					
              .slider-container
                #slider_1.no-ui-slider.noUi-extended
                // slider
                script.
                  var checkbox1 = document.getElementById('pineapple'),
                  slider1 = document.getElementById('slider_1');
                  function toggle (element) {
                  var sliderBoth = $(this).closest('.form-checkbox').siblings('.slider-container').find('.no-ui-slider');
                  if (!this.checked){
                  //	$('.percentage').attr('disabled', true);
                  $(this).closest('.form-checkbox').find('.percentage').attr('disabled', true).toggleClass('hidden');
                  element.setAttribute('disabled', true);
                  }
                  else {
                  element.removeAttribute('disabled');
                  //   	$('.percentage').attr('disabled', false);
                  $(this).closest('.form-checkbox').find('.percentage').attr('disabled', false).toggleClass('hidden');
                  }
                  }
                  noUiSlider.create(slider1, {
                  start: 50,
                  connect: [true, false],
                  range: {
                  'min': 0,
                  'max': 100
                  }
                  });
                  checkbox1.addEventListener('click', function(){
                  toggle.call(this, slider1);
                  });
                // end of slider
            | 					
            .option.clearfix
              .form-checkbox
                input#ham(type='checkbox', checked='checked')
                | 						
                label.blue-checkbox(for='ham') Ham
                |              
                span.input-wrapper
                  input#input_2.percentage(maxlength='3')
              | 				
              | 					
              .slider-container
                #slider_2.no-ui-slider.noUi-extended
                // slider
                script.
                  var checkbox2 = document.getElementById('ham'),
                  slider2 = document.getElementById("slider_2");
                  noUiSlider.create(slider2, {
                  start: 100,
                  connect: [true, false],
                  range: {
                  'min': 0,
                  'max': 100
                  },
                  });
                  checkbox2.addEventListener('click', function(){
                  toggle.call(this, slider2);
                  });
                // end of slider
            | 				
            input.notes(type='search', placeholder='Notes (ham on top, etc)')
          | 					
          | 				
          .example-footer.clearfix
            input.align-right.continue(type='button', data-button='continue', value='Continue')
            |           	
            input.align-right.reset(type='button', data-button='reset', disabled='disabled', value='Reset')
      | 				
      figure.back
        h2.center.confirm
        |           
        .center.description
          | Your custom pizza will be 
          .specifics
            span.value-1
            | % pineapple and 
            span.value-2
            | % ham
          |  
          span.custom-note
.example-backup.center
  h4.title.center Oops!
  | 					
  span.center.description.link I didn't mean to do that.

    

@import url('https://fonts.googleapis.com/css?family=Lato');

$color-white: #fff;
$color-blue: #1E76D7;

html {
  display: flex;
  overflow: hidden;
}

body {
  margin: auto;
}

.pen-description {
  margin-bottom: 30px;
  text-align: center; 
	.summary {
		margin-bottom: 10px;
	}
	.note {
		color: #555;
		font-size: .85rem;
	}
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.clearfix {
  overflow: auto;
}

.noUi-horizontal.noUi-extended .noUi-handle {
  outline: 0 none;
}

.option {
  overflow-x: hidden;
}

.center {
  display: table;
  margin: 0 auto;
  text-align: center;
}

.link {
	border: 0 none;
	color: $color-blue;
	cursor: pointer;
	font-size: 15px;
	font-weight: 400;
	padding: 0;
	text-transform: none;
	&:hover,
	&:active {
		background-color: transparent;
		color: darken($color-blue, 10%);
	}
}

html,body{min-height:100%;}

body * {
  font-family: 'Lato';
}
body {
background: #e9ecf3;

-webkit-text-size-adjust: 100%;
    font-family: 'Lato', sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;

}

input {
    -webkit-appearance: none;
}
/*** form element partial ***/

$color-blue: #1E76D7;
$color-grey-lt: #F3F3F3;

$primary: $color-blue;
$border: darken($color-grey-lt, 5%);
$checkbox-width: 25px;

.example-container {
	background-color: #fff;
	border: 1px solid $border;
	border-radius: 5px;
	box-shadow: 0 1px 4px rgba(0,0,0,0.08);
	-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.08);
	padding: 15px;
	width: 400px;
}

.example-backup {
	display: none;
	height: 320px;
	width: 360px;
  .title {
    margin-bottom: 30px;
    padding-top: 50px;
  }
}

.step-number {
	color: $primary;
	font-size: 13px;
	font-weight: 600;
	padding-right: 7px;
	&:after {
		content: "";
		border-right: 1px solid darken($border, 10%);
		padding-right: 10px;
	}
}

.step-name {
	color: #888888;
	font-size: 12px;
}

.icon {
	text-indent: -9999px;
    position: relative;
    display: inline-block;
}

[data-icon='close'] {
	cursor: pointer;
       margin-right: -15px;
    margin-top: -15px;
    width: 35px;
    padding: 10px;
	&:hover:before {
		opacity: .7;
	}
	&:before {
		background: url(http://kellyharrop.com/images/icon_close.svg);
		background-repeat: no-repeat;
		bottom: 0;
		background-position: center;
		content: "";
		margin: auto;
		position: absolute;
		opacity: .4;
		right: 0;
		text-indent: 0;
		width: 35px;
		top: 0;
	}
}

.example-header {
	margin-bottom: 35px;
}

.form-checkbox {
	float: left;
	font-size: 13px;
	font-weight: bold;
	margin-bottom: 20px;
  width: 50%;
	input[type='checkbox'] {
		position: absolute;
		left: -9999px;
		& + label {
			cursor: pointer;
			display: inline-block;
			line-height: 27px;
			padding-left: 40px;
			position: relative;
			&:hover {
				color: darken(#595959, 10%);
				&:before {
					box-shadow: 0 0 8px rgba(0,0,0,0.1);
				}
			}
			&:before {
				background-color: #fff;
				border: 1px solid $border;
				border-radius: 2px;
				content: "";
				cursor: pointer;
				display: block;
				position: absolute;
				left: 0;
				width: $checkbox-width;
				height: $checkbox-width;
				transition: all .2s ease-in-out;
			}
		}
	}
}
#ex_1 {
 margin: 0 auto;
 width: 400px;
label {
		color: #999;
  + span {
    opacity: .5;
    input {
      cursor: not-allowed;
    }
  }
  }
  input[type='checkbox']:checked + label {
    + span {
      opacity: 1;
      input {
        cursor: text;
      }
    }
		color: #444; 
		&:before {
			background-color: $color-blue;
			border-color: darken($color-blue, 5%);
			border-radius: 2px;
		}
		&:after {
	    content: "";
		background-image: url("http://kellyharrop.com/images/icon_checkmark.svg");
		top: 0;
		display: block;
		z-index: 55;
		position: absolute;
		left: 0;
		width: 15px;
		margin-top: 7px;
		margin-left: 6px;
		right: 0;
		height: 11px;
		}
	}
	

input[type='search'] {
	border: 1px solid $border;
	border-radius: 2px;
	font-size: 13px;
	margin-top: 15px;
	padding: 10px;
	width: 100%;
  box-shadow: none;
}
  
  .example-footer {
	background-color: #fff;
    border-top: 1px solid $border;
    border-radius: 0 0 5px 5px;
    margin: 15px -15px -15px;
    padding: 15px;
	.instruction {
		color: #888;
		font-size: 11px;
		font-weight: 300;
		line-height: 35px;
		
	}
}
.example-container {
	.example-footer input {
    &.continue {	
      background-color: $primary;
		  border: 1px solid darken($primary, 5%);
    }
    &.reset {
      background-color: #eee;
      color: #666;
      border: 1px solid darken(#ccc,0.5);
      margin-right: 10px;
      &:hover {
        background-color: darken(#ddd, 5%);
      }
    }
		border-radius: 2px;
		color: #fff;
		cursor: pointer;
    font-family: 'Lato';
		font-size: 13px;
		font-weight: bold;
		padding: 8px 16px;
		transition: all .2s ease-in-out;
		&:hover,
		&:active {
			background-color: darken($primary, 5%);
		}
	}
}
}

.percentage {
   background: transparent;
    border: 1px solid #ccc;
    color: #666;
    border-radius: 3px;
    font-size: .75rem;
    line-height: 1rem;
    width: 33px;
    padding: 0 5px;
    text-align: right;
}

.input-wrapper {
  position: relative;
  float: right;
  margin-right: 18px;
  margin-top: 5px;
  &:after {
    color: #999;
    content: "%";
    font-size: .75rem;
    margin-left: 3px;
    position: absolute;
  }
}

.slider-container {
	cursor: pointer;
	float: right;
	margin-top: 5px;
  position: relative;
	width: 50%;
 }

[disabled] {
  cursor: not-allowed !important;
    opacity: 0.5;
  &:hover {
    background-color: #eee !important;
  }
}

.noUi-horizontal .noUi-handle {
  cursor: pointer;
}

[disabled].noUi-connect .noUi-handle{
  cursor: not-allowed;
}

.example-wrapper {
	&:last-child {
		margin-bottom: 70px;
	}
}

.container { 
  height: 307px;
  margin: 0 auto;
  width: 400px;
  position: relative;
  perspective: 800px;
}

#card {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 1s;
}

#card figure {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
   
}
#card .front {
	transform: rotateY(0deg);
	-webkit-transform: rotateY(0deg); 

}

#card .back {
 	background-color: $primary;
	border-radius: 2px;
	cursor: pointer;
	height: 289px;
  	transform: rotateY( 180deg );
	-webkit-transform: rotateY( 180deg );
	h2 {
		color: #fff;
		margin-bottom: 50px;
		margin-top: 50px;
		padding-bottom: 10px;
    font-weight: normal;
	}
	.description{
		color: #BBD5F3;
    font-size: .8rem;
	}
  .specifics {
    font-size: 1.2rem;
    margin: 10px 0 20px;
    color: $color-white;
  }
}

#card.flipped {
	transform: rotateY( 180deg );
	-webkit-transform: rotateY( 180deg );
}

/****** table *****/

.table {
	width: 400px;
}

.table-header {
	border-bottom: 2px solid #E0E4E9;
	display: table;
	margin-bottom: 5px;
	padding: 10px;
	width: 100%;
}

.descriptor {
	color: #888;
	display: inline-block;
	font-size: 11px;
	margin-right: 50px;
	text-transform: uppercase;
	&:last-child {
		margin-right: 0;
	}
}

.table-data > li {
	border-bottom: 1px solid #E0E4E9;
	cursor: pointer;
	list-style: none;
	margin-left: 75px;
	padding: 15px 10px;
	position: relative;
	&.selected {
				background-color: rgba(51, 55, 128, 0.04);
		&:before {
			opacity: 1;
		}
	}
	&:hover,
	&:active {
		background-color: rgba(51, 55, 128, 0.04);
	
	}
}

.data-title {
	color: #262C39;
	font-size: 15px;
	margin-bottom: 5px;
}

.data-description {
	color: #777;
	font-size: 11px;
	margin-bottom: 3px;
}

.align-right .data-description {
	text-align: right;
}

[data-icon="mouse"]:before{
    background-image: url(images/icon_mouse.svg);
	top: 20px;
}

[data-icon="dog"]:before{
    background-image: url(images/icon_dog.svg);
	top: 20px;
}

[data-icon="rabbit"]:before{
    background-image: url(images/icon_rabbit.svg);
	top: 18px;
}

.table-data li:before {
	background-repeat: no-repeat;
	background-size: 75%;
    content: "";
    height: 50px;
    left: -70px;
	opacity: .5;
	transition: all 0.2s ease-in-out;
    position: absolute;
    width: 50px;	
}

/**** profile card ****/

.profile__card {
    position: relative;
	transition: all 0.2s ease-in-out;
	&.minified .example-container:hover {
  
		cursor: pointer;
		box-shadow: 0 0 10px rgba(0,0,0,0.1);
		.reveal-arrow:after {
			color: rgba(0,0,0,0.5);
		}
	
    }
	.success {
		cursor: default;
		height: 100%;
		position: absolute;
		margin: auto;
		bottom: 0;
		top: 0;
		width: 100%;
		left: 0;
		background-color: rgba(255,255,255,0.8);
		&.show-success .success__message {
			top: 35%;
		}
		&__message {
			text-align: center;
			top: 25%;
			margin: 0 34px;
			position: relative;
			border-radius: 3px;
			color: #fff;
			padding: 20px 0;
			background: #333;
			transition: all .3s ease-in-out;
		}
	}
	.example-container {
		background-color: #fff;
		position: relative;
		transition: all 0.15s ease-in-out;
	}
	.example-content {
		padding: 15px;
		transition: all 0.2s ease-in-out;
	}
	
	ul {
		margin-top: 5px;
	}
	
	li {
		color: #444444;
		font-size: 14px;
		list-style: none;
		padding: 20px 0;
		border-bottom: 1px solid #EBEBEB;
	}
	
	.reveal-arrow {
		&:after {
			content: "\f107";
			font-family: 'fontawesome';
			font-size: 25px;
			margin: 0 auto;
			display: table;
			color: rgba(0,0,0,0.3);
			margin-bottom: -10px;
			transition: all 0.2s ease-in-out;
		}
	}
	
	.example-header {
		//background-color: #333780;
    background-image: url("images/profile_bg.png");
    background-position: top -60px center;
    border-radius: 2px 2px 0 0;
    margin: -15px -15px 0;
    position: relative;
	height: 60px;
	
		&:before {
			background: url('images/card_photo.png');
			border-radius: 100%;
			border: 4px solid #fff;
			content: "";
			height: 50px;
			left: 0;
			right: 0;
			margin: 0 auto;
			position: absolute;
			transition: all 0.3s ease-in-out;
			top: 30px;
			width: 50px;
			background-size: 100%;
		}
	}
	
}

#ex_1 {
	position: relative;
	&.plain {
		&:before {
			left: 0;
			opacity: 0;
		}
		&:after {
			left: 0;
			opacity: 0;
		}
	}
	&:before {
	content: "";
    background-image: url("http://kellyharrop.com/images/pineapple.png");
    height: 100%;
    width: 200px;
    display: block;
    background-repeat: no-repeat;
    position: absolute;
    left: -80px;
    opacity: 1;
    bottom: -74px;
    background-size: 70%;
    transition: opacity 0.3s ease-in-out, left 0.8s ease-in-out;
	}
}

#ex_2 {
	margin-top: -90px;
}

.noUi-extended {
	background: #333780;
}

.card-action {
    padding: 20px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 35px;
	&--submit {
		color: $primary;
		&:hover {
			color: darken($primary, 10%);
			cursor: pointer;
		}
	}
	&--cancel {
		color: #999;
        font-weight: 400;
		&:hover {
			color: darken(#999, 10%);
			cursor: pointer;
		}
	}
	
}

.card-actions {
	margin-right: -20px;
	margin-bottom: -20px;
}


.toggle-input{
    display:none;
}

.toggle-label{
	display: block;
    border-radius:15px;
    height:30px;
    line-height:30px;
    padding-right: 1px;
    position:relative;
        -webkit-transition: padding .2s ease;
    transition: padding .2s ease;
	width: 99%;
}
.toggle-input:checked + label{
    padding-right:43px;
}

.toggle-label:before{
    content:' ';
    background: #333780;
    -webkit-border-radius: 30px;
            border-radius: 30px;
    cursor: pointer;
    display: block;
    right:0;
    height: 30px; 
    position: absolute; 
    width: 70px;
}
.toggle-input:checked + label:before {
    background: #eee;
	box-shadow: 0 1px 0 #fff, inset 0 0 2px #d7dee3, inset 0 1px 0 #d7dee3, inset 0 1px 5px #d7dee3;
    
}

.toggle-label:after {
    content:' ';
	cursor: pointer;
    background: #ffffff;
    -webkit-border-radius: 30px;
    border-radius: 30px;
  
    box-shadow: 0 1px 1px #65727b, 0 0 1px #b6bdc2;
    display: block;
    float: right;
    height: 30px;
    left: 2px;
    position: relative;
    top: 0;
    width: 30px;
}

.align-right {
  float: right;
}


.noUi-horizontal.noUi-extended {
	padding-right: 32px;
}

.noUi-horizontal.noUi-extended .noUi-handle {

	left: -1px;
}

.noUi-horizontal.noUi-extended .noUi-origin  {
	right: -32px;
}

.hidden {
  display: none;
}

.noUi-target {
  background: #fafafa;
}

/* global $ */

 
 var inputFormat1 = document.getElementById('input_1');
 var inputFormat2 = document.getElementById('input_2');

slider1.noUiSlider.on('update', function( values, handle ) {
	inputFormat1.value = Math.round(values[handle]);
});

slider1.noUiSlider.on('change', function( values, handle) {
   $('.reset').prop('disabled', false);
});

slider2.noUiSlider.on('change', function( values, handle) {
   $('.reset').prop('disabled', false);
});

inputFormat1.addEventListener('change', function(){
	slider1.noUiSlider.set(this.value);
});

slider2.noUiSlider.on('update', function( values, handle ) {
  
	inputFormat2.value = Math.round(values[handle]);
 });

inputFormat2.addEventListener('change', function(){
	slider2.noUiSlider.set(this.value);
});


	$('[data-icon="close"]').on("click", function(){
		$('#ex_1').fadeOut(300, function(){
			$('.example-backup').fadeIn();	
		});
		return false;
	});
	
	
	$('.example-backup .link').on("click", function(){
		$('.example-backup').fadeOut(300, function(){
		$('#ex_1').fadeIn();
		});
		return false;
	});
	
	$('[data-button="continue"]').on("click", function(){
    var input1 = $('#input_1');
    var input2 = $('#input_2');
    if (input1.hasClass("hidden")){
      input1.val(0);
    }
      if (input2.hasClass("hidden")){
      input2.val(0);
    }
		$('#card').toggleClass('flipped');
		$('#ex_1').addClass('plain');
    $('.value-1').html(input1.val());
     $('.value-2').html(input2.val());
    
    if($('.notes').val()){
    $('.custom-note').removeClass('hidden').html('(' + $('.notes').val() + ')');
    }
    else {
      $('.custom-note').addClass('hidden');
    }
    if (input1.hasClass('hidden') && input2.hasClass('hidden')){
      $('.confirm').html("No toppings?!");
    }
    if (input1.val()==0 && input2.val()==0){
        $('.confirm').html("No toppings?!");
    }
    else {
      $('.confirm').html("Nice pizza!");
    }
		return false;
		});
		
	$('.back').on("click", function(){
		$('#card').removeClass('flipped');
		$('#ex_1').removeClass('plain');
     $('.notes').val('');
    $('.percentage').removeClass('hidden');
    slider1.noUiSlider.set(50);
    slider2.noUiSlider.set([100]);
    slider1.removeAttribute('disabled');
    slider2.removeAttribute('disabled');
        $('.percentage').prop('disabled', false);
   $('.form-checkbox input').prop('checked', true);
	});

	$('.reset').on("click", function(){
    $('.notes').val('');
    slider1.noUiSlider.set(50);
    slider2.noUiSlider.set([100]);
   slider1.removeAttribute('disabled');
   slider2.removeAttribute('disabled');
    
    $('.percentage').prop('disabled', false);
   $('.form-checkbox input').prop('checked', true);
      $('.percentage').removeClass('hidden');
	});

 
	$('.card-action--submit').on("click", function(e){
		e.preventDefault();
		e.stopPropagation();
		$('.success').fadeIn().addClass('show-success');
	});
	

		$('.success').click(function () { 
			$('.success').removeClass('show-success').fadeOut();
		});
	
	
	$('.card-action--cancel').on("click", function (e){
		e.preventDefault();
		e.stopPropagation();
		$('.rating').slideUp();
		$('.reveal-arrow').slideDown();
		$('.profile__card').addClass('minified');
		//$('.toggle-input').prop('checked' , true);
		setTimeout(function ()
{
   $('.toggle-input').prop('checked' , true);
}, 300);
	});
	
$('.example-container').on("change", ":input", function() {
 $('.reset').prop('disabled', false);

});

  
$('.reset').click(function(e){
 $(this).prop('disabled', true);
});