Ghost/core/client/app/styles/layouts/default.scss

158 lines
3.3 KiB
SCSS
Raw Normal View History

// ------------------------------------------------------------
// Default Styles
//
// Styles for containers and elements used throughout Ghost
//
// * Global Container
// * Main Layout
// * Content Panel
// * The header bar
// ------------------------------------------------------------
2014-07-29 21:48:31 +04:00
//
// Global Container
// --------------------------------------------------
// Absolutely everything goes in here. It helps
// reliably position other elements,
2014-07-29 21:48:31 +04:00
#container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
2014-07-29 21:48:31 +04:00
overflow: hidden;
}
//
// Main Layout
// --------------------------------------------------
// The <main> content wrapper
.viewport {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: 500; // Above the .global-nav when collapsed
2014-10-26 20:07:35 +03:00
transition: transform $settings-menu-transition cubic-bezier($settings-menu-bezier);
2014-08-16 20:39:52 +04:00
@media (max-width: 900px) {
2014-10-26 20:07:35 +03:00
transition: transform 0.4s cubic-bezier($settings-menu-bezier);
2014-07-29 21:48:31 +04:00
}
// Compiles to `body.settings-menu-expanded .viewport`
body.global-nav-expanded & {
transform: translate3d(260px, 0px, 0px);
}
// Compiles to `body.settings-menu-expanded .viewport`
body.settings-menu-expanded & {
@media (max-width: 350px) {
transform: translate3d(-100%, 0px, 0px);
}
@media (min-width: 351px) {
transform: translate3d(-350px, 0px, 0px);
&:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
z-index: 1000;
width: 1px;
background: #EDECE4;
}
}
}
}//.viewport
//
// Content Panel
// --------------------------------------------------
// 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 {
position: absolute;
top: 60px;
right: 0;
bottom: 0;
left: 0;
background: #fff;
overflow-y: auto;
overflow-x: hidden;
@media (max-width: 900px) {
top: 44px;
}
}
//
// The header bar
// --------------------------------------------------
// Visible below 900px, as the nav isn't covering this.
.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) {
position: absolute;
top: 50%;
2014-10-17 17:19:16 +04:00
left: 12px;
transform: translateY(-50%);
}
display: block;
position: absolute;
top: 0;
left: 0;
width: 44px;
height: 44px;
color: #fff;
}