@pi0/framework7
Version:
Full featured mobile HTML framework for building iOS & Android apps
104 lines (103 loc) • 2.02 kB
text/less
/* === 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 ;
}
}
.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;
&.not-animated {
transition-duration: 0ms ;
}
&.panel-reveal.not-animated {
& ~ .views, & ~ .view {
transition-duration: 0ms ;
}
}
}
.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) ;
&.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);
}
}
& when (@include-ios-theme) {
@import url('./panel-ios.less');
}
& when (@include-md-theme) {
@import url('./panel-md.less');
}