<div class="a-simple-dialog " id="a-simple-dialog--fun">
<div class="a-simple-dialog__main">
Some content<p>and a paragraph</p>
</div>
<button class="a-simple-dialog__close" aria-label="">
<svg role="img">
<title></title>
<use xlink:href="#close"></use>
</svg>
</button>
</div>
<div class="a-simple-dialog {{ modifiers_classes }}" {{#if id}}id="a-simple-dialog--{{ id }}"{{/if}}>
<div class="a-simple-dialog__main">
{{{ content }}}
</div>
<button class="a-simple-dialog__close" aria-label="{{ 'Close dialog' }}">
<svg role="img">
<title>{{ 'Close dialog' }}</title>
<use xlink:href="#close"></use>
</svg>
</button>
</div>
@use "sass:math";
@use "../../../scss/variables" as v;
@use "../../../scss/mixins" as m;
.a-simple-dialog {
@include m.media(v.$DESKTOP) {
display: flex;
}
&__main {
background: v.$color-grey-1;
}
// if several blocks are used, a-simple-dialog__content can be injected
&__content {
padding: 30px;
border-bottom: solid 1px v.$color-grey-2;
}
&--reduced-top-bottom-padding &__content {
padding-top: 6px;
padding-bottom: 6px;
}
&__content:last-of-type {
border-bottom: none;
}
&__close {
display: none;
@include m.media(v.$DESKTOP) {
background: v.$color-primary;
width: 40px;
height: 40px;
padding: 5px;
display: block;
transition: background-color v.$transition-fast v.$transition-ease;
@include m.hover {
background: v.$color-primary-dark;
}
@include m.high-contrast {
background-color: v.$color-primary-dark;
}
}
svg {
width: 30px;
height: 30px;
stroke: v.$color-white;
}
}
}
{
"content": "Some content<p>and a paragraph</p>",
"id": "fun"
}
No notes defined.