Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | 13x 13x 2x 13x | import styled, { css } from 'styled-components'; import { number } from 'prop-types'; import { getToggleStyle } from '../formSelectors'; import { rem } from '../../Typography'; const propTypes = { h: number.isRequired, }; const ToggleCheckbox = styled.input.attrs({ type: 'checkbox', })` position: absolute; width: 1px; height: 1px; margin: -1px; border: 0; clip: rect(0 0 0 0); overflow: hidden; & + span:before { left: ${rem(4)}; } ${({ theme, h }) => css` & + span { ${getToggleStyle(theme, 'normal')} } &:checked + span { ${getToggleStyle(theme, 'checked')} } &:checked + span:before { left: calc(100% - ${rem(h - 4)}); } `} `; ToggleCheckbox.propTypes = propTypes; export default ToggleCheckbox; |