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; -ms-flex-item-align: center;
align-self: center; align-self: center;
font-weight: bold; font-weight: bold;
z-index: 20; // z-index: 20;
} }
.site-subtitle { .site-subtitle {

View file

@ -8,13 +8,13 @@
.sidebar { .sidebar {
@include clearfix(); @include clearfix();
@include breakpoint(max-width $large) { // @include breakpoint(max-width $large) {
/* fix z-index order of follow links */ // /* fix z-index order of follow links */
position: relative; // position: relative;
z-index: 10; // z-index: 10;
-webkit-transform: translate3d(0, 0, 0); // -webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); // transform: translate3d(0, 0, 0);
} // }
@include breakpoint($large) { @include breakpoint($large) {
float: left; float: left;
@ -63,7 +63,7 @@
img { img {
width: 100%; width: 100%;
&.emoji { &.emoji {
width: 20px; width: 20px;
height: 20px; height: 20px;
@ -199,8 +199,27 @@
} }
button { button {
position: relative;
margin-bottom: 0; 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) { @include breakpoint($large) {
display: none; display: none;
} }
@ -269,6 +288,11 @@
} }
} }
ul {
padding: 10px;
list-style-type: none;
}
li { li {
white-space: nowrap; 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 { .greedy-nav__toggle:hover {
.navicon, .navicon,
.navicon:before, .navicon:before,