various-ui/styles/message.css

This is a test version of the Vue 3 component library

.ui-message{--uioption-message-radius:var(--uisize-radius);--uioption-message-spacing-x:var(--uisize-spacing-x);--uioption-message-spacing-y:calc(var(--uisize-spacing-y) / 2);--uioption-message-icon-color:var(--uicolor-main-color);--uioption-message-box-shadow:var(--uicolor-box-shadow);--uioption-message-background-color:var(--uicolor-main-color-005)}.ui-message{display:flex;padding:var(--uioption-message-spacing-y) var(--uioption-message-spacing-x);transition:all .3s;box-shadow:var(--uioption-message-box-shadow);align-items:flex-start;border-radius:var(--uioption-message-radius);background-color:var(--uioption-message-background-color)}.ui-message .ui-message-icon{color:#fff;margin:5px 8px 0 0;font-size:20px;border-radius:50%;background-color:var(--uioption-message-icon-color)}.ui-message .ui-message-content{flex:1}.ui-message.v-enter-from,.ui-message.v-leave-to{opacity:0;transform:translateY(0)!important}.ui-message.v-enter-to,.ui-message.v-leave-from{opacity:1}.ui-message.ui-error-type{--uioption-message-icon-color:var(--uicolor-error);--uioption-message-background-color:var(--uicolor-error-005)}.ui-message.ui-warning-type{--uioption-message-icon-color:var(--uicolor-warning);--uioption-message-background-color:var(--uicolor-warning-005)}.ui-message.ui-success-type{--uioption-message-icon-color:var(--uicolor-success);--uioption-message-background-color:var(--uicolor-success-005)}