/* === Panels === */ .panel-backdrop { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; z-index: 5999; display: none; transform: translate3d(0,0,0); &.not-animated { transition-duration: 0ms !important; } } .panel { z-index: 1000; display: none; box-sizing: border-box; position: absolute; overflow: auto; -webkit-overflow-scrolling: touch; top: 0; height: 100%; transform: translate3d(0,0,0); width: 260px; background-color: #fff; &.not-animated { transition-duration: 0ms !important; } &.panel-reveal.not-animated { & ~ .views, & ~ .view { transition-duration: 0ms !important; } } } .panel-cover { z-index: 6000; } .panel-left { left: 0; &.panel-cover { transform: translate3d(-100%, 0, 0); } } .panel-right { right: 0; &.panel-cover { transform: translate3d(100%, 0, 0); } } .panel-visible-by-breakpoint { display: block; transform: translate3d(0,0,0) !important; &.panel-cover { z-index: 5900; } } html.with-panel { .framework7-root > .views, .framework7-root > .view { .page-content { .not-scrollable(); } } } html.with-panel-left-cover, html.with-panel-right-cover { .panel-backdrop { display: block; opacity: 1; } } html.with-panel-left-reveal, html.with-panel-right-reveal, html.with-panel-transitioning { .panel-backdrop { background: rgba(0,0,0,0); display: block; opacity: 0; } } html.with-panel-left-reveal { .views, .framework7-root > .view, .panel-backdrop { transform: translate3d(260px,0,0); } } html.with-panel-right-reveal { .views, .framework7-root > .view, .panel-backdrop { transform: translate3d(-260px,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); } } html.with-statusbar { &.device-ios, &.ios:not(.device-ios):not(.device-android) { .panel { top: 20px; height: ~"calc(100% - 20px)"; } } &.device-android, &.md:not(.device-ios):not(.device-android) { .panel { top: 24px; height: ~"calc(100% - 24px)"; } } .safe-areas({ .panel { top: constant(safe-area-inset-top); top: env(safe-area-inset-top); height: ~"calc(100% - constant(safe-area-inset-top))"; height: ~"calc(100% - env(safe-area-inset-top))"; } }) } & when (@includeIosTheme) { @import url('./panel-ios.less'); } & when (@includeMdTheme) { @import url('./panel-md.less'); }