framework7/components/panel.rtl.css

Full featured mobile HTML framework for building iOS & Android apps

:root{--f7-panel-width:260px;--f7-panel-bg-color:#fff}.ios{--f7-panel-collapsed-width:58px;--f7-panel-backdrop-bg-color:rgba(0, 0, 0, 0);--f7-panel-transition-duration:400ms;--f7-panel-shadow:transparent}.md{--f7-panel-collapsed-width:60px;--f7-panel-backdrop-bg-color:rgba(0, 0, 0, 0.3);--f7-panel-transition-duration:300ms;--f7-panel-shadow:rgba(0, 0, 0, 0.2) 0%,rgba(0, 0, 0, 0.07) 30%,rgba(0, 0, 0, 0.03) 40%,rgba(0, 0, 0, 0) 60%,rgba(0, 0, 0, 0) 100%}.aurora{--f7-panel-collapsed-width:44px;--f7-panel-backdrop-bg-color:rgba(0, 0, 0, 0.2);--f7-panel-transition-duration:400ms;--f7-panel-shadow:transparent}.panel-backdrop{position:absolute;left:0;top:var(--f7-appbar-app-offset,0px);width:100%;height:calc(100% - var(--f7-appbar-app-offset,0px));opacity:0;z-index:5999;visibility:hidden;pointer-events:none;transform:translate3d(0,0,0);background-color:var(--f7-panel-backdrop-bg-color);transition-property:transform,opacity;transition-duration:var(--f7-panel-transition-duration)}.panel-backdrop .with-panel,.panel-backdrop .with-panel-closing{visibility:visible}.panel-backdrop.not-animated{transition-duration:0s!important}.panel{z-index:1000;box-sizing:border-box;position:absolute;top:var(--f7-appbar-app-offset,0px);height:calc(100% - var(--f7-appbar-app-offset,0px));transform:translate3d(0,0,0);width:var(--f7-panel-width);background-color:var(--f7-panel-bg-color);overflow:visible;transition-property:transform;transition-duration:var(--f7-panel-transition-duration)}.panel:not(.panel-in):not(.panel-out):not(.panel-in-breakpoint):not(.panel-in-collapsed):not(.panel-in-swipe){display:none}.panel:after{pointer-events:none;opacity:0;z-index:5999;position:absolute;content:'';top:0;width:20px;height:100%;transition-property:transform,opacity;transition-duration:var(--f7-panel-transition-duration)}.panel.not-animated,.panel.not-animated:after{transition-duration:0s!important}.panel.panel-reveal.not-animated~.view,.panel.panel-reveal.not-animated~.views{transition-duration:0s!important}.panel.panel-resizing{-webkit-user-select:none;-moz-user-select:none;user-select:none}.panel.panel-resizing,.panel.panel-resizing:after,.panel.panel-resizing~.view,.panel.panel-resizing~.views{transition-duration:0s!important}.panel-cover{z-index:6000}.panel-left{left:0;width:var(--f7-panel-left-width,var(--f7-panel-width))}.panel-left.panel-cover{transform:translate3d(-100%,0,0)}.panel-left.panel-cover:after{left:100%;background:linear-gradient(to right,var(--f7-panel-shadow))}html.with-panel-left-cover .panel-left.panel-cover:after{opacity:1}.panel-left.panel-reveal:after{right:0;transform:translate3d(calc(-1 * var(--f7-panel-left-width,var(--f7-panel-width))),0,0);background:linear-gradient(to left,var(--f7-panel-shadow))}html.with-panel-left-reveal .panel-left.panel-reveal:after{opacity:1;transform:translate3d(0,0,0)}.panel-right{right:0;width:var(--f7-panel-right-width,var(--f7-panel-width))}.panel-right.panel-cover{transform:translate3d(100%,0,0)}.panel-right.panel-cover:after{right:100%;background:linear-gradient(to left,var(--f7-panel-shadow))}html.with-panel-right-cover .panel-right.panel-cover:after{opacity:1}.panel-right.panel-reveal:after{left:0;background:linear-gradient(to right,var(--f7-panel-shadow));transform:translate3d(var(--f7-panel-right-width,var(--f7-panel-width)),0,0)}html.with-panel-right-reveal .panel-right.panel-reveal:after{opacity:1;transform:translate3d(0,0,0)}.panel-in-breakpoint{transform:translate3d(0,0,0)!important;transition-duration:0s}.panel-in-breakpoint:after{display:none}.panel-in-breakpoint.panel-cover{z-index:5900}html.with-panel-closing .framework7-root>.view,html.with-panel-closing .views,html.with-panel-left-reveal .framework7-root>.view,html.with-panel-left-reveal .views,html.with-panel-right-reveal .framework7-root>.view,html.with-panel-right-reveal .views{transition-duration:var(--f7-panel-transition-duration);transition-property:transform}html.with-panel-closing .panel-backdrop,html.with-panel-left-reveal .panel-backdrop,html.with-panel-right-reveal .panel-backdrop{visibility:visible;pointer-events:auto;opacity:0}html.with-panel .framework7-root>.view .page-content,html.with-panel .framework7-root>.views .page-content{overflow:hidden;-webkit-overflow-scrolling:auto}html.with-panel-left-cover .panel-backdrop,html.with-panel-right-cover .panel-backdrop{visibility:visible;pointer-events:auto;opacity:1}html.with-panel-left-reveal .framework7-root>.view,html.with-panel-left-reveal .panel-backdrop,html.with-panel-left-reveal .views{transform:translate3d(var(--f7-panel-left-width,var(--f7-panel-width)),0,0)}html.with-panel-right-reveal .framework7-root>.view,html.with-panel-right-reveal .panel-backdrop,html.with-panel-right-reveal .views{transform:translate3d(calc(-1 * var(--f7-panel-right-width,var(--f7-panel-width))),0,0)}html.with-panel-left-cover .panel-left{transform:translate3d(0px,0,0)}html.with-panel-right-cover .panel-right{transform:translate3d(0px,0,0)}.panel-resize-handler{position:absolute;top:0;height:100%;width:6px;cursor:col-resize;z-index:6000;display:none}.panel-resizable .panel-resize-handler{display:block}.panel-left.panel-cover .panel-resize-handler{right:-3px}.panel-left.panel-reveal .panel-resize-handler{right:0}.panel-right.panel-cover .panel-resize-handler{left:-3px}.panel-right.panel-reveal .panel-resize-handler{left:0}.panel-left.panel-in-collapsed~.view,.panel-left.panel-in-collapsed~.views{margin-left:var(--f7-panel-left-collapsed-width,var(--f7-panel-collapsed-width))}html.with-panel-left-reveal .panel-left.panel-in-collapsed~.view,html.with-panel-left-reveal .panel-left.panel-in-collapsed~.views{transform:translate3d(calc(var(--f7-panel-left-width,var(--f7-panel-width)) - var(--f7-panel-left-collapsed-width,var(--f7-panel-collapsed-width))),0,0)}.panel-right.panel-in-collapsed~.view,.panel-right.panel-in-collapsed~.views{margin-right:var(--f7-panel-right-collapsed-width,var(--f7-panel-collapsed-width))}html.with-panel-right-reveal .panel-right.panel-in-collapsed~.view,html.with-panel-right-reveal .panel-right.panel-in-collapsed~.views{transform:translate3d(calc(var(--f7-panel-right-collapsed-width,var(--f7-panel-collapsed-width)) - var(--f7-panel-right-width,var(--f7-panel-width))),0,0)}