vue-amazing-ui/es/message/Message.css

An Amazing Vue3 UI Components Library, Using TypeScript.

.slide-fade-move[data-v-6b15ff1c],.slide-fade-enter-active[data-v-6b15ff1c],.slide-fade-leave-active[data-v-6b15ff1c]{transition:all .3s cubic-bezier(.78,.14,.15,.86)}.slide-fade-enter-from[data-v-6b15ff1c],.slide-fade-leave-to[data-v-6b15ff1c]{transform:translateY(-100%);opacity:0}.slide-fade-leave-active[data-v-6b15ff1c]{position:absolute;left:0;right:0;margin:0 auto}.message-wrap[data-v-6b15ff1c]{font-size:14px;color:#000000e0;line-height:1.57142857;position:fixed;z-index:999;width:100%;left:0;right:0;pointer-events:none}.message-wrap .message-container[data-v-6b15ff1c]{text-align:center}.message-wrap .message-container[data-v-6b15ff1c]:not(:last-child){margin-bottom:8px}.message-wrap .message-container .message-content-wrap[data-v-6b15ff1c]{display:inline-flex;gap:8px;align-items:center;padding:9px 12px;background:#fff;border-radius:8px;box-shadow:0 6px 16px #00000014,0 3px 6px -4px #0000001f,0 9px 28px 8px #0000000d;pointer-events:auto}.message-wrap .message-container .message-content-wrap[data-v-6b15ff1c] .icon-svg{display:inline-block;font-size:16px;fill:currentColor}.message-wrap .message-container .message-content-wrap .circle[data-v-6b15ff1c]{display:inline-block;stroke:currentColor;animation:loadingRotate-6b15ff1c 2s linear infinite}@keyframes loadingRotate-6b15ff1c{to{transform:rotate(360deg)}}.message-wrap .message-container .message-content-wrap .circle .path[data-v-6b15ff1c]{stroke-dasharray:90,150;stroke-dashoffset:0;stroke-width:5;stroke-linecap:round;animation:loadingDash-6b15ff1c 1.5s ease-in-out infinite}@keyframes loadingDash-6b15ff1c{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-40px}to{stroke-dasharray:90,150;stroke-dashoffset:-120px}}.message-wrap .message-container .message-content-wrap .message-content[data-v-6b15ff1c]{display:inline-block}.message-wrap .message-container .icon-open[data-v-6b15ff1c] svg{fill:currentColor}.message-wrap .message-container .icon-info[data-v-6b15ff1c] svg,.message-wrap .message-container .icon-loading[data-v-6b15ff1c] svg{color:var(--message-primary-color);fill:currentColor}.message-wrap .message-container .icon-success[data-v-6b15ff1c] svg{color:var(--message-success-color);fill:currentColor}.message-wrap .message-container .icon-warning[data-v-6b15ff1c] svg{color:var(--message-warning-color);fill:currentColor}.message-wrap .message-container .icon-error[data-v-6b15ff1c] svg{color:var(--message-error-color);fill:currentColor}