@alifd/meet-react/es/message/styles/index.css

Fusion Mobile React UI System Component

@charset "UTF-8";
/*
  @component message
  @display Message
  @chinese 信息反馈
  @family feedback
*/
:root {
  /*
   @desc spacing
   @semantic 内部元素间距
   @namespace size/common
  */
  --message-spacing: var(--s-2);
  /*
   @desc padding-tb
   @semantic 上下内边距
   @namespace size/bounding
  */
  --message-padding-tb: var(--s-2);
  /*
   @desc padding-lr
   @semantic 左右内边距
   @namespace size/bounding
  */
  --message-padding-lr: var(--s-4);
  /*
   @desc corner
   @semantic 圆角尺寸
   @namespace size/bounding
  */
  --message-corner: var(--corner-zero);
  /**
     @desc elevation
     @semantic 海拔
     @namespace style/common
     @unconfigurable
    */
  --message-elevation: var(--elevation-4);
  /*
   @desc title-font-large
   @semantic 标题字体大小
   @namespace size/title
  */
  --message-title-font-size: var(--p-body-2-font-size);
  /*
   @desc title-font-weight
   @semantic 标题字重
   @namespace size/title
  */
  --message-title-font-weight: 600;
  /*
   @desc title-color
   @semantic 标题字体颜色
   @namespace style/common
  */
  --message-title-color: var(--color-text1-4);
  /*
   @desc content-font-size
   @semantic 内容字体大小
   @namespace size/content
  */
  --message-content-font-size: var(--p-body-1-font-size);
  /*
   @desc content-simple-font-size
   @semantic 精简模式字体大小
   @namespace size/content
  */
  --message-content-simple-font-size: var(--p-body-1-font-size);
  /*
   @desc content-color
   @semantic 默认内容字体颜色
   @namespace style/content
  */
  --message-content-font-color: var(--color-text1-3);
  /*
   @desc content-success-color
   @semantic 成功内容字体色
   @namespace style/content
  */
  --message-content-success-font-color: var(--color-success-3);
  /*
   @desc content-warning-color
   @semantic 警告内容字体色
   @namespace style/content
  */
  --message-content-warning-font-color: var(--color-warning-3);
  /*
   @desc content-error-color
   @semantic 错误内容字体色
   @namespace style/content
  */
  --message-content-error-font-color: var(--color-error-3);
  /*
   @desc content-notice-color
   @semantic 通知内容字体色
   @namespace style/content
  */
  --message-content-notice-font-color: var(--color-notice-3);
  /*
   @desc content-help-color
   @semantic 帮助内容字体色
   @namespace style/content
  */
  --message-content-help-font-color: var(--color-help-3);
  /*
   @desc content-loading-color
   @semantic 加载中内容字体色
   @namespace style/content
  */
  --message-content-loading-font-color: var(--color-brand-3);
  /*
   @desc success-bg-color
   @semantic 成功背景色
   @namespace style/common
  */
  --message-success-bg-color: var(--color-success-1);
  /*
   @desc warning-bg-color
   @semantic 警告背景色
   @namespace style/common
  */
  --message-warning-bg-color: var(--color-warning-1);
  /*
   @desc error-bg-color
   @semantic 错误背景色
   @namespace style/common
  */
  --message-error-bg-color: var(--color-error-1);
  /*
   @desc notice-bg-color
   @semantic 通知背景色
   @namespace style/common
  */
  --message-notice-bg-color: var(--color-notice-1);
  /*
   @desc help-bg-color
   @semantic 帮助背景色
   @namespace style/common
  */
  --message-help-bg-color: var(--color-help-1);
  /*
   @desc loading-bg-color
   @semantic 加载背景色
   @namespace style/common
  */
  --message-loading-bg-color: var(--color-white);
  /*
   @desc success-color
   @semantic 成功图标&标题颜字体色
   @namespace style/common
  */
  --message-success-color: var(--color-success-3);
  /*
   @desc warning-color
   @semantic 警告图标&标题颜字体色
   @namespace style/common
  */
  --message-warning-color: var(--color-warning-3);
  /*
   @desc error-color
   @semantic 错误图标&标题颜字体色
   @namespace style/common
  */
  --message-error-color: var(--color-error-3);
  /*
   @desc notice-color
   @semantic 通知图标&标题颜字体色
   @namespace style/common
  */
  --message-notice-color: var(--color-notice-3);
  /*
   @desc help-color
   @semantic 帮助图标&标题颜色
   @namespace style/common
  */
  --message-help-color: var(--color-help-3);
  /*
   @desc loading-color
   @semantic 加载中图标&标题颜字体色
   @namespace style/common
  */
  --message-loading-color: var(--color-brand-3);
  /*
   @desc close-icon-font-size
   @semantic 关闭图标字体大小
   @namespace size/icon
  */
  --message-close-icon-font-size: var(--p-body-2-font-size);
  /*
   @desc close-icon-color
   @semantic 默认关闭图标颜色
   @namespace style/icon
  */
  --message-close-icon-color: var(--color-text1-3);
  /*
   @desc success-close-icon-color
   @semantic 成功关闭图标色
   @namespace style/icon
  */
  --message-success-close-icon-color: var(--color-success-3);
  /*
   @desc warning-close-icon-color
   @semantic 警告关闭图标色
   @namespace style/icon
  */
  --message-warning-close-icon-color: var(--color-warning-3);
  /*
   @desc error-close-icon-color
   @semantic 错误关闭图标色
   @namespace style/icon
  */
  --message-error-close-icon-color: var(--color-error-3);
  /*
   @desc notice-close-icon-color
   @semantic 通知关闭图标色
   @namespace style/icon
  */
  --message-notice-close-icon-color: var(--color-notice-3);
  /*
   @desc help-close-icon-color
   @semantic 帮助关闭图标色
   @namespace style/icon
  */
  --message-help-close-icon-color: var(--color-help-3);
  /*
   @desc loading-close-icon-color
   @semantic 加载中关闭图标色
   @namespace style/icon
  */
  --message-loading-close-icon-color: var(--color-brand-3);
  /*
   @desc toast-font-size
   @semantic toast 内容字体大小
   @namespace size/toast
  */
  --message-toast-font-size: var(--p-body-1-font-size);
  /*
   @desc min-width
   @semantic toast 最小宽度
   @namespace size/bounding
  */
  --message-toast-min-width: var(--s-30);
  /*
     @desc bg-color
     @semantic toast 背景色
     @namespace style/toast
    */
  --message-toast-bg: rgba(0, 0, 0, 0.6);
  /*
   @desc color
   @semantic toast 文本颜色
   @namespace style/toast
  */
  --message-toast-color: var(--color-white);
  /*
   @desc padding-tb
   @semantic toast 上下内边距
   @namespace size/toast
  */
  --message-toast-padding-tb: var(--s-2);
  /*
   @desc padding-lr
   @semantic toast 左右内边距
   @namespace size/toast
  */
  --message-toast-padding-lr: var(--s-3);
  /*
   @desc corner
   @semantic toast 圆角
   @namespace size/toast
  */
  --message-toast-corner: var(--corner-2);
  /*
   @desc icon-size
   @semantic toast 图标字体大小
   @namespace size/toast
  */
  --message-toast-icon-size: var(--p-display-1-font-size);
  /*
   @desc icon-gap
   @semantic toast 图标与文字的间隙
   @namespace size/toast
  */
  --message-toast-gap: var(--s-2);
}

