From 0d7e8e08f39cd5a1d91f3c19c1aae3dd522f088b Mon Sep 17 00:00:00 2001
From: Henrik Hautakoski <henrik.hautakoski@gmail.com>
Date: Fri, 30 Mar 2018 00:39:59 +0200
Subject: [PATCH] app/assets/less/layout/navigation.less: adding dropdown
 effect for user menu.

---
 app/assets/less/layout/navigation.less | 34 ++++++++++++++++++++------
 app/assets/less/variables.less         | 10 ++++++++
 2 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/app/assets/less/layout/navigation.less b/app/assets/less/layout/navigation.less
index cde4028..c5f5b3c 100644
--- a/app/assets/less/layout/navigation.less
+++ b/app/assets/less/layout/navigation.less
@@ -110,17 +110,37 @@
     &-user-menu {
         &:extend(.nav);
         .pull-right();
-        margin-top: 18px;
+        margin-top: 10px;
 
-        > li {
-            display: inline-block;
+        &-login {
+            padding-top: .3em;
+            padding-bottom: .3em;
+        }
 
-            .icon {
-                margin-right: .2em;
+        &-dropdown {
+            &:extend(.dropdown);
+
+            &-button {
+                display: inline-block;
+                padding: .3em .8em;
+                background: @usermenu-button-bg;
+                border-radius: @border-radius-base;
+
+                &:hover {
+                    background: @usermenu-button-hover-bg;
+                }
             }
 
-            &:not(:first-child) {
-                padding-left: 1em;
+            &-list {
+                &:extend(.dropdown-menu all);
+                &:extend(.dropdown-menu-right all);
+
+                text-shadow: none;
+                .box-shadow(@dropdown-shadow);
+            }
+
+            &.open &-list {
+                display: inline-block;
             }
         }
     }
diff --git a/app/assets/less/variables.less b/app/assets/less/variables.less
index eb58e5e..ad716d8 100644
--- a/app/assets/less/variables.less
+++ b/app/assets/less/variables.less
@@ -74,6 +74,10 @@
 @navbar-brand-color:            		@brand-color;
 @navbar-brand-hover-color:      		darken(@brand-color, 15%);
 
+// User menu
+@usermenu-button-bg:                    @navbar-background;
+@usermenu-button-hover-bg:              darken(@usermenu-button-bg, 8%);
+
 // Footer
 @footer-height:             80px;
 @footer-border-color:       @border-color;
@@ -116,6 +120,12 @@
 @block-shadow-2:                0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12);
 @block-shadow-3:                0 3px 3px 0 rgba(0, 0, 0, 0.16);
 
+// ----------------------------------
+//   Dropdown
+// ----------------------------------
+
+@dropdown-shadow:           0 2px 4px rgba(0,0,0,0.1);
+
 // ----------------------------------
 //   Blankslate
 // ----------------------------------