wtc-modal-view
Version:
A simple, unopinionated modal class.
2 lines (1 loc) • 924 B
CSS
.modal-content-wrapper{display:none}.modal{--in-out-duration: 0.4s;display:block;height:100%;left:0;opacity:0;pointer-events:none;position:fixed;top:0;transition:opacity 0s linear var(--in-out-duration);width:100%}.modal--open{opacity:1;pointer-events:auto;transition-delay:0s}.modal--open .modal__overlay,.modal--open .modal__close,.modal--open .modal__content{opacity:1}.modal__overlay{background:rgba(0,0,0,0.5);height:100%;opacity:0;position:absolute;transition:opacity var(--in-out-duration) ease;width:100%}.modal__wrapper{left:50%;max-width:90%;padding:0 10px;position:absolute;top:50%;transform:translate(-50%, -50%);width:100%}.modal__close{appearance:none;border:none;display:block;margin:0 0 10px auto;opacity:0;transition:opacity var(--in-out-duration) ease}.modal__content{background:white;opacity:0;transition:opacity var(--in-out-duration) ease}.modal__focus-start:focus,.modal__focus-end:focus{outline:none}