t-fighting-design
Version:
Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.
2 lines (1 loc) • 1.43 kB
CSS
.f-radio-group{display:inline-flex;justify-content:center;align-items:center;transition:.3s;column-gap:22px}.f-radio-group.f-radio-group__vertical{flex-direction:column;row-gap:10px}.f-radio-group.f-radio-group__large .f-radio{padding:0 30px;font-size:17px;height:40px}.f-radio-group.f-radio-group__large .f-radio .f-radio__text{font-size:16px}.f-radio-group.f-radio-group__middle .f-radio{padding:0 25px;font-size:16px;height:35px}.f-radio-group.f-radio-group__middle .f-radio .f-radio__text{font-size:15px}.f-radio-group.f-radio-group__small .f-radio{padding:0 20px;font-size:15px;height:30px}.f-radio-group.f-radio-group__small .f-radio .f-radio__text{font-size:14px}.f-radio-group.f-radio-group__mini .f-radio{padding:0 15px;font-size:14px;height:25px}.f-radio-group.f-radio-group__mini .f-radio .f-radio__text{font-size:13px}.f-radio-group.f-radio-group__border{column-gap:0;row-gap:0}.f-radio-group.f-radio-group__border .f-radio{border:1px solid #dee5fd}.f-radio-group.f-radio-group__border .f-radio.f-radio__checked{background:#2d5af1}.f-radio-group.f-radio-group__border .f-radio.f-radio__checked .f-radio__text{color:#fff}.f-radio-group.f-radio-group__border .f-radio.f-radio__checked.f-radio__disabled{background:#f0f0f0}.f-radio-group.f-radio-group__border .f-radio.f-radio__checked.f-radio__disabled .f-radio__text{color:#d7d7d7}.f-radio-group.f-radio-group__border .f-radio.f-radio__disabled{border-color:#d7d7d7}