diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss index 23ffd76..360531f 100644 --- a/src/styles/base/header.scss +++ b/src/styles/base/header.scss @@ -1,207 +1,222 @@ #header { - max-height: 51px; - height: 51px; + max-height: 83px; + height: 83px; align-items: center; background-color: $color-0-0-100; color: $color-216-4-22; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09); display: flex; flex-shrink: 0; - padding: 1.6rem 0.64rem; + // padding: 1.6rem 0.64rem; position: relative; z-index: 1; > *:not(sib-widget) { 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 $color-215-9-73; - height: 3.8rem; - width: 28rem; - -webkit-appearance: textfield; - - & ~ #close-search-icon, - & ~ #search-icon { - color: $color-215-9-73; - display: block; - font-size: 1.7rem; - margin: auto; - position: absolute; - right: 3.7rem; - top: 50%; - transform: translateY(-50%); - -webkit-text-stroke: 1px $color-215-9-73; - } - - & ~ #close-search-icon { - opacity: 0; - } - - &:focus { - & ~ #close-search-icon { - opacity: 1; - } + #logo { + flex: 1 1 0; + } + #search-bar { + position: relative; + + #search-input { + border-radius: 10em; + padding: 0.64rem 1.28rem; + border: 1px solid $color-215-9-73; + height: 3.8rem; + width: 28rem; + -webkit-appearance: textfield; + + & ~ #close-search-icon, & ~ #search-icon { - visibility: hidden; - } - } - } -} - -details { - // cursor: pointer; - - summary { - - &::-moz-list-bullet { - list-style-type: none; - } - - &::-webkit-details-marker { - display: none; - } - } -} - -details { - 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; - } -} - -details#user-controls { - - summary:focus { - background-color: $color-233-18-29; - color: $color-0-0-100; - outline: none; - } - - #user-controls__profile { - div { - display: flex; - flex-direction: row-reverse; - - > * { - vertical-align: middle; + color: $color-215-9-73; + display: block; + font-size: 1.7rem; + margin: auto; + position: absolute; + right: 3.7rem; + top: 50%; + transform: translateY(-50%); + -webkit-text-stroke: 1px $color-215-9-73; } - img { - border-radius: 100%; - height: 4.8rem; - margin-right: 2rem; - object-fit: cover; - object-position: center; - width: 4.8rem; + & ~ #close-search-icon { + opacity: 0; } - - sib-display-value[name='first_name'] { - @include icon('arrow-down'); - align-items: center; - display: flex; - flex-direction: row-reverse; - font-size: 1.8rem; - font-weight: 600; - - &::before { - margin-left: 1.5rem; + + &:focus { + & ~ #close-search-icon { + opacity: 1; + } + + & ~ #search-icon { + visibility: hidden; } } } } - - #user-controls__panel { - height: 0; - position: absolute; - right: 0; - z-index: 1; - - > nav { - background-color: $color-0-0-100; - box-shadow: 0 7px 8px 0 rgba(0, 0, 0, 0.16); + + details { + margin-right: 2.5rem; + + summary { + + &::-moz-list-bullet { + list-style-type: none; + } + + &::-webkit-details-marker { + display: none; + } + } + } + + details { + 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: 0; - width: 208px; - - ul { - list-style: none; - margin: 0; - padding: 0; - - li { - border-bottom: 1px solid $color-213-20-91; - margin-right: 0; - padding: 1.6rem 1.3rem; - - sib-link { - color: $color-213-4-50; - display: block; - } - } - } - - button { - color: $color-213-4-50; - padding: 1.6rem 1.3rem; - text-align: left; - width: 100%; - } + top: 5.6rem; } } + + details#user-controls { + padding: 0; + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; - &[open] { - background-color: $color-233-18-29; - color: $color-0-0-100; - + summary { + padding: 16px; + cursor: pointer; + &:focus { + background-color: $color-233-18-29; + color: $color-0-0-100; + outline: none; + } + } + #user-controls__profile { - div { - + display: flex; + flex-direction: row-reverse; + + > * { + vertical-align: middle; + } + + img { + border-radius: 100%; + height: 4.8rem; + margin-right: 2rem; + object-fit: cover; + object-position: center; + width: 4.8rem; + } + sib-display-value[name='first_name'] { - @include icon('close'); - + @include icon('arrow-down'); + align-items: center; + display: flex; + flex-direction: row-reverse; + font-size: 1.8rem; + font-weight: 600; + &::before { margin-left: 1.5rem; } } } } + + #user-controls__panel { + height: 0; + position: absolute; + right: 0; + z-index: 1; + width: 100%; + top: 83px; + + > nav { + background-color: $color-0-0-100; + 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: $color-213-4-50; + display: block; + border-bottom: 1px solid $color-213-20-91; + margin-right: 0; + padding: 1.6rem 1.3rem; + &:hover { + color: $color-244-73-62; + } + } + } + } + + button { + color: $color-213-4-50; + padding: 1.6rem 1.3rem; + text-align: left; + width: 100%; + } + } + } + + &[open] { + background-color: $color-233-18-29; + color: $color-0-0-100; + + #user-controls__profile { + + div { + + sib-display-value[name='first_name'] { + @include icon('close'); + + &::before { + margin-left: 1.5rem; + } + } + } + } + } } -} - + +} \ No newline at end of file