From 4d1183cc1f0909f3d0aa459d1a38b6548bccfba2 Mon Sep 17 00:00:00 2001
From: shpuld <shpuld@gmail.com>
Date: Mon, 27 Feb 2017 19:21:40 +0200
Subject: [PATCH] Fix the very visible padding offset in unread notification
caused by the border.
---
src/components/notifications/notifications.scss | 15 ++++++++++-----
1 file changed, 10 insertions(+), 5 deletions(-)
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 5da6d495..100349eb 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -13,12 +13,12 @@
}
}
- .unseen {
- border-left: 4px solid rgba(255, 48, 16, 0.65);
- }
-
.notification {
- padding: 0.4em 0 0 0.7em;
+ // Will have to use pixels here to ensure consistent distance with
+ // pad alone and pad + border, browsers bad at rounding this with em,
+ // they love to give a 1 pixel ghost offset with 0.7em vs 0.3em + 0.4em,
+ // which does not happen with 10px vs 4px + 6px.
+ padding: 0.4em 0 0 10px;
display: flex;
border-bottom: 1px solid silver;
@@ -62,4 +62,9 @@
border: none
}
}
+
+ .unseen {
+ border-left: 4px solid rgba(255, 48, 16, 0.65);
+ padding-left: 6px;
+ }
}