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 .wrapper
header#header.header(role='banner') header#header.header.is-spaced(role='banner')
include header.pug include header.pug
nav#main__menu.left-menu.jsLeftMenu nav#main__menu.left-menu.jsLeftMenu

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

@ -1,6 +1,6 @@
#header { #header {
max-height: 83px; max-height: 51px;
height: 83px; height: 51px;
display: flex; display: flex;
align-items: center; align-items: center;
background-color: var(--color-header-background); background-color: var(--color-header-background);
@ -10,11 +10,24 @@
position: relative; position: relative;
z-index: 1; z-index: 1;
&.is-spaced { @include breakpoint(lg) {
padding: 0 2.5rem; max-height: 83px;
height: 83px;
}
@include breakpoint(sm) { &.is-spaced {
padding: 0 0.6rem; 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; flex: 1 0 0;
align-items: stretch; 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 */ /* General styling for both notification and user's panel */
details { details {
margin-right: 2.5rem; margin-right: 0;
position: relative; position: relative;
@include breakpoint(sm) { @include breakpoint(lg) {
margin-right: 0; margin-right: 2.5rem;
} }
summary { summary {
@ -92,10 +110,13 @@ sib-notifications {
user-select: none; user-select: none;
summary { summary {
padding: 18px;
cursor: pointer; cursor: pointer;
display: block; /* To remove the disclosure triangle on Firefox v.>=69 */ display: block; /* To remove the disclosure triangle on Firefox v.>=69 */
@include breakpoint(lg) {
padding: 18px;
}
&:focus { &:focus {
background-color: var(--color-user-panel-header-background-open); background-color: var(--color-user-panel-header-background-open);
color: var(--color-user-panel-header-text-open); color: var(--color-user-panel-header-text-open);