Last active
March 2, 2020 17:24
-
-
Save manobi/f4862334a8db09924424453d25853972 to your computer and use it in GitHub Desktop.
cart io prototype
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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