From f933346f4b4e841f57b583a8c9cac003b754156f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= <mail@sergioramos.me>
Date: Tue, 13 Dec 2016 14:32:04 +0000
Subject: [PATCH] fix tabs margins

---
 ui/src/components/tabs/readme.md     | 20 ++++++++
 ui/src/components/tabs/style.css     |  9 ----
 ui/src/components/tabs/tab/index.js  |  3 +-
 ui/src/components/tabs/tab/style.css | 70 ----------------------------
 4 files changed, 22 insertions(+), 80 deletions(-)
 delete mode 100644 ui/src/components/tabs/style.css
 delete mode 100644 ui/src/components/tabs/tab/style.css

diff --git a/ui/src/components/tabs/readme.md b/ui/src/components/tabs/readme.md
index 86eb9add..95dd79ef 100644
--- a/ui/src/components/tabs/readme.md
+++ b/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>
+```
\ No newline at end of file
diff --git a/ui/src/components/tabs/style.css b/ui/src/components/tabs/style.css
deleted file mode 100644
index 38ca804f..00000000
--- a/ui/src/components/tabs/style.css
+++ /dev/null
@@ -1,9 +0,0 @@
-.tabs {
-  font-size: 0;
-
-  &::after {
-    clear: both;
-    content: "";
-    display: table;
-  }
-}
diff --git a/ui/src/components/tabs/tab/index.js b/ui/src/components/tabs/tab/index.js
index cd464b83..f23a6d3d 100644
--- a/ui/src/components/tabs/tab/index.js
+++ b/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%;
 `;
diff --git a/ui/src/components/tabs/tab/style.css b/ui/src/components/tabs/tab/style.css
deleted file mode 100644
index 46dd6f80..00000000
--- a/ui/src/components/tabs/tab/style.css
+++ /dev/null
@@ -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%;
-  }
-}