Off-canvas
HTML
<div id="checkout">
<a href="javascript:void(0)" class="open-canvas">
<span></span>
<span></span>
<span></span>
</a>
<h1>Checkout</h1>
<div class="off-canvas">
<a href="javascript:void(0)" class="close">X</a>
<div class="content">
<header>
<h4>Representante</h4>
<ul>
<li>
<small>Nome</small>
<span>Nome do representante</span>
</li>
<li>
<small>E-mail</small>
<span>email@representante.com.br</span>
</li>
</ul>
</header>
<div class="body">
<form action="">
<div>
<label for="">Desconto:</label>
<input type="text"><button>OK</button>
</div>
</form>
</div>
</div>
</div>
</div>
SCSS
body {
font-family: 'Arial';
font-size: 100%;
}
#checkout {
max-width: 800px;
background-color: white;
margin: 0 auto;
border: 1px solid #999;
border-radius: 5px;
padding: 10px;
position: relative;
overflow: hidden;
min-height: 500px;
.open-canvas {
width: 30px;
display: block;
position: absolute;
right: 0;
margin: 10px;
top: 0;
span {
border: 2px solid #999;
margin-bottom: 5px;
display: block;
padding: 0;
}
}
.off-canvas {
color: white;
position: absolute;
background-color: #373a47;
right: 0;
top: 0;
height: 100%;
width: 300px;
right: -300px;
visibility: hidden;
opacity: 0;
transition: all .2s ease-in-out;
&.opened {
visibility: visible;
right: 0px;
opacity: 1;
}
.content {
margin: 10px;
header {
h4 {
margin: 0 0 1em;
border-bottom: 1px solid white;
padding-bottom: 1em;
}
ul {
padding: 0;
li {
list-style: none;
margin-bottom:.5em;
small {
text-transform: uppercase;
font-weight: bold;
font-size: 0.6em
}
small,span {
display: block
}
}
}
}
.body {
margin-top: 2em;
label {
display: block;
font-weight: bold;
}
}
}
.close {
position: absolute;
color: white;
right: 0;
top: 0;
margin: 10px;
font-weight: bold;
font-size: .7em;
}
}
}
body {
#checkout {
&:before {
content: '';
background-color: white;
opacity: 0;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: all .5s ease;
}
}
&.show-off-canvas {
#checkout {
&:before {
opacity: 1;
background-color: rgba(0,0,0,0.1)
}
}
}
}
JAVASCRIPT
$(function() {
$('.open-canvas').on('click', function() {
$('body').addClass('show-off-canvas');
$('.off-canvas').addClass('opened');
});
$('.off-canvas .close').on('click', function() {
$('body').removeClass('show-off-canvas');
$('.off-canvas').removeClass('opened');
});
$(document).on('click', function(e) {
});
});
