@alifd/meet-react/lib/dialog/styles/index.css

Fusion Mobile React UI System Component

@charset "UTF-8";
/*
  @component dialog
  @display Dialog
  @chinese 对话框
  @family feedback
*/
:root {
  /*
    @desc bg-color
    @semantic 背景色
    @namespace style/common
   */
  --dialog-bg-color: var(--color-white);
  /*
    @desc padding-lr
    @semantic 左右内边距
    @namespace size/common
   */
  --dialog-padding-lr: var(--s-4);
  /*
    @desc centered-padding-tb
    @semantic 上下内边距
    @namespace size/common
   */
  --dialog-centered-padding-tb: var(--s-5);
  /*
    @desc centered-padding-lr
    @semantic 居中模式左右内边距
    @namespace size/common
   */
  --dialog-centered-padding-lr: var(--s-4);
  /*
    @desc centered-icon-size
    @semantic 居中模式居中弹窗的图标大小
    @namespace size/title
   */
  --dialog-centered-icon-size: var(--s-9);
  /*
    @desc title-min-height
    @semantic 标题高度
    @namespace size/title
   */
  --dialog-title-min-height: var(--s-14);
  /*
    @desc content-top
    @semantic 标题底部间隙
    @namespace size/title
   */
  --dialog-centered-title-margin-bottom: var(--s-1);
  /*
    @desc content-bottom
    @semantic 标题顶部间隙
    @namespace size/title
   */
  --dialog-centered-title-margin-top: var(--s-3);
  /*
    @desc divider-width
    @semantic 分割线粗细
    @namespace size/title
   */
  --dialog-divider-width: var(--line-1);
  /*
    @desc divider-color
    @semantic 分割线颜色
    @namespace style/common
   */
  --dialog-divider-color: var(--color-line1-1);
  /*
    @desc centered-border-color
    @semantic 分割线颜色
    @namespace style/common
   */
  --dialog-centered-border-color: var(--color-line1-4);
  /*
    @desc normal-corner
    @semantic 圆角
    @namespace size/common
   */
  --dialog-corner: var(--corner-zero);
  /*
    @desc centered-corner
    @semantic 居中模式圆角
    @namespace size/common
   */
  --dialog-centered-corner: var(--corner-2);
  /*
    @desc title-font-size
    @semantic 标题字体大小
    @namespace size/title
   */
  --dialog-title-font-size: var(--p-title-font-size);
  /*
    @desc content-font-size
    @semantic 内容字体大小
    @namespace size/content
   */
  --dialog-content-font-size: var(--p-body-1-font-size);
  /*
    @desc content-font-color
    @semantic 内容字体颜色
    @namespace style/content
   */
  --dialog-content-font-color: var(--color-text1-3);
  /*
    @desc ok-font-weight
    @semantic 居中模式确认按钮字重
    @namespace size/footer
   */
  --dialog-ok-btn-font-weight: 600;
  /*
    @desc cancel-font-weight
    @semantic 居中模式取消按钮字重
    @namespace size/footer
   */
  --dialog-cancel-btn-font-weight: 400;
  /*
    @desc cancel-btn-gap
    @semantic 底部按钮间距
    @namespace size/footer
   */
  --dialog-footer-btn-gap: var(--s-2);
  /*
    @desc centered-footer-height
    @semantic 底部按钮区域高度
    @namespace size/footer
   */
  --dialog-footer-centered-height: var(--s-12);
  /**
    @desc close-icon-color
    @semantic 关闭图标颜色
    @namespace style/header
   */
  --dialog-close-icon-color: var(--color-text1-2);
  /*
    @desc title-color
    @semantic 标题颜色
    @namespace style/title
   */
  --dialog-title-font-color: var(--color-text1-4);
  /*
    @desc close-spacing
    @semantic pop 弹出模式关闭按钮间距
    @namespace size/popup
   */
  --dialog-popup-icon-spacing: var(--s-5);
  /*
    @desc popup-corner
    @semantic pop 弹出模式圆角
    @namespace size/popup
   */
  --dialog-popup-corner: var(--corner-3);
}

