UNPKG

@auraxy/react-radio-checkbox

Version:

react radio checkbox component

2 lines (1 loc) 1.04 kB
.switch-wrap{display:inline-block;position:relative;width:40px;height:20px;border-radius:calc(20px / 2);background:#eee;transition:background-color .3s ease-in-out;cursor:pointer}.switch-wrap.activated{background:#125fb2}.switch-wrap.activated .switch{left:calc(40px - 20px * 0.9)}.switch-wrap.disabled{background:#ccc}.switch-wrap.disabled .switch{opacity:0.8}.switch-wrap .switch{position:absolute;top:calc(20px * 0.1);left:calc(20px * 0.1);width:calc(20px * 0.8);height:calc(20px * 0.8);background:#fff;border-radius:50%;transition:left .3s ease-in-out}.radio,.checkbox{display:inline-block;margin:0 15px 0 0;line-height:1.2em;cursor:pointer}.radio.checked,.radio.partial,.checkbox.checked,.checkbox.partial{color:#125fb2}.radio.disabled,.checkbox.disabled{color:#999}.radio .icon,.checkbox .icon{display:inline-block;width:1em;margin:0 5px 0 0;vertical-align:middle}.radio .icon svg,.checkbox .icon svg{display:block;width:100%}.radio-wrap .radio,.radio-wrap .checkbox,.checkbox-wrap .radio,.checkbox-wrap .checkbox{margin-top:size(5)}