Skip to content

Instantly share code, notes, and snippets.

@manobi

manobi/index.html

Last active March 2, 2020 17:24
Show Gist options
  • Save manobi/f4862334a8db09924424453d25853972 to your computer and use it in GitHub Desktop.
Save manobi/f4862334a8db09924424453d25853972 to your computer and use it in GitHub Desktop.
Download ZIP
cart io prototype
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {padding: 0; margin: 0; text-decoration: none;border: 0; font-family: sans-serif}
.actions {
cursor:pointer;
background: none
}
.actions > svg {display: none;}
.actions:not(.-active) > .open {display: inline-block;}
.actions.-active > .close {display: inline-block;}
.placeholder {
position: relative;
width: 50px;
height: 50px;
background: #ccc;
}
.placeholder > .count {
position: absolute;
background: #000;
color: #fff;
transition: all .2s ease-in-out;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
width: 50%;
height: 50%;
right: 0;
top: 0;
cursor: pointer;
}
.qty-wrapper > input,
.qty-wrapper > button {
width: 50%;
height: 50%;
text-align: center;
}
.qty-wrapper > button {
background: #000;
color: #fff;
cursor: pointer;
font-weight: bold;
}
.qty-wrapper > .exit {
background: #ccc;
color: #000
}
.count-container > .qty {
display: none;
width: 100%;
height: 100%;
}
.count-container:hover,
.count-container.-active {
width: 100%;
height: 100%;
}
.count-container:hover > .amount {display:none}
.count-container.-active > .amount {display:none}
.count-container:hover > .qty,
.count-container.-active > .qty {
display: flex;
flex-flow: row wrap;
}
.cart-item {
display: flex;
align-items: center;
cursor: pointer;
margin-bottom: 12px;
}
.cart-item:hover {
background: #eee;
}
</style>
</head>
<body>
<ul>
<li class="cart-item">
<button
class="actions"
style="cursor:pointer"
onClick="this.nextElementSibling.lastElementChild.classList.toggle('-active').toString() && this.classList.toggle('-active')"
>
<svg class="close" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
<svg class="open" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>
</button>
<div class="placeholder">
<img class="img" src="https://via.placeholder.com/50" alt="fail">
<span class="count count-container">
<span class="amount">1</span>
<span class="qty-wrapper qty">
<button onClick="this.nextElementSibling.value = parseInt(this.nextElementSibling.value) - 1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-minus"><line x1="5" y1="12" x2="19" y2="12"></line></svg>
</button>
<input type="text" value="1">
<button
class="exit"
onClick="confirm('Tem certeza que deseja excluir este item?') && this.closest('li').remove()"
>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
</button>
<button onClick="this.previousElementSibling.previousElementSibling.value = parseInt(this.previousElementSibling.previousElementSibling.value) + 1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
</button>
</span>
</span>
</div>
<span class="name" style="padding: 12px">Sed ut perspiciatis unde omnis</span>
</li>
<li class="cart-item">
<button
class="actions"
style="cursor:pointer"
onClick="this.nextElementSibling.lastElementChild.classList.toggle('-active').toString() && this.classList.toggle('-active')"
>
<svg class="close" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
<svg class="open" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>
</button>
<div class="placeholder">
<img class="img" src="https://via.placeholder.com/50" alt="fail">
<span class="count count-container">
<span class="amount">1</span>
<span class="qty-wrapper qty">
<button onClick="this.nextElementSibling.value = parseInt(this.nextElementSibling.value) - 1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-minus"><line x1="5" y1="12" x2="19" y2="12"></line></svg>
</button>
<input type="text" value="1">
<button
class="exit"
onClick="confirm('Tem certeza que deseja excluir este item?') && this.closest('li').remove()"
>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
</button>
<button onClick="this.previousElementSibling.previousElementSibling.value = parseInt(this.previousElementSibling.previousElementSibling.value) + 1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
</button>
</span>
</span>
</div>
<span class="name" style="padding: 12px">Sed ut perspiciatis unde omnis</span>
</li>
</ul>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment