Félix Péault
cdabe6935b
It's been tricky but got there finally! Hello `:global` - Avoid using one global CSS file containing everything - Import the component SCSS file in a script tag from the component file to allow style scoping and including it only when used
32 lines
797 B
Svelte
32 lines
797 B
Svelte
<style lang="scss">
|
|
@import "../../style/molecules/notification-cart";
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import { fly } from 'svelte/transition'
|
|
import { quartOut } from 'svelte/easing'
|
|
import { cartOpen } from '$utils/stores/shop'
|
|
|
|
export let title: string
|
|
export let name: string
|
|
export let image: string
|
|
|
|
|
|
const closeNotification = () => {
|
|
// Open cart
|
|
$cartOpen = true
|
|
}
|
|
</script>
|
|
|
|
<div class="notification-cart shadow-small"
|
|
on:click={closeNotification}
|
|
transition:fly={{ y: 20, duration: 700, easing: quartOut }}
|
|
>
|
|
<div class="notification-cart__left">
|
|
<img src={image} width={58} height={88} alt={title}>
|
|
</div>
|
|
<div class="notification-cart__right">
|
|
<h3>{title}</h3>
|
|
<p>{name}</p>
|
|
</div>
|
|
</div> |