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

further refactoing of radio input

Browse Source
This commit is contained in:
Alex Windett 2016-12-14 13:53:19 +00:00
parent 0238d007b8
commit 20a05c5de6
1 changed files with 25 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
ui/src/components/radio/index.js
View File

@ -1,26 +1,28 @@
const React = require('react'); const React = require('react');
const constants = require('../../shared/constants'); const constants = require('../../shared/constants');
const Styled = require('styled-components'); const Styled = require('styled-components');
const fns = require('../../shared/functions');
const { const {
boxes boxes
} = constants; } = constants;
const {
remcalc
} = fns;
const { const {
default: styled, default: styled,
} = Styled; } = Styled;
let top;
const left = top = 5;
const CustomInputCircle = ` const CustomInputCircle = `
content: ''; content: '';
position: absolute; position: absolute;
width: 8px; width: 14px;
height: 8px; height: 14px;
background: rgb(100, 100, 100); background: #646464;
top: ${top * 2}px; top: -16px;
left: ${left * 2}px; left: 12px;
border-radius: 100%; border-radius: 100%;
`; `;
@ -32,7 +34,7 @@ const StyledInput = styled.input`
${CustomInputCircle} ${CustomInputCircle}
} }
&:disabled + span { &:disabled + span {
background-color: rgb(249, 249, 249); background-color: #F9f9F9;
} }
&:disabled + span::after { &:disabled + span::after {
opacity: 0.3; opacity: 0.3;
@ -43,20 +45,25 @@ const StyledInput = styled.input`
const StyledLabel = styled.label` const StyledLabel = styled.label`
`; `;
const StyledContent = styled.div`
margin-left: ${remcalc(45)};
padding-top: ${remcalc(10)};
`;
const StyledSpan = styled.span` const StyledSpan = styled.span`
color: rgb(100, 100, 100); color: #646464;
position: relative; position: relative;
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
width: 16px; width: ${remcalc(26)};
height: 16px; height: ${remcalc(26)};
background-color: rgb(255, 255, 255); background-color: #FFFFFF;
box-shadow: ${boxes.insetShaddow}; box-shadow: ${boxes.insetShaddow};
border: ${boxes.border.unchecked}; border: ${boxes.border.unchecked};
top: ${top}px; top: 5px;
left: ${left}px; left: 5px;
border-radius: 100%; border-radius: 100%;
} }
@ -85,8 +92,6 @@ const Radio = ({
tabIndex, tabIndex,
value value
}) => { }) => {
// debugger
// const _children = label && children ? children : null;
return ( return (
<StyledLabel> <StyledLabel>
@ -106,7 +111,9 @@ const Radio = ({
value={value} value={value}
/> />
<StyledSpan> <StyledSpan>
{children} <StyledContent>
{children}
</StyledContent>
</StyledSpan> </StyledSpan>
</StyledLabel> </StyledLabel>
); );