update: header ok

This commit is contained in:
gaelle morin 2020-05-13 09:25:33 +02:00
parent 4862d25515
commit ef8ad357f7
No known key found for this signature in database
GPG Key ID: 028426702B95CF9C
5 changed files with 43 additions and 83 deletions

View File

@ -2,11 +2,6 @@
sib-link(next='members') sib-link(next='members')
img(src=`${clientLogo || '/images/logo.png'}` style=`height:${clientLogoHeight || '32px'}`) 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( sib-notifications.notLoggedIn(
nested-field="inbox" nested-field="inbox"
bind-user bind-user

View File

@ -1,4 +1,4 @@
<svg class="alien" fill="#AAA9B9" width="135.47mm" height="135.51mm" version="1.1" viewBox="0 0 135.47 135.51" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <svg class="alien" fill="#A59D9D" width="135.47mm" height="135.51mm" version="1.1" viewBox="0 0 135.47 135.51" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<metadata> <metadata>
<rdf:RDF> <rdf:RDF>
<cc:Work rdf:about=""> <cc:Work rdf:about="">

Before

Width:  |  Height:  |  Size: 5.4 KiB

After

Width:  |  Height:  |  Size: 5.4 KiB

View File

@ -14,7 +14,7 @@ html(lang="en")
if clientCSS if clientCSS
link(rel='stylesheet', href=`${clientCSS}`) link(rel='stylesheet', href=`${clientCSS}`)
body body
header#header(role='banner') header#header.is-spaced(role='banner')
include header.pug include header.pug
main.notLoggedIn main.notLoggedIn

View File

@ -34,7 +34,7 @@
--color-highlight-primary: var(--color-primary); --color-highlight-primary: var(--color-primary);
--color-user-panel: var(--color-black); --color-user-panel: var(--color-black);
--color-bell: var(--color-secondary); --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-title: var(--color-secondary);
--color-h1: var(--color-secondary); --color-h1: var(--color-secondary);
--color-h2: var(--color-secondary); --color-h2: var(--color-secondary);

View File

@ -7,63 +7,19 @@
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09);
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
// padding: 1.6rem 0.64rem;
padding: 0 2.5rem;
position: relative; position: relative;
z-index: 1; z-index: 1;
&.is-spaced {
padding: 0 2.5rem;
}
#logo { #logo {
flex: 1 1 0; flex: 1 0 0;
} align-items: stretch;
#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;
}
} }
/* General styling for both notification and user's panel */
details { details {
margin-right: 2.5rem; margin-right: 2.5rem;
position: relative; position: relative;
@ -83,33 +39,42 @@
} }
} }
} }
/* End */
.sib-notifications__container { sib-notifications {
position: relative; color: var(--color-bell);
.sib-notifications__button { @include breakpoint(sm) {
@include icon('bell'); padding: 0;
font-size: 3rem;
&::before {
margin-left: 0;
}
img {
display: none;
}
.sib-notifications__counter {
left: 2.1rem;
position: absolute;
top: -3px;
}
} }
.sib-notifications__list { .sib-notifications__container {
position: absolute; position: relative;
right: 0;
top: 5.6rem; .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;
}
} }
} }