element-plus/lib/theme-chalk/el-notification.css

A Component Library for Vue3.0

:root{--el-transition-duration:0.3s;--el-transition-duration-fast:0.2s;--el-ease-in-out-bezier-function:cubic-bezier(0.645, 0.045, 0.355, 1);--el-fast-bezier-transition:cubic-bezier(0.23, 1, 0.32, 1);--el-all-transition:all var(--el-transition-duration) var(--el-ease-in-out-bezier-function);--el-fade-transition:opacity var(--el-transition-duration) var(--el-fast-bezier-transition);--el-md-fade-transition:transform var(--el-transition-duration) var(--el-fast-bezier-transition),opacity var(--el-transition-duration) var(--el-fast-bezier-transition);--el-fade-linear-transition:opacity var(--el-transition-duration-fast) linear;--el-border-transition-base:border-color var(--el-transition-duration-fast) var(--el-ease-in-out-bezier-function);--el-color-transition-base:color var(--el-transition-duration-fast) var(--el-ease-in-out-bezier-function);--el-notification-width:330px;--el-notification-padding:14px 26px 14px 13px;--el-notification-radius:8px;--el-notification-shadow:var(--el-box-shadow-light);--el-notification-border-color:var(--el-border-color-lighter);--el-notification-icon-size:24px;--el-notification-close-font-size:var(--el-message-close-size);--el-notification-group-margin-left:13px;--el-notification-group-margin-right:8px;--el-notification-content-font-size:var(--el-font-size-base);--el-notification-content-color:var(--el-color-text-regular);--el-notification-title-font-size:16px;--el-notification-title-color:var(--el-color-text-primary);--el-notification-close-color:var(--el-color-text-secondary);--el-notification-close-hover-color:var(--el-color-text-regular);--el-notification-success-icon-color:var(--el-color-success);--el-notification-info-icon-color:var(--el-color-info);--el-notification-warning-icon-color:var(--el-color-warning);--el-notification-error-icon-color:var(--el-color-error)}.el-notification{display:-webkit-box;display:-ms-flexbox;display:flex;width:var(--el-notification-width);padding:var(--el-notification-padding);border-radius:var(--el-notification-radius);-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid var(--el-notification-border-color);position:fixed;background-color:var(--el-color-white);-webkit-box-shadow:var(--el-notification-shadow);box-shadow:var(--el-notification-shadow);-webkit-transition:opacity var(--el-transition-duration),left var(--el-transition-duration),right var(--el-transition-duration),top .4s,bottom var(--el-transition-duration),-webkit-transform var(--el-transition-duration);transition:opacity var(--el-transition-duration),left var(--el-transition-duration),right var(--el-transition-duration),top .4s,bottom var(--el-transition-duration),-webkit-transform var(--el-transition-duration);transition:opacity var(--el-transition-duration),transform var(--el-transition-duration),left var(--el-transition-duration),right var(--el-transition-duration),top .4s,bottom var(--el-transition-duration);transition:opacity var(--el-transition-duration),transform var(--el-transition-duration),left var(--el-transition-duration),right var(--el-transition-duration),top .4s,bottom var(--el-transition-duration),-webkit-transform var(--el-transition-duration);overflow-wrap:anywhere;overflow:hidden;z-index:9999}.el-notification.right{right:16px}.el-notification.left{left:16px}.el-notification__group{margin-left:var(--el-notification-group-margin-left);margin-right:var(--el-notification-group-margin-right)}.el-notification__title{font-weight:700;font-size:var(--el-notification-title-font-size);line-height:var(--el-notification-icon-size);color:var(--el-notification-title-color);margin:0}.el-notification__content{font-size:var(--el-notification-content-font-size);line-height:24px;margin:6px 0 0;color:var(--el-notification-content-color);text-align:justify}.el-notification__content p{margin:0}.el-notification__icon{height:var(--el-notification-icon-size);width:var(--el-notification-icon-size);font-size:var(--el-notification-icon-size)}.el-notification__closeBtn{position:absolute;top:18px;right:15px;cursor:pointer;color:var(--el-notification-close-color);font-size:var(--el-notification-close-font-size)}.el-notification__closeBtn:hover{color:var(--el-notification-close-hover-color)}.el-notification .el-icon-success{color:var(--el-notification-success-icon-color)}.el-notification .el-icon-info{color:var(--el-notification-info-icon-color)}.el-notification .el-icon-warning{color:var(--el-notification-warning-icon-color)}.el-notification .el-icon-error{color:var(--el-notification-error-icon-color)}.el-notification-fade-enter-from.right{right:0;-webkit-transform:translateX(100%);transform:translateX(100%)}.el-notification-fade-enter-from.left{left:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.el-notification-fade-leave-to{opacity:0}