<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!doctype html>
<!--[if lt IE 9]>
<html lang="en" class="oldie">
<![endif]-->
<!--[if gte IE 9]><!-->
<html lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CodePen Embed - Vue Shopping Cart</title>
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="TP09u8vjRnU1Hemie7h5EbQFx8zNofgDdU2Bt7o3XYuiVH0GpzAbF0lHHCwJSOE9JAweCRj3Jb9+h9f2JcBdUQ==" />
<!-- STYLES -->
<link rel="stylesheet" media="all" href="https://production-assets.codepen.io/assets/embed/v2/embed-828dcd24e821b03275c137c7d3d9db15362e9955549a6ef2197ae4d57344ec97.css" />
<style>
.hide {
display: none !important;
}
.embed-nav {
background: #3d3d3e;
}
.embed-nav ul a,
.action-button {
color: #ffffff;
background-color: #666666;
}
.embed-nav ul a.active {
background: #888888;
color: #ffffff;
box-shadow: inset 0px 3px #dddddd;
}
.embed-nav .logo-wrap a {
color: #ffffff;
}
.embed-nav .cp-embed-logo, .embed-nav #icon-codepen-box {
fill: #ffffff !important;
}
</style>
<link rel="stylesheet" media="all" href="https://production-assets.codepen.io/assets/editor/themes/twilight-2cb75eda672e6bf9b693686a681374f37c6ea158ece367b9833d6254e47dffe8.css" />
<script async src="//www.google-analytics.com/analytics.js"></script>
</head>
<body onload="resizeEmbedWindow();" id="the-body" style="border: 1px solid #555555;" class="codepen-embed-body">
<div class="embed-nav group" id="embed-nav">
<ul class="code-types">
<li class="code-type">
<a id="html-link" href="#html-box" aria-pressed="false" role="button">
HTML
</a>
</li>
<li class="code-type">
<a id="css-link" href="#css-box" class="active" aria-pressed="true" role="button">
SCSS
</a>
</li>
<li class="code-type">
<a id="js-link" href="#js-box" aria-pressed="false" role="button">
JS
</a>
</li>
<li class="results results-type">
<a id="result-link" href="#result-box" class="active" aria-pressed="true" role="button">
Result
</a>
</li>
</ul>
<div class="logo-wrap" id="edit-area">
<a class="large-logo edit-on-codepen" target="_blank" rel="noopener" href="https://codepen.io/joshbivens/pen/NNpYYR" title="Edit on CodePen">
<span id="edit-on-text" class="open-on">EDIT ON</span>
<svg id="embed-codepen-logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="411.438px" height="74.257px" viewBox="0 0 411.438 74.257" enable-background="new 0 0 411.438 74.257" xml:space="preserve">
<g>
<path class="cp-embed-logo" d="M25.857 18.232c4.618 0 8.85 1.67 12.14 4.429l4.472-5.33c-4.496-3.779-10.29-6.061-16.61-6.061 C11.6 11.27 0 22.87 0 37.128c0 14.26 11.6 25.86 25.86 25.856c6.32 0 12.114-2.282 16.61-6.061l-4.472-5.33 c-3.286 2.761-7.521 4.429-12.139 4.429c-10.419 0-18.896-8.476-18.896-18.894C6.962 26.71 15.44 18.23 25.86 18.232z"/>
<path class="cp-embed-logo" d="M168.993 12.763H155.07c-1.922 0-3.48 1.559-3.48 3.48v41.769c0 1.92 1.56 3.48 3.48 3.48h13.923 c13.436 0 24.365-10.93 24.365-24.365C193.358 23.69 182.43 12.76 168.99 12.763z M168.993 54.532h-10.442V19.725h10.442 c9.597 0 17.4 7.81 17.4 17.404C186.397 46.73 178.59 54.53 168.99 54.532z"/>
<path class="cp-embed-logo" d="M212.206 16.244v41.769c0 1.92 1.56 3.48 3.48 3.48h29.007v-6.961h-25.525V40.608h16.243v-6.961h-16.243 V19.725h25.525v-6.961h-29.007C213.765 12.76 212.21 14.32 212.21 16.244z"/>
<path class="cp-embed-logo" d="M317.569 16.244v41.769c0 1.92 1.56 3.48 3.48 3.48h29.006v-6.961H324.53V40.608h16.244v-6.961H324.53 V19.725h25.525v-6.961H321.05C319.128 12.76 317.57 14.32 317.57 16.244z"/>
<path class="cp-embed-logo" d="M284.443 12.763h-15.084c-1.922 0-3.48 1.559-3.48 3.48v45.25h6.962V40.608h11.603 c7.677 0 13.923-6.246 13.923-13.922C298.366 19.01 292.12 12.76 284.44 12.763z M284.443 33.647h-11.603V19.725h11.603 c3.839 0 6.96 3.12 6.96 6.961S288.282 33.65 284.44 33.647z"/>
<path class="cp-embed-logo" d="M404.476 12.763v35.636l-28.652-34.384c-0.938-1.127-2.481-1.545-3.859-1.045 c-1.378 0.5-2.296 1.808-2.296 3.273v45.25h6.962V25.858l28.652 34.383c0.675 0.81 1.66 1.25 2.67 1.25 c0.396 0 0.797-0.066 1.185-0.207c1.378-0.5 2.296-1.808 2.296-3.273v-45.25H404.476z"/>
<path class="cp-embed-logo" d="M131.815 25.261c-0.017-0.09-0.032-0.18-0.056-0.268c-0.015-0.053-0.033-0.103-0.05-0.155 c-0.025-0.078-0.051-0.156-0.082-0.232c-0.022-0.053-0.047-0.104-0.071-0.155c-0.034-0.072-0.069-0.143-0.109-0.212 c-0.028-0.051-0.06-0.099-0.091-0.148c-0.043-0.066-0.087-0.131-0.135-0.194c-0.035-0.047-0.071-0.092-0.109-0.137 c-0.05-0.06-0.104-0.117-0.158-0.173c-0.042-0.042-0.084-0.084-0.128-0.125c-0.058-0.053-0.118-0.103-0.181-0.151 c-0.048-0.037-0.095-0.075-0.145-0.109c-0.018-0.013-0.034-0.028-0.053-0.04L96.511 0.536c-1.071-0.715-2.468-0.715-3.539 0 L59.034 23.161c-0.019 0.012-0.034 0.027-0.053 0.04c-0.05 0.035-0.097 0.072-0.145 0.109c-0.062 0.049-0.123 0.099-0.181 0.15 c-0.044 0.04-0.086 0.082-0.127 0.125c-0.056 0.056-0.108 0.113-0.159 0.173c-0.038 0.045-0.074 0.09-0.109 0.14 c-0.048 0.063-0.092 0.127-0.135 0.194c-0.031 0.049-0.062 0.097-0.091 0.148c-0.04 0.069-0.075 0.14-0.108 0.21 c-0.024 0.051-0.05 0.103-0.071 0.155c-0.031 0.076-0.058 0.154-0.083 0.232c-0.017 0.052-0.035 0.103-0.049 0.15 c-0.023 0.088-0.04 0.177-0.056 0.268c-0.009 0.046-0.02 0.091-0.026 0.138c-0.018 0.138-0.028 0.276-0.028 0.417V48.44 c0 0.14 0.01 0.28 0.03 0.417c0.007 0.05 0.02 0.09 0.03 0.138c0.016 0.09 0.03 0.18 0.06 0.27 c0.014 0.05 0.03 0.1 0.05 0.155c0.025 0.08 0.05 0.16 0.08 0.233c0.021 0.05 0.05 0.1 0.07 0.15 c0.033 0.07 0.07 0.14 0.11 0.213c0.028 0.05 0.06 0.1 0.09 0.146c0.043 0.07 0.09 0.13 0.14 0.19 c0.035 0.05 0.07 0.09 0.11 0.138c0.051 0.06 0.1 0.12 0.16 0.173c0.041 0.04 0.08 0.09 0.13 0.12 c0.058 0.05 0.12 0.1 0.18 0.152c0.048 0.04 0.1 0.07 0.14 0.109c0.019 0.01 0.03 0.03 0.05 0.039L92.972 73.72 c0.536 0.36 1.15 0.54 1.77 0.537s1.234-0.18 1.77-0.537l33.938-22.625c0.019-0.012 0.035-0.026 0.053-0.039 c0.05-0.035 0.097-0.072 0.145-0.109c0.062-0.049 0.123-0.1 0.181-0.152c0.044-0.039 0.086-0.082 0.128-0.124 c0.055-0.056 0.108-0.113 0.158-0.173c0.038-0.045 0.074-0.09 0.109-0.138c0.048-0.063 0.092-0.128 0.135-0.194 c0.031-0.048 0.062-0.097 0.091-0.146c0.04-0.07 0.075-0.141 0.109-0.213c0.024-0.051 0.049-0.102 0.071-0.154 c0.031-0.077 0.057-0.155 0.082-0.233c0.017-0.052 0.035-0.103 0.05-0.155c0.023-0.088 0.039-0.178 0.056-0.268 c0.008-0.046 0.02-0.091 0.025-0.138c0.018-0.138 0.028-0.276 0.028-0.417V25.816c0-0.141-0.011-0.279-0.028-0.417 C131.835 25.35 131.82 25.31 131.81 25.261z M94.741 44.677l-11.285-7.548l11.285-7.549l11.286 7.549L94.741 44.677z M91.551 24.037L77.717 33.29L66.55 25.82L91.551 9.153V24.037z M71.978 37.128l-7.982 5.339V31.789L71.978 37.128z M77.717 40.97 l13.834 9.252v14.884L66.55 48.437L77.717 40.968z M97.932 50.22l13.834-9.252l11.168 7.469L97.932 65.104V50.22z M117.505 37.13 l7.983-5.34v10.679L117.505 37.128z M111.766 33.29l-13.834-9.252V9.153l25.002 16.667L111.766 33.29z"/>
</g>
</svg>
</a>
<a class="box-logo edit-on-codepen" target="_blank" rel="noopener" href="https://codepen.io/joshbivens/pen/NNpYYR" title="Edit on CodePen">
<svg viewBox="0 0 100 100">
<path id="icon-codepen-box" d="M99.961,34.205c-0.009-0.063-0.025-0.124-0.035-0.187c-0.021-0.121-0.043-0.242-0.075-0.36
c-0.019-0.071-0.044-0.14-0.067-0.208c-0.034-0.105-0.068-0.21-0.11-0.312c-0.029-0.071-0.063-0.142-0.096-0.21
c-0.045-0.097-0.092-0.192-0.146-0.284c-0.04-0.068-0.082-0.134-0.122-0.2c-0.058-0.089-0.117-0.176-0.182-0.26
c-0.047-0.063-0.097-0.126-0.147-0.187c-0.068-0.079-0.139-0.158-0.214-0.232c-0.056-0.058-0.112-0.115-0.171-0.168
c-0.079-0.071-0.161-0.14-0.243-0.205c-0.064-0.05-0.128-0.1-0.195-0.147c-0.025-0.016-0.047-0.037-0.071-0.053L52.383,0.722
c-1.444-0.962-3.323-0.962-4.767,0L1.914,31.19c-0.024,0.016-0.046,0.037-0.071,0.053c-0.067,0.047-0.13,0.098-0.193,0.147
c-0.084,0.065-0.166,0.134-0.243,0.205c-0.061,0.053-0.116,0.11-0.172,0.168c-0.075,0.074-0.146,0.153-0.213,0.232
c-0.051,0.061-0.101,0.124-0.148,0.187c-0.063,0.084-0.124,0.171-0.18,0.26c-0.043,0.066-0.084,0.132-0.124,0.2
c-0.053,0.092-0.1,0.187-0.146,0.284c-0.033,0.068-0.067,0.139-0.096,0.21c-0.042,0.103-0.076,0.208-0.11,0.312
c-0.022,0.068-0.047,0.137-0.067,0.208c-0.031,0.119-0.052,0.239-0.075,0.36c-0.011,0.063-0.026,0.124-0.034,0.187
C0.014,34.389,0,34.576,0,34.765v30.468c0,0.189,0.014,0.376,0.04,0.563c0.008,0.061,0.023,0.124,0.034,0.184
c0.022,0.121,0.043,0.242,0.075,0.36c0.02,0.071,0.045,0.14,0.067,0.208c0.034,0.105,0.068,0.21,0.11,0.315
c0.029,0.071,0.063,0.14,0.096,0.208c0.046,0.097,0.094,0.191,0.146,0.287c0.039,0.066,0.08,0.131,0.124,0.197
c0.056,0.089,0.117,0.176,0.18,0.261c0.047,0.065,0.097,0.126,0.148,0.187c0.067,0.079,0.138,0.158,0.213,0.231
c0.057,0.058,0.112,0.115,0.172,0.168c0.078,0.071,0.159,0.14,0.243,0.206c0.063,0.05,0.126,0.1,0.193,0.147
c0.025,0.016,0.047,0.037,0.071,0.053l45.703,30.469C48.338,99.758,49.169,100,50,100c0.83,0,1.661-0.242,2.383-0.723
l45.703-30.469c0.024-0.016,0.045-0.037,0.071-0.053c0.067-0.047,0.13-0.097,0.195-0.147c0.083-0.066,0.164-0.134,0.243-0.206
c0.059-0.053,0.115-0.11,0.171-0.168c0.075-0.074,0.146-0.153,0.214-0.231c0.05-0.061,0.1-0.121,0.147-0.187
c0.065-0.084,0.124-0.171,0.182-0.261c0.041-0.066,0.083-0.131,0.122-0.197c0.054-0.095,0.101-0.189,0.146-0.287
c0.033-0.068,0.067-0.137,0.096-0.208c0.042-0.105,0.076-0.21,0.11-0.315c0.022-0.068,0.048-0.137,0.067-0.208
c0.032-0.118,0.054-0.239,0.075-0.36c0.01-0.061,0.026-0.124,0.035-0.184C99.985,65.61,100,65.423,100,65.233V34.765
C100,34.576,99.985,34.389,99.961,34.205z M54.297,12.327l33.668,22.444L72.927,44.831L54.297,32.369V12.327z M45.703,12.327
v20.042L27.074,44.831l-15.04-10.061L45.703,12.327z M8.594,42.809L19.345,50L8.594,57.19V42.809z M45.703,87.672L12.035,65.228
l15.04-10.058L45.703,67.63V87.672z M50,60.165L34.802,50L50,39.833L65.198,50L50,60.165z M54.297,87.672V67.63L72.927,55.17
l15.039,10.058L54.297,87.672z M91.405,57.19L80.656,50l10.75-7.191V57.19z"/>
</svg>
</a>
</div>
</div>
<div id="output" class="split-output static" data-border-style="thin" data-header="true">
<div id="html-box" class="code-wrap code-box box " role="region" aria-label="HTML">
<pre><code data-lang="xml" id="actual-html-code" data-og-lang="xml" data-alt-lang="xml"><div id="app">
<div class="header">
<h2>Comics</h2>
<div>
<button @click="showCart = !showCart" v-show="!verified">
{{ items.length + (items.length > 1 || items.length === 0 ? " items" : " item") }}
</button>
</div>
</div>
<div class="cart" v-show="showCart">
<div v-show="items.length > 0">
<ul>
<li v-for="item in items" transition="fade">
<p><strong>{{ item.quantity }}</strong> - {{ item.name }} <i class="fa fa-trash" @click="removeFromCart(item)"></i></p>
</li>
</ul>
<div><button @click="verified = true, showCart = false">Check out</button></div>
</div>
<div v-show="items.length === 0">
<p>Your cart is empty!</p>
</div>
</div>
<div class="container">
<div class="shop" v-show="!verified">
<h3>New Arrivals</h3>
<ul>
<li v-for="item in shop">
<div>
<h5>{{ item.name }}</h5>
<p>${{ item.price }}</p>
<button @click="addToCart(item)">Add to cart</button>
</div>
</li>
</ul>
</div>
<div class="checkout" v-show="verified">
<h3>Your Cart</h3>
<h5 v-for="item in items"><strong>{{ item.quantity }}</strong> - {{ item.name }}<span>${{ item.price * item.quantity }}</span></h5>
<hr />
<div class="row">
<div class="u-pull-right">
<h5>Total: <span>{{ total | currency }}</span></h5>
<button>Looks Good</button>
</div>
</div>
</div>
</div>
</div></code></pre>
</div>
<div id="css-box" class="code-wrap code-box box active" role="region" aria-label="CSS">
<pre><code data-lang="text/x-scss" id="actual-css-code" data-og-lang="text/x-scss" data-alt-lang="css">body {
height: 100%;
background: linear-gradient(to top, #FF6B83, lighten(#FF6B83, 15%)) no-repeat fixed;
}
#app {
font-family: 'Roboto Slab', serif;
}
.header {
height: 80px;
h2 {
color: #fff;
font-family: 'Rock Salt';
float: left;
font-weight: bolder;
margin: 10px 20px;
}
button {
border: 0;
background: #FFDBE0;
transition: all .1s ease-out;
&:hover {
background: darken(#FFDBE0, 2%);
}
}
div {
float: right;
display: inline;
margin: 10px;
}
}
li {
list-style: none;
}
.fa {
cursor: pointer;
margin-left: 5px;
}
.fade-transition {
transition: all 0.2s ease-out;
}
.fade-enter, .fade-leave {
opacity: 0;
}
.cart {
> div {
z-index: 100;
background: #fff;
padding: 20px 30px;
position: absolute;
right: 30px;
box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.3);
div {
text-align: center;
}
}
ul, li, p {
margin-bottom: 0;
}
button {
margin: 20px 0 10px;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
letter-spacing: 2px;
}
}
.shop {
h3 {
position: absolute;
top: -85px;
left: -30px;
color: rgba(255, 255, 255, 0.3);
font-family: sans-serif;
font-size: 4em;
font-weight: bold;
letter-spacing: -2px;
}
ul {
margin-top: 90px;
}
li div {
padding: 30px;
background: #fff;
margin-bottom: 20px;
box-shadow: 1px 1px 6px 0 rgba(0, 0, 0, 0.3);
}
button {
color: white;
border: 0;
background: #00ADB5;
margin: 0;
transition: all .1s ease-out;
&:hover {
background: darken(#00ADB5, 5%)
}
}
}
.checkout {
background: #fff;
box-shadow: 1px 1px 6px 0 rgba(0, 0, 0, 0.3);
margin-top: 90px;
padding: 50px 60px;
h3 {
position: absolute;
top: -85px;
left: -30px;
color: rgba(255, 255, 255, 0.3);
font-family: sans-serif;
font-size: 4em;
font-weight: bold;
letter-spacing: -2px;
}
span {
float: right;
}
}
@media screen and (max-width: 630px) {
.checkout {
padding: 30px 40px;
h5 {
font-size: 1.2em;
}
}
}
@media screen and (max-width: 550px) {
.shop h3, .checkout h3 {
font-size: 3.3em;
top: -70px;
left: 0px;
}
}</code></pre>
<a href="#0" id="view-css-compiled-button" class="action-button bottom right view-compiled-button" onclick="EMBED.viewCompiled('css');return false;">
View Compiled
</a>
</div>
<div id="js-box" class="code-wrap code-box box " role="region" aria-label="JS">
<pre><code data-lang="" id="actual-js-code" data-og-lang="" data-alt-lang="javascript">const shop = [
{
name: "One-Punch Man, Vol. 5",
price: 10.02,
quantity: 0
},
{
name: "Batman '66, Vol. 5",
price: 9.98,
quantity: 0
},
{
name: "Dragon Ball Freeza Arc, Vol. 1",
price: 15.98,
quantity: 0
},
{
name: "Uzumaki: Spiral into Horror, Vol. 1",
price: 4.84,
quantity: 0
},
{
name: "Superman: Red Son (New Edition)",
price: 10.93,
quantity: 0
}
];
const vm = new Vue({
el: "#app",
data: {
items: [],
shop: shop,
showCart: false,
verified: false
},
computed: {
total() {
var total = 0;
for(var i = 0; i < this.items.length; i++) {
total += this.items[i].price;
}
return total;
}
},
methods: {
addToCart(item) {
item.quantity += 1;
this.items.push(item);
},
removeFromCart(item) {
item.quantity -= 1;
this.items.splice(this.items.indexOf(item), 1);
}
}
});</code></pre>
</div>
<div id="result-box" class="code-box active" role="region" aria-label="Result">
<iframe id="result-iframe" sandbox="allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms"
src="https://s.codepen.io/joshbivens/fullembedgrid/NNpYYR?type=embed&animations=run" allowTransparency="true" frameborder="0" scrolling="yes" allowfullscreen="true" name="CodePen Preview for Vue Shopping Cart" title="CodePen Preview for Vue Shopping Cart" data-src="https://s.codepen.io/joshbivens/fullembedgrid/NNpYYR?type=embed&animations=run">
</iframe>
<a href="#0" id="rerun-button" class="action-button rerun-button bottom right" onclick="EMBED.refreshResultIFrame(); return false;">
Rerun
</a>
</div>
<div id="about-box">
<div class="about-container">
<div class="about-user">
<div class="about-image" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/240258/profile/profile-512.jpg?10)"></div>
<div class="about-user-info">
<p>
This Pen is owned by <a href="https://codepen.io/joshbivens" target="_blank">Josh Bivens</a> on CodePen.
Check out @joshbivens's
<a href="/joshbivens" target="_blank" rel="noopener">
68 Other Pens</a>
.
</p>
</div>
</div>
</div>
</div>
</div>
<script>
__processedPen = {"html":"<div id="app">\n <div class="header">\n <h2>Comics</h2>\n <div>\n <button @click="showCart = !showCart" v-show="!verified">\n {{ items.length + (items.length > 1 || items.length === 0 ? " items" : " item") }}\n </button>\n </div>\n </div>\n <div class="cart" v-show="showCart">\n <div v-show="items.length > 0">\n <ul>\n <li v-for="item in items" transition="fade">\n <p><strong>{{ item.quantity }}</strong> - {{ item.name }} <i class="fa fa-trash" @click="removeFromCart(item)"></i></p>\n </li>\n </ul>\n <div><button @click="verified = true, showCart = false">Check out</button></div>\n </div>\n <div v-show="items.length === 0">\n <p>Your cart is empty!</p>\n </div>\n </div>\n <div class="container">\n <div class="shop" v-show="!verified">\n <h3>New Arrivals</h3>\n <ul>\n <li v-for="item in shop">\n <div>\n <h5>{{ item.name }}</h5>\n <p>${{ item.price }}</p>\n <button @click="addToCart(item)">Add to cart</button>\n </div>\n </li>\n </ul>\n </div>\n <div class="checkout" v-show="verified">\n <h3>Your Cart</h3>\n <h5 v-for="item in items"><strong>{{ item.quantity }}</strong> - {{ item.name }}<span>${{ item.price * item.quantity }}</span></h5>\n <hr />\n <div class="row">\n <div class="u-pull-right">\n <h5>Total: <span>{{ total | currency }}</span></h5>\n <button>Looks Good</button>\n </div>\n </div>\n </div>\n </div>\n</div>","css":"body {\n height: 100%;\n background: linear-gradient(to top, #FF6B83, #ffb8c3) no-repeat fixed;\n}\n\n#app {\n font-family: 'Roboto Slab', serif;\n}\n\n.header {\n height: 80px;\n}\n.header h2 {\n color: #fff;\n font-family: 'Rock Salt';\n float: left;\n font-weight: bolder;\n margin: 10px 20px;\n}\n.header button {\n border: 0;\n background: #FFDBE0;\n transition: all .1s ease-out;\n}\n.header button:hover {\n background: #ffd1d7;\n}\n.header div {\n float: right;\n display: inline;\n margin: 10px;\n}\n\nli {\n list-style: none;\n}\n\n.fa {\n cursor: pointer;\n margin-left: 5px;\n}\n\n.fade-transition {\n transition: all 0.2s ease-out;\n}\n\n.fade-enter, .fade-leave {\n opacity: 0;\n}\n\n.cart > div {\n z-index: 100;\n background: #fff;\n padding: 20px 30px;\n position: absolute;\n right: 30px;\n box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.3);\n}\n.cart > div div {\n text-align: center;\n}\n.cart ul, .cart li, .cart p {\n margin-bottom: 0;\n}\n.cart button {\n margin: 20px 0 10px;\n text-transform: uppercase;\n text-decoration: none;\n font-weight: bold;\n letter-spacing: 2px;\n}\n\n.shop h3 {\n position: absolute;\n top: -85px;\n left: -30px;\n color: rgba(255, 255, 255, 0.3);\n font-family: sans-serif;\n font-size: 4em;\n font-weight: bold;\n letter-spacing: -2px;\n}\n.shop ul {\n margin-top: 90px;\n}\n.shop li div {\n padding: 30px;\n background: #fff;\n margin-bottom: 20px;\n box-shadow: 1px 1px 6px 0 rgba(0, 0, 0, 0.3);\n}\n.shop button {\n color: white;\n border: 0;\n background: #00ADB5;\n margin: 0;\n transition: all .1s ease-out;\n}\n.shop button:hover {\n background: #00959c;\n}\n\n.checkout {\n background: #fff;\n box-shadow: 1px 1px 6px 0 rgba(0, 0, 0, 0.3);\n margin-top: 90px;\n padding: 50px 60px;\n}\n.checkout h3 {\n position: absolute;\n top: -85px;\n left: -30px;\n color: rgba(255, 255, 255, 0.3);\n font-family: sans-serif;\n font-size: 4em;\n font-weight: bold;\n letter-spacing: -2px;\n}\n.checkout span {\n float: right;\n}\n\n@media screen and (max-width: 630px) {\n .checkout {\n padding: 30px 40px;\n }\n .checkout h5 {\n font-size: 1.2em;\n }\n}\n@media screen and (max-width: 550px) {\n .shop h3, .checkout h3 {\n font-size: 3.3em;\n top: -70px;\n left: 0px;\n }\n}\n","js":"const shop = [\n {\n name: "One-Punch Man, Vol. 5",\n price: 10.02,\n quantity: 0\n },\n {\n name: "Batman '66, Vol. 5",\n price: 9.98,\n quantity: 0\n },\n {\n name: "Dragon Ball Freeza Arc, Vol. 1",\n price: 15.98,\n quantity: 0\n },\n {\n name: "Uzumaki: Spiral into Horror, Vol. 1",\n price: 4.84,\n quantity: 0\n },\n {\n name: "Superman: Red Son (New Edition)",\n price: 10.93,\n quantity: 0\n }\n];\n\nconst vm = new Vue({\n el: "#app",\n data: {\n items: [],\n shop: shop,\n showCart: false,\n verified: false\n },\n computed: {\n total() {\n var total = 0;\n for(var i = 0; i < this.items.length; i++) {if (window.CP.shouldStopExecution(1)){break;}\n total += this.items[i].price;\n }\nwindow.CP.exitedLoop(1);\n\n return total;\n }\n },\n methods: {\n addToCart(item) {\n item.quantity += 1;\n this.items.push(item);\n },\n removeFromCart(item) {\n item.quantity -= 1;\n this.items.splice(this.items.indexOf(item), 1);\n }\n }\n});"};
__preprocessorNames = {
"html": "HTML",
"css": "SCSS",
"js": "JS"
};
__pageType = "embed";
__editable = false;
__env = "production";
</script>
<script src="https://production-assets.codepen.io/assets/embed/v2/embed-51065f7fac7445b8b5734c6f390c6adf8f2d24e55c74c51ac841e382f0c84515.js"></script>
</body>
</html>
