From 38f3101518b19127797a0c8bf03a5e933f4d7215 Mon Sep 17 00:00:00 2001
From: John O'Nolan <john@ghost.org>
Date: Tue, 29 Jul 2014 01:34:34 +0300
Subject: [PATCH] Finished first pass on new navbar

---
 .../assets/sass/components/navigation.scss    | 78 +++++++++++-----
 core/client/docs/_includes/nav/global.html    |  5 +-
 core/client/docs/dist/css/ghost-ui.css        | 88 +++++++++++++------
 core/client/docs/dist/css/ghost-ui.min.css    |  2 +-
 4 files changed, 117 insertions(+), 56 deletions(-)

diff --git a/core/client/assets/sass/components/navigation.scss b/core/client/assets/sass/components/navigation.scss
index 67ed0604b7..14e09d229f 100644
--- a/core/client/assets/sass/components/navigation.scss
+++ b/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;
         }
     }
-}
\ No newline at end of file
+    &: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;
+    }
+}
+
+*/
\ No newline at end of file
diff --git a/core/client/docs/_includes/nav/global.html b/core/client/docs/_includes/nav/global.html
index e56a2bfc8a..e936c2f4a9 100644
--- a/core/client/docs/_includes/nav/global.html
+++ b/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-->
 
diff --git a/core/client/docs/dist/css/ghost-ui.css b/core/client/docs/dist/css/ghost-ui.css
index 6bccce82d4..89f492ad34 100644
--- a/core/client/docs/dist/css/ghost-ui.css
+++ b/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;
+    }
+}
+
+*/
diff --git a/core/client/docs/dist/css/ghost-ui.min.css b/core/client/docs/dist/css/ghost-ui.min.css
index 3cf88db7af..fe26c9ee86 100644
--- a/core/client/docs/dist/css/ghost-ui.min.css
+++ b/core/client/docs/dist/css/ghost-ui.min.css
@@ -1 +1 @@
-@font-face{font-family:'GhostIcons';src:url("../fonts/icons.eot");src:url("../fonts/icons.eot?#iefix") format("embedded-opentype"),url("../fonts/icons.woff") format("woff"),url("../fonts/icons.ttf") format("truetype"),url("../fonts/icons.svg#icons") format("svg");font-weight:normal;font-style:normal}[class*=icon-]:before{font-family:"GhostIcons";font-weight:normal;font-style:normal;vertical-align:-7%;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased}[class*=icon-]:hover{text-decoration:none}.icon-ghost:before{content:"\e000"}.icon-ghost-logo:before{content:"\e600"}.icon-chevron-down:before{content:"\e001"}.icon-users:before{content:"\e002"}.icon-tag:before{content:"\e003"}.icon-tablet:before{content:"\e004"}.icon-menu:before{content:"\e005"}.icon-settings:before{content:"\e006"}.icon-search:before{content:"\e007"}.icon-search-left:before{content:"\e008"}.icon-rss:before{content:"\e009"}.icon-preview:before{content:"\e00a"}.icon-app:before{content:"\e00b"}.icon-pin:before{content:"\e00c"}.icon-pc:before{content:"\e00d"}.icon-pacman:before{content:"\e00e"}.icon-edit:before{content:"\e00f"}.icon-mobile:before{content:"\e010"}.icon-image:before{content:"\e011"}.icon-mail:before{content:"\e012"}.icon-list:before{content:"\e013"}.icon-info:before{content:"\e014"}.icon-home:before{content:"\e015"}.icon-grid:before{content:"\e016"}.icon-fullscreen:before{content:"\e017"}.icon-question:before{content:"\e018"}.icon-external:before{content:"\e019"}.icon-error:before{content:"\e01a"}.icon-comments:before{content:"\e01b"}.icon-close:before{content:"\e01c"}.icon-chevron:before{content:"\e01d"}.icon-chevron-left:before{content:"\e11d"}.icon-calendar:before{content:"\e01e"}.icon-archive:before{content:"\e01f"}.icon-services:before{content:"\e020"}.icon-appearance:before{content:"\e021"}.icon-video:before{content:"\e022"}.icon-trash:before{content:"\e023"}.icon-reply:before{content:"\e024"}.icon-stats:before{content:"\e025"}.icon-featured:before{content:"\e026"}.icon-unfeatured:before{content:"\e027"}.icon-clock:before{content:"\e028"}.icon-settings2:before{content:"\e029"}.icon-camera:before{content:"\e036"}.icon-power:before{content:"\e02b"}.icon-lock:before{content:"\e02c"}.icon-content:before{content:"\e02d"}.icon-user:before{content:"\e02e"}.icon-support:before{content:"\e02f"}.icon-success:before{content:"\e030"}.icon-notification:before{content:"\e031"}.icon-add:before{content:"\e032"}.icon-check:before{content:"\e033"}.icon-x:before{content:"\e034"}.icon-link:before{content:"\e035"}.icon-camera:before{content:"\e036"}.icon-repost:before{content:"\e037"}.icon-weather-rain:before{content:"\e038"}.icon-weather-sun:before{content:"\e039"}.icon-weather-partial:before{content:"\e03a"}.icon-weather-snow:before{content:"\e03b"}.icon-weather-cloudy:before{content:"\e03c"}.icon-lightning:before{content:"\e03d"}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font:62.5%/1.65 "Open Sans", sans-serif;-webkit-tap-highlight-color:transparent}body{width:100%}a,a:active{text-decoration:none}.show{display:block !important}.hidden{display:none !important;visibility:hidden !important}.invisible{visibility:hidden}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sr-only:active,.sr-only:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}.global-nav{height:60px;position:fixed;top:0px;right:0px;bottom:auto;left:0px;z-index:9999;background:#242628;box-shadow:0 0 2px rgba(6,8,8,0.15)}.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}.nav-label{height:34px;margin-top:13px;padding:8px 10px;border-radius:4px;-webkit-transition:background 0.5s;-moz-transition:background 0.5s;transition:background 0.5s}.nav-item.active .nav-label{background:#18191b}.nav-item:hover .nav-label{background:#0c0d0d;-webkit-transition:background 0.1s;-moz-transition:background 0.1s;transition:background 0.1s}.ghost-logo{display:inline-block;float:left;height:60px;width:60px;padding:23px;color:#656d71;font-size:1.5rem;-webkit-transition:color 0.5s;-moz-transition:color 0.5s;transition:color 0.5s}.ghost-logo:before{font-family:"GhostIcons";font-weight:normal;font-style:normal;vertical-align:-7%;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased;content:"\e000";font-size:14px;line-height:0}.ghost-logo:hover{text-decoration:none}.ghost-logo:hover,.ghost-logo:focus{color:#e2edf2;-webkit-transition:color 0.1s;-moz-transition:color 0.1s;transition:color 0.1s}.user-menu{position:absolute;top:0;right:0;padding:0;margin:0}.user-menu .image{float:left;margin:0 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}.user-menu .name small{font-size:12px;color:#cacaca;margin-top:0;line-height:19px}
+@font-face{font-family:'GhostIcons';src:url("../fonts/icons.eot");src:url("../fonts/icons.eot?#iefix") format("embedded-opentype"),url("../fonts/icons.woff") format("woff"),url("../fonts/icons.ttf") format("truetype"),url("../fonts/icons.svg#icons") format("svg");font-weight:normal;font-style:normal}[class*=icon-]:before{font-family:"GhostIcons";font-weight:normal;font-style:normal;vertical-align:-7%;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased}[class*=icon-]:hover{text-decoration:none}.icon-ghost:before{content:"\e000"}.icon-ghost-logo:before{content:"\e600"}.icon-chevron-down:before{content:"\e001"}.icon-users:before{content:"\e002"}.icon-tag:before{content:"\e003"}.icon-tablet:before{content:"\e004"}.icon-menu:before{content:"\e005"}.icon-settings:before{content:"\e006"}.icon-search:before{content:"\e007"}.icon-search-left:before{content:"\e008"}.icon-rss:before{content:"\e009"}.icon-preview:before{content:"\e00a"}.icon-app:before{content:"\e00b"}.icon-pin:before{content:"\e00c"}.icon-pc:before{content:"\e00d"}.icon-pacman:before{content:"\e00e"}.icon-edit:before{content:"\e00f"}.icon-mobile:before{content:"\e010"}.icon-image:before{content:"\e011"}.icon-mail:before{content:"\e012"}.icon-list:before{content:"\e013"}.icon-info:before{content:"\e014"}.icon-home:before{content:"\e015"}.icon-grid:before{content:"\e016"}.icon-fullscreen:before{content:"\e017"}.icon-question:before{content:"\e018"}.icon-external:before{content:"\e019"}.icon-error:before{content:"\e01a"}.icon-comments:before{content:"\e01b"}.icon-close:before{content:"\e01c"}.icon-chevron:before{content:"\e01d"}.icon-chevron-left:before{content:"\e11d"}.icon-calendar:before{content:"\e01e"}.icon-archive:before{content:"\e01f"}.icon-services:before{content:"\e020"}.icon-appearance:before{content:"\e021"}.icon-video:before{content:"\e022"}.icon-trash:before{content:"\e023"}.icon-reply:before{content:"\e024"}.icon-stats:before{content:"\e025"}.icon-featured:before{content:"\e026"}.icon-unfeatured:before{content:"\e027"}.icon-clock:before{content:"\e028"}.icon-settings2:before{content:"\e029"}.icon-camera:before{content:"\e036"}.icon-power:before{content:"\e02b"}.icon-lock:before{content:"\e02c"}.icon-content:before{content:"\e02d"}.icon-user:before{content:"\e02e"}.icon-support:before{content:"\e02f"}.icon-success:before{content:"\e030"}.icon-notification:before{content:"\e031"}.icon-add:before{content:"\e032"}.icon-check:before{content:"\e033"}.icon-x:before{content:"\e034"}.icon-link:before{content:"\e035"}.icon-camera:before{content:"\e036"}.icon-repost:before{content:"\e037"}.icon-weather-rain:before{content:"\e038"}.icon-weather-sun:before{content:"\e039"}.icon-weather-partial:before{content:"\e03a"}.icon-weather-snow:before{content:"\e03b"}.icon-weather-cloudy:before{content:"\e03c"}.icon-lightning:before{content:"\e03d"}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font:62.5%/1.65 "Open Sans", sans-serif;-webkit-tap-highlight-color:transparent}body{width:100%}a,a:active{text-decoration:none}.show{display:block !important}.hidden{display:none !important;visibility:hidden !important}.invisible{visibility:hidden}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sr-only:active,.sr-only:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}.global-nav{height:60px;position:fixed;top:0px;right:0px;bottom:auto;left:0px;z-index:9999;background:#242628}.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}.nav-label{height:33px;margin-top:14px;padding:10px 12px;color:rgba(255,255,255,0.7);text-transform:uppercase;border-radius:4px;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s}.nav-item.active .nav-label,.nav-item:hover .nav-label{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;float:left;height:60px;width:60px;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}.ghost-logo:before{font-family:"GhostIcons";font-weight:normal;font-style:normal;vertical-align:-7%;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased;content:"\e000";font-size:14px;line-height:0}.ghost-logo:hover{text-decoration:none}.ghost-logo:hover,.ghost-logo:focus{color:#e2edf2;-webkit-transition:color 0.1s;-moz-transition:color 0.1s;transition:color 0.1s}.user-menu{position:absolute;top:0;right:0;padding:0;margin:0;cursor:pointer}.user-menu .nav-label{margin:0;padding:0 12px;background:none !important}.user-menu .image{float:left;margin:14px 7px 0 0}.user-menu .image img{display:block;width:32px;height:32px;border-radius:100%}.user-menu .name{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}