autonomic-cooperative/hubl
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update: header ok

Browse Source
This commit is contained in:
gaelle morin
2020-05-13 09:25:33 +02:00
parent 4862d25515
commit ef8ad357f7
5 changed files with 43 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/header.pug
View File

@ -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

2
src/images/alien.svg
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>
<rdf:RDF>
<cc:Work rdf:about="">

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.4 KiB

After

Width:  |  Height:  |  Size: 5.4 KiB

2
src/index.pug
View File

@ -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

2
src/styles/abstracts/_variables.scss
View File

@ -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);

115
src/styles/base/header.scss
View File

@ -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;
}
}
}