t-fighting-design
Version:
Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.
2 lines (1 loc) • 1.6 kB
CSS
.f-checkbox{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;outline:none;user-select:none;color:#333;transition:.4s;cursor:pointer}.f-checkbox__box{width:14px;height:14px;border-radius:2px;border:1px solid #dee5fd;display:flex;justify-content:center;align-items:center;position:relative;margin-right:7px}.f-checkbox__text{color:#333;transition:color .3s}.f-checkbox.f-checkbox__bordered{border:1px solid #dee5fd;padding:5px 10px}.f-checkbox.f-checkbox__bordered.f-checkbox__large{padding:8px 14px}.f-checkbox.f-checkbox__bordered.f-checkbox__small{padding:4px 6px}.f-checkbox.f-checkbox__selected{background:#dee5fd}.f-checkbox.f-checkbox__selected .f-checkbox__text{color:#2d5af1}.f-checkbox.f-checkbox__selected.f-checkbox__bordered{border-color:#2d5af1}.f-checkbox.f-checkbox__selected .f-checkbox__box{border:1px solid #2d5af1;background:#2d5af1}.f-checkbox.f-checkbox__selected .f-checkbox__box:after{content:"";width:4px;height:9px;position:absolute;top:0;transform:rotate(45deg) scaleY(1);border:1px solid #fff;border-left:0;border-top:0;animation:f-checkbox-animation .1s ease-in}@keyframes f-checkbox-animation{0%{transform:rotate(45deg) scale(0)}to{transform:rotate(45deg) scale(1)}}.f-checkbox.f-checkbox__selected.f-checkbox__disabled{background:#f0f0f0;border-color:#909090}.f-checkbox.f-checkbox__disabled{cursor:not-allowed}.f-checkbox.f-checkbox__disabled .f-checkbox__text{color:#d7d7d7}.f-checkbox.f-checkbox__disabled .f-checkbox__box{border-color:#d7d7d7;background:#f4f4f4}.f-checkbox.f-checkbox__disabled .f-checkbox__box:after{border-color:#d7d7d7}