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

improving radio component - removing after pseudo element and using only before with borders, backgrounds and fills

Browse Source
This commit is contained in:
Alex Windett 2016-12-15 14:14:40 +00:00
parent dca6b9e052
commit 5513f58335
1 changed files with 9 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,7 +4,6 @@ const Styled = require('styled-components');
const fns = require('../../shared/functions'); const fns = require('../../shared/functions');
const { const {
boxes,
colors colors
} = constants; } = constants;
@ -13,34 +12,22 @@ const {
} = fns; } = fns;
const { const {
default: styled, default: styled
css
} = Styled; } = Styled;
const CustomInputCircle = css`
content: '';
position: absolute;
width: 8px;
height: 8px;
background: #646464;
top: -14px;
left: 14px;
border-radius: 100%;
`;
const StyledInput = styled.input` const StyledInput = styled.input`
visibility: hidden; visibility: hidden;
display: none; display: none;
&:checked + span::after { &:disabled + span::before,
${CustomInputCircle} &:checked + span::before {
background-color: #646464;
} }
&:disabled + span { &:disabled + span {
background-color: ${colors.inactiveBackground}; background-color: ${colors.inactiveBackground};
} }
&:disabled + span::after { &:disabled + span::before {
opacity: 0.3; opacity: 0.3;
${CustomInputCircle}
} }
`; `;
@ -59,11 +46,10 @@ const StyledSpan = styled.span`
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
width: ${remcalc(24)}; width: 10px;
height: ${remcalc(24)}; height: 10px;
background-color: ${colors.inactiveBackground}; box-shadow: 0 0 0 1px #646464;
box-shadow: ${boxes.insetShaddow}; border: 8px solid white;
border: ${boxes.border.unchecked};
top: 5px; top: 5px;
left: 5px; left: 5px;
border-radius: 100%; border-radius: 100%;