t-fighting-design
Version:
Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.
2 lines (1 loc) • 1.51 kB
CSS
.f-tag{min-width:60px;padding:0 6px;font-size:14px;display:inline-flex;justify-content:center;align-items:center;height:30px;transition:.5;cursor:default}.f-tag.f-tag__default{background:#f0f0f0;color:#333;border:1px solid #333}.f-tag.f-tag__simple.f-tag__default{background:#f8f8f8;color:#333}.f-tag.f-tag__line.f-tag__default{color:#333;background:none}.f-tag.f-tag__primary{background:#2d5af1;color:#fff;border:1px solid #2d5af1}.f-tag.f-tag__simple.f-tag__primary{background:#dee5fd;color:#2d5af1}.f-tag.f-tag__line.f-tag__primary{color:#2d5af1;background:none}.f-tag.f-tag__success{background:#52b35e;color:#fff;border:1px solid #52b35e}.f-tag.f-tag__simple.f-tag__success{background:#e7f4e8;color:#52b35e}.f-tag.f-tag__line.f-tag__success{color:#52b35e;background:none}.f-tag.f-tag__danger{background:#ff0200;color:#fff;border:1px solid #ff0200}.f-tag.f-tag__simple.f-tag__danger{background:#ffd7d6;color:#ff0200}.f-tag.f-tag__line.f-tag__danger{color:#ff0200;background:none}.f-tag.f-tag__warning{background:#fcc202;color:#fff;border:1px solid #fcc202}.f-tag.f-tag__simple.f-tag__warning{background:#fff5d6;color:#fcc202}.f-tag.f-tag__line.f-tag__warning{color:#fcc202;background:none}.f-tag.f-tag__large{height:35px;font-size:15px}.f-tag.f-tag__middle{height:30px;font-size:14px}.f-tag.f-tag__small{height:25px;font-size:13px}.f-tag.f-tag__mini{height:20px;font-size:12px}.f-tag.f-tag__block{display:flex}.f-tag.f-tag__round{border-radius:30px}.f-tag .f-close-btn{margin-left:8px;text-align:right}