framework7
Version:
Full featured mobile HTML framework for building iOS & Android apps
1 lines • 1.92 kB
CSS
:root{--f7-popup-border-radius:0px;--f7-popup-tablet-width:630px;--f7-popup-tablet-height:630px}.ios{--f7-popup-box-shadow:none}.md{--f7-popup-box-shadow:0px 20px 44px rgba(0, 0, 0, 0.5)}.aurora{--f7-popup-tablet-border-radius:4px;--f7-popup-box-shadow:0px 20px 44px rgba(0, 0, 0, 0.5)}.popup-backdrop{z-index:10500}.popup{position:absolute;left:0;top:var(--f7-statusbar-height);width:100%;height:calc(100% - var(--f7-statusbar-height));display:none;box-sizing:border-box;transition-property:transform;transform:translate3d(0,100%,0);background:#fff;z-index:11000;will-change:transform;overflow:hidden;border-radius:var(--f7-popup-border-radius)}.popup.modal-in,.popup.modal-out{transition-duration:.4s}.popup.not-animated{transition-duration:0s}.popup.modal-in{display:block;transform:translate3d(0,0,0)}.popup.modal-out{transform:translate3d(0,100%,0)}.popup.swipe-close-to-top.modal-out{transform:translate3d(0,-100%,0)}@media (min-width:630px) and (min-height:630px){.popup:not(.popup-tablet-fullscreen){width:var(--f7-popup-tablet-width);height:var(--f7-popup-tablet-height);left:50%;top:50%;margin-left:calc(-1 * var(--f7-popup-tablet-width)/ 2);margin-top:calc(-1 * var(--f7-popup-tablet-height)/ 2);transform:translate3d(0,100vh,0);box-shadow:var(--f7-popup-box-shadow);border-radius:var(--f7-popup-tablet-border-radius,var(--f7-popup-border-radius))}.popup:not(.popup-tablet-fullscreen).modal-in{transform:translate3d(0,0,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)}}@media (max-width:629px),(max-height:629px){.popup-backdrop{z-index:9500}}html.with-modal-popup .framework7-root>.panel .page-content,html.with-modal-popup .framework7-root>.view .page-content,html.with-modal-popup .framework7-root>.views .page-content{overflow:hidden;-webkit-overflow-scrolling:auto}