<div id="alert-1" role="alert" class="m-alert m-alert--warning m-alert--dismissable js-dismiss-alert" aria-hidden="true">
<button class="a-button a-button--icon a-button--standalone-icon a-button--icon" data-a11y-toggle="alert-1">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<h2 class="u-m-b-1">Avfärda</h2>
<p>Meddelanderuta med som användaren kan välja att klicka bort.</p>
</div>
<div{{#if role}} id="alert-1" role="{{role}}"{{/if}} class="m-alert m-alert--{{type}}{{#if additional_classes}} {{additional_classes}}{{/if}}{{#if is_dismissable}} m-alert--dismissable{{/if}}{{#if js_class}} {{js_class}}{{/if}}" {{#if is_dismissable}} aria-hidden="true"{{/if}}>
{{#if is_dismissable}}
<button class="a-button a-button--icon a-button--standalone-icon a-button--icon" data-a11y-toggle="alert-1">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
{{/if}}
<h2 class="u-m-b-1">{{name}}</h2>
<p>{{{text}}}</p>
</div>
{
"name": "Avfärda",
"type": "warning",
"role": "alert",
"text": "Meddelanderuta med som användaren kan välja att klicka bort.",
"additional_classes": false,
"js_class": "js-dismiss-alert",
"is_dismissable": true
}
@charset "UTF-8";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/extends';
@use '../../configurations/bem' as bem;
@use '../../configurations/config' as config;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../configurations/colors/colors-functions' as colorFunc;
@use '../../vendor/grid/breakpoints' as breakpoint;
$alert-success-border: colors.$color-jade;
$alert-success-bg: colors.$color-jade-light;
$alert-info-border: colors.$color-ocean;
$alert-info-bg: colors.$color-ocean-light;
$alert-warning-border: colors.$color-lemon;
$alert-warning-bg: colors.$color-lemon-light;
$alert-error-border: colors.$color-ruby;
$alert-error-bg: colors.$color-ruby-light;
$alert-text: colors.$color-cyberspace;
@include mixin.molecule(alert) {
position: relative;
margin-bottom: func.rhythm(4);
padding: func.rhythm(2) func.rhythm(2) func.rhythm(3) func.rhythm(2);
border: 1px solid transparent;
background-repeat: no-repeat;
background-position: func.rhythm(2) 50%;
> h2,
> p {
max-width: func.to_rem(600px);
}
> p:last-child {
margin-bottom: func.rhythm(0.5);
}
a {
@extend %normalize-links;
color: colors.$color-cyberspace;
font-family: var.$font-family-headings;
text-decoration: underline;
}
@include bem.m(dismissable) {
padding-right: func.rhythm(4);
// Adjust close button position
button:not(.a-button--is-static) {
position: absolute;
z-index: func.z_index(background);
top: func.rhythm(1);
right: func.rhythm(1);
}
&[aria-hidden="true"] {
display: none;
}
}
// Alternate styles
//
// Generate contextual modifier classes for colorizing the alert.
@include bem.m(success) {
@include mixin.alert-variant($alert-success-border, $alert-success-bg, $alert-text);
}
@include bem.m(info) {
@include mixin.alert-variant($alert-info-border, $alert-info-bg, $alert-text);
}
@include bem.m(warning) {
@include mixin.alert-variant($alert-warning-border, $alert-warning-bg, $alert-text);
}
@include bem.m(error) {
@include mixin.alert-variant($alert-error-border, $alert-error-bg, $alert-text);
::selection {
background-color: colors.$color-ruby;
}
::-moz-selection {
background-color: colors.$color-ruby;
}
}
}
const alerts = document.querySelectorAll('.js-dismiss-alert');
function dismiss(alert) {
const target = alert.querySelector('[data-a11y-toggle]');
const id = target.closest('[role]').getAttribute('id');
const idElement = document.getElementById(id);
if (sessionStorage.getItem(id) !== 'is-dismissed') {
window.addEventListener('DOMContentLoaded', () => {
idElement.setAttribute('aria-hidden', 'false');
});
target.addEventListener('click', () => {
sessionStorage.setItem(id, 'is-dismissed');
});
}
}
if (alerts) {
[].forEach.call(alerts, dismiss);
}
No notes defined.