Merge pull request #324 from rackerlabs/surf-1290-1292

style(less): surf-1290-1292 update styles for JSX compatibility

Author: CITguy

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

@@ -4,12 +4,13 @@ hx-tab {
   border: 1px solid transparent;
   bottom: -1px;
   color: @gray-700;
-  display: inline-block;
+  display: inline-flex;
   flex-shrink: 0;
   font-size: 0.875rem;
   font-weight: 500;
   padding: 0.5rem 0.75rem;
   position: relative;
+  z-index: 0;
 
   &:hover {
     color: @cyan-500;
@@ -18,11 +19,16 @@ hx-tab {
 
   &:active {
     color: @cyan-700;
+    z-index: 1;
   }
 
   &[current] {
     background-color: inherit;
     border-color: @gray-300 @gray-300 transparent;
     color: @cyan-900;
   }
+
+  > * + * {
+    margin-left: 0.25rem;
+  }
 }

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

@@ -3,6 +3,9 @@ hx-tabcontent {
   border-color: @gray-300 transparent;
   border-style: solid;
   border-width: 1px;
+  flex-basis: 14rem; // 224px
+  flex-shrink: 0;
+  min-height: 14rem; // 224px
   overflow: hidden;
 }
 

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

@@ -1,6 +1,6 @@
 hx-tablist {
   background-color: inherit;
-  display: block;
+  display: flex;
   padding: 0 0.5rem;
 }