<!-- Error rendering component -->
<!-- TwigException: csrfInput function does not exist and is not defined in the context -->
<!-- Error: TwigException: csrfInput function does not exist and is not defined in the context
at /Users/antoniomatera/Sites/tangible2021/templates/01-fractal/node_modules/@frctl/twig/src/adapter.js:156:24
at new Promise (<anonymous>)
at TwigAdapter.render (/Users/antoniomatera/Sites/tangible2021/templates/01-fractal/node_modules/@frctl/twig/src/adapter.js:134:16)
at ComponentSource._renderVariant (/Users/antoniomatera/Sites/tangible2021/templates/01-fractal/node_modules/@frctl/fractal/src/api/components/source.js:212:30)
at _renderVariant.next (<anonymous>)
at onFulfilled (/Users/antoniomatera/Sites/tangible2021/templates/01-fractal/node_modules/co/index.js:65:19) -->
<div class="c-modal c-modal--newsletter c-modal--slide{% if modifier is defined %} {{ modifier }}{% endif %}" id="{{ id }}" aria-hidden="true">
<div class="c-modal__overlay" tabindex="-1" data-micromodal-close>
<div class="c-modal__container" role="dialog" aria-modal="true" aria-labelledby="{{ id }}-title">
<button class="c-modal__close" data-micromodal-close></button>
{# FORM #}
<div class="js-ajax-form-subscription" data-form="form-newsletter">
<div class="grid vertical-center">
<div class="4 c-modal__bg hide show@lg">
<img src="{{ "/images/modal-bg-img-1.svg" | path }}" class="c-modal__bg_img" alt="" aria-hidden="true">
</div>
<div class="12 7@lg">
<div class="c-modal__inner">
<div class="c-modal__title u-mb-space-8" id="{{ id }}-title">{{ title }}</div>
<div class="c-modal__body u-mb-space-24">{{ body|raw }}</div>
<form class="js-ajax-form" action="/api/newsletter" id="form-newsletter">
<fieldset class="js-ajax-form-fieldset">
{{ csrfInput() }}
<input type="hidden" name="form-name" value="newsletter">
<div class="grid vertical-center">
<div class="12 6@lg 5@xl first">
{% include "@form-field--input" with {
label: {
modifier: false,
text: "Nome"|t,
required: true
},
input: {
type: "text",
id: "newsletter-input-name",
name: "name",
required: true
},
hintText: "Inserisci il tuo nome"|t,
errorText: null
} %}
</div>
<div class="12 6@lg 5@xl first">
{% include "@form-field--input" with {
label: {
modifier: false,
text: "Email",
required: true
},
input: {
type: "email",
id: "newsletter-input-email",
name: "email",
required: true
},
hintText: "Inserisci un indirizzo email valido"|t,
errorText: null
} %}
</div>
<div class="12 12@lg 10@xl last@xl">
<span class="c-checkbox__text">{{ GLOBAL_LABELS.newsletterTerms | raw }}</span>
</div>
<div class="12 2@xl last first@xl">
{% include "@button" with {
text: "Iscriviti"|t,
version: "brick",
type: "submit",
modifier: "js-ajax-form-send"
}%}
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
{# END FORM #}
{# THANK YOU #}
<div style="display: none" class="js-ajax-form-thankyou" data-form="form-newsletter">
<div class="grid vertical-center">
<div class="4 c-modal__bg hide show@lg">
<img src="{{ "/images/modal-thank-you-img-1.svg" | path }}" class="c-modal__bg_img" alt="" aria-hidden="true">
</div>
<div class="12 7@lg">
<div class="c-modal__inner">
<div class="u-primary-typo-level-7 u-primary-weight-light u-color-primary-100 u-mb-space-16">{{ thank_you.title }}</div>
<div class="u-secondary-typo-level-3 u-color-primary-100">{{ thank_you.body }}</div>
</div>
</div>
</div>
</div>
{# END THANK YOU #}
</div>
</div>
</div>
{
"id": "newsletter-modal",
"title": "This is Tracks!",
"body": "<p>Possiamo dare forma alle tue idee e vogliamo condividere la nostra esperienza, i nostri successi ed i nostri fallimenti.</p><p>Tracks è il nostro segno tangibile verso l’Innovazione Responsabile.</p><p>Tracks è la nostra Newsletter.</p>",
"thank_you": {
"title": "E’ bello averti a bordo!",
"body": "Grazie di aver scelto di iscriverti a Tracks, la nostra newsletter."
}
}
/**************************\
Basic Modal Styles
\**************************/
.c-modal {
display: none;
}
.c-modal.is-open {
display: block;
}
.c-modal__overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(#000, .55);
display: flex;
justify-content: center;
align-items: center;
z-index: $zIndex-modal;
}
.c-modal__container {
background-color: useHSL(--base-100);
padding: spacing(space-24);
max-height: 100vh;
overflow-y: auto;
box-sizing: border-box;
position: relative;
}
.c-modal__header {
display: flex;
justify-content: space-between;
align-items: center;
}
.c-modal__title {
@include font-scale(level-7, $font-primary);
color: useHSL(--primary-100);
}
.c-modal__close {
position: absolute;
top: spacing(space-24);
right: spacing(space-24);
background-color: transparent;
border: 0;
cursor: pointer;
width: remify(34px);
height: remify(34px);
border: remify(1px) solid useHSL(--primary-100);
}
.c-modal__close:before {
content: "\2715";
font-size: remify(16px);
color: useHSL(--primary-100);
}
// .c-modal__header .c-modal__close:before { content: "\2715"; }
.c-modal__body {
@include font-scale(level-4, $font-primary);
}
/**************************\
Demo Animation Style
\**************************/
@keyframes mmfadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes mmfadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes mmslideIn {
from { transform: translateY(15%); }
to { transform: translateY(0); }
}
@keyframes mmslideOut {
from { transform: translateY(0); }
to { transform: translateY(-10%); }
}
.c-modal--slide {
display: none;
}
.c-modal--slide.is-open {
display: block;
}
.c-modal--slide[aria-hidden="false"] .c-modal__overlay {
animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}
.c-modal--slide[aria-hidden="false"] .c-modal__container {
animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
}
.c-modal--slide[aria-hidden="true"] .c-modal__overlay {
animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}
.c-modal--slide[aria-hidden="true"] .c-modal__container {
animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
}
.c-modal--slide .c-modal__container,
.c-modal--slide .c-modal__overlay {
will-change: transform;
}
/*------------------------------------*
NEWSLETTER MODAL
*------------------------------------*/
.c-modal--newsletter {
.c-modal__inner {
padding: 0 $global-mobile-x-padding;
margin-top: spacing(space-64);
@include min-screen(bp(large)) {
padding: 0;
margin-top: 0;
}
}
.c-modal__container {
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: useHSL(--base-100);
padding: 0;
}
.c-modal__bg {
height: 100vh;
}
.c-modal__bg_img {
height: 100%;
}
}
No notes defined.