vue-amazing-ui/lib/notification/Notification.css

An Amazing Vue3 UI Components Library, Using TypeScript.

.right-move[data-v-011460f8],.right-enter-active[data-v-011460f8],.right-leave-active[data-v-011460f8],.left-move[data-v-011460f8],.left-enter-active[data-v-011460f8],.left-leave-active[data-v-011460f8]{transition:all .2s cubic-bezier(.645,.045,.355,1)}.right-leave-to[data-v-011460f8],.left-leave-to[data-v-011460f8]{max-height:0!important;opacity:0!important;padding-top:0!important;padding-bottom:0!important;margin-bottom:0!important}.right-enter-from[data-v-011460f8]{transform:translate(100%);opacity:0}.right-leave-active[data-v-011460f8]{position:absolute;right:0}.left-enter-from[data-v-011460f8]{transform:translate(-100%);opacity:0}.left-leave-active[data-v-011460f8]{position:absolute;left:0}.notification-wrap[data-v-011460f8]{position:fixed;z-index:999;color:#000000e0;font-size:14px;line-height:1.57142857;margin-right:24px}.notification-wrap .notification-container[data-v-011460f8]{position:relative;display:flex;width:384px;max-width:calc(100vw - 48px);margin-bottom:16px;margin-left:auto;padding:20px 24px;overflow:hidden;line-height:1.57142857;word-break:break-all;background:#fff;border-radius:8px;box-shadow:0 6px 16px #00000014,0 3px 6px -4px #0000001f,0 9px 28px 8px #0000000d}.notification-wrap .notification-container[data-v-011460f8] .icon-svg{flex-shrink:0;display:inline-block;font-size:24px;fill:currentColor;margin-right:12px}.notification-wrap .notification-container[data-v-011460f8] .icon-svg svg{fill:currentColor}.notification-wrap .notification-container .notification-content[data-v-011460f8]{width:100%}.notification-wrap .notification-container .notification-content .notification-title[data-v-011460f8]{padding-right:24px;margin-bottom:8px;font-size:16px;color:#000000e0;line-height:1.5}.notification-wrap .notification-container .notification-content .notification-description[data-v-011460f8]{font-size:14px}.notification-wrap .notification-container .notification-close[data-v-011460f8]{position:absolute;top:20px;right:24px;display:flex;align-items:center;justify-content:center;color:#00000073;outline:none;width:22px;height:22px;border-radius:4px;transition:background-color .2s,color .2s}.notification-wrap .notification-container .notification-close .close-svg[data-v-011460f8]{display:inline-block;font-size:14px;fill:currentColor;transition:color .2s}.notification-wrap .notification-container .notification-close[data-v-011460f8]:hover{background:#0000000f}.notification-wrap .notification-container .notification-close:hover .close-svg[data-v-011460f8]{color:#000000e0}.notification-wrap .icon-info[data-v-011460f8] .icon-svg{color:var(--notification-primary-color)}.notification-wrap .icon-success[data-v-011460f8] .icon-svg{color:var(--notification-success-color)}.notification-wrap .icon-warning[data-v-011460f8] .icon-svg{color:var(--notification-warning-color)}.notification-wrap .icon-error[data-v-011460f8] .icon-svg{color:var(--notification-error-color)}.notification-topRight[data-v-011460f8],.notification-bottomRight[data-v-011460f8]{margin-right:24px;right:0}.notification-topLeft[data-v-011460f8],.notification-bottomLeft[data-v-011460f8]{margin-left:24px;left:0}