Merge pull request #338 from rackerlabs/fix-tab-layout

fix(Tabs): correct tabs layout

Author: CITguy

src/helix-ui/styles/elements/hx-tabcontent.less

@@ -3,29 +3,14 @@ hx-tabcontent {
   border-color: @gray-300 transparent;
   border-style: solid;
   border-width: 1px;
-  flex-basis: 0px;
-  flex-shrink: 0;
+  display: block;
   min-height: 14rem; // 224px
-  overflow: hidden;
-}
+  overflow-y: auto;
 
-// Legacy Browsers (IE and early Edge)
-hx-tabcontent {
-  // as tabset grid cell
+  // Legacy Browsers (IE and early Edge)
   -ms-grid-row: 2;
   -ms-grid-column: 1;
 
-  // as sub-grid container
-  display: -ms-grid;
-  -ms-grid-rows: 1fr;
-  -ms-grid-columns: 1fr;
-}
-
-// Evergreen Browsers
-@supports (--is-modern: true) {
-  hx-tabcontent {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-  }
+  // Evergreen Browsers
+  grid-area: content;
 }

src/helix-ui/styles/elements/hx-tablist.less

@@ -2,17 +2,11 @@ hx-tablist {
   background-color: inherit;
   display: flex;
   padding: 0 0.5rem;
-}
 
-// Legacy Browsers (IE and early Edge)
-hx-tablist {
+  // Legacy Browsers (IE and early Edge)
   -ms-grid-row: 1;
   -ms-grid-column: 1;
-}
 
-// Evergreen Browsers
-@supports (--is-modern: true) {
-  hx-tablist {
-    flex-grow: 0;
-  }
+  // Evergreen Browsers
+  grid-area: list;
 }

src/helix-ui/styles/elements/hx-tabpanel.less

@@ -1,18 +1,9 @@
-@import (reference) './hx-reveal.less';
-
 hx-tabpanel {
-  &:extend(hx-reveal all);
   background-color: transparent;
-  overflow-y: auto;
+  display: none;
   padding: 1.5rem 1.25rem;
 
   &[open] {
     display: block;
   }
 }
-
-// Legacy Browsers (IE and early Edge)
-hx-tabpanel {
-  -ms-grid-row: 1;
-  -ms-grid-column: 1;
-}

src/helix-ui/styles/elements/hx-tabset.less

@@ -1,19 +1,17 @@
 hx-tabset {
   background-color: inherit;
   height: 100%;
-}
 
-// Legacy Browsers (IE and early Edge)
-hx-tabset {
+  // Legacy Browsers (IE and early Edge)
   display: -ms-grid;
   -ms-grid-rows: auto 1fr;
   -ms-grid-columns: 1fr;
-}
 
-// Evergreen Browsers
-@supports (--is-modern: true) {
-  hx-tabset {
-    display: flex;
-    flex-direction: column;
-  }
+  // Evergreen Browsers
+  display: grid;
+  grid-template-rows: auto 1fr;
+  grid-template-columns: 1fr;
+  grid-template-areas:
+    'list'
+    'content';
 }