1
0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-17 21:41:49 +03:00
Ghost/core/client/assets/sass/components/navigation.scss
Paul Adam Davis 00abfa64fe [WIP] Wire up new mobile nav
References 

With GUI2, there's now a number of places to open the mobile navigation menu. This handles those clicks.
2014-09-10 18:33:27 +01:00

328 lines
6.8 KiB
SCSS

//
// Global Navigation
// --------------------------------------------------
// The main wrapper, sets position and bg colour.
.global-nav {
height: 60px;
position: fixed;
top: 0;
right: 0;
bottom: auto;
left: 0;
z-index: 800;
background: $darkgrey;
transition: transform $side-outlet-transition-duration cubic-bezier(0.1, 0.7, 0.1, 1);
i:before {
display: inline-block;
width: 16px;
}
body.right-outlet-expanded & {
transform: translate3d(-350px, 0px, 0px);
}
.thing,
.thing2 {
display: none; // hide until mobile
}
}
// Wrapper for each item
.nav-item {
position: relative;
display: block;
float: left;
height: 60px;
padding-right: 10px;
font-size: 1.1rem;
letter-spacing: 1px;
font-weight: 200;
line-height: 1.1em;
}
// Pill shaped background
.nav-label {
height: 33px;
margin-top: 14px;
padding: 10px 12px;
color: rgba(255,255,255,0.7);
text-transform: uppercase;
border-radius: 4px;
white-space: nowrap;
transition: color 0.5s, background 0.5s;
}
.nav-item.active .nav-label,
.nav-item:focus .nav-label,
.nav-item:hover .nav-label,
.nav-item:active .nav-label {
color: #fff;
background: darken($darkgrey, 9%);
transition: color 0.1s, background 0.1s;
}
// Ghost branding
.ghost-logo {
width: 60px;
padding-right: 0;
text-align: center;
color: lighten($grey, 20%);
font-size: 1.2rem;
line-height: 1em;
transition: color 0.5s;
span {
display: none;
}
}
.ghost-logo:hover,
.ghost-logo:focus {
color: $lightgrey;
transition: color 0.1s;
.nav-label {
background: transparent;
}
}
// Right hand dropdown
.user-menu {
position: absolute;
top: 0;
right: 0;
padding: 0;
margin: 0;
cursor: pointer;
.nav-label {
margin: 0;
padding: 0 12px;
background: none !important;
height: 60px;
}
// Profile picture
.image {
float: left;
margin: 15px 8px 0 0;
img {
display: block;
width: 30px;
height: 30px;
border-radius: 100%;
}
}
// Descriptive label for mobile menu
.name {
float: right;
height: 33px;
margin-top: 14px;
padding: 10px 12px;
border-radius: 4px;
max-width: 300px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
transition: background 0.5s;
small {
display: none; // hide until mobile
font-size: 11px;
text-transform: none;
letter-spacing: 0;
color: rgba(255,255,255,0.4);
margin-top: 0;
line-height: 11px;
}
}
&:hover .name {
color: rgba(255,255,255,0.9);
background: darken($darkgrey, 7%);
transition: background 0.1s;
}
i:before {
width: auto;
margin-left: 5px;
}
.dropdown {
position: absolute;
top: 100%;
right: 100%;
.dropdown-menu {
position: absolute;
top: 0;
right: 0;
}
}
}//.user-menu
body.right-outlet-expanded & {
.global-nav {
z-index: 700;
}
.nav-cover {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 700;
transition: transform $side-outlet-transition-duration cubic-bezier(0.1, 0.7, 0.1, 1);
transform: translate3d(-350px, 0px, 0px);
}
}
//
// Mobile
// --------------------------------------------------
@media (max-width: 900px) {
// Fixed width, position left
.global-nav {
z-index: 20; // below the .viewport when collapsed
width: 260px;
height: auto;
top: 0;
bottom: 0;
left: 0;
background: darken($darkgrey, 7%);
overflow: auto;
-webkit-overflow-scrolling: touch;
transform: translate3d(-60px, 0px, 0px); // Not off the screen, to give a parallax effect
transition: transform $side-outlet-transition-duration cubic-bezier(0.1, 0.7, 0.1, 1);
.thing, .thing2 {
display: block;
}
body.global-nav-expanded & {
transform: translate3d(0, 0px, 0px);
}
}
.nav-item {
position: relative;
float: none;
height: auto;
margin: 0;
padding: 0;
border-bottom: $darkgrey 1px solid;
}
// Convert to full-width mobile-friendly
.nav-label {
display: block;
height: 44px;
line-height: 44px;
margin: 0;
padding: 0 15px;
border-radius: 0;
}
.nav-item.active .nav-label {
color: #fff !important;
background: darken($darkgrey, 4%);
i { color: #fff; }
}
.nav-item:hover .nav-label {
color: rgba(255,255,255,0.9);
background: $darkgrey;
}
.ghost-logo {
display: block;
width: 100%;
font-size: 1.1rem;
line-height: 44px;
text-align: left;
span { display: inline; }
}
// Drop it to the bottom of the menu
.user-menu {
position: absolute;
top: auto;
right: 0;
bottom: 0;
left: 0;
height: auto;
padding: 0;
border-bottom: none;
border-top: $darkgrey 1px solid;
transition: color 0.5s, background 0.5s;
.nav-label {
padding: 15px;
height: auto;
}
.image {
margin: 2px 10px 0 0;
}
.name {
float: left;
margin: 0;
max-width: 300px;
padding: 0 0 5px 0;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 19px;
overflow: hidden;
small {
display: block;
}
}
i {
display: none;
}
&:hover {
color: rgba(255,255,255,0.9);
background: $darkgrey;
transition: color 0.1s, background 0.1s;
.name {
background: transparent;
transition: none;
}
}
.dropdown .dropdown-menu {
top: auto;
right: auto;
bottom: calc(100% + 80px);
left: 10px;
}
}//.user-menu
body.global-nav-expanded & {
.nav-cover {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 600;
transition: transform $side-outlet-transition-duration cubic-bezier(0.1, 0.7, 0.1, 1);
transform: translate3d(260px, 0px, 0px); // Not off the screen, to give a parallax effect
}//.nav-cover
}//body.global-nav-expanded
}