mpana/copilot
1
0
Fork 0
mirror of https://github.com/yldio/copilot.git synced 2024-11-14 15:20:06 +02:00
Code Issues Releases Wiki Activity

refactor <Tab> to avoid min-height hack

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/components/tab/index.js
View File

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

63
ui/src/components/tab/style.css
View File

@ -1,43 +1,60 @@
.tab { .tab {
float: left; display: inline;
& .label { & .label {
cursor: pointer;
background: #F2F2F2; background: #F2F2F2;
border: 1px solid #D8D8D8; border: 1px solid #D8D8D8;
color: #646464; color: #646464;
display: inline-block;
font-size: 16px;
font-size: 1rem;
left: 1px;
margin-left: -1px;
padding: 10px;
position: relative; position: relative;
height: 55px; vertical-align: bottom;
padding: 14px 25px;
margin-right: 5px;
z-index: 0;
} }
& .input[type=radio] { & .input[type="radio"] {
visibility: hidden; clip: rect(0 0 0 0);
display: none; 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 { & .content {
border-color: #D8D8D8; box-sizing: border-box;
border-style: solid; display: block;
border-width: 1px 0 0 0; background: white;
padding: 0 20px;
border: 1px solid #D8D8D8;
background: #FAFAFA; background: #FAFAFA;
position: absolute; float: left;
display: none; font-size: 16px;
top: 54px; font-size: 1rem;
left: 0; margin-top: -9px;
right: 0; width: 100%;
bottom: 0;
} }
& .input[type=radio]:checked ~ .label { & .input[type="radio"]:checked + .label {
background: #FAFAFA; background: white;
border-bottom: 1px solid #FAFAFA; border-bottom-width: 0;
padding-bottom: 11px;
z-index: 1; z-index: 1;
} }
& .input[type=radio]:checked ~ .label ~ .content { & .input[type="radio"]:checked ~ .panel {
display: block; display: inline;
} }
} }

8
ui/src/components/tabs/style.css
View File

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