<div class="cookie-message cookie-message--button-label" data-type="cookie1" tabindex="0" aria-label="Cookie policy message">
<div class="cookie-message__container">
<p class="cookie-message__text">
This site uses cookies. <a href="#" class="link--invert">Example link</a> Find out more about their purpose and settings in your browser. By browsing the site you are agreeing to use cookies according to your browser settings.
</p>
<button class="
button
button--icon
cookie-message__close
cookie-message__button
button--rotate-icon
" type="button">
<span class="button__text">
Close
</span>
<svg
class="icon button__icon cookie-message__button-icon"
role="presentation"
focusable="false"
>
<title>Close</title>
<use xlink:href="/images/icons-sprite.svg#close"></use>
</svg>
</button>
</div>
</div>
<script src="/components/raw/cookie-message/cookie-message.js"></script>
<div
class="cookie-message {{ class }}"
data-type="{{ dataType }}"
tabindex="0"
aria-label="{{ ariaLabel }}"
>
<div class="cookie-message__container">
<p class="cookie-message__text">
{{{ text }}}
</p>
<button
class="
button
button--icon
cookie-message__close
cookie-message__button
{{ closeClass }}
"
type="button"
{{#if closeAriaLabel }}
aria-label="{{closeAriaLabel}}"
{{/if}}
>
{{#if closeLabel}}
<span class="button__text">
{{ closeLabel }}
</span>
{{/if}}
{{#if closeIcon}}
{{ render '@icon' closeIcon }}
{{/if}}
</button>
</div>
</div>
<script src="{{static 'cookie-message.js' }}"></script>
{
"linkAnchor": "Details",
"ariaLabel": "Cookie policy message",
"closeClass": "button--rotate-icon",
"closeIcon": {
"id": "close",
"title": "Close",
"class": "button__icon cookie-message__button-icon",
"hidden": true
},
"closeLabel": "Close",
"closeAriaLabel": false,
"text": "This site uses cookies. <a href=\"#\" class=\"link--invert\">Example link</a> Find out more about their purpose and settings in your browser. By browsing the site you are agreeing to use cookies according to your browser settings.",
"class": "cookie-message--button-label",
"dataType": "cookie1"
}
$cookie-message__width : 100% !default;
$cookie-message__background-color : $gray-lighter !default;
$cookie-message__font-size : $font-size-small !default;
$cookie-message__font-family : $font-family-base !default;
$cookie-message__line-height : 16px !default;
$cookie-message__padding : $spacer--medium $spacer $spacer--medium $spacer--large !default;
$cookie-message__container-margin : 0 auto !default;
$cookie-message__container-max-wdith : $max-content-width !default;
$cookie-message__container-wdith : 100% !default;
$cookie-message__text-color : $color-secondary !default;
$cookie-message__text-padding : 0 !default;
$cookie-message__text-margin : 0 $spacer--medium 0 0 !default;
$cookie-message__text-letter-spacing : 1px !default;
$cookie-message__button-color : $color-secondary !default;
$cookie-message__button-height : 48px !default;
$cookie-message__button-font-weight : $font-weight-normal !default;
$cookie-message__button-padding : 0 !default;
$cookie-message__button-margin : 0 !default;
$cookie-message__button-background : none !default;
$cookie-message__button-border : 0 !default;
$cookie-message__button-text-transform : none !default;
$cookie-message__button-icon-fill : $color-secondary !default;
$cookie-message__button-icon-size : 24px !default;
$cookie-message__button-icon-margin-left: $spacer !default;
//actions
$cookie-message__padding--actions : $spacer--medium $spacer--large !default;
$cookie-message__button-padding--actions: $button__padding !default;
@import 'cookie-message-variables';
.message.global.cookie {
position: fixed;
bottom: 0;
margin: 0;
align-items: center;
width: $cookie-message__width;
max-width: $cookie-message__width;
padding: $cookie-message__padding;
background-color: $cookie-message__background-color;
font-size: $cookie-message__font-size;
font-family: $cookie-message__font-family;
line-height: $cookie-message__line-height;
z-index: $z-index-highest;
.content {
display: flex;
align-items: center;
column-gap: $spacer--2;
}
&--open {
display: flex;
}
&--actions {
padding: $cookie-message__padding--actions;
.cookie-message__container {
flex-direction: column;
@include mq($screen-m) {
flex-direction: row;
}
}
.cookie-message__button {
padding: $cookie-message__button-padding--actions;
}
}
&__container {
display: flex;
flex-wrap: nowrap;
justify-content: flex-end;
align-items: center;
width: $cookie-message__container-wdith;
max-width: $cookie-message__container-max-wdith;
margin: $cookie-message__container-margin;
@include mq($screen-m) {
justify-content: space-between;
}
}
&__text {
flex-basis: 100%;
padding: $cookie-message__text-padding;
margin: $cookie-message__text-margin;
color: $cookie-message__text-color;
text-align: justify;
font-size: inherit;
font-family: inherit;
letter-spacing: $cookie-message__text-letter-spacing;
@include mq($screen-m) {
text-align: left;
}
}
&__link {
&.focus-visible {
@include focus-inline();
}
}
&__button {
padding: $cookie-message__button-padding;
margin: $cookie-message__button-margin;
height: $cookie-message__button-height;
min-height: 0;
color: $cookie-message__button-color;
border: $cookie-message__button-border;
background: $cookie-message__button-background;
font-weight: $cookie-message__button-font-weight;
text-transform: $cookie-message__button-text-transform;
.button__text {
color: $cookie-message__text-color;
}
&:hover {
.button__text {
color: $cookie-message__text-color;
}
}
}
&__button-icon {
.button--icon & {
width: $cookie-message__button-icon-size;
height: $cookie-message__button-icon-size;
fill: $cookie-message__button-icon-fill;
}
}
&__actions {
display: flex;
flex-basis: 100%;
flex-direction: column;
align-items: center;
@include mq($screen-m) {
flex-basis: auto;
}
.button {
white-space: nowrap;
width: 100%;
}
}
&__action {
width: 100%;
}
}
.cookie-message__text > a {
@extend .cookie-message__link !optional;
}
'use strict';
class CookieMessage {
constructor() {
this.closing = document.querySelectorAll('.cookie-message__close');
this.cookies = document.querySelectorAll('.cookie-message');
this.start();
}
closeBar(el) {
const cookieMessage = el.currentTarget.parentElement.parentElement,
dataType = cookieMessage.dataset.type,
focusable = document.querySelectorAll('button:not([disabled]), a[href], area[href] input:not([disabled]), select:not([disabled]), textarea:not([disabled]), *[tabindex]:not([tabindex="-1"]), object, embed, *[contenteditable]');
cookieMessage.classList.remove('cookie-message--open');
localStorage.setItem(dataType, 'closed');
// after closing message box move focus on first focusable element on the page
if (focusable.length) {
let firstFocusable = [...focusable].find(el => {
return el.offsetParent !== null
})
firstFocusable.focus();
}
}
setListeners() {
this.closing.forEach(el => {
el.addEventListener('click', this.closeBar);
});
}
start() {
// Display message if it wasn't closed before
this.cookies.forEach(el => {
const dataType = el.dataset.type;
if (localStorage.getItem(dataType) !== 'closed') {
el.classList.add('cookie-message--open')
}
});
this.setListeners();
}
}
new CookieMessage();