Northbrook/TastyBites
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/TastyBites.git synced 2025-05-30 07:13:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add styling to BasketItem

Browse source 
Move footer style to its own file
Make the contact form a bit more intuitive
General cleanup
This commit is contained in:
Michał Gdula 2024-05-03 13:10:37 +01:00
parent 764aaa48ea
commit 6f97ad9a4c
9 changed files with 146 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

42
front/src/components/BasketItem.svelte
View file

@ -16,7 +16,7 @@
<li class="basket-item-name">{item.data.name}</li>
<li class="basket-item-controls">
<button on:click={() => { Cart.addToCart(item.uuid, -1) }}>-</button>
<input type="number" bind:value={item.amount}>
<p>{item.amount}</p>
<button on:click={() => { Cart.addToCart(item.uuid, 1) }}>+</button>
</li>
<li class="basket-item-price">£{item.data.price * item.amount} (£{item.data.price})</li>
@ -65,6 +65,46 @@
.basket-item-controls {
display: flex;
flex-direction: row;
> button {
width: 35px;
height: 35px;
display: flex;
justify-content: center;
align-items: center;
font-family: $font-family;
font-size: $font-size-p;
border: 1px solid rgba($color-dark, 0.2);
border-radius: $border-radius-normal;
background-color: $color-light;
color: $color-on-light;
&:hover {
border: 1px solid rgba($color-dark, 0.4);
}
&:focus {
border: 1px solid rgba($color-primary, 0.9);
outline: 0 solid transparent;
}
}
> p {
width: 40px;
height: 35px;
display: flex;
justify-content: center;
align-items: center;
font-family: $font-family;
font-size: $font-size-p;
border: 1px solid transparent;
color: $color-on-light;
}
}
.basket-item-price {
font-size: $font-size-p;