t-fighting-design/theme/radio.css

Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.

.f-radio{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;outline:none;user-select:none;color:#333;transition:.4s}.f-radio.f-radio__checked .f-radio__text{color:#2d5af1}.f-radio.f-radio__checked .f-radio__circle{border:1px solid #2d5af1}.f-radio.f-radio__checked .f-radio__circle:after{transform:translate(-50%,-50%) scale(2);background:#2d5af1}.f-radio__circle{width:14px;height:14px;border-radius:50%;position:relative;background-color:#fff;border:1px solid #dee5fd;margin-right:7px}.f-radio__circle:after{content:"";position:absolute;width:4px;height:4px;top:50%;left:50%;border-radius:50%;transform:translate(-50%,-50%) scale(0);background:#fff;transition:transform .15s ease-in}.f-radio.f-radio__disabled{cursor:not-allowed}.f-radio.f-radio__disabled .f-radio__text{color:#d7d7d7}.f-radio.f-radio__disabled .f-radio__circle{border-color:#d7d7d7}.f-radio.f-radio__disabled .f-radio__circle:after{background:#d7d7d7}.f-radio.f-radio__margin:not(:last-child){margin-right:22px}