0839c5ea75
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.
45 lines
945 B
SCSS
45 lines
945 B
SCSS
.notifications {
|
|
$notification-icon-size: rem-calc(19);
|
|
position: relative;
|
|
|
|
&.unread-notifications {
|
|
@include has-fa-icon(bell, solid);
|
|
@include has-fa-icon(circle, solid, after);
|
|
|
|
&::before {
|
|
@include breakpoint(medium) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
&::after {
|
|
$menu-link-top-padding: rem-calc(11);
|
|
$circle-icon-size: rem-calc(10);
|
|
|
|
color: #ecf00b;
|
|
font-size: $circle-icon-size;
|
|
margin-right: 0;
|
|
position: absolute;
|
|
left: $notification-icon-size - rem-calc(5);
|
|
top: $menu-link-top-padding - $circle-icon-size / 2;
|
|
|
|
@include breakpoint(medium) {
|
|
$menu-link-left-padding: rem-calc(16);
|
|
left: $notification-icon-size + $menu-link-left-padding;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.no-notifications {
|
|
@include has-fa-icon(bell, regular);
|
|
}
|
|
|
|
&::before {
|
|
font-size: $notification-icon-size;
|
|
}
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|