From 1e5d21d7ed9ffd29a24e2861cad1143a69cd7a15 Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Fri, 2 Apr 2021 16:02:25 +0200
Subject: [PATCH] fix: header - notifications look better on Firefox
---
src/styles/header/_index.scss | 23 ++++++++++++++---------
src/views/partials/header.pug | 2 +-
2 files changed, 15 insertions(+), 10 deletions(-)
diff --git a/src/styles/header/_index.scss b/src/styles/header/_index.scss
index b296da17..d1e9eac7 100644
--- a/src/styles/header/_index.scss
+++ b/src/styles/header/_index.scss
@@ -28,7 +28,9 @@ header {
solid-notifications {
color: var(--color-heading);
align-self: center;
- margin-top: 9px;
+
+ height: 25px;
+ width: 25px;
.solid-notifications__container {
position: relative;
@@ -39,11 +41,14 @@ header {
}
.solid-notifications__button {
- margin-top: -9px;
- font-size: 24px;
+ font-size: 25px;
+ padding: 0;
+ line-height: 1;
+ height: auto;
+ width: auto;
&::before {
- margin-left: -9px;
+ // margin-left: -9px;
}
&:hover, &:focus {
@@ -55,11 +60,11 @@ header {
}
.solid-notifications__counter {
- height: 18px;
- width: 18px;
- left: 17px;
+ left: 12px;
position: absolute;
- top: 5px;
+ top: -4px;
+ width: 18px;
+ height: 18px;
span {
background-color: var(--color-primary);
@@ -93,7 +98,7 @@ header {
position: absolute;
width: 0;
height: 0;
- margin-left: -5.05em;
+ margin-left: -4.2em;
top: 0px;
left: 50%;
border: 1em solid black;
diff --git a/src/views/partials/header.pug b/src/views/partials/header.pug
index e9db9e54..52779800 100644
--- a/src/views/partials/header.pug
+++ b/src/views/partials/header.pug
@@ -17,7 +17,7 @@ div
)
if componentSet.has("notification")
- solid-notifications.segment.margin-right-small(
+ solid-notifications.segment.margin-right-large(
nested-field="inbox"
bind-user
)
--
GitLab