@layui/layui-vue/es/tagInput/index.css

a component library for Vue 3 base on layui-vue

.layui-tag{--layui-tag-bg-color: #fafafa;--layui-tag-border-color: #f0f0f0;--layui-tag-hover-color: #FFF;--layui-tag-text-color: currentColor;display:inline-flex;align-items:baseline;vertical-align:middle;box-sizing:border-box;height:26px;line-height:26px;padding:0 8px;font-size:14px;font-weight:500;color:var(--layui-tag-text-color);background-color:var(--layui-tag-bg-color);border-width:1px;border-style:solid;border-color:transparent;border-radius:var(--global-border-radius)}.layui-tag-icon{margin-right:4px}.layui-tag-bordered{border-color:var(--layui-tag-border-color)}.layui-tag-disabled{opacity:.4;cursor:not-allowed}.layui-tag-disabled .layui-tag-close-icon .layui-icon:hover{cursor:not-allowed!important;opacity:1}.layui-tag-shap-square{border-radius:var(--global-border-radius)}.layui-tag-shap-round{border-radius:12px}.layui-tag .layui-tag-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layui-tag .layui-tag-close-icon{margin-left:4px;font-size:14px}.layui-tag .layui-tag-close-icon .layui-icon:hover{cursor:pointer;opacity:.5}.layui-tag-size-lg{height:30px;font-size:14px;line-height:30px}.layui-tag-size-md{height:26px;font-size:14px;line-height:26px}.layui-tag .layui-icon{font-size:14px}.layui-tag-size-sm{height:22px;font-size:12px;line-height:22px}.layui-tag-size-xs{height:18px;font-size:12px;line-height:18px}.layui-tag .layui-icon{font-size:12px}.layui-tag-primary{--layui-tag-bg-color: var(--global-primary-color);--layui-tag-border-color: transparent;--layui-tag-hover-color: var(--global-primary-color);--layui-tag-text-color: #ffffff}.layui-tag-primary-bordered{--layui-tag-border-color: var(--global-primary-color)}.layui-tag-primary.layui-tag-variant-light{--layui-tag-bg-color: adjust(var(--global-primary-color), 90%);--layui-tag-border-color: transparent;--layui-tag-hover-color: adjust(var(--global-primary-color), 90%);--layui-tag-text-color: var(--global-primary-color)}.layui-tag-primary.layui-tag-variant-light-bordered{--layui-tag-border-color: adjust(var(--global-primary-color), 50%)}.layui-tag-primary.layui-tag-variant-plain{--layui-tag-bg-color: transparent;--layui-tag-hover-color: transparent;--layui-tag-text-color: var(--global-primary-color);--layui-tag-border-color: transparent}.layui-tag-primary.layui-tag-variant-plain-bordered{--layui-tag-border-color: var(--global-primary-color)}.layui-tag-normal{--layui-tag-bg-color: #1e9fff;--layui-tag-border-color: transparent;--layui-tag-hover-color: #1e9fff;--layui-tag-text-color: #ffffff}.layui-tag-normal-bordered{--layui-tag-border-color: #1e9fff}.layui-tag-normal.layui-tag-variant-light{--layui-tag-bg-color: adjust(#1e9fff, 90%);--layui-tag-border-color: transparent;--layui-tag-hover-color: adjust(#1e9fff, 90%);--layui-tag-text-color: #1e9fff}.layui-tag-normal.layui-tag-variant-light-bordered{--layui-tag-border-color: adjust(#1e9fff, 50%)}.layui-tag-normal.layui-tag-variant-plain{--layui-tag-bg-color: transparent;--layui-tag-hover-color: transparent;--layui-tag-text-color: #1e9fff;--layui-tag-border-color: transparent}.layui-tag-normal.layui-tag-variant-plain-bordered{--layui-tag-border-color: #1e9fff}.layui-tag-warm{--layui-tag-bg-color: #ffb800;--layui-tag-border-color: transparent;--layui-tag-hover-color: #ffb800;--layui-tag-text-color: #ffffff}.layui-tag-warm-bordered{--layui-tag-border-color: #ffb800}.layui-tag-warm.layui-tag-variant-light{--layui-tag-bg-color: adjust(#ffb800, 90%);--layui-tag-border-color: transparent;--layui-tag-hover-color: adjust(#ffb800, 90%);--layui-tag-text-color: #ffb800}.layui-tag-warm.layui-tag-variant-light-bordered{--layui-tag-border-color: adjust(#ffb800, 50%)}.layui-tag-warm.layui-tag-variant-plain{--layui-tag-bg-color: transparent;--layui-tag-hover-color: transparent;--layui-tag-text-color: #ffb800;--layui-tag-border-color: transparent}.layui-tag-warm.layui-tag-variant-plain-bordered{--layui-tag-border-color: #ffb800}.layui-tag-danger{--layui-tag-bg-color: #ff5722;--layui-tag-border-color: transparent;--layui-tag-hover-color: #ff5722;--layui-tag-text-color: #ffffff}.layui-tag-danger-bordered{--layui-tag-border-color: #ff5722}.layui-tag-danger.layui-tag-variant-light{--layui-tag-bg-color: adjust(#ff5722, 90%);--layui-tag-border-color: transparent;--layui-tag-hover-color: adjust(#ff5722, 90%);--layui-tag-text-color: #ff5722}.layui-tag-danger.layui-tag-variant-light-bordered{--layui-tag-border-color: adjust(#ff5722, 50%)}.layui-tag-danger.layui-tag-variant-plain{--layui-tag-bg-color: transparent;--layui-tag-hover-color: transparent;--layui-tag-text-color: #ff5722;--layui-tag-border-color: transparent}.layui-tag-danger.layui-tag-variant-plain-bordered{--layui-tag-border-color: #ff5722}.layui-popper *[data-popper-arrow]{width:10px;height:10px;position:absolute}.layui-popper *[data-popper-arrow]:after{box-sizing:border-box;position:absolute;content:" ";width:10px;height:10px;transform:rotate(45deg);background-color:#fff;border:1px solid #cecece;z-index:-1}.layui-popper[data-popper-placement^=right]>[data-popper-arrow]{left:-5px}.layui-popper[data-popper-placement^=right]>[data-popper-arrow]:after{border-top-color:transparent!important;border-right-color:transparent!important}.layui-popper[data-popper-placement^=left]>[data-popper-arrow]{right:-5px}.layui-popper[data-popper-placement^=left]>[data-popper-arrow]:after{border-bottom-color:transparent!important;border-left-color:transparent!important}.layui-popper[data-popper-placement^=top]>[data-popper-arrow]{bottom:-5px}.layui-popper[data-popper-placement^=top]>[data-popper-arrow]:after{border-top-color:transparent!important;border-left-color:transparent!important}.layui-popper[data-popper-placement^=bottom]>[data-popper-arrow]{top:-5px}.layui-popper[data-popper-placement^=bottom]>[data-popper-arrow]:after{border-bottom-color:transparent!important;border-right-color:transparent!important}.lay-tooltip-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}.lay-tooltip{padding:10px;border-radius:var(--global-border-radius);word-wrap:break-word;min-width:12px;min-height:12px;font-size:14px;box-sizing:border-box;box-shadow:0 2px 12px #00000026;background-color:#fff;color:#3a3a3a;border:1px solid #cecece;z-index:999999}.lay-tooltip>[data-popper-arrow]:after{background-color:#fff;border-color:#cecece}.lay-tooltip.layui-dark{background-color:#353535;color:#fff;border:1px solid #353535}.lay-tooltip.layui-dark>[data-popper-arrow]:after{background-color:#353535;border-color:#353535}.layui-tag-input{display:inline-flex;box-sizing:border-box;width:100%;border-width:1px;border-style:solid;border-color:var(--input-border-color);border-radius:var(--input-border-radius);background-color:#fff;cursor:text}.layui-tag-input-inner{flex:1;overflow:hidden;line-height:0;padding:2px 0}.layui-tag-input-mirror{position:absolute;top:0;left:0;white-space:pre;visibility:hidden;pointer-events:none}.layui-tag-input-clear{flex:none;display:none;align-items:center;padding:0 10px;color:#00000073;cursor:pointer;visibility:hidden}.layui-tag-input-clear:hover{opacity:.8}.layui-tag-input .layui-tag-input-inner-input{box-sizing:border-box;border:none}.layui-tag-input-disabled{cursor:not-allowed;opacity:.6}.layui-tag-input-disabled *{cursor:not-allowed}.layui-tag-input .layui-tag{margin-right:5px;margin-top:2px;margin-bottom:2px;white-space:pre-wrap}.layui-tag-input-collapsed-panel{white-space:normal;display:flex;align-items:center;flex-wrap:wrap;width:100%;height:auto;overflow:hidden}.layui-tag-input-collapsed-panel .layui-tag{margin-right:5px;margin-bottom:4px}.layui-tag-input.layui-tag-input-lg{min-height:44px}.layui-tag-input.layui-tag-input-lg .layui-tag-input-inner-input{height:38px;vertical-align:middle}.layui-tag-input.layui-tag-input-lg .layui-tag-input-inner-input:disabled{position:relative;background:transparent;z-index:1}.layui-tag-input.layui-tag-input-lg .layui-tag-input-inner{position:relative;padding:2px 5px}.layui-tag-input.layui-tag-input-lg .layui-tag-input-inner-disabled-input{position:absolute;top:0;left:0;right:0;bottom:0;z-index:2}.layui-tag-input.layui-tag-input-lg .layui-tag{position:relative;margin-top:2px;margin-bottom:2px;z-index:3}.layui-tag-input.layui-tag-input-md{min-height:38px}.layui-tag-input.layui-tag-input-md .layui-tag-input-inner-input{height:32px;vertical-align:middle}.layui-tag-input.layui-tag-input-md .layui-tag-input-inner-input:disabled{position:relative;background:transparent;z-index:1}.layui-tag-input.layui-tag-input-md .layui-tag-input-inner{position:relative;padding:2px 5px}.layui-tag-input.layui-tag-input-md .layui-tag-input-inner-disabled-input{position:absolute;top:0;left:0;right:0;bottom:0;z-index:2}.layui-tag-input.layui-tag-input-md .layui-tag{position:relative;margin-top:2px;margin-bottom:2px;z-index:3}.layui-tag-input.layui-tag-input-sm{min-height:32px}.layui-tag-input.layui-tag-input-sm .layui-tag-input-inner-input{height:28px;vertical-align:middle}.layui-tag-input.layui-tag-input-sm .layui-tag-input-inner-input:disabled{position:relative;background:transparent;z-index:1}.layui-tag-input.layui-tag-input-sm .layui-tag-input-inner{position:relative;padding:1px 5px}.layui-tag-input.layui-tag-input-sm .layui-tag-input-inner-disabled-input{position:absolute;top:0;left:0;right:0;bottom:0;z-index:2}.layui-tag-input.layui-tag-input-sm .layui-tag{position:relative;margin-top:1px;margin-bottom:1px;z-index:3}.layui-tag-input.layui-tag-input-xs{min-height:26px}.layui-tag-input.layui-tag-input-xs .layui-tag-input-inner-input{height:22px;vertical-align:middle}.layui-tag-input.layui-tag-input-xs .layui-tag-input-inner-input:disabled{position:relative;background:transparent;z-index:1}.layui-tag-input.layui-tag-input-xs .layui-tag-input-inner{position:relative;padding:1px 5px}.layui-tag-input.layui-tag-input-xs .layui-tag-input-inner-disabled-input{position:absolute;top:0;left:0;right:0;bottom:0;z-index:2}.layui-tag-input.layui-tag-input-xs .layui-tag{position:relative;margin-top:1px;margin-bottom:1px;z-index:3}.layui-tag-input-suffix{display:flex;flex:none;align-items:center;padding:0 10px}.layui-tag-input:not(.layui-tag-input-disabled):hover{border-color:#d2d2d2!important}.layui-tag-input:not(.layui-tag-input-disabled):hover .layui-tag-input-clear{display:flex;visibility:unset}.layui-tag-input-append{background-color:#fafafa;border-left:1px solid var(--input-border-color);display:flex;padding:0 15px;flex:none;align-items:center}.layui-tag-input-prepend{background-color:#fafafa;border-right:1px solid var(--input-border-color);display:flex;padding:0 15px;flex:none;align-items:center}