song-ui-u/theme/tag.css

vue3 + js的PC前端组件库

@charset "UTF-8";:root{--x-tag-padding-small:4px;--x-tag-padding-default:6px;--x-tag-padding-large:6px;--x-tag-height-small:20px;--x-tag-height-default:24px;--x-tag-height-large:28px;--x-tag-font-size-small:12px;--x-tag-font-size-default:14px;--x-tag-font-size-large:16px}.x-tag{--x-tag-bg-color-light:var(--x-color-primary-light-8);--x-tag-text-color-light:var(--x-color-primary);--x-tag-bg-color-dark:var(--x-color-primary);--x-tag-text-color-dark:var(--x-color-white);--x-tag-bg-color-plain:var(--x-color-white);--x-tag-text-color-plain:var(--x-color-primary);--x-tag-border-color:var(--x-color-primary);--x-tag-text-color:var(--x-color-primary);--x-tag-border-radius:var(--x-component-round-small);--x-tag-font-size:var(--x-tag-font-size-default);--x-tag-padding:var(--x-tag-padding-default);--x-tag-size:var(--x-tag-height-default);--x-tag-close-hover-text-color:var(--x-color-white);--x-tag-close-hover-bg-color:var(--x-color-primary);display:inline-flex;align-items:center;justify-content:center;padding:0 10px;height:var(--x-tag-size);border:solid 1px var(--x-tag-border-color);border-radius:var(--x-tag-radius);font-size:var(--x-tag-font-size);line-height:1;padding:0 var(--x-tag-padding);color:var(--x-tag-text-color);background-color:var(--x-tag-bg-color-light);border-radius:var(--x-tag-border-radius)}.x-tag__close{margin-left:8px;font-size:14px;cursor:pointer;transition:color .3s;border-radius:50%;width:16px;height:16px;display:flex;align-items:center;justify-content:center}.x-tag__close:hover{color:var(--x-tag-close-hover-text-color);background-color:var(--x-tag-close-hover-bg-color)}.x-tag--effect_dark{color:var(--x-tag-text-color-dark);background-color:var(--x-tag-bg-color-dark);--x-tag-close-hover-text-color:var(--x-neutral-color-light-4);--x-tag-close-hover-bg-color:var(--x-tag-close-hover-bg-color-dark)}.x-tag.is-round{--x-tag-border-radius:var(--x-component-round-round)}.x-tag--primary{--x-tag-bg-color-light:var(--x-color-primary-light-8);--x-tag-text-color-light:var(--x-color-primary);--x-tag-bg-color-dark:var(--x-color-primary);--x-tag-bg-color-plain:var(--x-color-primary);--x-tag-text-color-plain:var(--x-color-primary);--x-tag-border-color:var(--x-color-primary);--x-tag-text-color:var(--x-color-primary);--x-tag-close-hover-bg-color:var(--x-color-primary)}.x-tag--success{--x-tag-bg-color-light:var(--x-color-success-light-8);--x-tag-text-color-light:var(--x-color-success);--x-tag-bg-color-dark:var(--x-color-success);--x-tag-bg-color-plain:var(--x-color-success);--x-tag-text-color-plain:var(--x-color-success);--x-tag-border-color:var(--x-color-success);--x-tag-text-color:var(--x-color-success);--x-tag-close-hover-bg-color:var(--x-color-success)}.x-tag--warning{--x-tag-bg-color-light:var(--x-color-warning-light-8);--x-tag-text-color-light:var(--x-color-warning);--x-tag-bg-color-dark:var(--x-color-warning);--x-tag-bg-color-plain:var(--x-color-warning);--x-tag-text-color-plain:var(--x-color-warning);--x-tag-border-color:var(--x-color-warning);--x-tag-text-color:var(--x-color-warning);--x-tag-close-hover-bg-color:var(--x-color-warning)}.x-tag--error{--x-tag-bg-color-light:var(--x-color-error-light-8);--x-tag-text-color-light:var(--x-color-error);--x-tag-bg-color-dark:var(--x-color-error);--x-tag-bg-color-plain:var(--x-color-error);--x-tag-text-color-plain:var(--x-color-error);--x-tag-border-color:var(--x-color-error);--x-tag-text-color:var(--x-color-error);--x-tag-close-hover-bg-color:var(--x-color-error)}.x-tag--small{--x-tag-font-size:var(--x-tag-font-size-small);--x-tag-size:var(--x-tag-height-small);--x-tag-padding:var(--x-tag-padding-small)}.x-tag--default{--x-tag-font-size:var(--x-tag-font-size-default);--x-tag-size:var(--x-tag-height-default);--x-tag-padding:var(--x-tag-padding-default)}.x-tag--large{--x-tag-font-size:var(--x-tag-font-size-large);--x-tag-size:var(--x-tag-height-large);--x-tag-padding:var(--x-tag-padding-large)}