<div class="shopping-list-wrapper">
<label for="shopping-list-trigger">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#clipboard-list" />
</svg>
<span class="trigger-label">Shopping list</span>
<span class="list-counter">3</span>
</label>
<input id="shopping-list-trigger" type="checkbox">
<div class="shopping-list">
<form action="#" method="post">
<div class="shopping-list-content">
<table class="shopping-list-table">
<thead>
<tr>
<th scope="col">Producer</th>
<th scope="col">Wine</th>
<th scope="col">Vintage</th>
<th scope="col"><span class="at-only">Remove</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>Chateu Pontet-Canet</td>
<td>Chateu Pontet-Canet</td>
<td>2010</td>
<td><button type="button" class="size-xs alt" aria-label="Remove wine">
<span>
<svg class="icon size-xs alt" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#delete" />
</svg>
</span>
</button>
</td>
</tr>
<tr>
<td>Aalto</td>
<td>PS</td>
<td>2015</td>
<td><button type="button" class="size-xs alt" aria-label="Remove wine">
<span>
<svg class="icon size-xs alt" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#delete" />
</svg>
</span>
</button>
</td>
</tr>
<tr>
<td>Roederer</td>
<td>Cristal</td>
<td>2009</td>
<td><button type="button" class="size-xs alt" aria-label="Remove wine">
<span>
<svg class="icon size-xs alt" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#delete" />
</svg>
</span>
</button>
</td>
</tr>
</tbody>
</table>
<div class="submit-area ">
<button type="button" data-prototype-url="../preview/orders.html">
<span>
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#clipboard-add" />
</svg>
<span>Create purchase orders</span>
</span>
</button>
</div>
</div>
</form>
</div>
</div>
<div class="shopping-list-wrapper">
<label for="shopping-list-trigger">
{{> @svg icon="clipboard-list"}}
<span class="trigger-label">Shopping list</span>
<span class="list-counter">3</span>
</label>
<input id="shopping-list-trigger" type="checkbox">
<div class="shopping-list">
<form action="#" method="post">
<div class="shopping-list-content">
<table class="shopping-list-table">
<thead>
<tr>
<th scope="col">Producer</th>
<th scope="col">Wine</th>
<th scope="col">Vintage</th>
<th scope="col"><span class="at-only">Remove</span></th>
</tr>
</thead>
<tbody>
{{#each added-wines}}
<tr>
<td>{{producer}}</td>
<td>{{wine-name}}</td>
<td>{{vintage}}</td>
<td>{{> @button ../remove-wine-btn}}</td>
</tr>
{{/each}}
</tbody>
</table>
{{> @submit-area create}}
</div>
</form>
</div>
</div>
{
"added-wines": [
{
"id": 1,
"supplier": {
"options": [
{
"option": "Vinunic (sales@vinunic.se)"
},
{
"option": "Spring Wine (order@springwine.se)"
},
{
"option": "Johan Lidby (sales@johanlidby.se)"
}
]
},
"producer": "Chateu Pontet-Canet",
"wine-name": "Chateu Pontet-Canet",
"vintage": 2010,
"btl-size": "75 cl",
"btl-amount": 18,
"price": 500
},
{
"id": 2,
"supplier": {
"options": [
{
"option": "Spring Wine (order@springwine.se)"
},
{
"option": "Vinunic (sales@vinunic.se)"
},
{
"option": "Johan Lidby (sales@johanlidby.se)"
}
]
},
"producer": "Aalto",
"wine-name": "PS",
"vintage": 2015,
"btl-size": "75 cl",
"btl-amount": 36,
"price": 1000
},
{
"id": 3,
"supplier": {
"options": [
{
"option": "Johan Lidby (sales@johanlidby.se)"
},
{
"option": "Vinunic (sales@vinunic.se)"
},
{
"option": "Spring Wine (order@springwine.se)"
}
]
},
"producer": "Roederer",
"wine-name": "Cristal",
"vintage": 2009,
"btl-size": "75 cl",
"btl-amount": 24,
"price": 1200
}
],
"remove-wine-btn": {
"text": "Remove wine",
"icon": "delete",
"icon-only": true,
"modifier": "size-xs alt"
},
"create": {
"submit-button": {
"text": "Create purchase orders",
"icon": "clipboard-add",
"prototype-url": "/components/preview/orders"
}
}
}
/**
* Wine cart
*/
@media screen {
.shopping-list-wrapper {
position: relative;
}
#shopping-list-trigger {
display: none;
}
#shopping-list-trigger:checked + .shopping-list {
max-height: 40rem;
}
/* Hidden label on smaller viewports */
.trigger-label {
position: absolute;
left: -9999px;
}
/* Cart counter */
.list-counter {
background-color: var(--white);
color: var(--primary);
padding: 0 0.4em;
margin-left: 0.25em;
border-radius: 3px;
font-size: 0.75em;
}
.shopping-list {
position: fixed;
top: 2.55rem;
left: var(--gutter);
margin: 0;
width: calc(100vw - var(--gutter) * 2);
background-color: var(--white);
box-shadow: var(--card-shadow);
color: var(--body-text);
max-height: 0;
overflow: hidden;
transition: max-height 700ms ease-in-out;
}
.shopping-list-content {
padding: 1rem;
}
/* Cart table */
.shopping-list-table {
width: 100%;
}
}
@media screen and (min-width: 25em) {
/* Restore label on larger viewports */
.trigger-label {
position: static;
}
}
@media screen and (min-width: 32em) {
.shopping-list {
left: auto;
right: 0;
min-width: 20rem;
width: auto;
}
}
Shall be placed in the header. Relies on CSS-based triggers to animate and open a drop-down widget.