Add "click" overlay to close masthead and follow button menus when open
Fixes #1168
This commit is contained in:
parent
9c90563d1a
commit
b5abe62bf6
3 changed files with 60 additions and 9 deletions
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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,
|
||||||
|
|
Loading…
Reference in a new issue