Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

updating tabs css

Browse Source
This commit is contained in:
Alex Windett 2017-01-12 11:07:47 +00:00
parent a5bb1f9dda
commit 92887e12c5
2 changed files with 21 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
ui/src/components/tabs/story.js
View File

@ -6,15 +6,18 @@ const {
const Tabs = require('./'); const Tabs = require('./');
const Tab = require('./tab'); const Tab = require('./tab');
const Base = require('../base');
storiesOf('Tabs', module) storiesOf('Tabs', module)
.add('Default', () => ( .add('Default', () => (
<Base>
<Tabs name='my-tab-group'> <Tabs name='my-tab-group'>
<Tab title='Containers'> <Tab title='Your Dashboard'>
<h1>Containers</h1> <h1>Containers</h1>
</Tab> </Tab>
<Tab title='Users'> <Tab title='YLD'>
<h1>User</h1> <h1>User</h1>
</Tab> </Tab>
</Tabs> </Tabs>
</Base>
)); ));

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

@ -10,7 +10,8 @@ const {
} = composers; } = composers;
const { const {
boxes boxes,
colors
} = constants; } = constants;
const { const {
@ -44,9 +45,8 @@ const StyledRadio = styled.input`
&:checked { &:checked {
& + .${classNames.label} { & + .${classNames.label} {
background: #FAFAFA; background: ${colors.brandInactive};
border-bottom-width: 0; border-bottom-width: 0;
padding-bottom: ${remcalc(11)};
${moveZ({ ${moveZ({
amount: 1 amount: 1
@ -60,16 +60,12 @@ const StyledRadio = styled.input`
`; `;
const StyledLabel = styled.label` const StyledLabel = styled.label`
background: #F2F2F2; background: transparent;
border: ${boxes.border.unchecked}; border: 1px solid #D8D8D8;
color: #646464;
display: inline-block; display: inline-block;
font-size: ${remcalc(20)}; font-size: ${remcalc(20)};
left: 1px; padding: ${remcalc('12 25')};
margin-left: -1px; margin-right: 0.5rem;
margin-bottom: 0;
padding: ${remcalc(10)};
position: relative;
vertical-align: bottom; vertical-align: bottom;
`; `;
@ -82,14 +78,15 @@ const StyledPanel = styled.div`
`; `;
const StyledContent = styled.div` const StyledContent = styled.div`
background: #FAFAFA; background: ${colors.brandInactive};
border: ${boxes.border.unchecked}; border: ${boxes.border.unchecked};
box-sizing: border-box; box-sizing: border-box;
box-shadow: 0 -1px 26px 0 rgba(0, 0, 0, 0.2);
display: block; display: block;
float: left; float: left;
font-size: ${remcalc(16)}; font-size: ${remcalc(16)};
margin-top: ${remcalc(-9)}; margin-top: ${remcalc(-9)};
padding: ${remcalc('0 20')}; padding: ${remcalc('20 25')};
width: 100%; width: 100%;
`; `;