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-backdrop-bg-color:rgba(0, 0, 0, 0);--f7-panel-transition-duration:400ms;--f7-panel-shadow:transparent}.md{--f7-panel-backdrop-bg-color:rgba(0, 0, 0, 0.2);--f7-panel-transition-duration:300ms;--f7-panel-shadow:rgba(0, 0, 0, 0.25) 0%,rgba(0, 0, 0, 0.1) 30%,rgba(0, 0, 0, 0.05) 40%,rgba(0, 0, 0, 0) 60%,rgba(0, 0, 0, 0) 100%}.aurora{--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:calc(var(--f7-statusbar-height) + var(--f7-appbar-app-offset,0px));width:100%;height:calc(100% - var(--f7-statusbar-height) - var(--f7-appbar-app-offset,0px));opacity:0;z-index:5999;display:none;transform:translate3d(0,0,0);background-color:var(--f7-panel-backdrop-bg-color);transition-duration:var(--f7-panel-transition-duration);will-change:transform,opacity}.panel-backdrop.not-animated{transition-duration:0s!important}.panel{z-index:1000;display:none;box-sizing:border-box;position:absolute;top:calc(var(--f7-statusbar-height) + var(--f7-appbar-app-offset,0px));height:calc(100% - var(--f7-statusbar-height) - 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;will-change:transform;transition-property:transform}.panel:after{pointer-events:none;opacity:0;z-index:5999;position:absolute;content:'';top:0;width:20px;height:100%;transition-property:transform,opacity}.panel,.panel:after{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;-ms-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-visible-by-breakpoint{display:block;transform:translate3d(0,0,0)!important}.panel-visible-by-breakpoint:after{display:none}.panel-visible-by-breakpoint.panel-cover{z-index:5900}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,html.with-panel-transitioning .framework7-root>.view,html.with-panel-transitioning .views{transition-duration:var(--f7-panel-transition-duration);transition-property:transform}html.with-panel-left-reveal .panel-backdrop,html.with-panel-right-reveal .panel-backdrop,html.with-panel-transitioning .panel-backdrop{background:rgba(0,0,0,0);display:block;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{display:block;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}