ivue-material-plus/dist/unplugin-vue-components/styles/ivue-message.css

A high quality UI components Library with Vue.js

:root{--ivue-message-top:16px;--ivue-message-left:50%;--ivue-message-transform:translateX(-50%);--ivue-message-close-right:4px;--ivue-message-close-font-size:16px;--ivue-message-notice-content-padding:8px 16px;--ivue-message-notice-content-shadow:0 1px 6px rgba(0, 0, 0, 0.2);--ivue-message-notice-content-text-margin-left:5px;--ivue-message-notice-closable-margin-right:32px;--ivue-message-icon-margin-right:4px;--ivue-message-icon-font-size:18px;--ivue-message-loading-margin-right:4px;--ivue-message-loading-width:16px;--ivue-message-close-hover-color:#444444}.ivue-message{position:fixed;top:var(--ivue-message-top);left:var(--ivue-message-left);font-size:var(--ivue-font-base-size);z-index:1010;-webkit-transform:var(--ivue-message-transform);-ms-transform:var(--ivue-message-transform);transform:var(--ivue-message-transform);pointer-events:none;-webkit-transition:opacity .3s,top .4s,-webkit-transform .4s;transition:opacity .3s,top .4s,-webkit-transform .4s;transition:opacity .3s,transform .4s,top .4s;transition:opacity .3s,transform .4s,top .4s,-webkit-transform .4s}.ivue-message-notice{text-align:center}.ivue-message-notice:first-child{margin-top:-8px}.ivue-message-notice-close{position:absolute;right:var(--ivue-message-close-right);top:0;bottom:0;color:var(--ivue-legend-color);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer}.ivue-message-notice-close i{font-size:var(--ivue-message-close-font-size);-webkit-transition:color var(--ivue-default-transition-time) var(--ivue-ease-in-out);transition:color var(--ivue-default-transition-time) var(--ivue-ease-in-out);width:auto;min-width:auto;height:auto}.ivue-message-notice-close i:hover{color:var(--ivue-message-close-hover-color)}.ivue-message-notice-have-background-success .ivue-message-notice-content{color:var(--ivue-white-color);background:var(--ivue-success-color);border:1px solid var(--ivue-success-color)}.ivue-message-notice-have-background-success .ivue-icon{color:var(--ivue-white-color)}.ivue-message-notice-have-background-info .ivue-message-notice-content{background:var(--ivue-primary-color);color:var(--ivue-white-color);border:1px solid var(--ivue-primary-color)}.ivue-message-notice-have-background-info .ivue-icon{color:var(--ivue-white-color)}.ivue-message-notice-have-background-warning .ivue-message-notice-content{background:var(--ivue-warning-color);color:var(--ivue-white-color);border:1px solid var(--ivue-warning-color)}.ivue-message-notice-have-background-warning .ivue-icon{color:var(--ivue-white-color)}.ivue-message-notice-have-background-error .ivue-message-notice-content{background:var(--ivue-error-color);color:var(--ivue-white-color);border:1px solid var(--ivue-error-color)}.ivue-message-notice-have-background-error .ivue-icon{color:var(--ivue-white-color)}.ivue-message-notice-have-background .ivue-message-notice-content{-webkit-box-shadow:none;box-shadow:none}.ivue-message-notice-content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;padding:var(--ivue-message-notice-content-padding);pointer-events:all;-webkit-box-shadow:var(--ivue-message-notice-content-shadow);box-shadow:var(--ivue-message-notice-content-shadow);background-color:var(--ivue-white-color);border-radius:var(--ivue-border-radius)}.ivue-message-notice-content-text{margin-left:var(--ivue-message-notice-content-text-margin-left);display:inline-block}.ivue-message-notice-closable .ivue-message-notice-content-text{margin-right:var(--ivue-message-notice-closable-margin-right)}.ivue-message-content span{vertical-align:middle}.ivue-message-icon{margin-right:var(--ivue-message-icon-margin-right);font-size:var(--ivue-message-icon-font-size);vertical-align:middle;width:auto;min-width:auto;height:auto}.ivue-message-icon-success{color:var(--ivue-success-color)}.ivue-message-icon-info{color:var(--ivue-primary-color)}.ivue-message-icon-warning{color:var(--ivue-warning-color)}.ivue-message-icon-error{color:var(--ivue-error-color)}.ivue-message-loading{margin-right:var(--ivue-message-loading-margin-right);width:var(--ivue-message-loading-width);color:var(--ivue-primary-color);vertical-align:middle}.ivue-message .ivue-progress-circular-overlay{stroke:currentColor;z-index:2;-webkit-transition:all .6s ease-in-out;transition:all .6s ease-in-out}.ivue-message .ivue-progress-circular-indeterminate{display:inline-block}.ivue-message .ivue-load-loop{-webkit-animation:ivue-load-loop 1s linear infinite;animation:ivue-load-loop 1s linear infinite}@-webkit-keyframes ivue-load-loop{from{-webkit-transform:rotate(0);transform:rotate(0)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes ivue-load-loop{from{-webkit-transform:rotate(0);transform:rotate(0)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.ivue-message-message-fade-enter-from,.ivue-message-message-fade-leave-to{opacity:0;-webkit-transform:translate(-50%,-100%);-ms-transform:translate(-50%,-100%);transform:translate(-50%,-100%)}