fix: clean up and fix overflow / scrolling issues

Author: sghoweri

packages/uikit-workshop/src/sass/scss/01-abstracts/_mixins.scss

@@ -101,11 +101,12 @@
   */
   &.pl-is-active {
     max-height: calc(100vh - #{$offset-top} - 1rem);
-    max-height: calc(
-      var(--pl-viewport-height) - 1rem,
-      100vh - #{$offset-top} - 1rem
+    max-height: var(
+      calc(--pl-viewport-height - 1rem),
+      calc(100vh - #{$offset-top} - 1rem)
     ); /* [1] */
     overflow: auto;
+    -webkit-overflow-scrolling: touch;
   }
 }
 

packages/uikit-workshop/src/sass/scss/04-components/_navigation.scss

@@ -8,38 +8,42 @@
  *    activates nav
  */
 .pl-c-nav {
+  @include accordionPanel;
   background-color: inherit;
   position: absolute;
   top: 100%;
   width: 100%;
-  overflow: hidden;
-  max-height: 0; /* 1 */
   display: flex;
   flex-direction: column;
   transition: max-height $pl-animate-quick ease-out;
 
+  // if nav was opened on smaller screen and screen is resized, it'll be cut off otherwise
+  @media all and (min-width: $pl-bp-med) {
+    overflow: visible;
+    max-height: none;
+  }
+
   /**
     * Active navigaiton
     * 1) Slide 
     * 2) Set the height to the vierport height minus the height
     *    of the header
     */
   &.pl-is-active {
-    max-height: calc(100vh - #{$offset-top} - 1rem); /* 2 */
-    overflow: auto;
     box-shadow: 0 1px 1px $pl-color-black;
 
-    // if nav was opened on smaller screen and screen is resized, it'll be cut off otherwise
-    @media all and (min-width: $pl-bp-med) {
-      overflow: visible;
+    .pl-c-body--theme-light & {
+      box-shadow: 0 1px 1px darken($pl-color-gray-20, 15%);
     }
 
     .pl-c-body--theme-sidebar & {
-      overflow: hidden;
+      box-shadow: none;
     }
 
-    .pl-c-body--theme-light & {
-      box-shadow: 0 1px 1px darken($pl-color-gray-20, 15%);
+    // if nav was opened on smaller screen and screen is resized, it'll be cut off otherwise
+    @media all and (min-width: $pl-bp-med) {
+      overflow: visible;
+      max-height: none;
     }
   }
 
@@ -48,8 +52,6 @@
     position: relative;
     top: auto;
     width: auto;
-    overflow: visible;
-    max-height: none;
     box-shadow: none;
   }
 }
@@ -154,8 +156,8 @@
     background-color: $pl-color-gray-87;
 
     /**
-         * Caret rotation and positioning in active dropdown
-         */
+      * Caret rotation and positioning in active dropdown
+      */
     &:after {
       color: $pl-color-gray-50;
       transform: rotate(180deg);
@@ -176,7 +178,6 @@
     top: 100%; /* 1 */
     left: 0;
     min-width: 10rem;
-    overflow: hidden;
     border-bottom-left-radius: $pl-border-radius-med;
     border-bottom-right-radius: $pl-border-radius-med;
   }
@@ -200,14 +201,14 @@
 .pl-c-nav__subsublist--dropdown.pl-is-active {
   margin-left: $pl-space / 2;
   visibility: visible;
+  max-height: none;
 
   @media all and (min-width: $pl-bp-med) {
     height: auto;
     max-height: calc(100vh - #{$offset-top} - 1rem); /* 1 */
   }
 
   .pl-c-body--theme-sidebar & {
-    overflow: hidden;
     max-height: none;
   }
 }