// Needed for smooths scrolling on iphone / ipad inside modals. // Placing it on .modal is not sufficient for safari. * { -webkit-overflow-scrolling: touch; // sass-lint:disable-line no-vendor-prefixes } .modal { @include tablet-and-below { background-color: color('white'); } @include tablet { animation: fade .2s ease-in-out; } display: flex; position: fixed; top: 0; right: 0; bottom: 0; left: 0; max-height: 100vh; visibility: hidden; z-index: z('modal', 'base'); overflow-y: auto; // states &.visible { visibility: visible; @include tablet { .modal-overlay { display: block; } } } // modifiers &.modal--fixed-height { &.visible > .modal-inner { max-height: 80vh; @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { // sass-lint:disable-line no-vendor-prefixes height: 80vh; // IE fix } } > .modal-inner { > .modal-content { flex-grow: 1; margin-bottom: 3.8rem; z-index: z('modal', 'inner'); overflow-y: auto; } > .modal-actions { position: fixed; bottom: 0; left: 0; margin-top: -3.8rem; @include tablet { position: static; } } } } // children &.visible .modal-inner { display: flex; position: absolute; top: 0; left: 0; flex-direction: column; width: 100%; min-height: 100%; margin: 0 auto; z-index: z('modal', 'content'); filter: drop-shadow(0 2px 8px #{color('dark-gray', -4, true)}); @include tablet { right: 0; width: $bp-max-content * .8; max-width: calc(100% - #{$gutter-width * 2}); height: auto; min-height: 0; margin: 10vh auto 0; padding-bottom: $gutter-width; opacity: 0; animation: fade .2s ease-in-out forwards; animation-delay: .1s; } > * { background-color: color('white'); &:first-of-type { border-top-left-radius: border-radius('radius-2'); border-top-right-radius: border-radius('radius-2'); } &:last-of-type { border-bottom-left-radius: border-radius('radius-2'); border-bottom-right-radius: border-radius('radius-2'); } } } /// /// Header /// &-header { display: block; flex-shrink: 0; text-align: right; } &-header &-close { padding: 0 .4rem; border: 0; background: transparent; color: color('dark-gray'); font-size: .8rem; font-weight: 400; cursor: pointer; &::before { order: 0; margin: 0 .5rem 0 0; font-size: 1.4rem; } &:hover, &:focus { @include theme('background-color', 'color-primary--lighten-4', 'modal-close-hover-bg-color'); } } &-close { cursor: pointer; } /// /// Content /// &-content { padding: 0 1rem .8rem; @include tablet { padding: 0 $gutter-width .8rem; } } /// /// Actions /// &-actions { @include theme('border-color', 'color-primary--lighten-4', 'modal-action-border-bottom'); display: flex; flex-shrink: 0; align-items: center; width: 100%; padding: .8rem 1rem; border-top: 2px solid; background-color: color('white'); z-index: z('modal', 'actions'); @include tablet { position: relative; } } /// /// Overlay /// .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: .7; z-index: z('modal', 'overlay'); &, &:hover, &:focus { @include theme('background-color', 'color-primary--darken-3', 'modal-overlay-background-color'); } } } @keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } }