consul/grecia
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adjust new notifications icon position

Browse Source 
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.
This commit is contained in:
Javi Martín
2021-02-16 01:13:15 +01:00
parent 4c289f2489
commit 0839c5ea75
1 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
app/assets/stylesheets/notification_item.scss
View File

@@ -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 {