ten-design-vue
Version:
ten-vue
77 lines (66 loc) • 1.47 kB
text/less
/* 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;
}
}