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 = ({
-
);
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;
+ }
}