Web: Common: Fixed displaying of aside header.

This commit is contained in:
TatianaLopaeva 2020-12-29 16:15:24 +03:00
parent 8e64d66239
commit d988d44b11
3 changed files with 32 additions and 30 deletions

View File

@ -137,6 +137,7 @@ const StyledContainer = styled.div`
padding-bottom: 56px;
@media ${tablet} {
padding-bottom: 0;
& > div:first-child {
${(props) =>
props.width &&
@ -146,20 +147,6 @@ const StyledContainer = styled.div`
position: absolute;
top: 56px;
z-index: 180;
animation-name: slideDown;
animation-duration: 0.4s;
animation-timing-function: ease;
visibility: visible !important;
@keyframes slideDown {
from {
transform: translate(0, -200%);
}
to {
transform: translate(0, 8%);
}
}
}
}

View File

@ -48,6 +48,7 @@ const StyledContainer = styled.div`
padding-bottom: 56px;
@media ${tablet} {
padding-bottom: 0;
& > div:first-child {
${(props) =>
props.width &&
@ -57,20 +58,6 @@ const StyledContainer = styled.div`
position: absolute;
top: 56px;
z-index: 180;
animation-name: slideDown;
animation-duration: 0.4s;
animation-timing-function: ease;
visibility: visible !important;
@keyframes slideDown {
from {
transform: translate(0, -200%);
}
to {
transform: translate(0, 8%);
}
}
}
}

View File

@ -42,18 +42,46 @@ const StyledSectionHeader = styled.div`
@media ${tablet} {
max-width: calc(100vw - 32px);
width: 100%;
padding-top: 4px;
//padding-top: 4px;
${(props) =>
props.isLoaded &&
css`
position: fixed;
top: ${(props) => (!props.isHeaderVisible ? "56px" : "0")};
opacity: 1;
width: ${(props) =>
props.isArticlePinned ? `calc(100% - 272px)` : "100%"};
background-color: #fff;
z-index: 149;
z-index: ${(props) => (!props.isHeaderVisible ? "149" : "160")};
padding-right: 16px;
`}
.group-button-menu-container {
& > div:first-child {
animation-name: slideDown;
animation-duration: 0.4s;
animation-timing-function: ease;
visibility: visible !important;
@keyframes slideDown {
0% {
transform: translate(0, -120%);
opacity: 0;
}
90% {
opacity: 0.5;
}
97% {
opacity: 0.6;
}
100% {
transform: translate(0, 8%);
opacity: 1;
}
}
}
}
}
}