#header { max-height: 83px; height: 83px; display: flex; align-items: center; background-color: var(--color-header-background); color: var(--color-black); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09); flex-shrink: 0; position: relative; /*z-index: 1;*/ &.is-spaced { padding: 0 2.5rem; @include breakpoint(sm) { padding: 0 0.6rem; } } .logo { flex: 1 0 0; align-items: stretch; } } /* General styling for both notification and user's panel */ details { margin-right: 2.5rem; position: relative; @include breakpoint(sm) { margin-right: 0; } summary { &::-moz-list-bullet { list-style-type: none; /* To remove the disclosure triangle on Firefox v.<69 */ } &::-webkit-details-marker { display: none; } } } /* End */ sib-notifications { color: var(--color-bell); @include breakpoint(sm) { padding: 0; } .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; } } } #user-controls { padding: 0; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; summary { padding: 18px; cursor: pointer; display: block; /* To remove the disclosure triangle on Firefox v.>=69 */ &:focus { background-color: var(--color-user-panel-header-background-open); color: var(--color-user-panel-header-text-open); outline: none; } } #user-controls__profile { div { display: flex; flex-direction: row-reverse; > * { vertical-align: middle; } hubl-user-avatar { height: 4.8rem; margin-right: 2rem; width: 4.8rem; @include breakpoint(sm) { height: 3.3rem; margin-right: 0; width: 3.3rem; } } sib-display-value[name='first_name'] { @include icon('arrow-down'); align-items: center; flex-direction: row-reverse; font-size: 1.8rem; font-weight: 600; &::before { margin-left: 1.5rem; } @include breakpoint(sm) { display: none; } } } } #user-controls__panel { height: 0; position: absolute; right: 0; z-index: 1; width: 100%; top: 83px; > nav { background-color: var(--color-user-panel-list-background); box-shadow: 0 7px 8px 0 rgba(0, 0, 0, 0.16); position: absolute; right: 0; top: 0; width: 100%; ul { list-style: none; margin: 0; padding: 0; li { sib-link { color: var(--color-grey-4); display: block; border-bottom: 1px solid var(--color-user-panel-list-border); margin-right: 0; padding: 1.6rem 1.3rem; &:hover { color: var(--color-user-panel-list-text-hover); } } } } button { color: var(--color-grey-4); padding: 1.6rem 1.3rem; text-align: left; width: 100%; &:hover { color: var(--color-user-panel-list-text-hover); } } } } &[open] { background-color: var(--color-user-panel-header-background); color: var(--color-user-panel-header-text); #user-controls__profile { div { sib-display-value[name='first_name'] { @include icon('close'); &::before { margin-left: 1.5rem; } } } } } } .mobile-menu-icon { display: none; @include breakpoint(sm) { display: block; padding-left: 0; font-size: 24px; } }