Add "click" overlay to close masthead and follow button menus when open

Fixes #1168
This commit is contained in:
Michael Rose 2020-03-09 14:49:15 -04:00
parent 9c90563d1a
commit b5abe62bf6
3 changed files with 60 additions and 9 deletions

View file

@ -50,7 +50,7 @@
-ms-flex-item-align: center;
align-self: center;
font-weight: bold;
z-index: 20;
// z-index: 20;
}
.site-subtitle {

View file

@ -8,13 +8,13 @@
.sidebar {
@include clearfix();
@include breakpoint(max-width $large) {
/* fix z-index order of follow links */
position: relative;
z-index: 10;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
// @include breakpoint(max-width $large) {
// /* fix z-index order of follow links */
// position: relative;
// z-index: 10;
// -webkit-transform: translate3d(0, 0, 0);
// transform: translate3d(0, 0, 0);
// }
@include breakpoint($large) {
float: left;
@ -63,7 +63,7 @@
img {
width: 100%;
&.emoji {
width: 20px;
height: 20px;
@ -199,8 +199,27 @@
}
button {
position: relative;
margin-bottom: 0;
&:before {
@supports (pointer-events: none) {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
}
&.open {
&:before {
pointer-events: auto;
}
}
@include breakpoint($large) {
display: none;
}
@ -269,6 +288,11 @@
}
}
ul {
padding: 10px;
list-style-type: none;
}
li {
white-space: nowrap;
}

View file

@ -385,6 +385,33 @@ body:hover .visually-hidden button {
}
}
.greedy-nav__toggle {
&:before {
@supports (pointer-events: none) {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
background-color: $background-color;
-webkit-transition: $global-transition;
transition: $global-transition;
pointer-events: none;
}
}
&.close {
&:before {
opacity: 0.9;
-webkit-transition: $global-transition;
transition: $global-transition;
pointer-events: auto;
}
}
}
.greedy-nav__toggle:hover {
.navicon,
.navicon:before,