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
24 lines
684 B
Svelte
24 lines
684 B
Svelte
<style lang="scss">
|
|
@import "../../style/organisms/newsletter";
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import { getContext } from 'svelte'
|
|
// Components
|
|
import EmailForm from '$components/molecules/EmailForm.svelte'
|
|
|
|
export let theme: string = 'default'
|
|
|
|
const { settings: { newsletter_text, newsletter_subtitle }}: any = getContext('global')
|
|
</script>
|
|
|
|
<div class="newsletter newsletter--{theme} shadow-box-dark">
|
|
<div class="newsletter__wrapper">
|
|
<h3 class="title-medium">
|
|
<label for="SUB_EMAIL">{newsletter_subtitle}</label>
|
|
</h3>
|
|
<p class="text-small">{newsletter_text}</p>
|
|
|
|
<EmailForm past={true} />
|
|
</div>
|
|
</div> |