vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
1 lines • 9.88 kB
CSS
.vxp-tag-vars{--vxp-tag-color:var(--vxp-content-color-base);--vxp-tag-color-disabled:var(--vxp-content-color-disabled);--vxp-tag-bg-color:var(--vxp-fill-color-background);--vxp-tag-bg-color-disabled:var(--vxp-fill-color-background);--vxp-tag-b-color:var(--vxp-border-color-base);--vxp-tag-b-color-disabled:var(--vxp-border-color-light-2);--vxp-tag-v-padding:0;--vxp-tag-h-padding:8px;--vxp-tag-radius:var(--vxp-radius-base);--vxp-tag-series-span:4px;--vxp-tag-small-font-size:var(--vxp-font-size-secondary);--vxp-tag-default-font-size:var(--vxp-font-size-base);--vxp-tag-large-font-size:var(--vxp-font-size-primary);--vxp-tag-close-color:var(--vxp-content-color-secondary);--vxp-tag-d-color:var(--vxp-border-color-light-1)}.vxp-tag{font-family:var(--vxp-font-family-base);font-size:var(--vxp-font-size-base);font-variant-numeric:tabular-nums;line-height:var(--vxp-line-height-base);color:var(--vxp-content-color-base);position:relative;display:inline-flex;font-size:var(--vxp-tag-default-font-size);color:var(--vxp-tag-color);white-space:nowrap;transition:var(--vxp-transition-color)}.vxp-tag,.vxp-tag *,.vxp-tag ::after,.vxp-tag ::before{box-sizing:border-box}.vxp-tag--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-tag+.vxp-tag{margin-inline-start:var(--vxp-tag-series-span)}.vxp-tag--small{font-size:var(--vxp-tag-small-font-size)}.vxp-tag--large{font-size:var(--vxp-tag-large-font-size)}.vxp-tag--circle{--vxp-tag-h-padding:12px;--vxp-tag-radius:14px}.vxp-tag--disabled{color:var(--vxp-tag-color-disabled);cursor:not-allowed}.vxp-tag__unit{display:flex;align-items:center;max-width:100%;padding:var(--vxp-tag-v-padding) var(--vxp-tag-h-padding);background-color:var(--vxp-tag-bg-color);border:var(--vxp-border-shape) var(--vxp-tag-b-color);border-inline-start-color:var(--vxp-tag-d-color);border-inline-end-width:0;transition:var(--vxp-transition-background),var(--vxp-transition-border)}.vxp-tag__unit:first-child{border-inline-start-color:var(--vxp-tag-b-color);border-start-start-radius:var(--vxp-tag-radius);border-end-start-radius:var(--vxp-tag-radius)}.vxp-tag__unit:last-child{border-inline-end-width:var(--vxp-border-width);border-start-end-radius:var(--vxp-tag-radius);border-end-end-radius:var(--vxp-tag-radius)}.vxp-tag--disabled .vxp-tag__unit{background-color:var(--vxp-tag-bg-color-disabled);border-color:var(--vxp-tag-b-color-disabled)}.vxp-tag__close{position:relative;inset-inline-start:3px;display:inline-flex;align-items:center;justify-content:center;height:12px;padding:0;margin-inline-start:4px;color:var(--vxp-tag-close-color);cursor:pointer;background-color:transparent;border:0;outline:0;opacity:60%;transition:var(--vxp-transition-opacity)}.vxp-tag__close:focus,.vxp-tag__close:hover{opacity:100%}.vxp-tag--disabled .vxp-tag__close,.vxp-tag--disabled .vxp-tag__close:focus,.vxp-tag--disabled .vxp-tag__close:hover{opacity:50%}.vxp-tag--primary{--vxp-tag-color:var(--vxp-color-white);--vxp-tag-bg-color:var(--vxp-color-primary-base);--vxp-tag-b-color:var(--vxp-color-primary-base);--vxp-tag-close-color:var(--vxp-color-white);--vxp-tag-d-color:var(--vxp-color-primary-light-3)}.vxp-tag--border.vxp-tag--primary,.vxp-tag--simple.vxp-tag--primary{--vxp-tag-color:var(--vxp-color-primary-base);--vxp-tag-close-color:var(--vxp-color-primary-base)}.vxp-tag--simple.vxp-tag--primary{--vxp-tag-bg-color:var(--vxp-color-primary-opacity-8)}.vxp-tag--info{--vxp-tag-color:var(--vxp-color-white);--vxp-tag-bg-color:var(--vxp-color-info-base);--vxp-tag-b-color:var(--vxp-color-info-base);--vxp-tag-close-color:var(--vxp-color-white);--vxp-tag-d-color:var(--vxp-color-info-light-3)}.vxp-tag--border.vxp-tag--info,.vxp-tag--simple.vxp-tag--info{--vxp-tag-color:var(--vxp-color-info-base);--vxp-tag-close-color:var(--vxp-color-info-base)}.vxp-tag--simple.vxp-tag--info{--vxp-tag-bg-color:var(--vxp-color-info-opacity-8)}.vxp-tag--success{--vxp-tag-color:var(--vxp-color-white);--vxp-tag-bg-color:var(--vxp-color-success-base);--vxp-tag-b-color:var(--vxp-color-success-base);--vxp-tag-close-color:var(--vxp-color-white);--vxp-tag-d-color:var(--vxp-color-success-light-3)}.vxp-tag--border.vxp-tag--success,.vxp-tag--simple.vxp-tag--success{--vxp-tag-color:var(--vxp-color-success-base);--vxp-tag-close-color:var(--vxp-color-success-base)}.vxp-tag--simple.vxp-tag--success{--vxp-tag-bg-color:var(--vxp-color-success-opacity-8)}.vxp-tag--warning{--vxp-tag-color:var(--vxp-color-white);--vxp-tag-bg-color:var(--vxp-color-warning-base);--vxp-tag-b-color:var(--vxp-color-warning-base);--vxp-tag-close-color:var(--vxp-color-white);--vxp-tag-d-color:var(--vxp-color-warning-light-3)}.vxp-tag--border.vxp-tag--warning,.vxp-tag--simple.vxp-tag--warning{--vxp-tag-color:var(--vxp-color-warning-base);--vxp-tag-close-color:var(--vxp-color-warning-base)}.vxp-tag--simple.vxp-tag--warning{--vxp-tag-bg-color:var(--vxp-color-warning-opacity-8)}.vxp-tag--error{--vxp-tag-color:var(--vxp-color-white);--vxp-tag-bg-color:var(--vxp-color-error-base);--vxp-tag-b-color:var(--vxp-color-error-base);--vxp-tag-close-color:var(--vxp-color-white);--vxp-tag-d-color:var(--vxp-color-error-light-3)}.vxp-tag--border.vxp-tag--error,.vxp-tag--simple.vxp-tag--error{--vxp-tag-color:var(--vxp-color-error-base);--vxp-tag-close-color:var(--vxp-color-error-base)}.vxp-tag--simple.vxp-tag--error{--vxp-tag-bg-color:var(--vxp-color-error-opacity-8)}.vxp-tag--lime{--vxp-tag-color:var(--vxp-color-white);--vxp-tag-close-color:var(--vxp-color-white);--vxp-tag-d-color:var(--vxp-color-rgb(18, 228, 83)-light-2);--vxp-tag-bg-color:rgb(18, 228, 83);--vxp-tag-b-color:rgb(18, 228, 83);--vxp-tag-d-color:rgb(89.1, 236.1, 134.6)}.vxp-tag--border.vxp-tag--lime,.vxp-tag--simple.vxp-tag--lime{--vxp-tag-color:rgb(18, 228, 83);--vxp-tag-close-color:rgb(18, 228, 83)}.vxp-tag--simple.vxp-tag--lime{--vxp-tag-bg-color:rgba(18, 228, 83, 0.2)}.vxp-tag--pink{--vxp-tag-color:var(--vxp-color-white);--vxp-tag-close-color:var(--vxp-color-white);--vxp-tag-d-color:var(--vxp-color-rgb(240, 101, 149)-light-2);--vxp-tag-bg-color:rgb(240, 101, 149);--vxp-tag-b-color:rgb(240, 101, 149);--vxp-tag-d-color:rgb(244.5, 147.2, 180.8)}.vxp-tag--border.vxp-tag--pink,.vxp-tag--simple.vxp-tag--pink{--vxp-tag-color:rgb(240, 101, 149);--vxp-tag-close-color:rgb(240, 101, 149)}.vxp-tag--simple.vxp-tag--pink{--vxp-tag-bg-color:rgba(240, 101, 149, 0.2)}.vxp-tag--magenta{--vxp-tag-color:var(--vxp-color-white);--vxp-tag-close-color:var(--vxp-color-white);--vxp-tag-d-color:var(--vxp-color-rgb(235, 47, 150)-light-2);--vxp-tag-bg-color:rgb(235, 47, 150);--vxp-tag-b-color:rgb(235, 47, 150);--vxp-tag-d-color:rgb(241, 109.4, 181.5)}.vxp-tag--border.vxp-tag--magenta,.vxp-tag--simple.vxp-tag--magenta{--vxp-tag-color:rgb(235, 47, 150);--vxp-tag-close-color:rgb(235, 47, 150)}.vxp-tag--simple.vxp-tag--magenta{--vxp-tag-bg-color:rgba(235, 47, 150, 0.2)}.vxp-tag--tomato{--vxp-tag-color:var(--vxp-color-white);--vxp-tag-close-color:var(--vxp-color-white);--vxp-tag-d-color:var(--vxp-color-rgb(250, 99, 99)-light-2);--vxp-tag-bg-color:rgb(250, 99, 99);--vxp-tag-b-color:rgb(250, 99, 99);--vxp-tag-d-color:rgb(251.5, 145.8, 145.8)}.vxp-tag--border.vxp-tag--tomato,.vxp-tag--simple.vxp-tag--tomato{--vxp-tag-color:rgb(250, 99, 99);--vxp-tag-close-color:rgb(250, 99, 99)}.vxp-tag--simple.vxp-tag--tomato{--vxp-tag-bg-color:rgba(250, 99, 99, 0.2)}.vxp-tag--orange{--vxp-tag-color:var(--vxp-color-white);--vxp-tag-close-color:var(--vxp-color-white);--vxp-tag-d-color:var(--vxp-color-rgb(255, 146, 43)-light-2);--vxp-tag-bg-color:rgb(255, 146, 43);--vxp-tag-b-color:rgb(255, 146, 43);--vxp-tag-d-color:rgb(255, 178.7, 106.6)}.vxp-tag--border.vxp-tag--orange,.vxp-tag--simple.vxp-tag--orange{--vxp-tag-color:rgb(255, 146, 43);--vxp-tag-close-color:rgb(255, 146, 43)}.vxp-tag--simple.vxp-tag--orange{--vxp-tag-bg-color:rgba(255, 146, 43, 0.2)}.vxp-tag--cyan{--vxp-tag-color:var(--vxp-color-white);--vxp-tag-close-color:var(--vxp-color-white);--vxp-tag-d-color:var(--vxp-color-rgb(19, 194, 194)-light-2);--vxp-tag-bg-color:rgb(19, 194, 194);--vxp-tag-b-color:rgb(19, 194, 194);--vxp-tag-d-color:rgb(89.8, 212.3, 212.3)}.vxp-tag--border.vxp-tag--cyan,.vxp-tag--simple.vxp-tag--cyan{--vxp-tag-color:rgb(19, 194, 194);--vxp-tag-close-color:rgb(19, 194, 194)}.vxp-tag--simple.vxp-tag--cyan{--vxp-tag-bg-color:rgba(19, 194, 194, 0.2)}.vxp-tag--navy{--vxp-tag-color:var(--vxp-color-white);--vxp-tag-close-color:var(--vxp-color-white);--vxp-tag-d-color:var(--vxp-color-rgb(47, 65, 224)-light-2);--vxp-tag-bg-color:rgb(47, 65, 224);--vxp-tag-b-color:rgb(47, 65, 224);--vxp-tag-d-color:rgb(109.4, 122, 233.3)}.vxp-tag--border.vxp-tag--navy,.vxp-tag--simple.vxp-tag--navy{--vxp-tag-color:rgb(47, 65, 224);--vxp-tag-close-color:rgb(47, 65, 224)}.vxp-tag--simple.vxp-tag--navy{--vxp-tag-bg-color:rgba(47, 65, 224, 0.2)}.vxp-tag--gold{--vxp-tag-color:var(--vxp-color-white);--vxp-tag-close-color:var(--vxp-color-white);--vxp-tag-d-color:var(--vxp-color-rgb(236, 202, 11)-light-2);--vxp-tag-bg-color:rgb(236, 202, 11);--vxp-tag-b-color:rgb(236, 202, 11);--vxp-tag-d-color:rgb(241.7, 217.9, 84.2)}.vxp-tag--border.vxp-tag--gold,.vxp-tag--simple.vxp-tag--gold{--vxp-tag-color:rgb(236, 202, 11);--vxp-tag-close-color:rgb(236, 202, 11)}.vxp-tag--simple.vxp-tag--gold{--vxp-tag-bg-color:rgba(236, 202, 11, 0.2)}.vxp-tag--purple{--vxp-tag-color:var(--vxp-color-white);--vxp-tag-close-color:var(--vxp-color-white);--vxp-tag-d-color:var(--vxp-color-rgb(114, 46, 209)-light-2);--vxp-tag-bg-color:rgb(114, 46, 209);--vxp-tag-b-color:rgb(114, 46, 209);--vxp-tag-d-color:rgb(156.3, 108.7, 222.8)}.vxp-tag--border.vxp-tag--purple,.vxp-tag--simple.vxp-tag--purple{--vxp-tag-color:rgb(114, 46, 209);--vxp-tag-close-color:rgb(114, 46, 209)}.vxp-tag--simple.vxp-tag--purple{--vxp-tag-bg-color:rgba(114, 46, 209, 0.2)}.vxp-tag--border .vxp-tag__unit,.vxp-tag--border.vxp-tag--disabled .vxp-tag__unit{background-color:transparent}