fix tabs margins

ui/src/components/tabs/readme.md

@@ -29,3 +29,23 @@ nmodule.exports = ReactDOM.renderToString(
   </Base>
 );
 ```
+
+
+```js
+<Tabs id="dashboard-tabs">
+  <Container>
+    <TabLabel tabs="dashboard-tabs" id="your-dashboard">Your Dashboard</TabLabel>
+    <TabLabel tabs="dashboard-tabs" id="make-us-proud">
+      <Avatar />
+      <span>Make Us Proud</span>
+    </TabLabel>
+  </Container>
+  <TabPanel tabs="dashboard-tabs" tabId="your-dashboard">
+    <Container>Your Dashboard</Container>
+  </TabPanel>
+  <TabPanel tabs="dashboard-tabs" tabId="make-us-proud">
+    <Container>
+      <h1>Make Us Proud</h1>
+    </Container>
+  </TabPanel>
+```

ui/src/components/tabs/style.css

@@ -1,9 +0,0 @@
-.tabs {
-  font-size: 0;
-
-  &::after {
-    clear: both;
-    content: "";
-    display: table;
-  }
-}

ui/src/components/tabs/tab/index.js

@@ -67,6 +67,7 @@ const StyledLabel = styled.label`
   font-size: ${remcalc(20)};
   left: 1px;
   margin-left: -1px;
+  margin-bottom: 0;
   padding: ${remcalc(10)};
   position: relative;
   vertical-align: bottom;
@@ -87,7 +88,7 @@ const StyledContent = styled.div`
   display: block;
   float: left;
   font-size: ${remcalc(16)};
-  margin-top: ${remcalc(-1)};
+  margin-top: ${remcalc(-9)};
   padding: ${remcalc('0 20')};
   width: 100%;
 `;

ui/src/components/tabs/tab/style.css

@@ -1,70 +0,0 @@
-@import "../../../shared/mixins.css";
-
-~boxes: "../../../shared/constants.js";
-~colors: "../../../shared/constants.js";
-
-:root {
-  --border-unchecked: ~boxes.border.unchecked;
-  --border-radius: remcalc(~boxes.borderRadius);
-  --bottom-shaddow: ~boxes.bottomShaddow;
-}
-
-.tab {
-  display: inline;
-
-  & .label {
-    background: #F2F2F2;
-    border: var(--border-unchecked);
-    color: #646464;
-    display: inline-block;
-    font-size: remcalc(20);
-    left: 1px;
-    margin-left: -1px;
-    padding: remcalc(10);
-    position: relative;
-    vertical-align: bottom;
-  }
-
-  & .panel {
-    display: inline-block;
-    height: 0;
-    overflow: hidden;
-    position: relative;
-    width: 0;
-  }
-
-  & .radio_input {
-    clip: rect(0 0 0 0);
-    height: 1px;
-    opacity: 0;
-    width: 1px;
-
-    @add-mixin move-z -1, fixed;
-
-    &:checked {
-      & + .label {
-        background: white;
-        border-bottom-width: 0;
-        padding-bottom: remcalc(11);
-
-        @add-mixin move-z 1;
-      }
-
-      & ~ .panel {
-        display: inline;
-      }
-    }
-  }
-
-  & .content {
-    background: #FAFAFA;
-    border: var(--border-unchecked);
-    box-sizing: border-box;
-    display: block;
-    float: left;
-    font-size: remcalc(16);
-    margin-top: remcalc(-9);
-    padding: remcalc(0 20);
-    width: 100%;
-  }
-}