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

refactoring toggle and adding pseudo element composer

Browse Source
This commit is contained in:
Alex Windett 2016-12-14 14:35:09 +00:00
parent 20a05c5de6
commit 2ee92dfb52
2 changed files with 27 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
ui/src/components/toggle/index.js
View File

@ -1,4 +1,5 @@
const constants = require('../../shared/constants'); const constants = require('../../shared/constants');
const composers = require('../../shared/composers');
const fns = require('../../shared/functions'); const fns = require('../../shared/functions');
const React = require('react'); const React = require('react');
const Styled = require('styled-components'); const Styled = require('styled-components');
@ -8,6 +9,10 @@ const {
colors colors
} = constants; } = constants;
const {
pseudoEl
} = composers;
const { const {
remcalc, remcalc,
rndId rndId
@ -25,7 +30,7 @@ const StyledLabel = styled.label`
border-radius: ${boxes.borderRadius}; border-radius: ${boxes.borderRadius};
color: #464646; color: #464646;
height: 2.5rem; height: 2.5rem;
width: 110px; width: ${remcalc(110)};
`; `;
const StyledToggleLabel = styled.div` const StyledToggleLabel = styled.div`
@ -35,7 +40,7 @@ const StyledToggleLabel = styled.div`
color: #000000; color: #000000;
height: ${remcalc(54)}; height: ${remcalc(54)};
margin: 0.125rem; margin: 0.125rem;
padding: ${remcalc('12 12 12 0')}; padding-left: ${remcalc(12)};
position: relative; position: relative;
text-align: right; text-align: right;
width: ${remcalc(106)}; width: ${remcalc(106)};
@ -46,19 +51,20 @@ const StyledToggleLabel = styled.div`
font-size: inherit; font-size: inherit;
font-weight: bold; font-weight: bold;
position: absolute; position: absolute;
right: 14px; right: 24px;
top: 13px; top: 19px;
} }
&::after { &::after {
background-color: #FFFFFF; background-color: #FFFFFF;
border-radius: ${boxes.borderRadius}; border-radius: ${boxes.borderRadius};
content: "";
height: ${remcalc(46)}; height: ${remcalc(46)};
left: 3px;
position: absolute;
top: 3px;
width: ${remcalc(46)}; width: ${remcalc(46)};
${pseudoEl({
top: '3px',
left: '3px',
})}
} }
`; `;
@ -70,12 +76,13 @@ const StyledInput = styled.input`
background: ${colors.confirmation}; background: ${colors.confirmation};
border: ${boxes.border.confirmed}; border: ${boxes.border.confirmed};
color: #FFFFFF; color: #FFFFFF;
padding: ${remcalc('12 0 12 12')}; padding-left: 0;
padding-right: ${remcalc(12)};
text-align: left; text-align: left;
&::before { &::before {
content: "On"; content: "On";
left: 14px; left: 20px;
right: auto; right: auto;
} }
@ -101,7 +108,6 @@ const Toggle = ({
style={style} style={style}
> >
<StyledInput <StyledInput
checked={checked}
id={id} id={id}
type='checkbox' type='checkbox'
/> />

10
ui/src/shared/composers.js
View File

@ -37,5 +37,15 @@ module.exports = {
border: ${border}; border: ${border};
border-radius: ${radius}; border-radius: ${radius};
box-shadow: ${shadow}; box-shadow: ${shadow};
`,
pseudoEl: (
positions = {}
) => css`
content: "";
position: absolute;
top: ${positions.top || 'auto'};
right: ${positions.right || 'auto'};
bottom: ${positions.bottom || 'auto'};
left: ${positions.left || 'auto'};
` `
}; };