Ghost/ghost/admin/assets/sass/layouts/default.scss

100 lines
2.1 KiB
SCSS
Raw Normal View History

2014-07-29 21:48:31 +04:00
//
// Global Container
// --------------------------------------------------
#container {
@include position(absolute, 0px 0px 0px 0px);
overflow: hidden;
}
//
// Main Layout
// --------------------------------------------------
// The <main> content wrapper
.viewport {
@include position(absolute, 0px 0px 0px 0px);
overflow: hidden;
2014-07-29 18:35:03 +04:00
z-index: 500; // Above the .global-nav when collapsed
2014-08-16 20:39:52 +04:00
@media (max-width: 900px) {
@include transition(transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1));
2014-07-29 21:48:31 +04:00
}
&.global-nav-expanded {
@include transform(translate3d(260px, 0px, 0px));
}
}
//
2014-08-16 20:39:52 +04:00
// The header bar - visible below 900px
// --------------------------------------------------
.page-header {
position: relative;
height: 44px;
line-height: 44px;
text-align: center;
color: #fff;
background: $darkgrey;
overflow: hidden;
2014-08-16 20:39:52 +04:00
@media (min-width: 900px) {
height: 60px;
line-height: 60px;
}
2014-08-16 20:39:52 +04:00
}
2014-08-16 20:39:52 +04:00
// Centered page heading
.page-title {
display: block;
height: 44px;
line-height: 44px;
margin: 0;
padding: 0 15%;
color: #fff;
font-size: 1.8rem;
font-weight: normal;
letter-spacing: 0;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
@media (min-width: 900px) {
height: 60px;
line-height: 60px;
}
}
// The burger to expand .global-nav menu
.menu-button {
@include icon($i-menu, 18px) { line-height: 44px; }
display: block;
position: absolute;
top: 0;
left: 0;
width: 44px;
height: 44px;
color: #fff;
}
//
// The panel which wraps the main content area
// --------------------------------------------------
// We can't use position:fixed on .page-header because it would
// break the mobile menu. So we create an overflow-auto content
// area which scrolls just underneath the header, making it look
// like the header is position:fixed.
.page-content {
@include position(absolute, 60px 0px 0px 0px);
background: #fff;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
2014-08-16 20:39:52 +04:00
@media (max-width: 900px) {
top: 44px;
}
}