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

An Amazing Vue3 UI Components Library, Using TypeScript.

.slide-fade-move[data-v-74893623],.slide-fade-enter-active[data-v-74893623],.slide-fade-leave-active[data-v-74893623]{transition:all .3s cubic-bezier(.78,.14,.15,.86)}.slide-fade-enter-from[data-v-74893623],.slide-fade-leave-to[data-v-74893623]{transform:translateY(-100%);opacity:0}.slide-fade-leave-active[data-v-74893623]{position:absolute;left:0;right:0;margin:0 auto}.m-message[data-v-74893623]{font-size:14px;color:#000000e0;line-height:1.57142857;position:fixed;z-index:999;width:100%;left:0;right:0;pointer-events:none}.m-message .message-wrap[data-v-74893623]{text-align:center}.m-message .message-wrap[data-v-74893623]:not(:last-child){margin-bottom:8px}.m-message .message-wrap .message-content-wrap[data-v-74893623]{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}.m-message .message-wrap .message-content-wrap[data-v-74893623] .icon-svg{display:inline-block;font-size:16px;fill:currentColor}.m-message .message-wrap .message-content-wrap .circle[data-v-74893623]{display:inline-block;stroke:currentColor;animation:loadingRotate-74893623 2s linear infinite}@keyframes loadingRotate-74893623{to{transform:rotate(360deg)}}.m-message .message-wrap .message-content-wrap .circle .path[data-v-74893623]{stroke-dasharray:90,150;stroke-dashoffset:0;stroke-width:5;stroke-linecap:round;animation:loadingDash-74893623 1.5s ease-in-out infinite}@keyframes loadingDash-74893623{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-40px}to{stroke-dasharray:90,150;stroke-dashoffset:-120px}}.m-message .message-wrap .message-content-wrap .message-content[data-v-74893623]{display:inline-block}.m-message .message-wrap .icon-open[data-v-74893623] svg{fill:currentColor}.m-message .message-wrap .icon-info[data-v-74893623] svg,.m-message .message-wrap .icon-loading[data-v-74893623] svg{color:var(--message-primary-color);fill:currentColor}.m-message .message-wrap .icon-success[data-v-74893623] svg{color:var(--message-success-color);fill:currentColor}.m-message .message-wrap .icon-warning[data-v-74893623] svg{color:var(--message-warning-color);fill:currentColor}.m-message .message-wrap .icon-error[data-v-74893623] svg{color:var(--message-error-color);fill:currentColor}