framework7/components/sheet.css

Full featured mobile HTML framework for building iOS & Android apps

:root{--f7-sheet-height:260px}.ios{--f7-sheet-bg-color:#cfd5da;--f7-sheet-border-color:#929499}.ios .theme-dark,.ios.theme-dark{--f7-sheet-bg-color:#171717;--f7-sheet-border-color:var(--f7-bars-border-color)}.md{--f7-sheet-bg-color:#fff;--f7-sheet-border-color:transparent}.md .theme-dark,.md.theme-dark{--f7-sheet-bg-color:#202020;--f7-sheet-border-color:transparent}.aurora{--f7-sheet-bg-color:#fff;--f7-sheet-border-color:transparent}.aurora .theme-dark,.aurora.theme-dark{--f7-sheet-bg-color:#202020;--f7-sheet-border-color:transparent}.sheet-backdrop{z-index:11000}.sheet-modal{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}.sheet-modal.modal-in,.sheet-modal.modal-out{transition-duration:.3s}.sheet-modal.not-animated{transition-duration:0s}.sheet-modal.modal-in{display:block;transform:translate3d(0,0,0)}.sheet-modal.modal-in-swipe-step{display:block;transform:translate3d(0,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{position:relative;width:100%}.sheet-modal .toolbar:after,.sheet-modal .toolbar:before{display:none}.sheet-modal .toolbar~* .page-content{padding-top:0;padding-bottom:0}.sheet-modal .toolbar+.sheet-modal-inner{height:calc(100% - var(--f7-toolbar-height))}.sheet-modal .toolbar~.sheet-modal-inner .page-content{padding-bottom:0;padding-top:0}.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:600;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-style:preserve-3d}.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:600;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-style:preserve-3d}.sheet-modal-bottom .sheet-modal-inner>.page-content,.sheet-modal-bottom .toolbar~.sheet-modal-inner .page-content,.sheet-modal:not(.sheet-modal-top) .sheet-modal-inner>.page-content,.sheet-modal:not(.sheet-modal-top) .toolbar~.sheet-modal-inner .page-content{padding-bottom:var(--f7-safe-area-bottom)}.sheet-modal-top{bottom:auto;top:var(--f7-statusbar-height);transform:translate3d(0,calc(-100% - var(--f7-statusbar-height)),0)}.sheet-modal-top.modal-out{transform:translate3d(0,calc(-100% - var(--f7-statusbar-height)),0)}.sheet-modal-top .toolbar-bottom{position:absolute}.sheet-modal-top .toolbar-top~.sheet-modal-inner .page-content{padding-top:0}.md .sheet-modal .toolbar a.link:not(.tab-link){flex-shrink:0}