From 021f0cdfe05fa0e3f98422b6003a3d2553ec15e1 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;