framework7/components/popup/popup-rtl.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:5px;--f7-popup-transition-duration:400ms;--f7-popup-transition-timing-function:initial;--f7-popup-push-border-radius:10px}.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-backdrop-unique{z-index:11000}.popup{position:absolute;left:0;top:0px;width:100%;height:100%;display:none;box-sizing:border-box;transition-property:transform;transition-timing-function:var(--f7-popup-transition-timing-function);transform:translate3d(0,100vh,0);background:#fff;z-index:11000;overflow:hidden;border-radius:var(--f7-popup-border-radius)}.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:translate3d(0,0,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;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);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)}.popup:not(.popup-tablet-fullscreen).popup-behind{transform:translate3d(0,0,0) scale(.9);pointer-events:none}.popup:not(.popup-tablet-fullscreen).popup-behind.modal-out{transform:translate3d(0,100vh,0) scale(.9)}html.with-modal-popup-push .popup-push:not(.popup-tablet-fullscreen){margin-top:0}}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}html.with-modal-popup-push .popup-push,html.with-modal-popup-push-closing .popup-push{top:calc(var(--f7-popup-push-offset) + 10px);height:calc(100% - var(--f7-popup-push-offset) - 10px);border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;--f7-safe-area-top:0px}html.with-modal-popup-push .popup-push .page,html.with-modal-popup-push .popup-push .view,html.with-modal-popup-push-closing .popup-push .page,html.with-modal-popup-push-closing .popup-push .view{--f7-safe-area-top:0px}html.with-modal-popup-push .framework7-root,html.with-modal-popup-push-closing .framework7-root{background:#000}html.with-modal-popup-push .framework7-root>.view,html.with-modal-popup-push .framework7-root>.views,html.with-modal-popup-push-closing .framework7-root>.view,html.with-modal-popup-push-closing .framework7-root>.views{transition-duration:var(--f7-popup-transition-duration);transition-timing-function:var(--f7-popup-transition-timing-function)}html.with-modal-popup-push .dark .framework7-root>.view:after,html.with-modal-popup-push .dark .framework7-root>.views:after,html.with-modal-popup-push .dark.framework7-root>.view:after,html.with-modal-popup-push .dark.framework7-root>.views:after,html.with-modal-popup-push .framework7-root>.view.dark:after,html.with-modal-popup-push .framework7-root>.views.dark:after,html.with-modal-popup-push-closing .dark .framework7-root>.view:after,html.with-modal-popup-push-closing .dark .framework7-root>.views:after,html.with-modal-popup-push-closing .dark.framework7-root>.view:after,html.with-modal-popup-push-closing .dark.framework7-root>.views:after,html.with-modal-popup-push-closing .framework7-root>.view.dark:after,html.with-modal-popup-push-closing .framework7-root>.views.dark:after,html.with-modal-popup-push-closing.dark .framework7-root>.view:after,html.with-modal-popup-push-closing.dark .framework7-root>.views:after,html.with-modal-popup-push.dark .framework7-root>.view:after,html.with-modal-popup-push.dark .framework7-root>.views:after{content:'';position:absolute;pointer-events:none;left:0;top:0;width:100%;height:100%;background:rgba(255,255,255,.1);z-index:13000;border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;opacity:1;animation:popup-dark-push-overlay-fade-in var(--f7-popup-transition-duration) forwards}html.with-modal-popup-push .framework7-root>.view,html.with-modal-popup-push .framework7-root>.views{border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;transform:translate3d(0,0,0px) scale(var(--f7-popup-push-scale,1))!important}html.with-modal-popup-push .popup:after{content:'';pointer-events:none;position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.4);z-index:13000;transition-duration:var(--f7-popup-transition-duration);transition-timing-function:var(--f7-popup-transition-timing-function);border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;opacity:0}html.with-modal-popup-push .dark .popup:after,html.with-modal-popup-push .dark.popup:after,html.with-modal-popup-push.dark .popup:after{background:rgba(255,255,255,.05)}html.with-modal-popup-push .popup-behind{transform:translate3d(0,0px,0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind.modal-out{transform:translate3d(0,100vh,0) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind:not(.popup-push){border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0}html.with-modal-popup-push .popup-behind.popup-push{transform:translate3d(0,calc(0px - var(--f7-popup-push-offset) - 10px),0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind.popup-push.modal-out{transform:translate3d(0,calc(0px - var(--f7-popup-push-offset) - 10px + 100vh),0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind:after{opacity:1;pointer-events:auto}html.with-modal-popup-push-closing .dark .framework7-root>.view:after,html.with-modal-popup-push-closing .dark .framework7-root>.views:after,html.with-modal-popup-push-closing .dark.framework7-root>.view:after,html.with-modal-popup-push-closing .dark.framework7-root>.views:after,html.with-modal-popup-push-closing .framework7-root>.view.dark:after,html.with-modal-popup-push-closing .framework7-root>.views.dark:after,html.with-modal-popup-push-closing.dark .framework7-root>.view:after,html.with-modal-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{from{opacity:0}to{opacity:1}}@keyframes popup-dark-push-overlay-fade-out{from{opacity:1}to{opacity:0}}