refactor: cross browser layout + overall UI bug fixes

bolt-bot · bolt-bot · commit e1d87ff8ca69 · 2018-10-27T11:49:37.000-04:00
diff --git a/packages/uikit-workshop/src/html/index.html b/packages/uikit-workshop/src/html/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html class="pl-c-html">
 
 <head>
   <title id="title">Pattern Lab</title>
diff --git a/packages/uikit-workshop/src/sass/scss/02-base/_body.scss b/packages/uikit-workshop/src/sass/scss/02-base/_body.scss
@@ -7,11 +7,13 @@
 * 1) These exist indepenedent of any project-specific styles
 * 2) Styled as IDs to avoid collisions with user <body> tag
 */
+.pl-c-html {
+  min-height: 100%;
+}
+
 .pl-c-body {
   margin: 0;
   padding: 0;
   -webkit-text-size-adjust: 100%;
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
+  display: flex; // Required for IE 11 to display overall PL layout correctly
 }
diff --git a/packages/uikit-workshop/src/sass/scss/03-vendor/_prism.scss b/packages/uikit-workshop/src/sass/scss/03-vendor/_prism.scss
@@ -16,6 +16,7 @@ pre[class*='language-'] {
   word-spacing: normal;
   word-break: normal;
   line-height: 1.5;
+  word-wrap: normal; // fixes issue in Safari where code blocks can't scroll due to the code breaking into multiple lines unexpectedly
 
   -moz-tab-size: 4;
   -o-tab-size: 4;
diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_header.scss b/packages/uikit-workshop/src/sass/scss/04-components/_header.scss
@@ -20,6 +20,12 @@
   color: $pl-color-gray-50;
   font-family: $pl-font;
   font-size: $pl-font-size-sm;
+  min-height: 30px; // magic number -- needed for initial skeleton screen styles used in the critical CSS
+
+  @supports(padding: max(0px)) {
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
+  }
 }
 
 /**
diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_navigation.scss b/packages/uikit-workshop/src/sass/scss/04-components/_navigation.scss
@@ -9,8 +9,9 @@
  */
 .pl-c-nav {
   @include accordionPanel;
-  background-color: inherit;
+  background-color: inherit; // allows the nav's children inherit from the parent header
   position: absolute;
+  left: 0; // IE 11 layout broken 
   top: 100%;
   width: 100%;
   display: flex;
@@ -37,7 +38,9 @@
     }
 
     .pl-c-body--theme-sidebar & {
-      box-shadow: none;
+      @media all and (min-width: $pl-bp-med) {
+        box-shadow: none;
+      }
     }
 
     // if nav was opened on smaller screen and screen is resized, it'll be cut off otherwise
@@ -69,6 +72,7 @@
   list-style: none;
   flex-shrink: 0; // helps prevent top-level nav items from occasionally wrapping to multiple lines
   order: 2;
