1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-13 06:40:06 +02:00

refactor <Tab> to avoid min-height hack

This commit is contained in:
Sérgio Ramos 2016-10-27 11:14:47 +01:00
parent b982e2f2e6
commit 3a983b10a5
3 changed files with 51 additions and 28 deletions

View File

@ -35,8 +35,10 @@ const Tab = ({
<label className={styles.label} htmlFor={tabId}>
{title}
</label>
<div className={styles.content}>
{children}
<div className={styles.panel}>
<div className={styles.content}>
{children}
</div>
</div>
</div>
);

View File

@ -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;
}
}

View File

@ -1,5 +1,9 @@
.tabs {
position: relative;
min-height: 200px; /* This part sucks */
clear: both;
font-size: 0;
&:after {
clear: both;
content: '';
display: table;
}
}