Add cross (remove) icon to poster cart
This commit is contained in:
@@ -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
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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) {
|
||||||
|
|||||||
Reference in New Issue
Block a user