vexip-ui/css/alert.css

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

.vxp-alert-vars{--vxp-alert-bg-color:var(--vxp-fill-color-background);--vxp-alert-b-color:var(--vxp-border-color-base);--vxp-alert-border:var(--vxp-border-shape) var(--vxp-alert-b-color);--vxp-alert-radius:var(--vxp-radius-base);--vxp-alert-icon-color:var(--vxp-content-color-primary);--vxp-alert-text-color:var(--vxp-content-color-base);--vxp-alert-title-font-size:var(--vxp-font-size-primary);--vxp-alert-title-color:var(--vxp-content-color-primary);--vxp-alert-close-color:var(--vxp-content-color-placeholder);--vxp-alert-close-color-hover:var(--vxp-content-color-normal);--vxp-alert-icon-width:40px}.vxp-alert{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:flex;align-items:center;padding:8px 14px;margin-bottom:14px;background-color:var(--vxp-alert-bg-color);border:var(--vxp-alert-border);border-radius:var(--vxp-alert-radius)}.vxp-alert,.vxp-alert *,.vxp-alert ::after,.vxp-alert ::before{box-sizing:border-box}.vxp-alert--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-alert--has-title{padding:10px 14px}.vxp-alert--has-icon{padding-inline-start:var(--vxp-alert-icon-width)}.vxp-alert--has-icon.vxp-alert--has-title{--vxp-alert-icon-width:56px}.vxp-alert--no-border{border:0}.vxp-alert--banner{margin:0;border:0;border-radius:0}.vxp-alert--colorful-text{color:var(--vxp-alert-text-color)}.vxp-alert__wrapper{display:flex;flex:auto;flex-direction:column;justify-content:center;max-width:100%}.vxp-alert__title{margin-bottom:4px;font-size:var(--vxp-alert-title-font-size);color:var(--vxp-alert-title-color)}.vxp-alert__icon{position:absolute;inset-inline-start:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center;width:var(--vxp-alert-icon-width);color:var(--vxp-alert-icon-color)}.vxp-alert--has-title .vxp-alert__icon{align-items:start;padding-top:16px}.vxp-alert__close{position:relative;display:inline-flex;align-items:center;padding:3px 0;margin-inline-start:6px;color:var(--vxp-alert-close-color);cursor:pointer;background-color:transparent;border:0;outline:0;transition:var(--vxp-transition-color)}.vxp-alert__close:focus,.vxp-alert__close:hover{color:var(--vxp-alert-close-color-hover)}.vxp-alert--has-title .vxp-alert__close{align-self:start}.vxp-alert__content{position:relative;display:flex;flex-direction:column}.vxp-alert__content--scroll{overflow:hidden}.vxp-alert__scroll{display:flex;overflow:hidden;white-space:nowrap;transition-timing-function:linear;transition-property:transform}.vxp-alert__placeholder{display:flex;white-space:nowrap;pointer-events:none;visibility:hidden;opacity:0}.vxp-alert--primary{--vxp-alert-bg-color:var(--vxp-color-primary-opacity-8);--vxp-alert-b-color:var(--vxp-color-primary-opacity-5);--vxp-alert-icon-color:var(--vxp-color-primary-dark-2)}.vxp-alert--colorful-text.vxp-alert--primary{--vxp-alert-text-color:var(--vxp-color-primary-dark-2);--vxp-alert-title-color:var(--vxp-color-primary-dark-2)}.vxp-alert--info{--vxp-alert-bg-color:var(--vxp-color-info-opacity-8);--vxp-alert-b-color:var(--vxp-color-info-opacity-5);--vxp-alert-icon-color:var(--vxp-color-info-dark-2)}.vxp-alert--colorful-text.vxp-alert--info{--vxp-alert-text-color:var(--vxp-color-info-dark-2);--vxp-alert-title-color:var(--vxp-color-info-dark-2)}.vxp-alert--success{--vxp-alert-bg-color:var(--vxp-color-success-opacity-8);--vxp-alert-b-color:var(--vxp-color-success-opacity-5);--vxp-alert-icon-color:var(--vxp-color-success-dark-2)}.vxp-alert--colorful-text.vxp-alert--success{--vxp-alert-text-color:var(--vxp-color-success-dark-2);--vxp-alert-title-color:var(--vxp-color-success-dark-2)}.vxp-alert--warning{--vxp-alert-bg-color:var(--vxp-color-warning-opacity-8);--vxp-alert-b-color:var(--vxp-color-warning-opacity-5);--vxp-alert-icon-color:var(--vxp-color-warning-dark-2)}.vxp-alert--colorful-text.vxp-alert--warning{--vxp-alert-text-color:var(--vxp-color-warning-dark-2);--vxp-alert-title-color:var(--vxp-color-warning-dark-2)}.vxp-alert--error{--vxp-alert-bg-color:var(--vxp-color-error-opacity-8);--vxp-alert-b-color:var(--vxp-color-error-opacity-5);--vxp-alert-icon-color:var(--vxp-color-error-dark-2)}.vxp-alert--colorful-text.vxp-alert--error{--vxp-alert-text-color:var(--vxp-color-error-dark-2);--vxp-alert-title-color:var(--vxp-color-error-dark-2)}