2ccf725815
We hadn't added this rule before because there was no such rule in scss-lint. Instead, we were following it without a linter, and so we unintentionally broke it sometimes. But now we're using Stylelint, so we can add the rule and let the linter check we're still following it.
44 lines
954 B
SCSS
44 lines
954 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(small only) {
|
|
margin-right: $font-icon-margin;
|
|
}
|
|
}
|
|
|
|
&::after {
|
|
$menu-link-top-padding: rem-calc(11);
|
|
$circle-icon-size: rem-calc(10);
|
|
|
|
color: #ecf00b;
|
|
font-size: $circle-icon-size;
|
|
left: $notification-icon-size - rem-calc(5);
|
|
position: absolute;
|
|
top: calc(#{$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;
|
|
}
|
|
}
|