.mt-message {
  z-index: var(--message-elevation);
  border-radius: var(--message-corner);
}
.mt-message--inline-success {
  background-color: var(--message-success-bg-color);
}
.mt-message--inline-warning {
  background-color: var(--message-warning-bg-color);
}
.mt-message--inline-error {
  background-color: var(--message-error-bg-color);
}
.mt-message--inline-notice {
  background-color: var(--message-notice-bg-color);
}
.mt-message--inline-help {
  background-color: var(--message-help-bg-color);
}
.mt-message--inline-loading {
  background-color: var(--message-loading-bg-color);
}
.mt-message--inline {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: var(--message-padding-tb) var(--message-padding-lr);
  box-sizing: border-box;
}
.mt-message--inline--no-content {
  align-items: center;
}
.mt-message-container {
  flex-grow: 1;
  flex-shrink: 1;
}
.mt-message-container--toast {
  flex-grow: inherit;
}
.mt-message-icon-container--toast {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: var(--s-11);
  height: var(--s-11);
  margin-bottom: var(--message-toast-gap);
}
.mt-message-icon {
  display: block;
}
.mt-message-icon--success {
  color: var(--message-success-color);
}
.mt-message-icon--warning {
  color: var(--message-warning-color);
}
.mt-message-icon--error {
  color: var(--message-error-color);
}
.mt-message-icon--notice {
  color: var(--message-notice-color);
}
.mt-message-icon--help {
  color: var(--message-help-color);
}
.mt-message-icon--loading {
  color: var(--message-loading-color);
}
.mt-message-icon--inline {
  margin-right: var(--message-spacing);
  font-size: calc(var(--message-title-font-size) * 1.25);
  line-height: calc(var(--message-title-font-size) * 1.5);
}
.mt-message-icon--toast {
  color: var(--message-toast-color);
  font-size: var(--message-toast-icon-size);
}
.mt-message-title {
  font-size: var(--message-title-font-size);
  font-weight: var(--message-title-font-weight);
  color: var(--message-title-color);
  word-break: break-all;
  white-space: pre-wrap;
  line-height: 1.5;
}
.mt-message-title--success {
  color: var(--message-success-color);
  font-weight: normal;
}
.mt-message-title--warning {
  color: var(--message-warning-color);
  font-weight: normal;
}
.mt-message-title--error {
  color: var(--message-error-color);
  font-weight: normal;
}
.mt-message-title--notice {
  color: var(--message-notice-color);
  font-weight: normal;
}
.mt-message-title--help {
  color: var(--message-help-color);
  font-weight: normal;
}
.mt-message-title--loading {
  color: var(--message-loading-color);
  font-weight: normal;
}
.mt-message-close {
  font-size: var(--message-close-icon-font-size);
  line-height: calc(var(--message-title-font-size) * 1.5);
  color: var(--message-close-icon-color);
  padding-left: var(--message-spacing);
}
.mt-message-close--success {
  color: var(--message-success-close-icon-color);
}
.mt-message-close--warning {
  color: var(--message-warning-close-icon-color);
}
.mt-message-close--error {
  color: var(--message-error-close-icon-color);
}
.mt-message-close--notice {
  color: var(--message-notice-close-icon-color);
}
.mt-message-close--help {
  color: var(--message-help-close-icon-color);
}
.mt-message-close--loading {
  color: var(--message-loading-close-icon-color);
}
.mt-message-content-container--toast {
  display: table-cell;
  text-align: center;
  font-size: var(--message-toast-font-size);
}
.mt-message-content--inline {
  color: var(--message-content-font-color);
  font-size: var(--message-content-font-size);
  line-height: 1.2;
}
.mt-message-content--inline-success {
  color: var(--message-content-success-font-color);
}
.mt-message-content--inline-warning {
  color: var(--message-content-warning-font-color);
}
.mt-message-content--inline-error {
  color: var(--message-content-error-font-color);
}
.mt-message-content--inline-notice {
  color: var(--message-content-notice-font-color);
}
.mt-message-content--inline-help {
  color: var(--message-content-help-font-color);
}
.mt-message-content--inline-loading {
  color: var(--message-content-loading-font-color);
}
.mt-message-content--inline-simple {
  font-size: var(--message-content-simple-font-size);
  line-height: calc(var(--message-title-font-size) * 1.5);
}
.mt-message-content--no-title {
  margin-top: 0;
}
.mt-message-content--toast {
  color: var(--message-toast-color);
  font-size: var(--message-toast-font-size);
}
.mt-message--toast {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--message-toast-bg);
  padding: var(--message-toast-padding-tb) var(--message-toast-padding-lr);
  border-radius: var(--message-toast-corner);
  min-width: var(--message-toast-min-width);
  max-width: 40vw;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}
.mt-message--toast-with-icon {
  min-height: var(--message-toast-min-width);
}
.mt-message-mask {
  position: fixed;
  z-index: calc(var(--message-elevation) - 1);
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
}