From a2dcbb81e73127a99b69ff5238b880d4347623b3 Mon Sep 17 00:00:00 2001
From: Henriette Dinger <h.dinger@openproject.com>
Date: Tue, 4 Dec 2018 09:22:25 +0100
Subject: [PATCH] Add border style on hover so that the elements have the
 correct size

---
 app/assets/stylesheets/layout/_top_menu.sass | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/layout/_top_menu.sass b/app/assets/stylesheets/layout/_top_menu.sass
index fd630817fa..774ebb0bb7 100644
--- a/app/assets/stylesheets/layout/_top_menu.sass
+++ b/app/assets/stylesheets/layout/_top_menu.sass
@@ -29,6 +29,13 @@
 $hamburger-right: -3px
 $hamburger-width: 50px
 
+%top-menu-hover-styles
+  @include varprop(background, header-item-bg-hover-color)
+  @include varprop(color, header-item-font-hover-color)
+  @include varprop(border-bottom-width, header-border-bottom-width)
+  @include varprop(border-bottom-color, header-border-bottom-color)
+  border-bottom-style: solid
+
 #logo
   width: 230px
   @include varprop(height, header-height)
@@ -82,8 +89,7 @@ $hamburger-width: 50px
       padding: 0 15px
 
     > a:hover
-      @include varprop(background, header-item-bg-hover-color)
-      @include varprop(color, header-item-font-hover-color)
+      @extend %top-menu-hover-styles
 
     > ul
       min-width: 270px
@@ -192,8 +198,7 @@ $hamburger-width: 50px
   .top-menu-search.-collapsed &
     display: block
     &:hover
-      @include varprop(background, header-item-bg-hover-color)
-      @include varprop(color, header-item-font-hover-color)
+      @extend %top-menu-hover-styles
 
 input.top-menu-search--input
   margin: 0
@@ -314,8 +319,7 @@ input.top-menu-search--input
     display: none
     
   &:hover
-    @include varprop(background, header-item-bg-hover-color)
-    @include varprop(color, header-item-font-hover-color)
+    @extend %top-menu-hover-styles
 
 @media only screen and (max-width: 18.75rem)
   #logo