tweak-tools
Version:
Tweak your React projects until awesomeness
50 lines (49 loc) • 1.27 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.StyledInputWrapper = void 0;
const styles_1 = require("../../styles");
exports.StyledInputWrapper = (0, styles_1.styled)('div', {
position: 'relative',
$flex: '',
height: '$rowHeight',
input: {
$reset: '',
height: 0,
width: 0,
opacity: 0,
margin: 0,
},
label: {
position: 'relative',
$flexCenter: '',
userSelect: 'none',
cursor: 'pointer',
height: '$checkboxSize',
width: '$checkboxSize',
backgroundColor: '$elevation3',
borderRadius: '$sm',
$hover: '',
},
'input:focus + label': { $focusStyle: '' },
'input:focus:checked + label, input:checked + label:hover': {
$hoverStyle: '$accent3',
},
'input + label:active': {
backgroundColor: '$accent1',
},
'input:checked + label:active': {
backgroundColor: '$accent1',
},
'label > svg': {
display: 'none',
width: '90%',
height: '90%',
stroke: '$highlight3',
},
'input:checked + label': {
backgroundColor: '$accent2',
},
'input:checked + label > svg': {
display: 'block',
},
});