vue-amazing-ui/lib/tag/Tag.css

An Amazing Vue3 UI Components Library, Using TypeScript.

.tag-wrap[data-v-8d9f90ea]{display:inline-flex;align-items:center;height:24px;font-size:14px;color:#000000e0;padding-inline:7px;white-space:nowrap;background:#00000005;border:1px solid #d9d9d9;border-radius:6px;transition:all .2s;text-align:start}.tag-wrap .tag-icon[data-v-8d9f90ea]{margin-right:5px;height:100%;display:inline-flex;align-items:center}.tag-wrap .tag-icon[data-v-8d9f90ea] svg{fill:currentColor}.tag-wrap .tag-label[data-v-8d9f90ea]{height:100%;display:inline-flex;align-items:center}.tag-wrap .plus-svg[data-v-8d9f90ea]{display:inline-flex;align-items:center;font-size:14px;color:#000000e0;fill:currentColor;font-style:normal;line-height:0;text-align:center;vertical-align:-.175em;transition:color .2s}.tag-wrap .tag-close[data-v-8d9f90ea]{margin-left:3px;display:inline-flex;align-items:center;height:100%;vertical-align:top;font-style:normal;line-height:0;text-align:center;cursor:pointer}.tag-wrap .tag-close .close-svg[data-v-8d9f90ea]{display:inline-block;font-size:12px;color:#00000073;fill:currentColor;transition:all .2s}.tag-wrap .tag-close .close-svg[data-v-8d9f90ea]:hover{color:#000000e0}.tag-small[data-v-8d9f90ea]{height:22px;font-size:12px;line-height:20px;border-radius:4px}.tag-small .plus-svg[data-v-8d9f90ea]{font-size:12px}.tag-small .tag-close[data-v-8d9f90ea]{font-size:10px}.tag-large[data-v-8d9f90ea]{height:28px;line-height:26px}.tag-large .tag-close[data-v-8d9f90ea]{font-size:14px;vertical-align:-.16em}.tag-plus[data-v-8d9f90ea]{background:#fff;border-style:dashed;padding-inline:10px;text-align:center;cursor:pointer}.tag-plus[data-v-8d9f90ea]:hover{border-color:#1677ff}.tag-plus:hover .plus-svg[data-v-8d9f90ea]{color:#1677ff}.tag-input[data-v-8d9f90ea]{width:86px;color:#000000e0;height:24px;font-size:14px;line-height:22px;padding:0 8px;position:relative;display:inline-block;min-width:0;background-color:#fff;border:1px solid #d9d9d9;border-radius:6px;outline:none;transition:all .2s}.tag-input[data-v-8d9f90ea]:focus{border-color:#4096ff;box-shadow:0 0 0 2px #0591ff1a;border-right-width:1px;outline:0}.input-small[data-v-8d9f90ea]{width:78px;height:22px;font-size:12px;line-height:20px;padding:0 6px;border-radius:4px}.input-large[data-v-8d9f90ea]{width:90px;height:28px;line-height:26px}.tag-success[data-v-8d9f90ea]{color:#52c41a;background:#f6ffed;border-color:#b7eb8f}.tag-success[data-v-8d9f90ea] svg{color:#52c41a;fill:currentColor}.tag-processing[data-v-8d9f90ea]{color:#1677ff;background:#e6f4ff;border-color:#91caff}.tag-processing[data-v-8d9f90ea] svg{color:#1677ff;fill:currentColor}.tag-error[data-v-8d9f90ea]{color:#ff4d4f;background:#fff2f0;border-color:#ffccc7}.tag-error[data-v-8d9f90ea] svg{color:#ff4d4f;fill:currentColor}.tag-warning[data-v-8d9f90ea]{color:#faad14;background:#fffbe6;border-color:#ffe58f}.tag-warning[data-v-8d9f90ea] svg{color:#faad14;fill:currentColor}.tag-pink[data-v-8d9f90ea]{color:#c41d7f;background:#fff0f6;border-color:#ffadd2}.tag-pink[data-v-8d9f90ea] svg{color:#c41d7f;fill:currentColor}.tag-red[data-v-8d9f90ea]{color:#cf1322;background:#fff1f0;border-color:#ffa39e}.tag-red[data-v-8d9f90ea] svg{color:#cf1322;fill:currentColor}.tag-yellow[data-v-8d9f90ea]{color:#d4b106;background:#feffe6;border-color:#fffb8f}.tag-yellow[data-v-8d9f90ea] svg{color:#d4b106;fill:currentColor}.tag-orange[data-v-8d9f90ea]{color:#d46b08;background:#fff7e6;border-color:#ffd591}.tag-orange[data-v-8d9f90ea] svg{color:#d46b08;fill:currentColor}.tag-green[data-v-8d9f90ea]{color:#389e0d;background:#f6ffed;border-color:#b7eb8f}.tag-green[data-v-8d9f90ea] svg{color:#389e0d;fill:currentColor}.tag-cyan[data-v-8d9f90ea]{color:#08979c;background:#e6fffb;border-color:#87e8de}.tag-cyan[data-v-8d9f90ea] svg{color:#08979c;fill:currentColor}.tag-blue[data-v-8d9f90ea]{color:#0958d9;background:#e6f4ff;border-color:#91caff}.tag-blue[data-v-8d9f90ea] svg{color:#0958d9;fill:currentColor}.tag-purple[data-v-8d9f90ea]{color:#531dab;background:#f9f0ff;border-color:#d3adf7}.tag-purple[data-v-8d9f90ea] svg{color:#531dab;fill:currentColor}.tag-geekblue[data-v-8d9f90ea]{color:#1d39c4;background:#f0f5ff;border-color:#adc6ff}.tag-geekblue[data-v-8d9f90ea] svg{color:#1d39c4;fill:currentColor}.tag-magenta[data-v-8d9f90ea]{color:#eb2f96;background:#fff0f6;border-color:#ffadd2}.tag-magenta[data-v-8d9f90ea] svg{color:#eb2f96;fill:currentColor}.tag-volcano[data-v-8d9f90ea]{color:#d4380d;background:#fff2e8;border-color:#ffbb96}.tag-volcano[data-v-8d9f90ea] svg{color:#d4380d;fill:currentColor}.tag-gold[data-v-8d9f90ea]{color:#d48806;background:#fffbe6;border-color:#ffe58f}.tag-gold[data-v-8d9f90ea] svg{color:#d48806;fill:currentColor}.tag-lime[data-v-8d9f90ea]{color:#7cb305;background:#fcffe6;border-color:#eaff8f}.tag-lime[data-v-8d9f90ea] svg{color:#7cb305;fill:currentColor}.tag-borderless[data-v-8d9f90ea]{border-color:transparent}.tag-has-color[data-v-8d9f90ea]{color:#fff;border-color:transparent}.tag-has-color .tag-close .close-svg[data-v-8d9f90ea]{color:#ffffffd9}.tag-has-color .tag-close .close-svg[data-v-8d9f90ea]:hover{color:#fff}.tag-hidden[data-v-8d9f90ea]{display:none}