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

update: header - responsive ok

Browse Source
This commit is contained in:
gaelle morin 2020-06-03 14:16:29 +02:00
parent e266e5936e
commit 37a8e28793
No known key found for this signature in database
GPG Key ID: 028426702B95CF9C
2 changed files with 32 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/index.pug
View File

@ -17,7 +17,7 @@ html(lang="en")
.wrapper
header#header.header(role='banner')
header#header.header.is-spaced(role='banner')
include header.pug
nav#main__menu.left-menu.jsLeftMenu

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

@ -1,6 +1,6 @@
#header {
max-height: 83px;
height: 83px;
max-height: 51px;
height: 51px;
display: flex;
align-items: center;
background-color: var(--color-header-background);
@ -10,11 +10,24 @@
position: relative;
z-index: 1;
&.is-spaced {
padding: 0 2.5rem;
@include breakpoint(lg) {
max-height: 83px;
height: 83px;
}
@include breakpoint(sm) {
padding: 0 0.6rem;
&.is-spaced {
padding: 0 0.8rem;
@include breakpoint(lg) {
padding: 0 2.5rem;
}
}
>*:not(:first-child) {
margin-left: 2rem;
@include breakpoint(lg) {
margin-left: 0;
}
}
@ -22,15 +35,20 @@
flex: 1 0 0;
align-items: stretch;
}
/* To remove the place taken by this element */
sib-widget[name='hubl-user-avatar'] {
display: contents;
}
}
/* General styling for both notification and user's panel */
details {
margin-right: 2.5rem;
margin-right: 0;
position: relative;
@include breakpoint(sm) {
margin-right: 0;
@include breakpoint(lg) {
margin-right: 2.5rem;
}
summary {
@ -92,10 +110,13 @@ sib-notifications {
user-select: none;
summary {
padding: 18px;
cursor: pointer;
display: block; /* To remove the disclosure triangle on Firefox v.>=69 */
@include breakpoint(lg) {
padding: 18px;
}
&:focus {
background-color: var(--color-user-panel-header-background-open);
color: var(--color-user-panel-header-text-open);