refactor: update viewport and modal layouts to work with horizontal and vertical layout orientations; add some minor UI polish to help separate out the bottom drawer UI from the sidebar when the sidebar itself is visible; clean up modal drawer handle and close buttons

Author: sghoweri

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

@@ -2,6 +2,17 @@
     #MODAL
 \*------------------------------------*/
 
+pl-modal {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  z-index: 20;
+  max-height: 100vh;
+  box-shadow: 0 0 2px 0 $pl-color-gray-70;
+  overflow: visible;
+}
+
+
 /**
  * 1) The modal slides up from the bottom of the viewport when
  *    "show pattern info" is selected on the pattern detail screen.
@@ -10,7 +21,7 @@
   display: flex;
   flex-direction: column;
   font-family: $pl-font;
-  background-color: $pl-color-black;
+  background-color: $pl-color-gray-87;
   color: $pl-color-gray-20;
   position: relative;
   top: auto;
@@ -43,6 +54,14 @@
   }
 }
 
+.pl-c-modal__wrapper {
+  transform: translate3d(0, 0, 0);
+}
+
+.pl-c-modal__wrapper > * {
+  height: 100%;
+}
+
 .pl-c-modal__toolbar {
   display: flex;
 }
@@ -59,40 +78,31 @@
  * 1) Closes the modal popup
  */
 .pl-c-modal__close-btn {
-  font-size: 70%;
-  background-color: $pl-color-black;
-  color: $pl-color-gray-50;
-  border: 0;
-  border-radius: $pl-border-radius-med $pl-border-radius-med 0 0;
-  display: inline-block;
-  padding: 0.5rem 0.5rem 0.3rem;
-  margin: 0;
-  text-decoration: none;
-  cursor: pointer;
+  @include linkStyle;
+  
+  @media all and (max-width: $pl-bp-med - 1) {
+    border-radius: 20rem;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+
   z-index: 2;
-  transition: all $pl-animate-quick ease-out;
+  opacity: 0.85;
+  display: flex;
+  justify-content: center;
 
   &:hover,
   &:focus {
-    background-color: $pl-color-gray-87;
-    color: $pl-color-white;
+    opacity: 1;
   }
 
   &:focus,
   &:active {
-    outline: 1px dotted $pl-color-gray-50;
-    outline-offset: -2px;
-  }
-
-  /**
-     * Modal close button inside active modal
-     * 1) Move modal button outside of the modal window
-     */
-  .pl-c-modal.pl-is-active & {
-    bottom: 100%; /* 1 */
+    opacity: 1;
   }
 }
 
+
 .pl-c-modal__cover {
   width: 100%;
   height: 100%;
@@ -109,22 +119,29 @@
   left: 0;
   height: 14px;
   width: 100%;
-  background-color: $pl-color-black;
+  background-color: inherit;
   z-index: 2;
   cursor: ns-resize;
 
   &:after {
     content: '';
     height: 3px;
     width: 50px;
-    border-top: 1px solid $pl-color-gray-50;
-    border-bottom: 1px solid $pl-color-gray-50;
-    transition: border-color $pl-animate-quick ease-out;
+    border-top: 1px solid currentColor;
+    border-bottom: 1px solid currentColor;
+    transition: opacity $pl-animate-normal ease-out;
+    opacity: 0.5;
+    background-color: currentColor;
+    border-radius: 3px;
+  }
+
+  &:hover:after {
+    opacity: 0.8;
   }
 
-  &:hover:after,
-  &:focus:after {
-    border-color: $pl-color-white;
+  &:focus:after,
+  &:active:after {
+    opacity: 0.95;
   }
 }
 

packages/uikit-workshop/src/sass/scss/05-themes/_sidebar-theme.scss

@@ -204,38 +204,6 @@
          * Tools action
          */
     .pl-c-tools__action {
-      padding-left: 0;
-      padding-right: 0;
-    }
-
-    /**
-         * Viewport
-         * 1) Position viewport (that contains all the content)
-         *    so it fits in remaining available space
-         */
-    .pl-c-viewport {
-      top: 0; /* 1 */
-      margin-left: auto;
-      width: calc(
-        100% - #{$pl-sidebar-width}
-      ); // fixes the viewport being off-center (and too wide) when the sidebar is visible.
-    }
-
-    /**
-         * Iframe wrapper div
-         * 1) Wipe out dynamic resizing functionality for sidebar mode
-         */
-    .pl-c-viewport__iframe-wrapper {
-      width: 100% !important; /* 1 */
-    }
-
-    /**
-         * Iframe
-         * 1) Wipe out dynamic resizing  functionality for sidebar mode
-         *    TODO: revisit to find ways to resize
-         */
-    .pl-c-viewport__iframe {
-      width: 100% !important; /* 1 */
     }
 
     /**
@@ -245,7 +213,6 @@
          *    TODO: revisit to find ways to resize
          */
     .pl-c-modal {
-      left: $pl-sidebar-width; /* 1 */
       right: 0; /* 1 */
       width: auto;
     }