From 2efe91f49f899fbfb8fd148e8894251c0318d0b0 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Tue, 10 Aug 2021 08:53:22 +0200
Subject: [PATCH] UI: fixes sidebar settings border and active styles (#13990)

- active setting should now correctly show an arrow which was previously floating in the middle of nowhere
- uses a correct color for border separation, previously the border was present but invisible as similar to the background
- slighty tweak padding
- makes arrow computation based on a variable
---
 .../stylesheets/common/components/navs.scss       | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/common/components/navs.scss b/app/assets/stylesheets/common/components/navs.scss
index c1d7f391736..6bef0c18f10 100644
--- a/app/assets/stylesheets/common/components/navs.scss
+++ b/app/assets/stylesheets/common/components/navs.scss
@@ -69,7 +69,7 @@
   background: var(--primary-low);
 
   li {
-    border-bottom: 1px solid var(--primary-low);
+    border-bottom: 1px solid var(--primary-low-mid-or-secondary-high);
 
     &:last-of-type {
       border-bottom: 0;
@@ -82,7 +82,7 @@
 
   a {
     margin: 0;
-    padding: 13px;
+    padding: 0.75em;
     font-size: $font-up-1;
     line-height: $line-height-small;
     cursor: pointer;
@@ -92,13 +92,16 @@
     &.active {
       color: var(--secondary);
       background-color: var(--quaternary);
+      position: relative;
+
+      --arrow-thickness: 8px;
 
       &::after {
-        left: 90%;
-        top: 33%;
-        content: " ";
         position: absolute;
-        border: 8px solid transparent;
+        right: 0;
+        top: calc(50% - var(--arrow-thickness));
+        content: " ";
+        border: var(--arrow-thickness) solid transparent;
         border-left-color: var(--secondary);
       }
     }