Add cross (remove) icon to poster cart

This commit is contained in:
2021-11-05 22:41:02 +01:00
parent 01a87cc0cf
commit 163fbe75db
3 changed files with 21 additions and 7 deletions

View File

@@ -1,9 +1,8 @@
<script lang="ts"> <script lang="ts">
import { getContext } from 'svelte' import { getContext } from 'svelte'
// Components // Components
import Button from '$components/atoms/Button.svelte'
import Image from '$components/atoms/Image.svelte'
import Select from './Select.svelte' import Select from './Select.svelte'
import ButtonCircle from '$components/atoms/ButtonCircle.svelte'
const { locations, shop } = getContext('global') const { locations, shop } = getContext('global')
@@ -14,6 +13,13 @@ import Select from './Select.svelte'
<img src="/images/issue-1.jpg" alt=""> <img src="/images/issue-1.jpg" alt="">
</div> </div>
<div class="poster-cart__right"> <div class="poster-cart__right">
<div class="remove">
<ButtonCircle size="tiny">
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.81 1.104a.647.647 0 1 0-.914-.915L4 3.085 1.104.19a.647.647 0 1 0-.915.915L3.085 4 .19 6.896a.647.647 0 1 0 .915.915L4 4.915 6.896 7.81a.647.647 0 1 0 .915-.915L4.915 4 7.81 1.104Z" fill="#666"/>
</svg>
</ButtonCircle>
</div>
<h3>Poster</h3> <h3>Poster</h3>
<p>Houses Of Melbourne 30€</p> <p>Houses Of Melbourne 30€</p>
<Select <Select

View File

@@ -6,7 +6,7 @@
padding: 20px 20px 24px; padding: 20px 20px 24px;
@include bp (sm) { @include bp (sm) {
padding: 24px 32px 0 32px; padding: 24px 32px;
} }
// Heading // Heading
@@ -42,6 +42,7 @@
// Poster Cart // Poster Cart
.poster-cart { .poster-cart {
position: relative;
display: flex; display: flex;
background-color: #fff; background-color: #fff;
color: $color-gray; color: $color-gray;
@@ -75,6 +76,13 @@
} }
&__right { &__right {
// Remove Icon
.remove {
position: absolute;
top: 16px;
right: 16px;
}
// Poster Title // Poster Title
h3 { h3 {
font-family: $font-serif; font-family: $font-serif;

View File

@@ -3,7 +3,8 @@
// Cart // Cart
.cart { .cart {
display: flex; // display: flex;
// display: none;
position: fixed; position: fixed;
z-index: 100; z-index: 100;
top: 72px; top: 72px;
@@ -80,7 +81,6 @@
// Cart // Cart
&__cart { &__cart {
display: none;
position: relative; position: relative;
@include bp (sm) { @include bp (sm) {
@@ -308,7 +308,7 @@
// Posters // Posters
&__posters { &__posters {
background-color: $color-primary-darker; background-color: $color-primary-darker;
padding: 56px 20px 72px; padding: 0 20px 72px;
border-bottom: solid 1px $color-primary-tertiary20 ; border-bottom: solid 1px $color-primary-tertiary20 ;
@include bp (sm) { @include bp (sm) {