150 lines
3.7 KiB
Plaintext
150 lines
3.7 KiB
Plaintext
/* === Relation between toolbar/navbar types and pages === */
|
|
.page, .view, .views{
|
|
>.navbar, >.toolbar {
|
|
position: absolute;
|
|
}
|
|
}
|
|
.subnavbar ~ .page-content {
|
|
padding-top: @toolbarSize;
|
|
}
|
|
.toolbar-fixed, .tabbar-fixed {
|
|
.page-content {
|
|
padding-top: @toolbarSize;
|
|
}
|
|
}
|
|
.tabbar-labels-fixed {
|
|
.page-content {
|
|
padding-top: @tabbarLabelsSize;
|
|
}
|
|
}
|
|
|
|
.toolbar ~ .page-content {
|
|
padding-top: @toolbarSize;
|
|
}
|
|
.tabbar-labels ~ .page-content {
|
|
padding-top: @tabbarLabelsSize;
|
|
}
|
|
.toolbar-bottom, .messagebar {
|
|
~ .page-content {
|
|
padding-top: 0;
|
|
padding-bottom: @toolbarSize;
|
|
}
|
|
}
|
|
.tabbar-labels.toolbar-bottom ~ .page-content {
|
|
padding-bottom: @tabbarLabelsSize;
|
|
}
|
|
.navbar-fixed {
|
|
.page-content {
|
|
padding-top: @navbarSize;
|
|
}
|
|
|
|
&.toolbar-fixed, &.tabbar-fixed, .toolbar-fixed, .tabbar-fixed, .toolbar-fixed &, .tabbar-fixed & {
|
|
.page-content {
|
|
padding-top: @navbarSize + @toolbarSize;
|
|
}
|
|
}
|
|
&.tabbar-labels-fixed, .tabbar-labels-fixed, .tabbar-labels-fixed & {
|
|
.page-content {
|
|
padding-top: @navbarSize + @tabbarLabelsSize;
|
|
}
|
|
}
|
|
.toolbar ~ .page-content {
|
|
padding-top: @navbarSize + @toolbarSize;
|
|
}
|
|
.messagebar ~ .page-content, .toolbar-bottom ~ .page-content {
|
|
padding-top: @navbarSize;
|
|
}
|
|
|
|
.tabbar-labels ~ .page-content {
|
|
padding-top: @navbarSize + @tabbarLabelsSize;
|
|
}
|
|
.tabbar-labels.toolbar-bottom ~ .page-content {
|
|
padding-top: @navbarSize;
|
|
}
|
|
|
|
.with-subnavbar .page-content, .page-content.with-subnavbar, .subnavbar ~ .page-content {
|
|
padding-top: @navbarSize + @toolbarSize;
|
|
}
|
|
|
|
.page .subnavbar, &.page .subnavbar {
|
|
top: @navbarSize;
|
|
}
|
|
|
|
.toolbar {
|
|
top: @navbarSize;
|
|
}
|
|
.messagebar, .toolbar-bottom {
|
|
top: auto;
|
|
}
|
|
}
|
|
// Page Hidden Navbar
|
|
.navbar {
|
|
&.navbar-hiding {
|
|
.transition(400ms);
|
|
.translate3d(0,0,0);
|
|
& ~ .page-content, & ~ .pages, & ~ .page {
|
|
.list-group-title {
|
|
.transition(400ms);
|
|
}
|
|
.subnavbar {
|
|
.transition(400ms);
|
|
}
|
|
}
|
|
& ~ .subnavbar, & ~ .toolbar {
|
|
.transition(400ms);
|
|
}
|
|
}
|
|
&.navbar-hidden {
|
|
.transition(400ms);
|
|
.translate3d(0,-100%,0);
|
|
& ~ .page-content, & ~ .pages, & ~ .page {
|
|
.list-group-title {
|
|
.transition(400ms);
|
|
top:-@navbarSize;
|
|
}
|
|
.subnavbar {
|
|
.translate3d(0,-@navbarSize,0);
|
|
.transition(400ms);
|
|
}
|
|
}
|
|
& ~ .subnavbar, & ~ .toolbar:not(.messagebar):not(.toolbar-bottom) {
|
|
.translate3d(0,-@navbarSize,0);
|
|
.transition(400ms);
|
|
}
|
|
}
|
|
}
|
|
.page.no-navbar {
|
|
.page-content {
|
|
padding-top: 0;
|
|
}
|
|
&.with-subnavbar .page-content, .with-subnavbar & .page-content, .page-content.with-subnavbar {
|
|
padding-top: @toolbarSize;
|
|
}
|
|
}
|
|
// Page Hidden Toolbar
|
|
.toolbar, .tabbar {
|
|
&.toolbar-hiding, &.tabbar-hiding {
|
|
.transition(400ms);
|
|
.translate3d(0,0,0);
|
|
}
|
|
&.toolbar-hidden, &.tabbar-hidden {
|
|
.transition(400ms);
|
|
}
|
|
|
|
&.toolbar-hidden, &.tabbar-hidden {
|
|
.translate3d(0,-100%,0);
|
|
}
|
|
.navbar ~ &.toolbar-hidden, .navbar ~ &.tabbar-hidden {
|
|
.translate3d(0,-104px,0);
|
|
}
|
|
.navbar ~ &.tabbar-labels.toolbar-hidden {
|
|
.translate3d(0,-128px,0);
|
|
}
|
|
&.toolbar-hidden.messagebar, &.toolbar-hidden.toolbar-bottom {
|
|
.translate3d(0, 100%,0);
|
|
}
|
|
}
|
|
.page.no-toolbar .page-content, .page.no-tabbar .page-content {
|
|
padding-bottom: 0;
|
|
}
|