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

Fixes mmistakes#1168
mzaffran · Mar 9, 2020 · ca28356 · ca28356
1 parent b322450
commit ca28356
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 9 deletions.
diff --git a/_sass/minimal-mistakes/_masthead.scss b/_sass/minimal-mistakes/_masthead.scss
@@ -50,7 +50,7 @@
   -ms-flex-item-align: center;
   align-self: center;
   font-weight: bold;
-  z-index: 20;
+  // z-index: 20;
 }
 
 .site-subtitle {

diff --git a/_sass/minimal-mistakes/_sidebar.scss b/_sass/minimal-mistakes/_sidebar.scss
@@ -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;
   }

diff --git a/_sass/minimal-mistakes/_utilities.scss b/_sass/minimal-mistakes/_utilities.scss
@@ -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,