.mt-dialog {
  background-color: var(--dialog-bg-color);
  border-top-left-radius: var(--dialog-corner);
  border-top-right-radius: var(--dialog-corner);
}
.mt-dialog--centered {
  border-radius: var(--dialog-centered-corner);
  width: 72vw;
}
.mt-dialog-container {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
}
.mt-dialog-container--centered {
  padding: var(--dialog-centered-padding-tb) var(--dialog-centered-padding-lr);
  flex-direction: column;
}
.mt-dialog-container--ios {
  justify-content: flex-start;
  align-items: center;
}
.mt-dialog-main {
  flex: 1;
}
.mt-dialog-header {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  border-bottom: var(--dialog-divider-width) solid var(--dialog-divider-color);
  padding-left: var(--dialog-padding-lr);
  min-height: var(--dialog-title-min-height);
}
.mt-dialog-header--centered {
  padding-left: 0;
  border: none;
  min-height: auto;
}
.mt-dialog-icon {
  margin-right: var(--box-medium-spacing);
  font-size: calc(var(--dialog-title-font-size) * 1.2);
  line-height: var(--dialog-title-min-height);
}
.mt-dialog-icon--centered {
  margin-right: 0;
  font-size: var(--dialog-centered-icon-size);
  line-height: 1;
}
.mt-dialog-icon--alert {
  color: var(--color-help-3);
}
.mt-dialog-icon--confirm {
  color: var(--color-warning-3);
}
.mt-dialog-icon--success {
  color: var(--color-success-3);
}
.mt-dialog-icon--error {
  color: var(--color-error-3);
}
.mt-dialog-icon--notice {
  color: var(--color-notice-3);
}
.mt-dialog-icon--warning {
  color: var(--color-warning-3);
}
.mt-dialog-icon--help {
  color: var(--color-help-3);
}
.mt-dialog-title {
  flex: 1;
  box-sizing: border-box;
  margin-top: calc((var(--dialog-title-min-height) - var(--dialog-title-font-size) * 1.2) / 2);
  margin-bottom: var(--s-2);
  color: var(--dialog-title-font-color);
  font-size: var(--dialog-title-font-size);
  line-height: 1.2;
  text-align: left;
}
.mt-dialog-title--centered {
  padding: 0;
  margin-top: var(--dialog-centered-title-margin-top);
  margin-bottom: var(--dialog-centered-title-margin-bottom);
}
.mt-dialog-title--ios {
  text-align: center;
  padding-right: 0;
}
.mt-dialog-close-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  height: var(--dialog-title-min-height);
  padding: var(--s-2) var(--dialog-padding-lr);
}
.mt-dialog-close-wrapper--centered {
  position: absolute;
  right: 0;
  top: 0;
  height: auto;
  padding: var(--s-2);
}
.mt-dialog-close {
  color: var(--dialog-close-icon-color);
  font-size: var(--dialog-title-font-size);
  line-height: 1.2;
}
.mt-dialog-close--centered {
  line-height: 1;
}
.mt-dialog-close--single {
  position: absolute;
  right: 0;
}
.mt-dialog-content {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  max-height: 60vh;
  overflow-y: scroll;
}
.mt-dialog-inner-content {
  flex: 1;
  padding: var(--s-4) 0 var(--s-4) var(--dialog-padding-lr);
  font-size: var(--dialog-content-font-size);
  line-height: calc(var(--dialog-content-font-size) + var(--s-2));
}
.mt-dialog-inner-content--fullwidth {
  padding-right: var(--dialog-padding-lr);
}
.mt-dialog-inner-content--centered {
  padding: 0;
}
.mt-dialog-content--centered {
  text-align: center;
}
.mt-dialog-content--centered-android {
  text-align: left;
}
.mt-dialog-content-text {
  font-size: var(--dialog-content-font-size);
  line-height: calc(var(--dialog-content-font-size) + var(--s-2));
  color: var(--dialog-content-font-color);
  white-space: pre-wrap;
  word-break: break-word;
}
.mt-dialog-footer {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  border-top: var(--dialog-divider-width) solid var(--dialog-divider-color);
  padding: var(--s-2) var(--dialog-padding-lr);
  box-sizing: border-box;
}
.mt-dialog-footer--centered {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: var(--box-medium-padding-ver);
  padding-right: var(--box-medium-padding-hoz);
}
.mt-dialog-footer--centered-ios {
  justify-content: center;
  border-top-width: var(--dialog-divider-width);
  border-top-color: var(--dialog-centered-border-color);
  border-top-style: solid;
  padding: 0;
  text-align: center;
}
.mt-dialog-btn {
  flex: 1;
}
.mt-dialog-btn--centered {
  display: flex;
  flex: 1;
  height: var(--dialog-footer-centered-height);
  padding-left: var(--s-2);
  padding-right: var(--s-2);
}
.mt-dialog-btn--centered-ok {
  font-weight: var(--dialog-ok-btn-font-weight);
}
.mt-dialog-btn--centered-cancel {
  font-weight: var(--dialog-cancel-btn-font-weight);
}
.mt-dialog-btn-col--ios {
  flex: 1;
  border-right-width: var(--dialog-divider-width);
  border-right-style: solid;
  border-right-color: var(--dialog-centered-border-color);
  text-align: center;
}
.mt-dialog-btn-col--ios:last-child {
  border-right: none;
}
.mt-dialog-footer-gap {
  width: var(--dialog-footer-btn-gap);
}
.mt-dialog-popup {
  --modal-container-bg-color: var(--color-transparent);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.mt-dialog-popup-container {
  width: 72vw;
  max-height: 80vh;
  background-color: var(--color-transparent);
  border-radius: var(--dialog-popup-corner);
  overflow: auto;
}
.mt-dialog-popup-close {
  color: var(--color-white);
  margin-top: var(--dialog-popup-icon-spacing);
}