From 22b9a557656c0a6336f25ef568f69d263f873562 Mon Sep 17 00:00:00 2001
From: Michael Rose <est.michael@gmail.com>
Date: Mon, 21 Nov 2016 16:01:59 -0500
Subject: [PATCH] Fix overlapping sidebar navigation list due to `max-height:
 100vh` - Use `max-height: 9999px` for smoother animation than `max-height:
 100%` - Issue #668

---
 _sass/_navigation.scss      | 4 ++--
 docs/_sass/_navigation.scss | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/_sass/_navigation.scss b/_sass/_navigation.scss
index 08ba30e34f9d..a5b301443a22 100644
--- a/_sass/_navigation.scss
+++ b/_sass/_navigation.scss
@@ -431,7 +431,7 @@
   @include breakpoint(max-width ($large - 1px)) {
     position: relative;
     max-height: 0;
-    opacity: 0;
+    opacity: 0%;
     overflow: hidden;
     z-index: 10;
     -webkit-transition: 0.3s ease-in-out;
@@ -446,7 +446,7 @@
   .nav__list input:checked ~ .nav__items {
     -webkit-transition: 0.5s ease-in-out;
     transition: 0.5s ease-in-out;
-    max-height: 100vh;
+    max-height: 9999px; // exaggerate max-height to accommodate tall lists
     overflow: visible;
     opacity: 1;
     margin-top: 1em;
diff --git a/docs/_sass/_navigation.scss b/docs/_sass/_navigation.scss
index 08ba30e34f9d..a5b301443a22 100644
--- a/docs/_sass/_navigation.scss
+++ b/docs/_sass/_navigation.scss
@@ -431,7 +431,7 @@
   @include breakpoint(max-width ($large - 1px)) {
     position: relative;
     max-height: 0;
-    opacity: 0;
+    opacity: 0%;
     overflow: hidden;
     z-index: 10;
     -webkit-transition: 0.3s ease-in-out;
@@ -446,7 +446,7 @@
   .nav__list input:checked ~ .nav__items {
     -webkit-transition: 0.5s ease-in-out;
     transition: 0.5s ease-in-out;
-    max-height: 100vh;
+    max-height: 9999px; // exaggerate max-height to accommodate tall lists
     overflow: visible;
     opacity: 1;
     margin-top: 1em;