diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss
index 23ffd76f496d862e070c9b33f0a91894d2ee8c97..360531f3de0b3941cd83f22c0def7117941e92a6 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;
+ #logo {
+ flex: 1 1 0;
+ }
- #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;
+ #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;
+ }
+
+ & ~ #search-icon {
+ visibility: hidden;
+ }
+ }
}
+ }
- & ~ #close-search-icon {
- opacity: 0;
- }
+ details {
+ margin-right: 2.5rem;
- &:focus {
- & ~ #close-search-icon {
- opacity: 1;
+ summary {
+
+ &::-moz-list-bullet {
+ list-style-type: none;
}
- & ~ #search-icon {
- visibility: hidden;
+ &::-webkit-details-marker {
+ display: none;
}
}
}
-}
-
-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;
+
+ 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__counter {
- left: 2.1rem;
+
+ .sib-notifications__list {
position: absolute;
- top: -3px;
+ right: 0;
+ top: 5.6rem;
}
}
-
- .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;
- }
-
- img {
- border-radius: 100%;
- height: 4.8rem;
- margin-right: 2rem;
- object-fit: cover;
- object-position: center;
- width: 4.8rem;
+
+ details#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: 16px;
+ cursor: pointer;
+ &:focus {
+ background-color: $color-233-18-29;
+ color: $color-0-0-100;
+ outline: none;
}
-
- sib-display-value[name='first_name'] {
- @include icon('arrow-down');
- align-items: center;
+ }
+
+ #user-controls__profile {
+ div {
display: flex;
flex-direction: row-reverse;
- font-size: 1.8rem;
- font-weight: 600;
-
- &::before {
- margin-left: 1.5rem;
+
+ > * {
+ 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('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;
-
- > nav {
- background-color: $color-0-0-100;
- box-shadow: 0 7px 8px 0 rgba(0, 0, 0, 0.16);
+
+ #user-controls__panel {
+ height: 0;
position: absolute;
right: 0;
- top: 0;
- width: 208px;
+ z-index: 1;
+ width: 100%;
+ top: 83px;
- ul {
- list-style: none;
- margin: 0;
- padding: 0;
+ > 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%;
- 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;
+ 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%;
+
+ 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;
+
+ &[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