host/xiaowang
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Edit header bar animation

Browse source
This commit is contained in:
Paul Nicoué 2022-06-02 15:22:19 +02:00
parent a021b6443a
commit 87ff1e0772
6 changed files with 55 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

78
assets/css/style.scss
View file

@ -81,7 +81,7 @@ body {
display: -ms-grid;
display: grid;
grid:
'header' auto
'header' var(--header-bar-height)
'main' 1fr
'footer' auto
/ 1fr;
@ -123,27 +123,24 @@ footer {
-ms-flex-align: center;
align-items: center;
z-index: 1;
-webkit-transition:
border-bottom 400ms ease-in-out,
transform 400ms ease-in-out;
-o-transition:
border-bottom 400ms ease-in-out,
transform 400ms ease-in-out;
transition:
border-bottom 400ms ease-in-out,
transform 400ms ease-in-out;
}
-webkit-transition: border-bottom 400ms ease-in-out;
-o-transition: border-bottom 400ms ease-in-out;
transition: border-bottom 400ms ease-in-out;
.header-bar--fixed {
position: fixed;
top: calc(-1 * var(--header-bar-height));
}
&--fixed {
position: fixed;
top: calc(-1 * var(--header-bar-height));
border-bottom: 1px solid var(--spanish-gray);
-webkit-transition: transform 400ms ease-in-out;
-o-transition: transform 400ms ease-in-out;
transition: transform 400ms ease-in-out;
}
.header-bar--visible {
border-bottom: 1px solid var(--spanish-gray);
-webkit-transform: translateY(var(--header-bar-height));
-ms-transform: translateY(var(--header-bar-height));
transform: translateY(var(--header-bar-height));
&--visible {
-webkit-transform: translateY(var(--header-bar-height));
-ms-transform: translateY(var(--header-bar-height));
transform: translateY(var(--header-bar-height));
}
}
.header-bar__logo {
@ -160,31 +157,38 @@ footer {
}
.header-bar__nav-button {
background-color: transparent;
width: 32px;
height: 32px;
padding: 5px 0;
width: var(--icon-size);
height: var(--icon-size);
border: none;
border-radius: 50%;
background-color: var(--jet);
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: background-color 200ms ease-in-out;
-o-transition: background-color 200ms ease-in-out;
transition: background-color 200ms ease-in-out;
.header-bar__nav-button-line-1,
.header-bar__nav-button-line-2,
.header-bar__nav-button-line-3 {
svg {
fill: var(--white);
width: 100%;
height: 4px;
border-radius: 50px;
background-color: var(--jet);
height: 100%;
-webkit-transition: fill 200ms ease-in-out;
-o-transition: fill 200ms ease-in-out;
transition: fill 200ms ease-in-out;
}
&:hover,
&:active {
background-color: var(--black);
}
}
// ----------------------------------------------------------------------------