@opentiny/vue-theme/tag/index.css

An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.

.tiny-tag{--tv-Tag-line-height:var(--tv-line-height-number, 1.5);--tv-Tag-font-size-mini:var(--tv-font-size-sm, 12px);--tv-Tag-padding-x-mini:3px;--tv-Tag-padding-y-mini:0;--tv-Tag-border-radius-mini:var(--tv-border-radius-xs, 2px);--tv-Tag-only-icon-font-size-mini:12px;--tv-Tag-only-icon-padding-mini:2px;--tv-Tag-font-size-small:var(--tv-font-size-sm, 12px);--tv-Tag-padding-x-small:3px;--tv-Tag-padding-y-small:0;--tv-Tag-border-radius-small:var(--tv-border-radius-xs, 2px);--tv-Tag-only-icon-font-size-small:12px;--tv-Tag-only-icon-padding-small:2px;--tv-Tag-font-size:var(--tv-font-size-sm, 12px);--tv-Tag-padding-x:7px;--tv-Tag-padding-y:2px;--tv-Tag-border-radius:var(--tv-border-radius-sm, 4px);--tv-Tag-only-icon-font-size:14px;--tv-Tag-only-icon-padding:4px;--tv-Tag-font-size-medium:var(--tv-font-size-default, 14px);--tv-Tag-padding-x-medium:11px;--tv-Tag-padding-y-medium:4.5px;--tv-Tag-border-radius-medium:var(--tv-border-radius-md, 6px);--tv-Tag-only-icon-font-size-medium:16px;--tv-Tag-only-icon-padding-medium:7px;--tv-Tag-text-color-light:var(--tv-color-text, #191919);--tv-Tag-bg-color-light:var(--tv-color-bg, #f5f5f5);--tv-Tag-border-color-light:transparent;--tv-Tag-text-color-dark:var(--tv-color-text-inverse-tint, #ffffff);--tv-Tag-bg-color-dark:var(--tv-color-bg-primary, #191919);--tv-Tag-border-color-dark:var(--tv-color-bg-primary, #191919);--tv-Tag-text-color-plain:var(--tv-color-text, #191919);--tv-Tag-bg-color-plain:transparent;--tv-Tag-border-color-plain:var(--tv-color-border-hover, #191919);--tv-Tag-text-color-light-success:var(--tv-color-success-text, #5cb300);--tv-Tag-bg-color-light-success:var(--tv-color-success-bg-1, #e6f2d5);--tv-Tag-border-color-light-success:var(--tv-color-success-border-1, #e6f2d5);--tv-Tag-text-color-dark-success:var(--tv-color-text-inverse, #ffffff);--tv-Tag-bg-color-dark-success:var(--tv-color-success-bg, #5cb300);--tv-Tag-border-color-dark-success:var(--tv-color-success-bg, #5cb300);--tv-Tag-text-color-plain-success:var(--tv-color-success-text, #5cb300);--tv-Tag-bg-color-plain-success:transparent;--tv-Tag-border-color-plain-success:var(--tv-color-success-border, #5cb300);--tv-Tag-text-color-light-danger:var(--tv-color-error-text, #f23030);--tv-Tag-bg-color-light-danger:var(--tv-color-error-bg-1, #fce3e1);--tv-Tag-border-color-light-danger:var(--tv-color-error-border-1, #fce3e1);--tv-Tag-text-color-dark-danger:var(--tv-color-text-inverse, #ffffff);--tv-Tag-bg-color-dark-danger:var(--tv-color-error-bg, #f23030);--tv-Tag-border-color-dark-danger:var(--tv-color-error-border, #f23030);--tv-Tag-text-color-plain-danger:var(--tv-color-error-text, #f23030);--tv-Tag-bg-color-plain-danger:transparent;--tv-Tag-border-color-plain-danger:var(--tv-color-error-border, #f23030);--tv-Tag-text-color-light-warning:var(--tv-color-warn-text, #ff8800);--tv-Tag-bg-color-light-warning:var(--tv-color-warn-bg-1, #ffebd1);--tv-Tag-border-color-light-warning:var(--tv-color-warn-border-1, #ffebd1);--tv-Tag-text-color-dark-warning:var(--tv-color-text-inverse, #ffffff);--tv-Tag-bg-color-dark-warning:var(--tv-color-warn-bg, #ff8800);--tv-Tag-border-color-dark-warning:var(--tv-color-warn-border, #ff8800);--tv-Tag-text-color-plain-warning:var(--tv-color-warn-text, #ff8800);--tv-Tag-bg-color-plain-warning:transparent;--tv-Tag-border-color-plain-warning:var(--tv-color-warn-border, #ff8800);--tv-Tag-text-color-light-info:var(--tv-color-info-text-1, #1476ff);--tv-Tag-bg-color-light-info:var(--tv-color-info-bg-1, #deecff);--tv-Tag-border-color-light-info:var(--tv-color-info-border-1, #deecff);--tv-Tag-text-color-dark-info:var(--tv-color-text-inverse, #ffffff);--tv-Tag-bg-color-dark-info:var(--tv-color-info-bg, #1476ff);--tv-Tag-border-color-dark-info:var(--tv-color-info-border, #1476ff);--tv-Tag-text-color-plain-info:var(--tv-color-info-text, #1476ff);--tv-Tag-bg-color-plain-info:transparent;--tv-Tag-border-color-plain-info:var(--tv-color-info-border, #1476ff);--tv-Tag-text-color-red:#f23030;--tv-Tag-bg-color-red:#fce3e0;--tv-Tag-text-color-orange:#d96900;--tv-Tag-bg-color-orange:#ffebd1;--tv-Tag-text-color-green:#029931;--tv-Tag-bg-color-green:#d5f2dc;--tv-Tag-text-color-blue:#1476ff;--tv-Tag-bg-color-blue:#deecff;--tv-Tag-text-color-purple:#832fd6;--tv-Tag-bg-color-purple:#f4e0fc;--tv-Tag-text-color-brown:#a64d00;--tv-Tag-bg-color-brown:#ffebd1;--tv-Tag-text-color-grey:#191919;--tv-Tag-bg-color-grey:#e6e6e6;--tv-Tag-text-color-gold:#8f3c00;--tv-Tag-bg-color-gold:linear-gradient(to right, #e8cda4, #f8eddb);--tv-Tag-text-color-disabled:var(--tv-color-text-disabled, #c2c2c2);--tv-Tag-bg-color-disabled:var(--tv-color-bg-disabled, #f0f0f0);--tv-Tag-close-icon-size:var(--tv-icon-size, 16px);--tv-Tag-close-icon-color:var(--tv-color-icon, #808080);--tv-Tag-close-icon-color-hover:var(--tv-color-icon-hover, #191919);--tv-Tag-close-icon-color-disabled:var(--tv-color-icon-disabled, #c2c2c2);--tv-Tag-close-icon-margin-left:var(--tv-space-sm, 4px);--tv-Tag-slot-icon-margin-right:var(--tv-space-sm, 4px);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;vertical-align:middle;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;line-height:var(--tv-Tag-line-height);border:1px solid;max-width:200px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:var(--tv-Tag-font-size);padding:var(--tv-Tag-padding-y) var(--tv-Tag-padding-x);border-radius:var(--tv-Tag-border-radius)}.tiny-tag.tiny-tag--only-icon.tiny-tag--only-icon.tiny-tag--only-icon{padding:var(--tv-Tag-only-icon-padding)}.tiny-tag.tiny-tag--only-icon.tiny-tag--only-icon.tiny-tag--only-icon svg{font-size:var(--tv-Tag-only-icon-font-size);margin-right:0}.tiny-tag.tiny-tag--only-icon.tiny-tag--only-icon{padding:var(--tv-Tag-only-icon-padding)}.tiny-tag.tiny-tag--only-icon.tiny-tag--only-icon svg{font-size:var(--tv-Tag-only-icon-font-size);margin-right:0}.tiny-tag.tiny-tag--mini{font-size:var(--tv-Tag-font-size-mini);padding:var(--tv-Tag-padding-y-mini) var(--tv-Tag-padding-x-mini);border-radius:var(--tv-Tag-border-radius-mini)}.tiny-tag.tiny-tag--mini.tiny-tag--only-icon.tiny-tag--only-icon{padding:var(--tv-Tag-only-icon-padding-mini)}.tiny-tag.tiny-tag--mini.tiny-tag--only-icon.tiny-tag--only-icon svg{font-size:var(--tv-Tag-only-icon-font-size-mini);margin-right:0}.tiny-tag.tiny-tag--small{font-size:var(--tv-Tag-font-size-small);padding:var(--tv-Tag-padding-y-small) var(--tv-Tag-padding-x-small);border-radius:var(--tv-Tag-border-radius-small)}.tiny-tag.tiny-tag--small.tiny-tag--only-icon.tiny-tag--only-icon{padding:var(--tv-Tag-only-icon-padding-small)}.tiny-tag.tiny-tag--small.tiny-tag--only-icon.tiny-tag--only-icon svg{font-size:var(--tv-Tag-only-icon-font-size-small);margin-right:0}.tiny-tag.tiny-tag--medium{font-size:var(--tv-Tag-font-size-medium);padding:var(--tv-Tag-padding-y-medium) var(--tv-Tag-padding-x-medium);border-radius:var(--tv-Tag-border-radius-medium)}.tiny-tag.tiny-tag--medium.tiny-tag--only-icon.tiny-tag--only-icon{padding:var(--tv-Tag-only-icon-padding-medium)}.tiny-tag.tiny-tag--medium.tiny-tag--only-icon.tiny-tag--only-icon svg{font-size:var(--tv-Tag-only-icon-font-size-medium);margin-right:0}.tiny-tag.tiny-tag--light{color:var(--tv-Tag-text-color-light);background-color:var(--tv-Tag-bg-color-light);border-color:var(--tv-Tag-border-color-light)}.tiny-tag.tiny-tag--dark{color:var(--tv-Tag-text-color-dark);background-color:var(--tv-Tag-bg-color-dark);border-color:var(--tv-Tag-border-color-dark)}.tiny-tag.tiny-tag--plain{color:var(--tv-Tag-text-color-plain);background-color:var(--tv-Tag-bg-color-plain);border-color:var(--tv-Tag-border-color-plain)}.tiny-tag.tiny-tag--success.tiny-tag--light{color:var(--tv-Tag-text-color-light-success);background-color:var(--tv-Tag-bg-color-light-success);border-color:var(--tv-Tag-border-color-light-success)}.tiny-tag.tiny-tag--success.tiny-tag--dark{color:var(--tv-Tag-text-color-dark-success);background-color:var(--tv-Tag-bg-color-dark-success);border-color:var(--tv-Tag-border-color-dark-success)}.tiny-tag.tiny-tag--success.tiny-tag--plain{color:var(--tv-Tag-text-color-plain-success);background-color:var(--tv-Tag-bg-color-plain-success);border-color:var(--tv-Tag-border-color-plain-success)}.tiny-tag.tiny-tag--danger.tiny-tag--light{color:var(--tv-Tag-text-color-light-danger);background-color:var(--tv-Tag-bg-color-light-danger);border-color:var(--tv-Tag-border-color-light-danger)}.tiny-tag.tiny-tag--danger.tiny-tag--dark{color:var(--tv-Tag-text-color-dark-danger);background-color:var(--tv-Tag-bg-color-dark-danger);border-color:var(--tv-Tag-border-color-dark-danger)}.tiny-tag.tiny-tag--danger.tiny-tag--plain{color:var(--tv-Tag-text-color-plain-danger);background-color:var(--tv-Tag-bg-color-plain-danger);border-color:var(--tv-Tag-border-color-plain-danger)}.tiny-tag.tiny-tag--warning.tiny-tag--light{color:var(--tv-Tag-text-color-light-warning);background-color:var(--tv-Tag-bg-color-light-warning);border-color:var(--tv-Tag-border-color-light-warning)}.tiny-tag.tiny-tag--warning.tiny-tag--dark{color:var(--tv-Tag-text-color-dark-warning);background-color:var(--tv-Tag-bg-color-dark-warning);border-color:var(--tv-Tag-border-color-dark-warning)}.tiny-tag.tiny-tag--warning.tiny-tag--plain{color:var(--tv-Tag-text-color-plain-warning);background-color:var(--tv-Tag-bg-color-plain-warning);border-color:var(--tv-Tag-border-color-plain-warning)}.tiny-tag.tiny-tag--info.tiny-tag--light{color:var(--tv-Tag-text-color-light-info);background-color:var(--tv-Tag-bg-color-light-info);border-color:var(--tv-Tag-border-color-light-info)}.tiny-tag.tiny-tag--info.tiny-tag--dark{color:var(--tv-Tag-text-color-dark-info);background-color:var(--tv-Tag-bg-color-dark-info);border-color:var(--tv-Tag-border-color-dark-info)}.tiny-tag.tiny-tag--info.tiny-tag--plain{color:var(--tv-Tag-text-color-plain-info);background-color:var(--tv-Tag-bg-color-plain-info);border-color:var(--tv-Tag-border-color-plain-info)}.tiny-tag.tiny-tag--red{color:var(--tv-Tag-text-color-red);background:var(--tv-Tag-bg-color-red)}.tiny-tag.tiny-tag--orange{color:var(--tv-Tag-text-color-orange);background:var(--tv-Tag-bg-color-orange)}.tiny-tag.tiny-tag--green{color:var(--tv-Tag-text-color-green);background:var(--tv-Tag-bg-color-green)}.tiny-tag.tiny-tag--blue{color:var(--tv-Tag-text-color-blue);background:var(--tv-Tag-bg-color-blue)}.tiny-tag.tiny-tag--purple{color:var(--tv-Tag-text-color-purple);background:var(--tv-Tag-bg-color-purple)}.tiny-tag.tiny-tag--brown{color:var(--tv-Tag-text-color-brown);background:var(--tv-Tag-bg-color-brown)}.tiny-tag.tiny-tag--grey{color:var(--tv-Tag-text-color-grey);background:var(--tv-Tag-bg-color-grey)}.tiny-tag.tiny-tag--gold{color:var(--tv-Tag-text-color-gold);background:var(--tv-Tag-bg-color-gold)}.tiny-tag.is-disabled.is-disabled.is-disabled.is-disabled{color:var(--tv-Tag-text-color-disabled);background-color:var(--tv-Tag-bg-color-disabled);cursor:not-allowed}.tiny-tag .tiny-tag__close{font-size:var(--tv-Tag-close-icon-size);fill:var(--tv-Tag-close-icon-color);margin-left:var(--tv-Tag-close-icon-margin-left);cursor:pointer}.tiny-tag .tiny-tag__close:hover{fill:var(--tv-Tag-close-icon-color-hover)}.tiny-tag.is-disabled.is-disabled .tiny-tag__close{fill:var(--tv-Tag-close-icon-color-disabled)}.tiny-tag svg:not(.tiny-tag__close){margin-right:var(--tv-Tag-slot-icon-margin-right);fill:currentColor}