From 51f47fc351c98700abc8982fdfc846868ff2a328 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Wed, 7 Jun 2023 16:16:33 +0200
Subject: [PATCH] Add border bottom when hovering or selected

+ add some padding to separate those borders then
---
 .../css/admin_v3/components/navigation.scss   | 28 +++----------------
 1 file changed, 4 insertions(+), 24 deletions(-)

diff --git a/app/webpacker/css/admin_v3/components/navigation.scss b/app/webpacker/css/admin_v3/components/navigation.scss
index 7846c41fcb..e56a12b8c1 100644
--- a/app/webpacker/css/admin_v3/components/navigation.scss
+++ b/app/webpacker/css/admin_v3/components/navigation.scss
@@ -70,6 +70,8 @@ nav.menu {
   li {
     min-width: 90px;
     flex-grow: 1;
+    padding-left: 2px;
+    padding-right: 2px;
 
     a {
       display: block;
@@ -90,18 +92,7 @@ nav.menu {
 
       &:hover {
         color: $color-5 !important;
-        &:after {
-          content: "";
-          position: absolute;
-          border-left: 10px solid transparent;
-          border-right: 10px solid transparent;
-          border-top: 5px solid $color-2;
-          bottom: 0px;
-          margin-bottom: -5px;
-          left: 50%;
-          margin-left: -10px;
-          z-index: 1;
-        }
+        border-bottom: 2px solid $color-5;
       }
 
       span.text {
@@ -156,18 +147,7 @@ nav.menu {
     &.selected a,
     a:hover {
       color: $color-5;
-      &:after {
-        content: "";
-        position: absolute;
-        border-left: 10px solid transparent;
-        border-right: 10px solid transparent;
-        border-top: 5px solid $color-2;
-        bottom: 0px;
-        margin-bottom: -5px;
-        left: 50%;
-        margin-left: -10px;
-        z-index: 0;
-      }
+      border-bottom: 2px solid $color-5;
     }
   }
 }