element-plus/theme-chalk/el-tag.css

A Component Library for Vue 3

.el-tag{--el-tag-font-size:12px;--el-tag-border-radius:4px;--el-tag-padding:0 10px}.el-tag{--el-tag-background-color:#ecf5ff;--el-tag-border-color:#d9ecff;--el-tag-font-color:#409eff;--el-tag-hover-color:#409eff;background-color:var(--el-tag-background-color);border-color:var(--el-tag-border-color);color:var(--el-tag-font-color);display:inline-block;height:32px;padding:var(--el-tag-padding);line-height:30px;font-size:var(--el-tag-font-size);border-width:1px;border-style:solid;border-radius:var(--el-tag-border-radius);box-sizing:border-box;white-space:nowrap}.el-tag.is-hit{border-color:#409eff}.el-tag .el-tag__close{color:var(--el-tag-font-color)}.el-tag .el-tag__close:hover{color:var(--el-color-white);background-color:var(--el-tag-hover-color)}.el-tag.el-tag--primary{--el-tag-background-color:#ecf5ff;--el-tag-border-color:#d9ecff;--el-tag-font-color:#409eff;--el-tag-hover-color:#409eff}.el-tag.el-tag--primary.is-hit{border-color:#409eff}.el-tag.el-tag--success{--el-tag-background-color:#f0f9eb;--el-tag-border-color:#e1f3d8;--el-tag-font-color:#67c23a;--el-tag-hover-color:#67c23a}.el-tag.el-tag--success.is-hit{border-color:#67c23a}.el-tag.el-tag--warning{--el-tag-background-color:#fdf6ec;--el-tag-border-color:#faecd8;--el-tag-font-color:#e6a23c;--el-tag-hover-color:#e6a23c}.el-tag.el-tag--warning.is-hit{border-color:#e6a23c}.el-tag.el-tag--danger{--el-tag-background-color:#fef0f0;--el-tag-border-color:#fde2e2;--el-tag-font-color:#f56c6c;--el-tag-hover-color:#f56c6c}.el-tag.el-tag--danger.is-hit{border-color:#f56c6c}.el-tag.el-tag--error{--el-tag-background-color:#fef0f0;--el-tag-border-color:#fde2e2;--el-tag-font-color:#f56c6c;--el-tag-hover-color:#f56c6c}.el-tag.el-tag--error.is-hit{border-color:#f56c6c}.el-tag.el-tag--info{--el-tag-background-color:#f4f4f5;--el-tag-border-color:#e9e9eb;--el-tag-font-color:#909399;--el-tag-hover-color:#909399}.el-tag.el-tag--info.is-hit{border-color:#909399}.el-tag .el-icon-close{border-radius:50%;text-align:center;position:relative;cursor:pointer;font-size:12px;height:16px;width:16px;line-height:16px;vertical-align:middle;top:-1px;right:-5px}.el-tag .el-icon-close::before{display:block}.el-tag--dark{--el-tag-background-color:#409eff;--el-tag-border-color:#409eff;--el-tag-font-color:white;--el-tag-hover-color:#66b1ff;background-color:var(--el-tag-background-color);border-color:var(--el-tag-border-color);color:var(--el-tag-font-color)}.el-tag--dark.is-hit{border-color:#409eff}.el-tag--dark .el-tag__close{color:var(--el-tag-font-color)}.el-tag--dark .el-tag__close:hover{color:var(--el-color-white);background-color:var(--el-tag-hover-color)}.el-tag--dark.el-tag--primary{--el-tag-background-color:#409eff;--el-tag-border-color:#409eff;--el-tag-font-color:white;--el-tag-hover-color:#66b1ff}.el-tag--dark.el-tag--primary.is-hit{border-color:#409eff}.el-tag--dark.el-tag--success{--el-tag-background-color:#67c23a;--el-tag-border-color:#67c23a;--el-tag-font-color:white;--el-tag-hover-color:#85ce61}.el-tag--dark.el-tag--success.is-hit{border-color:#67c23a}.el-tag--dark.el-tag--warning{--el-tag-background-color:#e6a23c;--el-tag-border-color:#e6a23c;--el-tag-font-color:white;--el-tag-hover-color:#ebb563}.el-tag--dark.el-tag--warning.is-hit{border-color:#e6a23c}.el-tag--dark.el-tag--danger{--el-tag-background-color:#f56c6c;--el-tag-border-color:#f56c6c;--el-tag-font-color:white;--el-tag-hover-color:#f78989}.el-tag--dark.el-tag--danger.is-hit{border-color:#f56c6c}.el-tag--dark.el-tag--error{--el-tag-background-color:#f56c6c;--el-tag-border-color:#f56c6c;--el-tag-font-color:white;--el-tag-hover-color:#f78989}.el-tag--dark.el-tag--error.is-hit{border-color:#f56c6c}.el-tag--dark.el-tag--info{--el-tag-background-color:#909399;--el-tag-border-color:#909399;--el-tag-font-color:white;--el-tag-hover-color:#a6a9ad}.el-tag--dark.el-tag--info.is-hit{border-color:#909399}.el-tag--plain{--el-tag-background-color:white;--el-tag-border-color:#b3d8ff;--el-tag-font-color:#409eff;--el-tag-hover-color:#409eff;background-color:var(--el-tag-background-color);border-color:var(--el-tag-border-color);color:var(--el-tag-font-color)}.el-tag--plain.is-hit{border-color:#409eff}.el-tag--plain .el-tag__close{color:var(--el-tag-font-color)}.el-tag--plain .el-tag__close:hover{color:var(--el-color-white);background-color:var(--el-tag-hover-color)}.el-tag--plain.el-tag--primary{--el-tag-background-color:white;--el-tag-border-color:#b3d8ff;--el-tag-font-color:#409eff;--el-tag-hover-color:#409eff}.el-tag--plain.el-tag--primary.is-hit{border-color:#409eff}.el-tag--plain.el-tag--success{--el-tag-background-color:white;--el-tag-border-color:#c2e7b0;--el-tag-font-color:#67c23a;--el-tag-hover-color:#67c23a}.el-tag--plain.el-tag--success.is-hit{border-color:#67c23a}.el-tag--plain.el-tag--warning{--el-tag-background-color:white;--el-tag-border-color:#f5dab1;--el-tag-font-color:#e6a23c;--el-tag-hover-color:#e6a23c}.el-tag--plain.el-tag--warning.is-hit{border-color:#e6a23c}.el-tag--plain.el-tag--danger{--el-tag-background-color:white;--el-tag-border-color:#fbc4c4;--el-tag-font-color:#f56c6c;--el-tag-hover-color:#f56c6c}.el-tag--plain.el-tag--danger.is-hit{border-color:#f56c6c}.el-tag--plain.el-tag--error{--el-tag-background-color:white;--el-tag-border-color:#fbc4c4;--el-tag-font-color:#f56c6c;--el-tag-hover-color:#f56c6c}.el-tag--plain.el-tag--error.is-hit{border-color:#f56c6c}.el-tag--plain.el-tag--info{--el-tag-background-color:white;--el-tag-border-color:#d3d4d6;--el-tag-font-color:#909399;--el-tag-hover-color:#909399}.el-tag--plain.el-tag--info.is-hit{border-color:#909399}.el-tag--medium{height:28px;line-height:26px}.el-tag--small{height:24px;line-height:22px}.el-tag--mini{height:20px;line-height:18px}.el-tag--medium .el-icon-close{transform:scale(.8)}.el-tag--small{padding:0 8px}.el-tag--small .el-icon-close{transform:scale(.8)}.el-tag--mini{padding:0 5px}.el-tag--mini .el-icon-close{margin-left:-3px;transform:scale(.7)}