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;
|
||||
align-self: center;
|
||||
font-weight: bold;
|
||||
z-index: 20;
|
||||
// z-index: 20;
|
||||
}
|
||||
|
||||
.site-subtitle {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in a new issue