framework7/components/sheet/sheet-rtl.css

Full featured mobile HTML framework for building iOS & Android apps

:root{--f7-sheet-height:260px;--f7-sheet-push-offset:var(--f7-safe-area-top)}.ios{--f7-sheet-border-radius:0px;--f7-sheet-border-color:var(--f7-bars-border-color);--f7-sheet-transition-timing-function:initial;--f7-sheet-push-border-radius:10px;--f7-sheet-transition-duration:300ms;--f7-sheet-bg-color:#fff}.ios .dark,.ios.dark{--f7-sheet-bg-color:#202020}.md{--f7-sheet-border-radius:16px;--f7-sheet-push-border-radius:16px;--f7-sheet-border-color:transparent;--f7-sheet-transition-timing-function:cubic-bezier(0, 0.8, 0.34, 1);--f7-sheet-transition-duration:400ms}.md,.md .dark,.md [class*=color-]{--f7-sheet-bg-color:var(--f7-md-surface)}.sheet-backdrop{z-index:11000}.sheet-backdrop-unique{z-index:12500}.sheet-modal{overflow:hidden;position:absolute;left:0;bottom:0;width:100%;height:var(--f7-sheet-height);display:none;box-sizing:border-box;transition-property:transform;transform:translate3d(0,100%,0);background:var(--f7-sheet-bg-color);z-index:12500;will-change:transform,opacity}.sheet-modal.modal-in,.sheet-modal.modal-out{transition-duration:var(--f7-sheet-transition-duration)}.sheet-modal.not-animated{transition-duration:0s}.sheet-modal.modal-in{display:block;transform:translate3d(0,0,0)}.sheet-modal.modal-in-breakpoint,.sheet-modal.modal-in-swipe-step{display:block;transform:translate3d(0,var(--f7-sheet-breakpoint,var(--f7-sheet-swipe-step,0)),0)}.sheet-modal.modal-out{transform:translate3d(0,100%,0)}.sheet-modal .sheet-modal-inner{height:100%;position:relative;overflow:hidden}.sheet-modal .toolbar{--f7-safe-area-bottom:0px;position:relative;width:100%}.sheet-modal .toolbar:after,.sheet-modal .toolbar:before{display:none}.sheet-modal .toolbar+.sheet-modal-inner{height:calc(100% - var(--f7-toolbar-height))}.sheet-modal .toolbar+.sheet-modal-inner .page-content{--f7-page-toolbar-top-offset:0px;--f7-page-toolbar-bottom-offset:0px}.sheet-backdrop,.sheet-modal{transition-timing-function:var(--f7-sheet-transition-timing-function)}.sheet-modal-top{border-radius:0 0 var(--f7-sheet-border-radius) var(--f7-sheet-border-radius)}.sheet-modal-top:after{content:'';position:absolute;background-color:var(--f7-sheet-border-color);display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;transform-origin:50% 100%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.sheet-modal-top:after{z-index:700;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-style:preserve-3d}.sheet-modal-bottom,.sheet-modal:not(.sheet-modal-top){--f7-safe-area-top:0px;border-radius:var(--f7-sheet-border-radius) var(--f7-sheet-border-radius) 0 0}.sheet-modal-bottom:before,.sheet-modal:not(.sheet-modal-top):before{content:'';position:absolute;background-color:var(--f7-sheet-border-color);display:block;z-index:15;top:0;right:auto;bottom:auto;left:0;height:1px;width:100%;transform-origin:50% 0%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.sheet-modal-bottom:before,.sheet-modal:not(.sheet-modal-top):before{z-index:700;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-style:preserve-3d}.sheet-modal-top{--f7-safe-area-bottom:0px;bottom:auto;top:0;transform:translate3d(0,-100%,0)}.sheet-modal-top.modal-out{transform:translate3d(0,-100%,0)}.sheet-modal-top .toolbar-bottom{position:absolute}.sheet-modal-top .page-content{padding-top:var(--f7-safe-area-top)}html.with-modal-sheet-push .sheet-modal-push,html.with-modal-sheet-push-closing .sheet-modal-push{--f7-sheet-border-color:transparent;border-radius:var(--f7-sheet-push-border-radius) var(--f7-sheet-push-border-radius) 0 0;overflow:hidden}html.with-modal-sheet-push .sheet-modal-push .page,html.with-modal-sheet-push .sheet-modal-push .view,html.with-modal-sheet-push-closing .sheet-modal-push .page,html.with-modal-sheet-push-closing .sheet-modal-push .view{--f7-safe-area-top:0px}html.with-modal-sheet-push .sheet-modal-push.sheet-modal-top,html.with-modal-sheet-push-closing .sheet-modal-push.sheet-modal-top{border-radius:0 0 var(--f7-sheet-push-border-radius) var(--f7-sheet-push-border-radius)}html.with-modal-sheet-push .framework7-root,html.with-modal-sheet-push-closing .framework7-root{background:#000}html.with-modal-sheet-push .framework7-root>.view,html.with-modal-sheet-push .framework7-root>.views,html.with-modal-sheet-push-closing .framework7-root>.view,html.with-modal-sheet-push-closing .framework7-root>.views{transition-duration:var(--f7-sheet-transition-duration);transition-timing-function:var(--f7-sheet-transition-timing-function)}html.with-modal-sheet-push .dark .framework7-root>.view:after,html.with-modal-sheet-push .dark .framework7-root>.views:after,html.with-modal-sheet-push .dark.framework7-root>.view:after,html.with-modal-sheet-push .dark.framework7-root>.views:after,html.with-modal-sheet-push .framework7-root>.view.dark:after,html.with-modal-sheet-push .framework7-root>.views.dark:after,html.with-modal-sheet-push-closing .dark .framework7-root>.view:after,html.with-modal-sheet-push-closing .dark .framework7-root>.views:after,html.with-modal-sheet-push-closing .dark.framework7-root>.view:after,html.with-modal-sheet-push-closing .dark.framework7-root>.views:after,html.with-modal-sheet-push-closing .framework7-root>.view.dark:after,html.with-modal-sheet-push-closing .framework7-root>.views.dark:after,html.with-modal-sheet-push-closing.dark .framework7-root>.view:after,html.with-modal-sheet-push-closing.dark .framework7-root>.views:after,html.with-modal-sheet-push.dark .framework7-root>.view:after,html.with-modal-sheet-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;opacity:1;transition-duration:var(--f7-sheet-transition-duration);transition-timing-function:var(--f7-sheet-transition-timing-function);animation:sheet-dark-push-overlay-fade-in var(--f7-sheet-transition-duration);animation-timing-function:var(--f7-sheet-transition-timing-function)}html.with-modal-sheet-push .framework7-root>.view,html.with-modal-sheet-push .framework7-root>.views{border-radius:var(--f7-sheet-push-border-radius);transform:translate3d(0,0,0px) scale(var(--f7-sheet-push-scale,1))!important}html.with-modal-sheet-push-closing .dark .framework7-root>.view:after,html.with-modal-sheet-push-closing .dark .framework7-root>.views:after,html.with-modal-sheet-push-closing .dark.framework7-root>.view:after,html.with-modal-sheet-push-closing .dark.framework7-root>.views:after,html.with-modal-sheet-push-closing .framework7-root>.view.dark:after,html.with-modal-sheet-push-closing .framework7-root>.views.dark:after,html.with-modal-sheet-push-closing.dark .framework7-root>.view:after,html.with-modal-sheet-push-closing.dark .framework7-root>.views:after{opacity:0;animation:none}@keyframes sheet-dark-push-overlay-fade-in{from{opacity:0}to{opacity:1}}.md .sheet-modal .toolbar a.link:not(.tab-link){flex-shrink:0}