<section id="" class="c-modal " role="dialog" aria-modal="false" aria-hidden="true" aria-labelledby="-title">
<button class="js-modal-toggle c-modal__close" data-modalid="" aria-label="" data-modalclosedelay="200">Close</button>
<div class="c-modal__contents">
<h1 id="-title" class="u-sr-only"></h1>
</div>
</section>
{% set modal_headline_id = modal_id ~ '-title' %}
{% set modal_close_delay_val = modal_close_delay is defined ? modal_close_delay : '200' %}
{% set button_aria_label = button_aria_label ? button_aria_label : 'Close Modal' %}
<section
id="{{ modal_id }}"
class="c-modal {{ modal_classes }}{% if close_bkg %} c-modal--close-bkg-click{% endif %}"
role="dialog"
aria-modal="false"
aria-hidden="true"
aria-labelledby="{{ modal_headline_id }}"
>
{% set button_attributes = 'data-modalid="' ~ modal_id ~ '" aria-label="' ~ button_aria_label ~ '" data-modalclosedelay="' ~ modal_close_delay_val ~ '"' %}
{% if close_button and close_button == 'menu' %}
<button class="c-header__actions-button c-header__menu-button js-modal-toggle c-modal__close" {{ button_attributes }}>
<span class="c-header__actions-hamburger">
<span class="c-header__actions-hamburger-line"></span>
<span class="c-header__actions-hamburger-line"></span>
<span class="c-header__actions-hamburger-line"></span>
</span>
</button>
{% else %}
<button class="js-modal-toggle c-modal__close" {{ button_attributes }}>Close</button>
{% endif %}
<div class="c-modal__contents">
<h1 id="{{modal_headline_id}}" class="u-sr-only">{{ modal_title }}</h1>
{% block content %}
{% endblock content %}
</div>
</section>
{
"pageColorTheme": "teal"
}
$screen-transition-time: 0.3s;
$screen-z-index: 800;
$screen-opacity: 0.5; //how dark is bk screen
$sidebar-width: 650px; // how wide is modal sidebar
$centered-width: 600px;
$modal-bk: #fff;
.c-modal {
position: fixed;
z-index: 9999;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: none;
width: 100vw;
height: 100vh;
transition: opacity 0.2s ease-in-out;
background: $c-white;
opacity: 0;
&.c-modal--is-open {
display: block;
}
&.c-modal--is-ready {
opacity: 1;
}
}
.c-modal__contents {
transform: translate3d(0, 2rem, 0);
width: 100%;
min-height: 100%;
background-color: var(--menu-background-color);
transition: all 0.2s ease-in-out, background 0.4s ease-in-out;
.c-modal--is-ready & {
transform: translate3d(0, 0, 0);
}
}
.c-modal__close {
z-index: 2;
}
No notes defined.