<div class="modal modal-gui-select -with-overlay -nav-padded js-modal js-modal-exit" data-modal="gui-select">
<div class="modal-inner inner">
<div class="modal-panel">
<div class="modal-header">
<button type="button" class="btn btn-default btn-modal-exit js-modal-exit svg-wrap" aria-label="Exit Modal">
<span class="fa fa-times"></span>
</button>
<h3 class="modal-title">
<span class="text">My custom GUI</span>
</h3>
</div>
<div class="modal-section modal-results">
</div>
<div class="modal-section modal-buttons">
<button class="btn btn-default js-load-gui js-modal-exit js-modal-submit" type="button">
<span class="text">Load GUI</span>
</button>
<button class="btn btn-default js-modal-exit" type="button">
<span class="text">Cancel</span>
</button>
</div>
</div>
</div>
</div>
<div class="modal modal-gui-select -with-overlay -nav-padded js-modal js-modal-exit" data-modal="gui-select">
<div class="modal-inner inner">
<div class="modal-panel">
<div class="modal-header">
<button type="button" class="btn btn-default btn-modal-exit js-modal-exit svg-wrap" aria-label="Exit Modal">
<span class="fa fa-times"></span>
</button>
<h3 class="modal-title">
<span class="text">My custom GUI</span>
</h3>
</div>
<div class="modal-section modal-results">
</div>
<div class="modal-section modal-buttons">
<button class="btn btn-default js-load-gui js-modal-exit js-modal-submit" type="button">
<span class="text">Load GUI</span>
</button>
<button class="btn btn-default js-modal-exit" type="button">
<span class="text">Cancel</span>
</button>
</div>
</div>
</div>
</div>
/* No context defined for this component. */
.modal {
visibility: hidden;
opacity: 0;
pointer-events: none;
&.-active {
visibility: visible;
opacity: 1;
pointer-events: auto;
}
&.-with-overlay {
position: fixed;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100vh;
background: rgba($color-irma-mist, 0.7);
}
.modal-inner {
position: relative;
height: 100%;
max-width: 162rem;
width: calc(100% - 20rem);
margin: 0 auto;
}
.modal-panel {
position: absolute;
top: 50%;
transform: translate(0, -50%);
display: flex;
flex-direction: column;
max-height: calc(100% - 20rem);
width: 100%;
background: $color-irma-white;
box-shadow: 0 5px 20px 0 rgba(black, 0.1);
}
.modal-header {
position: relative;
transform: rotateZ(0);
width: 100%;
height: calc(10rem + 5px);
padding-left: 5rem;
color: white;
border-bottom: 5px solid $color-irma-border;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: -1;
display: block;
width: 100%;
height: 10rem;
background: $color-irma-navy;
}
.modal-title {
line-height: 10rem;
@include font-size-small;
text-transform: uppercase;
@include font-primary-bold;
}
}
.btn-modal-exit {
position: absolute;
top: 0;
right: 0;
padding: 0;
width: 10rem;
height: 10rem;
min-height: 0;
font-size: 4rem;
text-align: center;
}
.modal-slide-container {
display: flex;
width: 100%;
flex: 1 1 auto;
overflow: hidden;
.modal-slider {
transform: translate3d(0, 0, 0);
display: flex;
width: 200%;
flex: 0 0 auto;
transition: all $transition-reveal;
&.-slid {
transform: translate3d(-50%, 0, 0);
}
}
.modal-slide {
display: flex;
flex-direction: column;
width: 50%;
height: 100%;
flex: 0 0 auto;
}
}
.modal-section {
padding: 10rem;
.modal-subheading {
text-transform: uppercase;
}
}
.form-field {
&.-invalid {
&::after {
content: 'Must input at least ' attr(data-min-length) ' characters';
display: block;
width: 100%;
padding: {
// left: (100% / 6);
left: 25%;
top: 1em;
}
color: $color-irma-danger;
@include font-size-small;
font-style: italic;
}
input {
box-shadow: 0 0 0 2px $color-irma-danger;
}
}
}
.modal-form {
background: white;
label {
color: $color-irma-slate;
opacity: 0.7;
@include font-primary-bold;
text-transform: uppercase;
line-height: 10rem;
}
.search-field {
&:not(:first-child) {
margin-top: 5rem;
}
}
.save-field {
input {
flex: 1 1 auto;
}
.btn-save-as {
flex: 0 0 auto;
width: 10rem;
height: 10rem;
margin-left: 1rem;
box-shadow: 0 0 0 1px $color-irma-border;
line-height: 12rem;
text-align: center;
&:hover, &:focus {
background: $color-irma-navy;
color: white;
}
svg {
height: 3rem;
width: 3rem;
* {
fill: currentColor;
}
}
}
}
}
&.-expanded {
.modal-form {
.save-field {
.btn-save-as {
svg {
transform: rotate(180deg);
}
}
}
}
}
.form-group {
max-width: none;
&[data-col] {
width: 100%;
}
}
.modal-buttons {
display: flex;
justify-content: flex-end;
flex: 0 0 auto;
background: white;
&:not(.modal-section) {
margin-top: 5rem;
background: transparent;
}
.btn {
display: inline-block;
&:not(:first-child) {
margin-left: 2rem;
}
}
}
.modal-results {
position: relative;
transform: translateZ(0);
display: flex;
flex-direction: column;
padding: 5rem;
overflow-y: auto;
height: 100%;
.search-results {
display: flex;
flex-direction: column;
max-height: 100%;
}
.table {
padding: 3rem;
padding-top: 0;
overflow-y: auto;
height:100%;
.table-row:not(.-with-input) {
padding: {
left: 3rem;
right: 3rem;
}
&.table-header {
width: calc(100% + 6rem);
margin-left: -3rem;
padding: {
left: 6rem;
right: 6rem;
}
& + .table-row {
margin-top: 2px;
}
}
}
}
}
.modal-browse {
display: flex;
overflow: hidden;
background: white;
.browse-tree {
overflow-y: scroll;
width: 100%;
&.-loading {
min-height: 20rem;
&::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
width: 10rem;
height: 10rem;
background: {
image: url('../img/spinner.png');
size: 100%;
repeat: no-repeat;
position: center;
}
animation: spin 1s linear infinite;
}
}
.accordion-group {
position: relative;
transform: translateZ(0);
}
}
.accordion {
& + .accordion {
margin-top: 1rem;
}
&:not(.-collapsed) {
& > .accordion-content {
margin-top: 1rem;
}
& > .accordion-header {
height: calc(10rem + 5px);
border-bottom: 5px solid $color-irma-selected;
}
}
.accordion-header {
background: $color-irma-offwhite;
}
.accordion-title {
text-transform: none;
}
.accordion-content {
padding: {
top: 0;
bottom: 0;
right: 0;
}
border-left: 1px solid $color-irma-silver;
}
}
.code {
&:last-child {
border-bottom: none;
}
}
.code-label {
position: absolute;
right: 5rem;
top: 50%;
transform: translateY(-50%);
letter-spacing: 0.05em;
.main-code {
@include font-primary-bold;
}
.code-addend {
margin-left: -0.2em;
opacity: 0.33;
}
}
.table-row {
position: relative;
}
}
&[data-modal='save-search'] {
&.-expanded {
.modal-results {
height: auto;
padding: 5rem;
}
.modal-buttons {
border: none;
}
}
&.-loading {
.modal-results {
height: 20rem;
&::before {
content: '';
position: absolute;
top: 5rem;
left: 50%;
transform: translate(-50%, 0);
display: block;
width: 10rem;
height: 10rem;
background: {
image: url('../img/spinner.png');
size: 100%;
repeat: no-repeat;
position: center;
}
animation: spin 1s linear infinite;
}
}
}
.modal-results {
height: 0;
overflow: hidden;
padding: 0;
transition: height $transition;
}
.modal-buttons {
border-top: 1px solid $color-irma-border;
}
}
@media screen and (max-width: 1024px), screen and (max-height: 768px), screen and (min-aspect-ratio: 16 / 9) {
z-index: 20 !important;
padding: 0 !important;
&.modal-advanced-search {
.modal-inner {
max-width: none !important;
width: calc(100% - 8rem) !important;
.modal-panel.advanced-search-container {
width: 100% !important;
max-width: none !important;
max-height: calc(100% - 8rem) !important;
height: calc(100% - 8rem) !important;
}
}
}
}
}
/*
* _modal.js
*/
irma.modal = (function () {
'use strict';
var $body = $('body'),
$html = $('html'),
$tabs, $noTabs,
tabIndex = [],
$lastFocus,
scrollTopBeforeOpen = 0;
var openModal = function (name) {
$lastFocus = $('*:focus');
scrollTopBeforeOpen = $('html').scrollTop();
$('.js-modal').not('[data-modal=\'' + name + '\']').removeClass('-active');
if (name != "notifications") {
$('.js-notifications').removeClass('-active');
}
var $modal = $('.js-modal').filter('[data-modal=\'' + name + '\']').eq(0);
$modal.toggleClass('-active');
setTimeout(function () {
$modal.find('.modal-header').eq(0).focus();
$modal.find('input').eq(0).focus();
}, 100);
$html.toggleClass('-no-scroll');
$tabs = $modal.add('.site-header, .primary-nav').find('input, .btn, [role=\'button\'], a');
$noTabs = $('input, .btn, [role=\'button\'], a').not($tabs);
$noTabs.each(function (i) {
tabIndex[i] = $(this).attr('tabindex');
}).attr('tabindex', '-1');
};
var closeModal = function ($modal) {
$modal = $modal || $('.js-modal');
$modal.removeClass('-active');
$html.removeClass('-no-scroll');
$lastFocus.focus();
$('html').scrollTop(scrollTopBeforeOpen);
$noTabs.each(function (i) {
if (tabIndex[i]) {
$(this).attr('tabindex', tabIndex[i]);
}
else {
$(this).removeAttr('tabindex');
}
});
tabIndex = [];
$('.confirm').remove();
};
var init = function () {
$(document).on('click', '.js-btn-modal', function (e) {
e.stopPropagation();
openModal($(this).attr('data-modal'));
}).on('click', '.js-modal', function (e) {
e.stopPropagation();
}).on('keypress', '.js-keypress-modal', function (e) {
if (e.which == 13) {
e.stopPropagation();
openModal($(this).attr('data-modal'));
}
}).on('keyup', function (e) {
if ($('.js-modal.-active').length > 0 && $('.js-tooltip').length === 0) {
if (e.which == 27) {
closeModal();
}
}
}).on('keypress', function (e) {
if ($('.js-modal.-active').length > 0 && $('.js-tooltip').length === 0) {
if (e.which == 13) {
e.preventDefault();
$('.js-modal.-active').find('.js-modal-submit').trigger('click');
}
}
}).on('click', function () {
if (!($(this).is('.js-no-modal') || $(this).closest('.js-no-modal').length > 0) && $('.js-modal.-active').length > 0) {
closeModal();
}
}).on('click', '.js-modal-exit', function () {
closeModal($(this).closest('.modal'));
}).on('click', '.modal-panel', function (event) {
event.stopPropagation();
});
};
return {
init: init,
closeModal: closeModal,
openModal: openModal
};
}());
Class ‘js-btn-modal’ triggers event.
Value of attribute ‘data-modal’ must match target ‘js-modal’ element.
Class ‘js-modal’ receives event.
Value of attribute ‘data-modal’ must match triggering ‘js-btn-modal’ element
Class ‘modal’ includes basic active/inactive styles
Inline style for demonstration only