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

Edit header navigation bar and menu

Browse source
This commit is contained in:
Paul Nicoué 2022-06-12 12:31:03 +02:00
parent 64ad7b3a70
commit 361fd8fd3f
6 changed files with 52 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

48
assets/css/style.scss
View file

@ -138,6 +138,8 @@ footer {
&--fixed {
position: fixed;
--header-bar-vertical-padding: 0.5rem;
--header-bar-height: calc((var(--header-bar-vertical-padding) * 2) + var(--icon-size));
top: calc(-1 * var(--header-bar-height));
border-bottom: 1px solid var(--light-gray);
-webkit-transition: transform 400ms ease-in-out;
@ -154,6 +156,18 @@ footer {
.header-bar__logo {
width: max-content;
-webkit-transition: transform 400ms ease-in-out;
-o-transition: transform 400ms ease-in-out;
transition: transform 400ms ease-in-out;
-webkit-transform-origin: left;
-ms-transform-origin: left;
transform-origin: left;
&--small {
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
}
.header-bar__logo-link {
@ -162,12 +176,12 @@ footer {
.header-bar__nav {
position: relative;
z-index: 1;
z-index: 2;
}
.header-bar__nav-button {
position: relative;
z-index: 2;
z-index: 3;
width: var(--icon-size);
height: var(--icon-size);
padding: 0;
@ -246,7 +260,7 @@ footer {
.header-bar__nav-menu {
position: fixed;
z-index: 1;
z-index: 2;
top: 0;
left: 100vw;
min-width: 100vw;
@ -307,7 +321,6 @@ footer {
transform: translateX(calc(-1 * 100%));
@for $i from 1 through 20 {
.header-bar__nav-item-#{$i} {
a,
@ -324,14 +337,29 @@ footer {
}
}
@media screen and (min-width: $tablet-media-query) {
.header-bar__nav-overlay {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: var(--black);
opacity: 0;
pointer-events: none;
will-change: opacity;
-webkit-transition: opacity 400ms ease-in-out;
-o-transition: opacity 400ms ease-in-out;
transition: opacity 400ms ease-in-out;
.header-bar {
&--fixed {
--header-bar-height: calc(var(--header-bar-vertical-padding) + var(--icon-size));
}
&--visible {
opacity: 0.2;
pointer-events: auto;
cursor: pointer;
}
}
@media screen and (min-width: $tablet-media-query) {
.header-bar__nav-menu {
min-width: 50vw;