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

neating up colors with constnats and correcting indentation

Browse Source
This commit is contained in:
Alex Windett 2016-12-15 10:49:18 +00:00
parent 294a9e26a9
commit b67c7d9026
1 changed files with 26 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,7 +4,8 @@ const Styled = require('styled-components');
const fns = require('../../shared/functions'); const fns = require('../../shared/functions');
const { const {
boxes boxes,
colors
} = constants; } = constants;
const { const {
@ -18,11 +19,11 @@ const {
const CustomInputCircle = ` const CustomInputCircle = `
content: ''; content: '';
position: absolute; position: absolute;
width: 14px; width: 8px;
height: 14px; height: 8px;
background: #646464; background: #646464;
top: -16px; top: -14px;
left: 12px; left: 14px;
border-radius: 100%; border-radius: 100%;
`; `;
@ -34,7 +35,7 @@ const StyledInput = styled.input`
${CustomInputCircle} ${CustomInputCircle}
} }
&:disabled + span { &:disabled + span {
background-color: #F9f9F9; background-color: ${colors.inactiveBackground};
} }
&:disabled + span::after { &:disabled + span::after {
opacity: 0.3; opacity: 0.3;
@ -51,27 +52,27 @@ const StyledContent = styled.div`
`; `;
const StyledSpan = styled.span` const StyledSpan = styled.span`
color: #646464; color: #646464;
position: relative; position: relative;
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
width: ${remcalc(26)}; width: ${remcalc(24)};
height: ${remcalc(26)}; height: ${remcalc(24)};
background-color: #FFFFFF; background-color: ${colors.inactiveBackground};
box-shadow: ${boxes.insetShaddow}; box-shadow: ${boxes.insetShaddow};
border: ${boxes.border.unchecked}; border: ${boxes.border.unchecked};
top: 5px; top: 5px;
left: 5px; left: 5px;
border-radius: 100%; border-radius: 100%;
} }
&:hover { &:hover {
&::after { &::after {
opacity: 0.3; opacity: 0.3;
}
} }
}
`; `;
const Radio = ({ const Radio = ({