<div class="c-alert" role="alert">
<div class="o-container">
<div class="o-container c-alert__container">
<div class="c-alert__heading">
<h2>Cookies sur publications.vd.ch</h2>
</div>
<div class="c-alert__content">
<p>Nous utilisons certains cookies essentiels pour faire fonctionner <a href="https://www.vd.ch">ce site web </a>.</p>
<p>Nous souhaitons définir des cookies supplémentaires pour comprendre comment vous utilisez publications.vd.ch, mémoriser vos paramètres et améliorer les services gouvernementaux.</p>
<p>Nous utilisons également des cookies définis par d'autres sites pour nous aider à diffuser le contenu de leurs services.</p>
</div>
<button class="c-alert__close" onclick="closeAlert(event)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
<path d="M13 1L1 13M1 1l12 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span class="u-visually-hidden">Fermer</span></button>
</div>
</div>
</div>
<div class="c-alert" role="alert">
<div class="o-container">
<div class="o-container c-alert__container">
<div class="c-alert__heading">
<h2>Cookies sur publications.vd.ch</h2>
</div>
<div class="c-alert__content">
<p>Nous utilisons certains cookies essentiels pour faire fonctionner <a
href="https://www.vd.ch">ce site web </a>.</p>
<p>Nous souhaitons définir des cookies supplémentaires pour comprendre comment vous utilisez publications.vd.ch, mémoriser vos paramètres et améliorer les services gouvernementaux.</p>
<p>Nous utilisons également des cookies définis par d'autres sites pour nous aider à diffuser le contenu de leurs services.</p>
</div>
<button class="c-alert__close" onclick="closeAlert(event)">{% render '@svg-close' %}<span class="u-visually-hidden">Fermer</span></button>
</div>
</div>
</div>
/* No context defined. */
/* ======================================================================
# _components.alert.css
====================================================================== */
/**
* 1. Position of the close button
*/
.c-alert {
@extend .u-print-hidden;
@apply
fixed
bottom-0
z-50
w-full
;
}
.c-alert__container {
@apply
relative
bg-yellow-100
rounded
border
border-yellow-400
px-4
py-2
;
}
.c-alert__heading h2,
.c-alert__heading h3,
.c-alert__heading h4,
.c-alert__heading h5,
.c-alert__heading h6 {
@apply
text-black !important
;
}
.c-alert__heading + .c-alert__content {
@apply
mt-4
;
}
.c-alert__content,
.c-alert__heading {
@apply
prose
;
}
.c-alert__close {
@apply
h-4
absolute
top-4
right-4 /* [1] */
;
svg {
height: 1rem;
}
&:focus {
@apply
outline-focus
;
}
}
/**
* @param event
*/
function closeAlert(event) {
let element = event.target;
while (element.nodeName !== 'BUTTON') {
element = element.parentNode;
}
element.parentNode.parentNode.remove(element.parentNode);
}
No notes defined.