+  background-color: inherit; // allows the nav's children inherit from the parent header
 
   @media all and (min-width: $pl-bp-med) {
     display: flex; /* 2 */
@@ -85,11 +89,17 @@
  * Nav list item
  */
 .pl-c-nav__item {
+  background-color: inherit; // allows the nav's children inherit from the parent header
+  transform: translateZ(0); // helps with more consistent rendering in Safari
   cursor: pointer;
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: center; // vertically align nav items
+
+  .pl-c-body--theme-sidebar & {
+    display: block;
+  }
 }
 
 /**
@@ -107,9 +117,15 @@
  * Nav link
  */
 .pl-c-nav__link {
+  @include linkStyle;
   display: flex;
   align-items: center;
-  @include linkStyle();
+  margin: 0; // remove default button margin in Safari
+
+  // makes link layout / size more consistent in the sidebar layout, especially when display: flex styles are removed for more consistent IE 11 rendering
+  .pl-c-body--theme-sidebar & {
+    width: 100%;
+  }
 }
 
 /**
@@ -126,6 +142,7 @@
  * Nav link
  */
 .pl-c-nav__link--dropdown {
+  -webkit-appearance: none; // remove default button styling
   flex-grow: 1; // fill up extra space in parent nav item, if available
   /**
      * Dropdown caret after accordion handle
@@ -171,6 +188,7 @@
  *    hang over the header
  */
 .pl-c-nav__sublist {
+  background-color: inherit; // allows the nav's children inherit from the parent header
   @include listReset();
 
   @media all and (min-width: $pl-bp-med) {
diff --git a/packages/uikit-workshop/src/sass/scss/05-themes/_light-theme.scss b/packages/uikit-workshop/src/sass/scss/05-themes/_light-theme.scss
@@ -15,18 +15,18 @@
     border-bottom: 1px solid $pl-color-gray-20;
   }
 
-  /**
-     * Nav Sublist dropdown
-     */
-  .pl-c-nav__sublist {
-    background-color: transparent;
-  }
-
   /**
      * Tools dropdown
      */
 
   // don't show border to the left / bottom when in vertical mode
+  @media all and (max-width: $pl-bp-med - 1) {
+    .pl-c-tools__list.pl-is-active {
+      border-bottom: 1px solid $pl-color-gray-20;
+      border-left: 1px solid $pl-color-gray-20;
+    }
+  }
+
   &:not(.pl-c-body--theme-sidebar) {
     .pl-c-tools__list.pl-is-active {
       border-bottom: 1px solid $pl-color-gray-20;
@@ -79,13 +79,6 @@
     background-color: $pl-color-gray-13 !important;
   }
 
-  /**
-     * Typeahead input
-     */
-  .pl-c-typeahead {
-    background-color: $pl-color-gray-13 !important;
-    color: $pl-color-gray-70 !important;
-  }
 
   /**
      * Typeahead input
diff --git a/packages/uikit-workshop/src/sass/scss/05-themes/_sidebar-theme.scss b/packages/uikit-workshop/src/sass/scss/05-themes/_sidebar-theme.scss
@@ -21,6 +21,7 @@
       border-bottom: 0; /* 4 */
       padding: 1rem;
       overflow: auto;
+      -webkit-overflow-scrolling: touch;
       justify-content: space-between;
     }
 
@@ -139,10 +140,9 @@
         *    they appear at the bottom
         */
     .pl-c-controls {
-      display: flex;
+      display: block; // Display flex + flex direction column gives a similar result, but this fixes a bunch of rendering quirks in IE 11
       justify-self: flex-end;
       margin-left: 0;
-      flex-direction: column;
     }
 
     .pl-c-viewport-size {
diff --git a/packages/uikit-workshop/src/scripts/components/pl-layout/pl-layout.scss b/packages/uikit-workshop/src/scripts/components/pl-layout/pl-layout.scss
@@ -3,9 +3,15 @@
 pl-layout {
   display: flex;
   flex-direction: column;
-  height: 100%;
+  width: 100%;
+  min-height: 100vh;
+  max-width: 100vw;
   background-color: $pl-color-gray-13;
-  overflow: hidden; // Fix for IE 11 layout bug
+  
+  // Prevent extra scrollbars in just IE 11
+  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+    overflow: hidden;
+  }
 
   &.pl-c-body--theme-sidebar {
     @media all and (min-width: $pl-bp-med) {
diff --git a/packages/uikit-workshop/src/scripts/components/pl-search/pl-search.scss b/packages/uikit-workshop/src/scripts/components/pl-search/pl-search.scss
@@ -86,6 +86,16 @@ pl-search {
   width: 100%;
   outline-offset: -3px;
   outline-width: 2px;
+  -webkit-appearance: none; // removes default styling (ex. heavy box shadow) in Safari
+
+  @media all and (min-width: 900px) {
+    font-size: inherit;
+  }
+  
+  // Remove the native <input> clear button in IE 11 in lieu of JS-controlled clear button
+  &::-ms-clear {
+    display: none;
+  }
 
   .pl-c-body--theme-sidebar & {
     border-radius: 0;
@@ -101,7 +111,6 @@ pl-search {
   }
 
   @media all and (min-width: $pl-bp-med) {
-    font-size: inherit;
 
     .pl-c-body--theme-sidebar & {
       max-width: none;
