diff --git a/src/header.pug b/src/header.pug index 7184052..6a7862b 100644 --- a/src/header.pug +++ b/src/header.pug @@ -2,11 +2,6 @@ sib-link(next='members') img(src=`${clientLogo || '/images/logo.png'}` style=`height:${clientLogoHeight || '32px'}`) -//- #search-bar -//- input#search-input(type='search') -//- i#search-icon.icon-magnifier(aria-hidden='true') -//- i#close-search-icon.icon-close(aria-hidden='true') - sib-notifications.notLoggedIn( nested-field="inbox" bind-user diff --git a/src/images/alien.svg b/src/images/alien.svg index 0037c26..dad700c 100644 --- a/src/images/alien.svg +++ b/src/images/alien.svg @@ -1,4 +1,4 @@ - + diff --git a/src/index.pug b/src/index.pug index dd21d1d..65bc545 100644 --- a/src/index.pug +++ b/src/index.pug @@ -14,7 +14,7 @@ html(lang="en") if clientCSS link(rel='stylesheet', href=`${clientCSS}`) body - header#header(role='banner') + header#header.is-spaced(role='banner') include header.pug main.notLoggedIn diff --git a/src/styles/abstracts/_variables.scss b/src/styles/abstracts/_variables.scss index e974acd..5e2f53f 100644 --- a/src/styles/abstracts/_variables.scss +++ b/src/styles/abstracts/_variables.scss @@ -34,7 +34,7 @@ --color-highlight-primary: var(--color-primary); --color-user-panel: var(--color-black); --color-bell: var(--color-secondary); - --color-avatar-background: var(--color-grey-11); + --color-avatar-background: var(--color-grey-10); --color-title: var(--color-secondary); --color-h1: var(--color-secondary); --color-h2: var(--color-secondary); diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss index e405d6f..25676b8 100644 --- a/src/styles/base/header.scss +++ b/src/styles/base/header.scss @@ -7,63 +7,19 @@ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09); display: flex; flex-shrink: 0; - // padding: 1.6rem 0.64rem; - padding: 0 2.5rem; position: relative; z-index: 1; + &.is-spaced { + padding: 0 2.5rem; + } + #logo { - flex: 1 1 0; - } - - #search-bar { - position: relative; - - #search-input { - border-radius: 10em; - padding: 0.64rem 1.28rem; - border: 1px solid var(--color-grey-10); - height: 3.8rem; - width: 28rem; - -webkit-appearance: textfield; - - & ~ #close-search-icon, - & ~ #search-icon { - color: var(--color-grey-10); - display: block; - font-size: 1.7rem; - margin: auto; - position: absolute; - right: 3.7rem; - top: 50%; - transform: translateY(-50%); - -webkit-text-stroke: 1px var(--color-grey-10); - } - - & ~ #close-search-icon { - opacity: 0; - } - - &:focus { - & ~ #close-search-icon { - opacity: 1; - } - - & ~ #search-icon { - visibility: hidden; - } - } - } - } - - sib-notifications { - color: var(--color-bell); - - @include breakpoint(sm) { - padding: 0; - } + flex: 1 0 0; + align-items: stretch; } + /* General styling for both notification and user's panel */ details { margin-right: 2.5rem; position: relative; @@ -83,33 +39,42 @@ } } } + /* End */ - .sib-notifications__container { - position: relative; - - .sib-notifications__button { - @include icon('bell'); - font-size: 3rem; - - &::before { - margin-left: 0; - } - - img { - display: none; - } - - .sib-notifications__counter { - left: 2.1rem; - position: absolute; - top: -3px; - } + sib-notifications { + color: var(--color-bell); + + @include breakpoint(sm) { + padding: 0; } - .sib-notifications__list { - position: absolute; - right: 0; - top: 5.6rem; + .sib-notifications__container { + position: relative; + + .sib-notifications__button { + @include icon('bell'); + font-size: 3rem; + + &::before { + margin-left: 0; + } + + img { + display: none; + } + + .sib-notifications__counter { + left: 2.1rem; + position: absolute; + top: -3px; + } + } + + .sib-notifications__list { + position: absolute; + right: 0; + top: 5.6rem; + } } }