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( ); ``` + + +```js + + + Your Dashboard + + + Make Us Proud + + + + Your Dashboard + + + +

Make Us Proud

+
+
+``` \ 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%; - } -}