From 0839c5ea75ae0c4bb3f83f39aea2016371753f49 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Tue, 16 Feb 2021 01:13:15 +0100
Subject: [PATCH] Adjust new notifications icon position

It was hard to know where the numbers were coming from; they depended on
the padding of the link and the size of the notification icon size. So
we're using variables to make it more explicit.

However, the code is now too complex, so we'll probably have to simplify
it in the future.
---
 app/assets/stylesheets/notification_item.scss | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/notification_item.scss b/app/assets/stylesheets/notification_item.scss
index 5d182a7db..a6d2ee1e5 100644
--- a/app/assets/stylesheets/notification_item.scss
+++ b/app/assets/stylesheets/notification_item.scss
@@ -1,4 +1,5 @@
 .notifications {
+  $notification-icon-size: rem-calc(19);
   position: relative;
 
   &.unread-notifications {
@@ -12,16 +13,19 @@
     }
 
     &::after {
+      $menu-link-top-padding: rem-calc(11);
+      $circle-icon-size: rem-calc(10);
+
       color: #ecf00b;
-      font-size: rem-calc(10);
+      font-size: $circle-icon-size;
       margin-right: 0;
       position: absolute;
-      left: 12px;
-      top: 6px;
+      left: $notification-icon-size - rem-calc(5);
+      top: $menu-link-top-padding - $circle-icon-size / 2;
 
       @include breakpoint(medium) {
-        left: auto;
-        right: 8px;
+        $menu-link-left-padding: rem-calc(16);
+        left: $notification-icon-size + $menu-link-left-padding;
       }
     }
   }
@@ -31,7 +35,7 @@
   }
 
   &::before {
-    font-size: rem-calc(19);
+    font-size: $notification-icon-size;
   }
 
   &:hover {