@opentiny/vue-theme/tag-input/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-input{--tv-TagInput-margin-bottom:var(--tv-space-lg, 12px);--tv-TagInput-item-gap:var(--tv-space-md, 8px);--tv-TagInput-collapsed-item-gap:var(--tv-space-sm, 4px);--tv-TagInput-padding:var(--tv-space-sm, 4px);--tv-TagInput-more-icon-safe-space:32px;--tv-TagInput-text-color-disabled:var(--tv-color-text-disabled, #c2c2c2);--tv-TagInput-bg-color-disabled:var(--tv-color-bg-disabled, #f0f0f0);--tv-TagInput-border-color-disabled:var(--tv-color-border-disabled, #e0e0e0);--tv-TagInput-border-radius:var(--tv-border-radius-sm, 4px);--tv-TagInput-text-color:var(--tv-color-text, #191919);--tv-TagInput-bg-color:var(--tv-color-bg-secondary, #ffffff);border:1px solid #ccc;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:var(--tv-TagInput-border-radius);-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;gap:var(--tv-TagInput-item-gap);padding:var(--tv-TagInput-padding)}.tiny-tag-input-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--tv-TagInput-item-gap);-webkit-box-flex:1;-ms-flex:1;flex:1}.tiny-tag-input-suffix-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--tv-TagInput-item-gap)}.tiny-tag-input-disabled{background-color:var(--tv-TagInput-bg-color-disabled);border-color:var(--tv-TagInput-border-color-disabled);cursor:not-allowed}.tiny-tag-input .tiny-tag-input-inner{border:none;outline:0;height:32px;line-height:32px;color:var(--tv-TagInput-text-color);background:var(--tv-TagInput-bg-color);padding:0 var(--tv-TagInput-padding);font-size:14px;width:auto}.tiny-tag-input .tiny-tag-input-inner:disabled{background-color:var(--tv-TagInput-bg-color-disabled)!important}.tiny-tag-input-collapsed-tags{--tv-TagInput-margin-bottom:var(--tv-space-lg, 12px);--tv-TagInput-item-gap:var(--tv-space-md, 8px);--tv-TagInput-collapsed-item-gap:var(--tv-space-sm, 4px);--tv-TagInput-padding:var(--tv-space-sm, 4px);--tv-TagInput-more-icon-safe-space:32px;--tv-TagInput-text-color-disabled:var(--tv-color-text-disabled, #c2c2c2);--tv-TagInput-bg-color-disabled:var(--tv-color-bg-disabled, #f0f0f0);--tv-TagInput-border-color-disabled:var(--tv-color-border-disabled, #e0e0e0);--tv-TagInput-border-radius:var(--tv-border-radius-sm, 4px);--tv-TagInput-text-color:var(--tv-color-text, #191919);--tv-TagInput-bg-color:var(--tv-color-bg-secondary, #ffffff);display:-webkit-box;display:-ms-flexbox;display:flex;gap:var(--tv-TagInput-collapsed-item-gap)}