Ghost/ghost/admin/assets/sass/components/navigation.scss

203 lines
4.1 KiB
SCSS
Raw Normal View History

//
// Global Navigation
// --------------------------------------------------
// The main wrapper, sets position and bg colour.
2014-07-29 01:21:02 +04:00
.global-nav {
height: 60px;
@include position(fixed, 0px 0px auto 0px);
z-index: 9999;
background: $darkgrey;
.thing,
.thing2 {
display: none; // hide until mobile
}
}
2014-07-29 01:21:02 +04:00
// Wrapper for each item
.nav-item {
position: relative;
display: block;
float: left;
2014-07-29 02:34:34 +04:00
height: 60px;
padding-right: 10px;
font-size: 1.1rem;
letter-spacing: 1px;
font-weight: 200;
line-height: 1.1em;
}
2014-07-29 01:21:02 +04:00
// Pill shaped background
.nav-label {
2014-07-29 02:34:34 +04:00
height: 33px;
margin-top: 14px;
padding: 10px 12px;
color: rgba(255,255,255,0.7);
text-transform: uppercase;
border-radius: 4px;
@include transition(color 0.5s, background 0.5s);
}
2014-07-29 02:34:34 +04:00
.nav-item.active .nav-label,
.nav-item:hover .nav-label {
2014-07-29 02:34:34 +04:00
color: rgba(255,255,255,0.9);
background: darken($darkgrey, 7%);
@include transition(color 0.1s, background 0.1s);
}
2014-07-29 01:21:02 +04:00
// Ghost branding
.ghost-logo {
2014-07-29 01:21:02 +04:00
@include icon($i-ghost, 14px) { line-height: 0; }
display: inline-block;
float: left;
height: 60px;
width: 60px;
2014-07-29 01:21:02 +04:00
padding: 23px;
color: lighten($grey, 20%);
2014-07-29 01:21:02 +04:00
font-size: 1.5rem;
2014-07-29 02:34:34 +04:00
line-height: 1em;
2014-07-29 01:21:02 +04:00
@include transition(color 0.5s);
}
.ghost-logo:hover,
.ghost-logo:focus {
color: $lightgrey;
2014-07-29 01:21:02 +04:00
@include transition(color 0.1s);
}
2014-07-29 01:21:02 +04:00
// Right hand dropdown
.user-menu {
position: absolute;
top: 0;
right: 0;
padding: 0;
margin: 0;
2014-07-29 02:34:34 +04:00
cursor: pointer;
.nav-label {
margin: 0;
padding: 0 12px;
background: none !important;
}
2014-07-29 01:21:02 +04:00
// Profile picture
.image {
2014-07-29 01:21:02 +04:00
float: left;
margin: 15px 8px 0 0;
img {
display: block;
width: 30px;
height: 30px;
border-radius: 100%;
}
}
2014-07-29 01:21:02 +04:00
// Descriptive label for mobile menu
.name {
2014-07-29 02:34:34 +04:00
float: right;
height: 33px;
margin-top: 14px;
padding: 10px 12px;
border-radius: 4px;
@include transition(background 0.5s);
2014-07-29 01:21:02 +04:00
small {
2014-07-29 02:34:34 +04:00
display: none; // hide until mobile
2014-07-29 03:34:47 +04:00
font-size: 11px;
text-transform: none;
letter-spacing: 0;
2014-07-29 01:21:02 +04:00
color: #cacaca;
margin-top: 0;
2014-07-29 03:34:47 +04:00
line-height: 12px;
2014-07-29 01:21:02 +04:00
}
}
2014-07-29 02:34:34 +04:00
&:hover .name {
color: rgba(255,255,255,0.9);
background: darken($darkgrey, 7%);
@include transition(background 0.1s);
}
}//.user-menu
2014-07-29 03:34:47 +04:00
//
// Mobile
// --------------------------------------------------
2014-07-29 02:34:34 +04:00
2014-07-29 03:34:47 +04:00
@media (max-width: 1025px) {
2014-07-29 02:34:34 +04:00
2014-07-29 03:34:47 +04:00
// Fixed width, position left
.global-nav {
width: 260px;
height: auto;
top: 0;
bottom: 0;
left: 0;
overflow: auto;
.thing, .thing2 {
display: block;
}
2014-07-29 03:34:47 +04:00
}
.nav-item {
position: relative;
float: none;
height: auto;
margin: 0;
padding: 0;
}
// Convert to full-width mobile-friendly
.nav-label {
2014-07-29 02:34:34 +04:00
display: block;
2014-07-29 03:34:47 +04:00
height: 44px;
line-height: 44px;
margin: 0;
padding: 0 15px;
border-radius: 0;
}
// Drop it to the bottom of the menu
.user-menu {
height: auto;
padding: 15px;
@include position(absolute, auto 0px 0px 0px);
@include transition(color 0.5s, background 0.5s);
2014-07-29 03:34:47 +04:00
.nav-label {
padding: 0;
height: auto;
}
.image {
margin: 2px 10px 0 0;
}
.name {
float: left;
margin: 0;
padding: 0 0 5px 0;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 19px;
overflow: hidden;
small {
display: block;
}
}
&:hover {
color: rgba(255,255,255,0.9);
background: darken($darkgrey, 7%);
@include transition(color 0.1s, background 0.1s);
2014-07-29 03:34:47 +04:00
}
&:hover .name {
background: transparent;
@include transition(none);
}
2014-07-29 02:34:34 +04:00
}
2014-07-29 03:34:47 +04:00
}