<div id="alert-1" role="alert" class="m-alert m-alert--error">
<h2 class="u-m-b-1">Fel</h2>
<p>Meddelanderuta med information om att något är fel, t.ex. att ett formulär inte kunde skickas. Tillfälligt meddelande.</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": "Fel",
"type": "error",
"role": "alert",
"text": "Meddelanderuta med information om att något är fel, t.ex. att ett formulär inte kunde skickas. Tillfälligt meddelande.",
"additional_classes": false
}
@charset 'UTF-8';
$alert-success-border: $color-jade;
$alert-success-bg: $color-jade-light;
$alert-info-border: $color-ocean;
$alert-info-bg: $color-ocean-light;
$alert-warning-border: $color-lemon;
$alert-warning-bg: $color-lemon-light;
$alert-error-border: $color-ruby;
$alert-error-bg: $color-ruby-light;
$alert-text: $color-cyberspace;
@include molecule(alert) {
position: relative;
margin-bottom: rhythm(4);
padding: rhythm(2) rhythm(2) rhythm(3) rhythm(2);
border: 1px solid transparent;
background-repeat: no-repeat;
background-position: rhythm(2) 50%;
> h2,
> p {
max-width: rem(600px);
}
> p:last-child {
margin-bottom: rhythm(0.5);
}
a {
@extend %normalize-links;
color: $color-cyberspace;
font-family: $font-family-headings;
text-decoration: underline;
}
@include m(dismissable) {
padding-right: rhythm(4);
// Adjust close button position
button:not(.a-button--is-static) {
position: absolute;
z-index: z_index(background);
top: rhythm(1);
right: rhythm(1);
}
&[aria-hidden="true"] {
display: none;
}
}
// Alternate styles
//
// Generate contextual modifier classes for colorizing the alert.
@include m(success) {
@include alert-variant($alert-success-border, $alert-success-bg, $alert-text);
}
@include m(info) {
@include alert-variant($alert-info-border, $alert-info-bg, $alert-text);
}
@include m(warning) {
@include alert-variant($alert-warning-border, $alert-warning-bg, $alert-text);
}
@include m(error) {
@include alert-variant($alert-error-border, $alert-error-bg, $alert-text);
::selection {
background-color: $color-ruby;
}
::-moz-selection {
background-color: $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.