@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
2 lines (1 loc) • 2.01 kB
CSS
.f-radio-button,.f-radio-tag{color:#2d2f33;background:#fff;border:1px solid #e8ebf2}.f-radio-button-success:hover{color:#6cc77f;background:#fff;border-color:#6cc77f;box-shadow:0 2px 6px #1f23290f}.f-radio-button-warning:hover{color:#f5a144;background:#fff;border-color:#f5a144;box-shadow:0 2px 6px #1f23290f}.f-radio-button-danger:hover{color:#f46160;background:#fff;border-color:#f46160;box-shadow:0 2px 6px #1f23290f}.f-radio-button-primary:hover{color:#2a87ff;background:#fff;border-color:#2a87ff;box-shadow:0 2px 6px #1f23290f}.f-radio-button-success.active{color:#fff;background:#6cc77f;border-color:#6cc77f}.f-radio-button-warning.active{color:#fff;background:#f5a144;border-color:#f5a144}.f-radio-button-danger.active{color:#fff;background:#f46160;border-color:#f46160}.f-radio-button-primary.active{color:#fff;background:#2a87ff;border-color:#2a87ff}.f-radio-tag{display:inline-block;position:relative;margin-right:8px;padding:3px 16px;border:1px solid rgba(0,0,0,.15);border-radius:2px;overflow:hidden;cursor:pointer;margin-bottom:0}.f-radio-icon{position:absolute;display:block;right:-4px;bottom:-3px;font-size:12px;color:#fff}.f-radio-tag>.tip{position:absolute;display:block;right:0;bottom:0;width:14px;height:14px;border:7px solid #dadada;border-top:7px solid transparent;border-left:7px solid transparent}.f-radio-tag-success.active{color:#6cc77f;border-color:#6cc77f;background:#6cc77f0d}.f-radio-tag-warning.active{color:#f5a144;border-color:#f5a144;background:#f5a1440d}.f-radio-tag-danger.active{color:#f46160;border-color:#f56161;background:#f561610d}.f-radio-tag-primary.active{color:#2a87ff;border-color:#2a87ff;background:#2a87ff0d}.f-radio-tag-success.active>.tip{border-right-color:#6cc77f;border-bottom-color:#6cc77f}.f-radio-tag-warning.active>.tip{border-right-color:#f5a144;border-bottom-color:#f5a144}.f-radio-tag-danger.active>.tip{border-right-color:#f46160;border-bottom-color:#f46160}.f-radio-tag-primary.active>.tip{border-right-color:#2a87ff;border-bottom-color:#2a87ff}