Skip to content

Commit

Permalink
fix(ffe-header): Fix new header design bugs
Browse files Browse the repository at this point in the history
Always center navigation menu.
Change size of notification bubble and font inside.
Use flexbox instead of grid some places.
  • Loading branch information
henninghalvsb1 committed Feb 24, 2025
1 parent 9b7455e commit 2e80bb3
Showing 1 changed file with 13 additions and 9 deletions.
22 changes: 13 additions & 9 deletions packages/ffe-header/less/ffe-header.less
Original file line number Diff line number Diff line change
Expand Up @@ -21,16 +21,21 @@
}

&__wrapper {
display: grid;
column-gap: var(--ffe-spacing-md);
grid-template-columns: auto 1fr auto;
place-items: center;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
margin: 0 auto;
padding: 0 var(--ffe-spacing-sm);
max-width: 1280px;
}

&__border {
& .ffe-header__wrapper {
justify-content: center;
}
}

&__link {
transition:
color var(--ffe-transition-duration) var(--ffe-ease),
Expand Down Expand Up @@ -110,7 +115,6 @@
}

&__logo {
flex-grow: 1;
margin: var(--ffe-spacing-xs) 0;

a {
Expand Down Expand Up @@ -308,11 +312,11 @@
&__notification-bubble {
font-family: var(--ffe-v-font-strong);
font-weight: normal;
font-size: 0.75rem;
font-size: .9rem;
line-height: 1;
display: inline-grid;
place-items: center;
width: 1.6rem;
width: 1.5rem;
aspect-ratio: 1;
background: var(--ffe-v-notification-bubble-background-color);
color: var(--ffe-v-notification-bubble-text-color);
Expand All @@ -335,8 +339,6 @@
}

&__icon-button--user-nav {
display: grid;
grid-template-columns: 1fr auto;
.ffe-header__notification-bubble {
grid-area: 1 e('/') 1 e('/') span 1 e('/') span 1;
margin-right: var(--ffe-spacing-sm);
Expand Down Expand Up @@ -386,6 +388,7 @@

&__secondary-nav {
display: block;
flex: 1;

.ffe-header__list-item {
display: inline-block;
Expand All @@ -395,6 +398,7 @@

&__user-nav-toggle {
text-align: right;
flex: 1;
}

&__user-nav {
Expand Down

0 comments on commit 2e80bb3

Please sign in to comment.