fix: header - notifications look better on Firefox

This commit is contained in:
gaelle morin 2021-04-02 16:02:25 +02:00
parent b9e12293eb
commit 1e5d21d7ed
No known key found for this signature in database
GPG Key ID: 028426702B95CF9C
2 changed files with 15 additions and 10 deletions

View File

@ -28,7 +28,9 @@ header {
solid-notifications { solid-notifications {
color: var(--color-heading); color: var(--color-heading);
align-self: center; align-self: center;
margin-top: 9px;
height: 25px;
width: 25px;
.solid-notifications__container { .solid-notifications__container {
position: relative; position: relative;
@ -39,11 +41,14 @@ header {
} }
.solid-notifications__button { .solid-notifications__button {
margin-top: -9px; font-size: 25px;
font-size: 24px; padding: 0;
line-height: 1;
height: auto;
width: auto;
&::before { &::before {
margin-left: -9px; // margin-left: -9px;
} }
&:hover, &:focus { &:hover, &:focus {
@ -55,11 +60,11 @@ header {
} }
.solid-notifications__counter { .solid-notifications__counter {
height: 18px; left: 12px;
width: 18px;
left: 17px;
position: absolute; position: absolute;
top: 5px; top: -4px;
width: 18px;
height: 18px;
span { span {
background-color: var(--color-primary); background-color: var(--color-primary);
@ -93,7 +98,7 @@ header {
position: absolute; position: absolute;
width: 0; width: 0;
height: 0; height: 0;
margin-left: -5.05em; margin-left: -4.2em;
top: 0px; top: 0px;
left: 50%; left: 50%;
border: 1em solid black; border: 1em solid black;

View File

@ -17,7 +17,7 @@ div
) )
if componentSet.has("notification") if componentSet.has("notification")
solid-notifications.segment.margin-right-small( solid-notifications.segment.margin-right-large(
nested-field="inbox" nested-field="inbox"
bind-user bind-user
) )