vexip-ui/css/notice.css

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

.vxp-notice-vars{--vxp-notice-color:inherit;--vxp-notice-bg-color:var(--vxp-bg-color-base);--vxp-notice-b-color:var(--vxp-border-color-light-2);--vxp-notice-radius:var(--vxp-radius-base);--vxp-notice-s-color:var(--vxp-shadow-color-base);--vxp-notice-shadow:var(--vxp-shadow-shape) var(--vxp-notice-s-color);--vxp-notice-v-padding:8px;--vxp-notice-h-padding:10px;--vxp-notice-mask-bg-color:transparent;--vxp-notice-title-font-size:var(--vxp-font-size-primary);--vxp-notice-title-color:var(--vxp-content-color-primary);--vxp-notice-icon-color:var(--vxp-notice-color);--vxp-notice-close-color:var(--vxp-content-color-placeholder);--vxp-notice-close-color-hover:var(--vxp-content-color-base);--vxp-notice-marker-bg-color:var(--vxp-fill-color-secondary)}.vxp-notice{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);display:flex;flex-direction:column;align-items:center}.vxp-notice,.vxp-notice *,.vxp-notice ::after,.vxp-notice ::before{box-sizing:border-box}.vxp-notice--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-notice__wrapper{display:flex;flex-direction:column;width:100%}.vxp-notice__title{position:relative;margin-bottom:3px;font-size:var(--vxp-notice-title-font-size);color:var(--vxp-notice-title-color)}.vxp-notice__content{position:relative;color:var(--vxp-notice-color)}.vxp-notice__icon{display:flex;align-items:flex-start;padding-top:4px;margin-inline-end:10px;color:var(--vxp-notice-icon-color)}.vxp-notice__close{display:flex;align-items:flex-start;align-self:flex-start;padding:0 0 3px;margin-inline-start:8px;color:var(--vxp-notice-close-color);cursor:pointer;background-color:transparent;border:0;outline:0;transition:var(--vxp-transition-color)}.vxp-notice__close:focus,.vxp-notice__close:hover{color:var(--vxp-notice-close-color-hover)}.vxp-notice__item{display:flex;width:336px;padding:var(--vxp-notice-v-padding) var(--vxp-notice-h-padding);color:var(--vxp-notice-color);background-color:var(--vxp-notice-bg-color);border:var(--vxp-border-shape) var(--vxp-notice-b-color);border-radius:var(--vxp-notice-radius);box-shadow:var(--vxp-notice-shadow)}.vxp-notice__item--title-only{flex-direction:row}.vxp-notice__item--title-only .vxp-notice__title{margin:0;font-size:var(--vxp-font-size-base)}.vxp-notice__item--title-only .vxp-notice__icon{align-items:center;padding-top:0;margin-inline-end:8px}.vxp-notice__item--title-only .vxp-notice__close{align-items:center;align-self:stretch}.vxp-notice__item--has-icon.vxp-notice__item--title-only{padding:var(--vxp-notice-v-padding) var(--vxp-notice-h-padding)}.vxp-notice__item--content-only{min-height:60px}.vxp-notice__item::before{position:absolute;inset:0;pointer-events:none;background-color:var(--vxp-notice-mask-bg-color);border-radius:var(--vxp-notice-radius);opacity:80%}.vxp-notice__item::after{position:absolute;top:0;bottom:0;left:0;width:5px;background-color:var(--vxp-notice-marker-bg-color);border-radius:var(--vxp-notice-radius) 0 0 var(--vxp-notice-radius)}.vxp-notice__item--background::before{content:""}.vxp-notice__item--marker::after{content:""}.vxp-notice__item--color-only.vxp-notice__item--primary{--vxp-notice-title-color:var(--vxp-color-primary-dark-1);--vxp-notice-color:var(--vxp-color-primary-base);--vxp-notice-close-color:var(--vxp-color-primary-opacity-5);--vxp-notice-close-color-hover:var(--vxp-color-primary-base)}.vxp-notice__item--background.vxp-notice__item--primary{--vxp-notice-b-color:var(--vxp-color-primary-opacity-5);--vxp-notice-mask-bg-color:var(--vxp-color-primary-opacity-9);--vxp-notice-shadow:var(--vxp-unset);--vxp-notice-close-color:var(--vxp-color-primary-opacity-7);--vxp-notice-close-color-hover:var(--vxp-color-primary-opacity-2)}.vxp-notice__item--background.vxp-notice__item--color.vxp-notice__item--primary{--vxp-notice-title-color:var(--vxp-color-primary-dark-2);--vxp-notice-color:var(--vxp-color-primary-dark-2);--vxp-notice-icon-color:var(--vxp-color-primary-dark-1);--vxp-notice-marker-bg-color:var(--vxp-color-primary-dark-1)}.vxp-notice__item--primary{--vxp-notice-icon-color:var(--vxp-color-primary-base);--vxp-notice-marker-bg-color:var(--vxp-color-primary-base)}.vxp-notice__item--color-only.vxp-notice__item--info{--vxp-notice-title-color:var(--vxp-color-info-dark-1);--vxp-notice-color:var(--vxp-color-info-base);--vxp-notice-close-color:var(--vxp-color-info-opacity-5);--vxp-notice-close-color-hover:var(--vxp-color-info-base)}.vxp-notice__item--background.vxp-notice__item--info{--vxp-notice-b-color:var(--vxp-color-info-opacity-5);--vxp-notice-mask-bg-color:var(--vxp-color-info-opacity-9);--vxp-notice-shadow:var(--vxp-unset);--vxp-notice-close-color:var(--vxp-color-info-opacity-7);--vxp-notice-close-color-hover:var(--vxp-color-info-opacity-2)}.vxp-notice__item--background.vxp-notice__item--color.vxp-notice__item--info{--vxp-notice-title-color:var(--vxp-color-info-dark-2);--vxp-notice-color:var(--vxp-color-info-dark-2);--vxp-notice-icon-color:var(--vxp-color-info-dark-1);--vxp-notice-marker-bg-color:var(--vxp-color-info-dark-1)}.vxp-notice__item--info{--vxp-notice-icon-color:var(--vxp-color-info-base);--vxp-notice-marker-bg-color:var(--vxp-color-info-base)}.vxp-notice__item--color-only.vxp-notice__item--success{--vxp-notice-title-color:var(--vxp-color-success-dark-1);--vxp-notice-color:var(--vxp-color-success-base);--vxp-notice-close-color:var(--vxp-color-success-opacity-5);--vxp-notice-close-color-hover:var(--vxp-color-success-base)}.vxp-notice__item--background.vxp-notice__item--success{--vxp-notice-b-color:var(--vxp-color-success-opacity-5);--vxp-notice-mask-bg-color:var(--vxp-color-success-opacity-9);--vxp-notice-shadow:var(--vxp-unset);--vxp-notice-close-color:var(--vxp-color-success-opacity-7);--vxp-notice-close-color-hover:var(--vxp-color-success-opacity-2)}.vxp-notice__item--background.vxp-notice__item--color.vxp-notice__item--success{--vxp-notice-title-color:var(--vxp-color-success-dark-2);--vxp-notice-color:var(--vxp-color-success-dark-2);--vxp-notice-icon-color:var(--vxp-color-success-dark-1);--vxp-notice-marker-bg-color:var(--vxp-color-success-dark-1)}.vxp-notice__item--success{--vxp-notice-icon-color:var(--vxp-color-success-base);--vxp-notice-marker-bg-color:var(--vxp-color-success-base)}.vxp-notice__item--color-only.vxp-notice__item--warning{--vxp-notice-title-color:var(--vxp-color-warning-dark-1);--vxp-notice-color:var(--vxp-color-warning-base);--vxp-notice-close-color:var(--vxp-color-warning-opacity-5);--vxp-notice-close-color-hover:var(--vxp-color-warning-base)}.vxp-notice__item--background.vxp-notice__item--warning{--vxp-notice-b-color:var(--vxp-color-warning-opacity-5);--vxp-notice-mask-bg-color:var(--vxp-color-warning-opacity-9);--vxp-notice-shadow:var(--vxp-unset);--vxp-notice-close-color:var(--vxp-color-warning-opacity-7);--vxp-notice-close-color-hover:var(--vxp-color-warning-opacity-2)}.vxp-notice__item--background.vxp-notice__item--color.vxp-notice__item--warning{--vxp-notice-title-color:var(--vxp-color-warning-dark-2);--vxp-notice-color:var(--vxp-color-warning-dark-2);--vxp-notice-icon-color:var(--vxp-color-warning-dark-1);--vxp-notice-marker-bg-color:var(--vxp-color-warning-dark-1)}.vxp-notice__item--warning{--vxp-notice-icon-color:var(--vxp-color-warning-base);--vxp-notice-marker-bg-color:var(--vxp-color-warning-base)}.vxp-notice__item--color-only.vxp-notice__item--error{--vxp-notice-title-color:var(--vxp-color-error-dark-1);--vxp-notice-color:var(--vxp-color-error-base);--vxp-notice-close-color:var(--vxp-color-error-opacity-5);--vxp-notice-close-color-hover:var(--vxp-color-error-base)}.vxp-notice__item--background.vxp-notice__item--error{--vxp-notice-b-color:var(--vxp-color-error-opacity-5);--vxp-notice-mask-bg-color:var(--vxp-color-error-opacity-9);--vxp-notice-shadow:var(--vxp-unset);--vxp-notice-close-color:var(--vxp-color-error-opacity-7);--vxp-notice-close-color-hover:var(--vxp-color-error-opacity-2)}.vxp-notice__item--background.vxp-notice__item--color.vxp-notice__item--error{--vxp-notice-title-color:var(--vxp-color-error-dark-2);--vxp-notice-color:var(--vxp-color-error-dark-2);--vxp-notice-icon-color:var(--vxp-color-error-dark-1);--vxp-notice-marker-bg-color:var(--vxp-color-error-dark-1)}.vxp-notice__item--error{--vxp-notice-icon-color:var(--vxp-color-error-base);--vxp-notice-marker-bg-color:var(--vxp-color-error-base)}