framework7/components/sheet/sheet.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:32px;--f7-sheet-border-color:#0000;--f7-sheet-transition-timing-function:initial;--f7-sheet-push-border-radius:32px;--f7-sheet-transition-duration:300ms;--f7-sheet-bg-color:var(--f7-glass-bg-color)}.md{--f7-sheet-border-radius:16px;--f7-sheet-push-border-radius:16px;--f7-sheet-border-color:#0000;--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,.sheet-modal{z-index:12500}.sheet-modal{background:var(--f7-sheet-bg-color);bottom:0;box-sizing:border-box;display:none;height:var(--f7-sheet-height);left:0;overflow:hidden;position:absolute;transform:translate3d(0,100%,0);transition-property:transform;width:100%;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:translateZ(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%;overflow:hidden;position:relative}.sheet-modal .toolbar{--f7-safe-area-top:0px;--f7-safe-area-bottom: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{backface-visibility:hidden;background-color:var(--f7-sheet-border-color);bottom:0;content:"";display:block;height:1px;left:0;position:absolute;right:auto;top:auto;transform:scaleY(calc(1/var(--f7-device-pixel-ratio)));transform-origin:50% 100%;transform-style:preserve-3d;width:100%;z-index:15;z-index:700}.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{backface-visibility:hidden;background-color:var(--f7-sheet-border-color);bottom:auto;content:"";display:block;height:1px;left:0;position:absolute;right:auto;top:0;transform:scaleY(calc(1/var(--f7-device-pixel-ratio)));transform-origin:50% 0;transform-style:preserve-3d;width:100%;z-index:15;z-index:700}.sheet-modal-top{--f7-safe-area-bottom:0px;bottom:auto;top:0}.sheet-modal-top,.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:has(.sheet-modal-push-in,.sheet-modal-push-closing) .sheet-modal-push{--f7-sheet-border-color:#0000;border-radius:var(--f7-sheet-push-border-radius) var(--f7-sheet-push-border-radius) 0 0;overflow:hidden}html:has(.sheet-modal-push-in,.sheet-modal-push-closing) .sheet-modal-push .page,html:has(.sheet-modal-push-in,.sheet-modal-push-closing) .sheet-modal-push .view{--f7-safe-area-top:0px}html:has(.sheet-modal-push-in,.sheet-modal-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:has(.sheet-modal-push-in,.sheet-modal-push-closing) .framework7-root{background:#000}html:has(.sheet-modal-push-in,.sheet-modal-push-closing) .framework7-root>.view,html:has(.sheet-modal-push-in,.sheet-modal-push-closing) .framework7-root>.views{transition-duration:var(--f7-sheet-transition-duration);transition-timing-function:var(--f7-sheet-transition-timing-function)}html:has(.sheet-modal-push-in,.sheet-modal-push-closing) .dark .framework7-root>.view:after,html:has(.sheet-modal-push-in,.sheet-modal-push-closing) .dark .framework7-root>.views:after,html:has(.sheet-modal-push-in,.sheet-modal-push-closing) .dark.framework7-root>.view:after,html:has(.sheet-modal-push-in,.sheet-modal-push-closing) .dark.framework7-root>.views:after,html:has(.sheet-modal-push-in,.sheet-modal-push-closing) .framework7-root>.view.dark:after,html:has(.sheet-modal-push-in,.sheet-modal-push-closing) .framework7-root>.views.dark:after,html:has(.sheet-modal-push-in,.sheet-modal-push-closing).dark .framework7-root>.view:after,html:has(.sheet-modal-push-in,.sheet-modal-push-closing).dark .framework7-root>.views:after{animation:sheet-dark-push-overlay-fade-in var(--f7-sheet-transition-duration);animation-timing-function:var(--f7-sheet-transition-timing-function);background:#ffffff1a;content:"";height:100%;left:0;opacity:1;pointer-events:none;position:absolute;top:0;transition-duration:var(--f7-sheet-transition-duration);transition-timing-function:var(--f7-sheet-transition-timing-function);width:100%;z-index:13000}html:has(.sheet-modal-push-in) .framework7-root>.view,html:has(.sheet-modal-push-in) .framework7-root>.views{border-radius:var(--f7-sheet-push-border-radius);transform:translateZ(0) scale(var(--f7-sheet-push-scale,1))!important}html:has(.sheet-modal-push-closing) .dark .framework7-root>.view:after,html:has(.sheet-modal-push-closing) .dark .framework7-root>.views:after,html:has(.sheet-modal-push-closing) .dark.framework7-root>.view:after,html:has(.sheet-modal-push-closing) .dark.framework7-root>.views:after,html:has(.sheet-modal-push-closing) .framework7-root>.view.dark:after,html:has(.sheet-modal-push-closing) .framework7-root>.views.dark:after,html:has(.sheet-modal-push-closing).dark .framework7-root>.view:after,html:has(.sheet-modal-push-closing).dark .framework7-root>.views:after{animation:none;opacity:0}@keyframes sheet-dark-push-overlay-fade-in{0%{opacity:0}to{opacity:1}}.ios .sheet-modal{backdrop-filter:saturate(180%) blur(16px);box-shadow:var(--f7-glass-shadow)}.ios .sheet-modal .toolbar{position:absolute}.ios:not(.device-ios) .sheet-modal .toolbar:before{display:none}.md .sheet-modal .toolbar{--f7-safe-area-bottom:0px;position:relative;width:100%}.md .sheet-modal .toolbar:after,.md .sheet-modal .toolbar:before{display:none}.md .sheet-modal .toolbar+.sheet-modal-inner{height:calc(100% - var(--f7-toolbar-height))}.md .sheet-modal .toolbar+.sheet-modal-inner .page-content{--f7-page-toolbar-top-offset:0px;--f7-page-toolbar-bottom-offset:0px}.md .sheet-modal .toolbar a.link:not(.tab-link){flex-shrink:0}