@layui/layui-vue/es/tag/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}