framework7/components/popup/popup.css

Full featured mobile HTML framework for building iOS & Android apps

:root{--f7-popup-border-radius:0px;--f7-popup-tablet-width:630px;--f7-popup-tablet-height:630px;--f7-popup-push-offset:var(--f7-safe-area-top)}.ios{--f7-popup-tablet-border-radius:32px;--f7-popup-transition-duration:400ms;--f7-popup-transition-timing-function:initial;--f7-popup-push-border-radius:32px}.md{--f7-popup-tablet-border-radius:28px;--f7-popup-transition-duration:600ms;--f7-popup-transition-timing-function:cubic-bezier(0,1,0.2,1);--f7-popup-push-border-radius:28px}.popup-backdrop{z-index:10500}.popup,.popup-backdrop-unique{z-index:11000}.popup{background:#fff;border-radius:var(--f7-popup-border-radius);box-sizing:border-box;display:none;height:100%;left:0;overflow:hidden;position:absolute;top:0;transform:translate3d(0,100vh,0);transition-property:transform;transition-timing-function:var(--f7-popup-transition-timing-function);width:100%}.dark .popup,.popup.dark{background:#000}.popup.modal-in,.popup.modal-out{transition-duration:var(--f7-popup-transition-duration)}.popup.not-animated{transition-duration:0s}.popup.modal-in{display:block;transform:translateZ(0)}.popup.modal-out{transform:translate3d(0,100vh,0)}.popup.swipe-close-to-top.modal-out{transform:translate3d(0,-100vh,0)}@media (min-width:630px) and (min-height:630px){.popup:not(.popup-tablet-fullscreen){--f7-safe-area-top:0px;--f7-safe-area-bottom:0px;border-radius:var(--f7-popup-tablet-border-radius,var(--f7-popup-border-radius));height:var(--f7-popup-tablet-height);left:50%;margin-left:calc(var(--f7-popup-tablet-width)*-1/2);margin-top:calc(var(--f7-popup-tablet-height)*-1/2);top:50%;transform:translate3d(0,100vh,0);width:var(--f7-popup-tablet-width)}.popup:not(.popup-tablet-fullscreen).modal-in{transform:translateZ(0)}.popup:not(.popup-tablet-fullscreen).modal-out{transform:translate3d(0,100vh,0)}.popup:not(.popup-tablet-fullscreen).swipe-close-to-top.modal-out{transform:translate3d(0,-100vh,0)}.popup:not(.popup-tablet-fullscreen).popup-behind{pointer-events:none;transform:translateZ(0) scale(.9)}.popup:not(.popup-tablet-fullscreen).popup-behind.modal-out{transform:translate3d(0,100vh,0) scale(.9)}html:has(.popup-push-in) .popup-push:not(.popup-tablet-fullscreen){margin-top:0}}html:has(.popup.modal-in) .framework7-root>.panel .page-content,html:has(.popup.modal-in) .framework7-root>.view .page-content,html:has(.popup.modal-in) .framework7-root>.views .page-content{overflow:hidden;-webkit-overflow-scrolling:auto}html:has(.popup-push-closing) .popup-push,html:has(.popup-push-in) .popup-push{border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;height:calc(100% - var(--f7-popup-push-offset) - 10px);top:calc(var(--f7-popup-push-offset) + 10px);--f7-safe-area-top:0px}html:has(.popup-push-closing) .popup-push .page,html:has(.popup-push-closing) .popup-push .view,html:has(.popup-push-in) .popup-push .page,html:has(.popup-push-in) .popup-push .view{--f7-safe-area-top:0px}html:has(.popup-push-closing) .framework7-root,html:has(.popup-push-in) .framework7-root{background:#000}html:has(.popup-push-closing) .framework7-root>.view,html:has(.popup-push-closing) .framework7-root>.views,html:has(.popup-push-in) .framework7-root>.view,html:has(.popup-push-in) .framework7-root>.views{transition-duration:var(--f7-popup-transition-duration);transition-timing-function:var(--f7-popup-transition-timing-function)}html:has(.popup-push-closing) .dark .framework7-root>.view:after,html:has(.popup-push-closing) .dark .framework7-root>.views:after,html:has(.popup-push-closing) .dark.framework7-root>.view:after,html:has(.popup-push-closing) .dark.framework7-root>.views:after,html:has(.popup-push-closing) .framework7-root>.view.dark:after,html:has(.popup-push-closing) .framework7-root>.views.dark:after,html:has(.popup-push-closing).dark .framework7-root>.view:after,html:has(.popup-push-closing).dark .framework7-root>.views:after,html:has(.popup-push-in) .dark .framework7-root>.view:after,html:has(.popup-push-in) .dark .framework7-root>.views:after,html:has(.popup-push-in) .dark.framework7-root>.view:after,html:has(.popup-push-in) .dark.framework7-root>.views:after,html:has(.popup-push-in) .framework7-root>.view.dark:after,html:has(.popup-push-in) .framework7-root>.views.dark:after,html:has(.popup-push-in).dark .framework7-root>.view:after,html:has(.popup-push-in).dark .framework7-root>.views:after{animation:popup-dark-push-overlay-fade-in var(--f7-popup-transition-duration) forwards;background:#ffffff1a;border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;content:"";height:100%;left:0;opacity:1;pointer-events:none;position:absolute;top:0;width:100%;z-index:13000}html:has(.popup-push-in) .framework7-root>.view,html:has(.popup-push-in) .framework7-root>.views{border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;transform:translateZ(0) scale(var(--f7-popup-push-scale,1))!important}html:has(.popup-push-in) .popup:after{background:#0006;border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;content:"";height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transition-duration:var(--f7-popup-transition-duration);transition-timing-function:var(--f7-popup-transition-timing-function);width:100%;z-index:13000}html:has(.popup-push-in) .dark .popup:after,html:has(.popup-push-in) .dark.popup:after,html:has(.popup-push-in).dark .popup:after{background:#ffffff0d}html:has(.popup-push-in) .popup-behind{transform:translateZ(0) scale(var(--f7-popup-push-scale,1))}html:has(.popup-push-in) .popup-behind.modal-out{transform:translate3d(0,100vh,0) scale(var(--f7-popup-push-scale,1))}html:has(.popup-push-in) .popup-behind:not(.popup-push){border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0}html:has(.popup-push-in) .popup-behind.popup-push{transform:translate3d(0,calc(-10px - var(--f7-popup-push-offset)),0) scale(var(--f7-popup-push-scale,1))}html:has(.popup-push-in) .popup-behind.popup-push.modal-out{transform:translate3d(0,calc(-10px - var(--f7-popup-push-offset) + 100vh),0) scale(var(--f7-popup-push-scale,1))}html:has(.popup-push-in) .popup-behind:after{opacity:1;pointer-events:auto}html:has(.popup-push-closing) .dark .framework7-root>.view:after,html:has(.popup-push-closing) .dark .framework7-root>.views:after,html:has(.popup-push-closing) .dark.framework7-root>.view:after,html:has(.popup-push-closing) .dark.framework7-root>.views:after,html:has(.popup-push-closing) .framework7-root>.view.dark:after,html:has(.popup-push-closing) .framework7-root>.views.dark:after,html:has(.popup-push-closing).dark .framework7-root>.view:after,html:has(.popup-push-closing).dark .framework7-root>.views:after{animation:popup-dark-push-overlay-fade-out var(--f7-popup-transition-duration) forwards;animation-timing-function:var(--f7-popup-transition-timing-function)}@keyframes popup-dark-push-overlay-fade-in{0%{opacity:0}to{opacity:1}}@keyframes popup-dark-push-overlay-fade-out{0%{opacity:1}to{opacity:0}}