Finished first pass on new navbar

core/client/assets/sass/components/navigation.scss

@@ -8,7 +8,6 @@
     @include position(fixed, 0px 0px auto 0px);
     z-index: 9999;
     background: $darkgrey;
-    box-shadow: 0 0 2px rgba(6,8,8,0.15)
 }
 
 // Wrapper for each item
@@ -16,26 +15,29 @@
     position: relative;
     display: block;
     float: left;
-    padding-left: 10px;
-    color: rgba(255,255,255,0.8);
-    font-size: 1.5rem;
-    line-height: 1;
+    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: 34px;
-    margin-top: 13px;
-    padding: 8px 10px;
+    height: 33px;
+    margin-top: 14px;
+    padding: 10px 12px;
+    color: rgba(255,255,255,0.7);
+    text-transform: uppercase;
     border-radius: 4px;
-    @include transition(background 0.5s);
-}
-.nav-item.active .nav-label {
-    background: darken($darkgrey, 5%);
+    @include transition(all 0.5s);
 }
+.nav-item.active .nav-label,
 .nav-item:hover .nav-label {
-    background: darken($darkgrey, 10%);
-    @include transition(background 0.1s);
+    color: rgba(255,255,255,0.9);
+    background: darken($darkgrey, 7%);
+    @include transition(all 0.1s);
 }
 
 // Ghost branding
@@ -48,6 +50,7 @@
     padding: 23px;
     color: lighten($grey, 20%);
     font-size: 1.5rem;
+    line-height: 1em;
     @include transition(color 0.5s);
 }
 .ghost-logo:hover,
@@ -63,11 +66,18 @@
     right: 0;
     padding: 0;
     margin: 0;
+    cursor: pointer;
+
+    .nav-label {
+        margin: 0;
+        padding: 0 12px;
+        background: none !important;
+    }
 
     // Profile picture
     .image {
         float: left;
-        margin: 0 7px 0 0;
+        margin: 14px 7px 0 0;
 
         img {
             display: block;
@@ -79,19 +89,41 @@
 
     // Descriptive label for mobile menu
     .name {
-        display: none; // Hide until mobile
-        float: left;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-        line-height: 19px;
-        padding-bottom: 5px;
+        float: right;
+        height: 33px;
+        margin-top: 14px;
+        padding: 10px 12px;
+        border-radius: 4px;
+        @include transition(background 0.5s);
 
         small {
+            display: none; // hide until mobile
             font-size: 12px;
             color: #cacaca;
             margin-top: 0;
             line-height: 19px;
         }
     }
-}
+    &:hover .name {
+        color: rgba(255,255,255,0.9);
+        background: darken($darkgrey, 7%);
+        @include transition(background 0.1s);
+    }
+
+}//.user-menu
+
+/* mobile styles 
+
+.name {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    line-height: 19px;
+    padding-bottom: 5px;
+
+    small {
+        display: block;
+    }
+}
+
+*/

core/client/docs/_includes/nav/global.html

@@ -24,12 +24,9 @@
         <div class="nav-label">
             <div class="image"><img src="https://pbs.twimg.com/profile_images/2424666637/rm02mq43w94amr8jbhz3.jpeg" alt="John O'Nolan"></div>
             <div class="name">
-                John O'Nolan
+                John O'Nolan<span class="menu-arrow"></span>
                 <small>Profile &amp; Settings</small>
             </div>
-            <div class="me">
-                Me<span class="count hidden"></span><span class="menu-arrow"></span>
-            </div>
         </div>
     </div><!--menu-holder-->
 

core/client/docs/dist/css/ghost-ui.css

@@ -629,35 +629,37 @@ a, a:active {
   bottom: auto;
   left: 0px;
   z-index: 9999;
-  background: #242628;
-  box-shadow: 0 0 2px rgba(6, 8, 8, 0.15); }
+  background: #242628; }
 
 .nav-item {
   position: relative;
   display: block;
   float: left;
-  padding-left: 10px;
-  color: rgba(255, 255, 255, 0.8);
-  font-size: 1.5rem;
-  line-height: 1; }
+  height: 60px;
+  padding-right: 10px;
+  font-size: 1.1rem;
+  letter-spacing: 1px;
+  font-weight: 200;
+  line-height: 1.1em; }
 
 .nav-label {
-  height: 34px;
-  margin-top: 13px;
-  padding: 8px 10px;
+  height: 33px;
+  margin-top: 14px;
+  padding: 10px 12px;
+  color: rgba(255, 255, 255, 0.7);
+  text-transform: uppercase;
   border-radius: 4px;
-  -webkit-transition: background 0.5s;
-  -moz-transition: background 0.5s;
-  transition: background 0.5s; }
-
-.nav-item.active .nav-label {
-  background: #18191b; }
+  -webkit-transition: all 0.5s;
+  -moz-transition: all 0.5s;
+  transition: all 0.5s; }
 
+.nav-item.active .nav-label,
 .nav-item:hover .nav-label {
-  background: #0c0d0d;
-  -webkit-transition: background 0.1s;
-  -moz-transition: background 0.1s;
-  transition: background 0.1s; }
+  color: rgba(255, 255, 255, 0.9);
+  background: #131415;
+  -webkit-transition: all 0.1s;
+  -moz-transition: all 0.1s;
+  transition: all 0.1s; }
 
 .ghost-logo {
   display: inline-block;
@@ -667,6 +669,7 @@ a, a:active {
   padding: 23px;
   color: #656d71;
   font-size: 1.5rem;
+  line-height: 1em;
   -webkit-transition: color 0.5s;
   -moz-transition: color 0.5s;
   transition: color 0.5s; }
@@ -697,25 +700,54 @@ a, a:active {
   top: 0;
   right: 0;
   padding: 0;
-  margin: 0; }
+  margin: 0;
+  cursor: pointer; }
+  .user-menu .nav-label {
+    margin: 0;
+    padding: 0 12px;
+    background: none !important; }
   .user-menu .image {
     float: left;
-    margin: 0 7px 0 0; }
+    margin: 14px 7px 0 0; }
     .user-menu .image img {
       display: block;
       width: 32px;
       height: 32px;
       border-radius: 100%; }
   .user-menu .name {
-    display: none;
-    float: left;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    line-height: 19px;
-    padding-bottom: 5px; }
+    float: right;
+    height: 33px;
+    margin-top: 14px;
+    padding: 10px 12px;
+    border-radius: 4px;
+    -webkit-transition: background 0.5s;
+    -moz-transition: background 0.5s;
+    transition: background 0.5s; }
     .user-menu .name small {
+      display: none;
       font-size: 12px;
       color: #cacaca;
       margin-top: 0;
       line-height: 19px; }
+  .user-menu:hover .name {
+    color: rgba(255, 255, 255, 0.9);
+    background: #131415;
+    -webkit-transition: background 0.1s;
+    -moz-transition: background 0.1s;
+    transition: background 0.1s; }
+
+/* mobile styles 
+
+.name {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    line-height: 19px;
+    padding-bottom: 5px;
+
+    small {
+        display: block;
+    }
+}
+
+*/