diff --git a/ui/src/components/tab/index.js b/ui/src/components/tab/index.js index a3831599..300ea4ff 100644 --- a/ui/src/components/tab/index.js +++ b/ui/src/components/tab/index.js @@ -35,8 +35,10 @@ const Tab = ({ -
- {children} +
+
+ {children} +
); diff --git a/ui/src/components/tab/style.css b/ui/src/components/tab/style.css index d4a05be3..3b684fd0 100644 --- a/ui/src/components/tab/style.css +++ b/ui/src/components/tab/style.css @@ -1,43 +1,60 @@ .tab { - float: left; + display: inline; & .label { - cursor: pointer; background: #F2F2F2; border: 1px solid #D8D8D8; color: #646464; + display: inline-block; + font-size: 16px; + font-size: 1rem; + left: 1px; + margin-left: -1px; + padding: 10px; position: relative; - height: 55px; - padding: 14px 25px; - margin-right: 5px; - z-index: 0; + vertical-align: bottom; } - & .input[type=radio] { - visibility: hidden; - display: none; + & .input[type="radio"] { + clip: rect(0 0 0 0); + height: 1px; + opacity: 0; + position: fixed; + width: 1px; + z-index: -1; + } + + & .panel { + display: inline; + display: inline-block; + overflow: hidden; + position: relative; + height: 0; + width: 0; } & .content { - border-color: #D8D8D8; - border-style: solid; - border-width: 1px 0 0 0; + box-sizing: border-box; + display: block; + background: white; + padding: 0 20px; + border: 1px solid #D8D8D8; background: #FAFAFA; - position: absolute; - display: none; - top: 54px; - left: 0; - right: 0; - bottom: 0; + float: left; + font-size: 16px; + font-size: 1rem; + margin-top: -9px; + width: 100%; } - & .input[type=radio]:checked ~ .label { - background: #FAFAFA; - border-bottom: 1px solid #FAFAFA; + & .input[type="radio"]:checked + .label { + background: white; + border-bottom-width: 0; + padding-bottom: 11px; z-index: 1; } - & .input[type=radio]:checked ~ .label ~ .content { - display: block; + & .input[type="radio"]:checked ~ .panel { + display: inline; } } diff --git a/ui/src/components/tabs/style.css b/ui/src/components/tabs/style.css index e1b2d9bf..0a31c29a 100644 --- a/ui/src/components/tabs/style.css +++ b/ui/src/components/tabs/style.css @@ -1,5 +1,9 @@ .tabs { - position: relative; - min-height: 200px; /* This part sucks */ - clear: both; + font-size: 0; + + &:after { + clear: both; + content: ''; + display: table; + } }