refactor <Tab> to avoid min-height hack
This commit is contained in:
parent
b982e2f2e6
commit
3a983b10a5
@ -35,10 +35,12 @@ const Tab = ({
|
||||
<label className={styles.label} htmlFor={tabId}>
|
||||
{title}
|
||||
</label>
|
||||
<div className={styles.panel}>
|
||||
<div className={styles.content}>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -1,5 +1,9 @@
|
||||
.tabs {
|
||||
position: relative;
|
||||
min-height: 200px; /* This part sucks */
|
||||
font-size: 0;
|
||||
|
||||
&:after {
|
||||
clear: both;
|
||||
content: '';
|
||||
display: table;
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user