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

fix tabs margins

Browse Source
This commit is contained in:
Sérgio Ramos 2016-12-13 14:32:04 +00:00
parent fffa1192d6
commit f933346f4b
4 changed files with 22 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
ui/src/components/tabs/readme.md
View File

@ -29,3 +29,23 @@ nmodule.exports = ReactDOM.renderToString(
</Base> </Base>
); );
``` ```
```js
<Tabs id="dashboard-tabs">
<Container>
<TabLabel tabs="dashboard-tabs" id="your-dashboard">Your Dashboard</TabLabel>
<TabLabel tabs="dashboard-tabs" id="make-us-proud">
<Avatar />
<span>Make Us Proud</span>
</TabLabel>
</Container>
<TabPanel tabs="dashboard-tabs" tabId="your-dashboard">
<Container>Your Dashboard</Container>
</TabPanel>
<TabPanel tabs="dashboard-tabs" tabId="make-us-proud">
<Container>
<h1>Make Us Proud</h1>
</Container>
</TabPanel>
```

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

@ -1,9 +0,0 @@
.tabs {
font-size: 0;
&::after {
clear: both;
content: "";
display: table;
}
}

3
ui/src/components/tabs/tab/index.js
View File

@ -67,6 +67,7 @@ const StyledLabel = styled.label`
font-size: ${remcalc(20)}; font-size: ${remcalc(20)};
left: 1px; left: 1px;
margin-left: -1px; margin-left: -1px;
margin-bottom: 0;
padding: ${remcalc(10)}; padding: ${remcalc(10)};
position: relative; position: relative;
vertical-align: bottom; vertical-align: bottom;
@ -87,7 +88,7 @@ const StyledContent = styled.div`
display: block; display: block;
float: left; float: left;
font-size: ${remcalc(16)}; font-size: ${remcalc(16)};
margin-top: ${remcalc(-1)}; margin-top: ${remcalc(-9)};
padding: ${remcalc('0 20')}; padding: ${remcalc('0 20')};
width: 100%; width: 100%;
`; `;

70
ui/src/components/tabs/tab/style.css
View File

@ -1,70 +0,0 @@
@import "../../../shared/mixins.css";
~boxes: "../../../shared/constants.js";
~colors: "../../../shared/constants.js";
:root {
--border-unchecked: ~boxes.border.unchecked;
--border-radius: remcalc(~boxes.borderRadius);
--bottom-shaddow: ~boxes.bottomShaddow;
}
.tab {
display: inline;
& .label {
background: #F2F2F2;
border: var(--border-unchecked);
color: #646464;
display: inline-block;
font-size: remcalc(20);
left: 1px;
margin-left: -1px;
padding: remcalc(10);
position: relative;
vertical-align: bottom;
}
& .panel {
display: inline-block;
height: 0;
overflow: hidden;
position: relative;
width: 0;
}
& .radio_input {
clip: rect(0 0 0 0);
height: 1px;
opacity: 0;
width: 1px;
@add-mixin move-z -1, fixed;
&:checked {
& + .label {
background: white;
border-bottom-width: 0;
padding-bottom: remcalc(11);
@add-mixin move-z 1;
}
& ~ .panel {
display: inline;
}
}
}
& .content {
background: #FAFAFA;
border: var(--border-unchecked);
box-sizing: border-box;
display: block;
float: left;
font-size: remcalc(16);
margin-top: remcalc(-9);
padding: remcalc(0 20);
width: 100%;
}
}