UNPKG

ten-design-vue

Version:

ten-vue

77 lines (66 loc) 1.47 kB
/* dependencies icon */ @import "../vars.less"; @message-backgroud-color-success: #D6FAEB; @message-backgroud-color-error: #FFE6D1; @message-backgroud-color-warning: #FFF0D1; @message-backgroud-color-info: #D6FAFA; @message-backgroud-color-dark: #636363; .ten-message { display: flex; align-items: top; margin-top: 14px; margin-left: calc(50vw); padding: @message-padding; min-width: 340px; max-width: 500px; color: @text-color; box-shadow: @shadow-level-1; transform: translate(-50%, 0); border-radius: @message-border-radius-default; background: #fff; justify-content: space-between; &__content { flex: 1; word-break: break-all; line-height: 18px; } &--success { background: @message-backgroud-color-success; .ten-message__icon { color: @success-color; } } &--error { background: @message-backgroud-color-error; .ten-message__icon { color: @error-color; } } &--info { background: @message-backgroud-color-info; .ten-message__icon { color: #102C53; } } &--warning { background: @message-backgroud-color-warning; .ten-message__icon { color: @warning-color; } } &--dark { background: @message-backgroud-color-dark; color: #fff; } &__icon { flex: none; margin-right: 6px; font-size: 18px; } &__icon&__close { flex: none; margin-left: 6px; margin-right: 0px; color: @icon-color; } }