@import './mixins/mixins.scss'; @import './theme/default.scss'; @include b(tag) { position: relative; line-height: 28px; height: 28px; font-size: 14px; padding: 0 7px; border-radius: 4px; box-sizing: border-box; cursor: default; display: inline-block; transition: background-color .3s $default-cubic-bezier; &.n-tag--closable { padding-right: 18px; .n-tag__close-mark { cursor: pointer; transition: color .3s $default-cubic-bezier; right: 3px; top: 50%; transform: translateY(-50%); height: 14px; width: 14px; line-height: 14px; position: absolute; } } & { box-shadow: inset 0 0 0 1px rgba(99,226,183,1); color: rgba(99, 226, 183, 1); .n-tag__close-mark { color: rgba(99, 226, 183, 0.5); &:hover { color: rgba(99, 226, 183, 1); } } &:hover { background-color: rgba(99, 226, 183, 0.3); } &:active { background-color: rgba(99, 226, 183, 0.2); } } &.n-tag--success-type { box-shadow: inset 0 0 0 1px rgba(99, 226, 183, 1); color: rgba(99, 226, 183, 1); .n-tag__close-mark { color: rgba(99, 226, 183, 0.5); &:hover { color: rgba(99, 226, 183, 1); } } &:hover { background-color: rgba(99, 226, 183, 0.3); } &:active { background-color: rgba(99, 226, 183, 0.2); } } &.n-tag--info-type { box-shadow: inset 0 0 0 1px rgba(98, 187, 252, 1); color: rgba(98, 187, 252, 1); .n-tag__close-mark { color: rgba(98, 187, 252, 0.5); &:hover { color: rgba(98, 187, 252, 1); } } &:hover { background-color: rgba(98, 187, 252, 0.3); } &:active { background-color: rgba(98, 187, 252, 0.2); } } &.n-tag--warning-type { box-shadow: inset 0 0 0 1px rgba(245, 166, 35, 1); color: rgba(245, 166, 35, 1); .n-tag__close-mark { color: rgba(245, 166, 35, 0.5); &:hover { color: rgba(245, 166, 35, 1); } } &:hover { background-color: rgba(245, 166, 35, 0.3); } &:active { background-color: rgba(245, 166, 35, 0.2); } } &.n-tag--error-type { box-shadow: inset 0 0 0 1px rgba(255, 146, 164, 1); color: rgba(255, 146, 164, 1); .n-tag__close-mark { color: rgba(255, 146, 164, 0.5); &:hover { color: rgba(255, 146, 164, 1); } } &:hover { background-color: rgba(255, 146, 164, 0.3); } &:active { background-color: rgba(255, 146, 164, 0.2); } } }