@import './variables.scss';
@import '~@alifd/next/lib/core/index-noreset'; // next core style
@import '~@alifd/next/lib/message/scss/variable';
@import '~@alifd/next/lib/message/scss/mixin';
.#{$css-prefix}message {
&.#{$css-prefix}medium {
padding: $b-design-message-padding;
.#{$css-prefix}message-close {
line-height: $b-design-message-content-line-height;
}
&.#{$css-prefix}bg-white {
&.#{$css-prefix}inline {
&.#{$css-prefix}message-success,
&.#{$css-prefix}message-warning,
&.#{$css-prefix}message-notice,
&.#{$css-prefix}message-error,
&.#{$css-prefix}message-help,
&.#{$css-prefix}message-loading {
background-color: #fff;
border-color: #fff;
}
}
}
.#{$css-prefix}message-title,
.#{$css-prefix}message-content {
letter-spacing: $b-design-message-letter-space;
}
// 调整图标
&.#{$css-prefix}inline,
.#{$css-prefix}toast {
&.#{$css-prefix}message-help {
.#{$css-prefix}message-symbol-icon::before {
content: url('data:image/svg+xml; utf8, ');
}
}
&.#{$css-prefix}message-loading {
.#{$css-prefix}message-symbol-icon::before {
content: url('data:image/svg+xml; utf8, ');
}
}
}
&.#{$css-prefix}toast:not(.#{$css-prefix}message-wrapper) {
padding: $s-6;
.#{$css-prefix}message-close {
right: $s-3;
}
&.#{$css-prefix}title-content {
border-width: 0;
box-shadow: $b-design-message-toast-shadow;
border-radius: $b-design-message-corner;
max-width: $b-design-message-toast-max-width;
.#{$css-prefix}message-title {
line-height: $b-design-message-toast-title-line-height;
}
.#{$css-prefix}message-symbol-icon {
margin-right: $s-2;
line-height: $s-6;
}
.#{$css-prefix}message-content {
line-height: $b-design-message-toast-content-line-height;
padding: $b-design-message-toast-content-padding;
}
}
&.#{$css-prefix}message-success,
&.#{$css-prefix}message-warning,
&.#{$css-prefix}message-error,
&.#{$css-prefix}message-notice,
&.#{$css-prefix}message-loading,
&.#{$css-prefix}message-help {
&:before {
content: '';
width: 100%;
height: $b-design-message-toast-top-line-height;
position: absolute;
top: 0;
left: 0;
}
}
&.#{$css-prefix}message-success {
&:before {
background-image: $b-design-message-toast-top-line-success-img;
}
}
&.#{$css-prefix}message-warning {
&:before {
background-image: $b-design-message-toast-top-line-warning-img;
}
}
&.#{$css-prefix}message-error {
&:before {
background-image: $b-design-message-toast-top-line-error-img;
}
}
&.#{$css-prefix}message-notice,
&.#{$css-prefix}message-help {
&:before {
background-image: $b-design-message-toast-top-line-notice-img;
}
.#{$css-prefix}message-symbol-icon {
color: $color-notice-3;
}
}
&.#{$css-prefix}message-loading {
background-color: $b-design-loading-color;
&:before {
background-image: $b-design-message-toast-top-line-loading-img;
}
}
&.#{$css-prefix}bg-colorful {
&.#{$css-prefix}message-success {
background-color: $color-success-1;
border-color: $color-success-1;
}
&.#{$css-prefix}message-warning {
background-color: $b-design-message-warning-color;
border-color: $b-design-message-warning-color;
}
&.#{$css-prefix}message-error {
background-color: $color-error-1;
border-color: $color-error-1;
}
&.#{$css-prefix}message-notice,
&.#{$css-prefix}message-help {
background-color: $b-design-message-notice-color;
border-color: $b-design-message-notice-color;
}
&.#{$css-prefix}message-loading {
background-color: $b-design-loading-color;
border-color: $b-design-loading-color;
}
}
}
/* 全局消息提示 */
&.#{$css-prefix}message-wrapper {
padding-top: $s-3;
padding-bottom: $s-3;
height: $b-design-message-global-height;
/* 统一设置标题格式 */
&.#{$css-prefix}overlay-inner {
&.#{$css-prefix}toast {
.#{$css-prefix}message-title {
font-family: PingFangSC-Regular;
font-weight: normal;
padding-right: 0;
line-height: $b-design-message-content-line-height;
font-size: $b-design-content-font-size;
color: $color-fill1-6;
height: 18px;
line-height: 18px;
}
.#{$css-prefix}message-content {
height: 18px;
line-height: 18px;
}
}
}
/* 既有标题又有内容的全局消息 */
&.#{$css-prefix}with-content {
&.#{$css-prefix}title-content {
display: flex;
flex-direction: row;
border-radius: $b-design-message-corner;
.#{$css-prefix}message-symbol-icon {
margin: $b-design-message-symbol-icon-margin;
line-height: $b-design-message-content-line-height;
}
.#{$css-prefix}message-title {
padding-left: 0;
padding-right: $b-design-message-wrapper-title-padding;
}
.#{$css-prefix}message-content {
padding-right: $b-design-message-titleandcontent-padding-right;
font-family: PingFangSC-Regular;
color: $color-fill1-6;
}
}
.#{$css-prefix}message-content {
white-space: nowrap;
}
}
/* 只有内容没有标题的全局消息 */
&.#{$css-prefix}only-content {
/* 带有叉号的，右侧的padding更宽 */
&.#{$css-prefix}close-add {
.#{$css-prefix}message-content {
padding-right: $s-10;
}
}
/* 不管带叉号与否，左边icon与右侧content之间的距离都是4px*/
.#{$css-prefix}message-symbol-icon {
margin-right: 4px;
}
}
/* 带有叉号的全局提示 */
&.#{$css-prefix}close-add {
.#{$css-prefix}message-symbol-icon {
line-height: 18px;
}
&.#{$css-prefix}close-add:not(.#{$css-prefix}with-content) {
.#{$css-prefix}message-title {
padding-right: $b-design-message-titleandcontent-padding-right;
line-height: $b-design-message-content-line-height;
}
}
.#{$css-prefix}message-close {
line-height: 18px;
}
}
/* 带叉号的右padding要更宽保证叉号和文案之间的距离 */
.#{$css-prefix}message-content {
margin-top: 0px;
line-height: $b-design-message-content-line-height;
padding: $b-design-message-content-padding;
}
&.#{$css-prefix}message-notice,
&.#{$css-prefix}message-help {
.#{$css-prefix}message-symbol-icon {
color: $color-notice-3;
}
}
}
&.#{$css-prefix}addon {
.#{$css-prefix}message-close {
right: $b-design-close-icon-right;
}
&.#{$css-prefix}title-content {
.#{$css-prefix}message-title {
line-height: $b-design-message-toast-title-line-height;
}
.#{$css-prefix}message-symbol-icon {
line-height: $s-6;
}
}
&.#{$css-prefix}message-notice,
&.#{$css-prefix}message-help {
.#{$css-prefix}message-symbol-icon {
color: $color-notice-3;
}
}
}
// inline 消息提示
&.#{$css-prefix}inline {
height: $b-design-message-inline-height;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.#{$css-prefix}message-close {
right: $b-design-close-icon-right;
top: $b-design-message-with-close-icon;
}
&.#{$css-prefix}title-content {
display: flex;
flex-direction: row;
border-radius: $b-design-message-corner;
box-shadow: $b-design-message-line-shadow;
.#{$css-prefix}message-symbol-icon {
margin: $b-design-message-symbol-icon-margin;
line-height: $b-design-message-content-line-height;
}
.#{$css-prefix}message-title {
font-weight: bold;
padding: 0;
line-height: $b-design-message-content-line-height;
}
.#{$css-prefix}message-content {
margin-top: 0px;
line-height: $b-design-message-content-line-height;
padding: $b-design-message-content-padding;
color: $b-design-message-inline-content-color;
}
}
&.#{$css-prefix}message-loading {
background-color: $b-design-loading-color;
border-color: $b-design-loading-color;
}
&.#{$css-prefix}message-success {
.#{$css-prefix}message-title {
color: $color-success-2;
}
}
&.#{$css-prefix}message-warning {
background-color: $b-design-message-warning-color;
border-color: $b-design-message-warning-color;
.#{$css-prefix}message-title {
color: $b-design-message-warning-title-color;
}
}
&.#{$css-prefix}message-error {
.#{$css-prefix}message-title {
color: $color-error-3;
}
}
&.#{$css-prefix}message-notice,
&.#{$css-prefix}message-help {
.#{$css-prefix}message-title,
.#{$css-prefix}message-symbol-icon {
color: $color-notice-3;
}
background-color: $b-design-message-notice-color;
border-color: $b-design-message-notice-color;
}
}
}
}