tdesign-react/esm/common/style/web/components/dialog/_index.less

TDesign Component for React

// 组件允许单个组件打包，因此默认引入公共基础样式

@import "../../base.less";

@import "./_var.less";

@import "./_animate.less";

@import "./_mixin.less";

@import "../../mixins/_reset.less";

@import "../../mixins/_scrollbar.less";

// <name> 替换为组件名
.@{prefix}-dialog {
  .reset;

  width: @dialog-width;
  background-color: @dialog-bg-color;
  position: relative;
  border: @dialog-border;
  border-radius: @border-radius-large;

  // icon theme
  .t-icon.@{prefix}-is-info {
    color: @dialog-info-icon-color;
  }

  .t-icon.@{prefix}-is-success {
    color: @dialog-success-icon-color;
  }

  .t-icon.@{prefix}-is-warning {
    color: @dialog-warning-icon-color;
  }

  .t-icon.@{prefix}-is-error {
    color: @dialog-error-icon-color;
  }

  &--lock {
    overflow: hidden;
  }

  &__header {
    color: @dialog-header-text-color;
    font: @dialog-header-font;
    font-weight: @dialog-header-weight;
    display: flex;
    align-items: center;
    word-break: break-word;
    gap: @dialog-header-content-margin-right;
    box-sizing: border-box;

    .@{prefix}-dialog__header-content {
      display: flex;
      align-items: flex-start;
      width: 100%;
    }

    .t-icon:not(.t-icon-close) {
      font-size: @dialog-icon-size;
      display: inline-flex;
      align-items: center;
      margin-right: @dialog-header-icon-margin-right;
      flex-shrink: 0;
    }
  }

  &__header--fullscreen {
    background-color: @dialog-header-bg-color-fullscreen;
    min-height: @dialog-header-height-fullscreen;
    justify-content: flex-end;
    display: flex;
    align-items: center;
    flex-direction: row;
    padding: @dialog-header-padding-fullscreen;

    .@{prefix}-dialog__header-content {
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  &__body {
    .scrollbar();

    color: @dialog-body-text-color;
    font: @dialog-body-text-font;
    overflow: auto;
    padding: @dialog-body-padding;
    word-break: break-word;

    &__icon,
    &--icon {
      padding: @dialog-body-icon-padding;
    }
  }

  &__body--fullscreen {
    .scrollbar();

    box-sizing: border-box;
    padding: @dialog-body-padding-fullscreen;
    height: calc(100% - @dialog-header-height-fullscreen - @dialog-footer-height-fullscreen);
    overflow: auto;
  }

  &__body--fullscreen--without-footer {
    box-sizing: border-box;
    padding: @dialog-body-padding-fullscreen;
    height: calc(100% - @dialog-header-height-fullscreen);
    overflow: auto;
  }

  &__footer {
    width: 100%;
    text-align: right;
    padding: @dialog-footer-padding;
    .@{prefix}-button + .@{prefix}-button {
      margin-left: @dialog-footer-button-margin-left;
    }
  }

  &__footer--fullscreen {
    min-height: @dialog-footer-height-fullscreen;
    padding: @dialog-footer-padding-fullscreen;
    box-sizing: border-box;
  }

  &--default {
    padding: @dialog-default-spacer;
  }

  &__close {
    font-size: @dialog-close-icon-size;
    color: @dialog-close-color;
    display: flex;
    width: @dialog-close-icon-size;
    height: @dialog-close-icon-size;
    align-items: center;
    border-radius: @border-radius-default;
    transition: all @anim-duration-base linear;
    padding: @dialog-closebtn-padding;

    &:hover {
      cursor: pointer;
      background: @dialog-close-icon-hover;
    }

    &:active {
      background: @dialog-close-icon-active;
    }
  }

  &__close--fullscreen {
    display: flex;
    background: transparent;

    &:hover {
      cursor: pointer;
      background: @dialog-close-icon-fullscreen-hover;
    }

    &:active {
      background: @dialog-close-icon-fullscreen-active;
    }
  }

  &.@{prefix}-dialog--draggable {
    &:hover {
      cursor: move;
    }
    .@{prefix}-dialog__header,
    .@{prefix}-dialog__body,
    .@{prefix}-dialog__footer {
      &:hover {
        cursor: auto;
      }
    }
  }

  &__fullscreen {
    width: 100%;
    border-radius: 0;
  }
}

// t-dialog 组件本身
.@{prefix}-dialog__ctx {
  // dialog内容溢出需要考虑滚动
  pointer-events: auto;
  outline: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  // modeless 点击穿透 即可以操作背景后的元素
  &.@{prefix}-dialog__ctx--modeless {
    pointer-events: none;
  }

  &.@{prefix}-dialog__ctx--fixed {
    position: fixed;
    z-index: @z-index-dialog;
  }

  &.@{prefix}-dialog__ctx--absolute {
    position: absolute;
    // 用于挂载元素 修改定位方式
    .@{prefix}-dialog__mask {
      position: absolute;
    }
    .@{prefix}-dialog__wrap {
      position: absolute;
    }
  }

  &.@{prefix}-is-visible {
    visibility: visible;
  }

  &.@{prefix}-is-hidden {
    visibility: hidden;
  }

  &.@{prefix}-is-display {
    display: block;
  }

  &.@{prefix}-not-display {
    display: none;
  }
  // 遮罩层
  .@{prefix}-dialog__mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: @dialog-mask-bg-color;
    pointer-events: auto;
  }
  // wrap 滚动的显示层 固定为页面窗口大小
  .@{prefix}-dialog__wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: auto;
    .scrollbar(8px, 2px);
  }
  // 定位层 用于实现居中 或者距离顶部 定位
  .@{prefix}-dialog__position {
    // 因为内容会超出 使用flex布局
    display: flex;
    justify-content: center;
    min-height: 100%;
    width: 100%;
    // 通过修改position为absolute进行拖拽定位
    position: relative;
    // 设置最小距离顶部底部距离
    padding: 48px 0;
    box-sizing: border-box;
    // 居中和距顶部布局
    &.@{prefix}-dialog--top {
      align-items: flex-start;
      // 这里top api实现 更改padding 因为子元素拖拽定位 如果使用子元素margin 拖拽时需要计算margin 比较麻烦
      padding-top: @dialog-top-position-top;
    }
    // 垂直居中布局
    &.@{prefix}-dialog--center {
      align-items: center;
    }
  }

  .@{prefix}-dialog__position_fullscreen {
    // 因为内容会超出 使用flex布局
    display: flex;
    justify-content: center;
    min-height: 100%;
    width: 100%;
    // 通过修改position为absolute进行拖拽定位
    position: relative;
    box-sizing: border-box;
  }

  .@{prefix}-is-hidden {
    background: none;
  }

  .@{prefix}-dialog {
    pointer-events: auto;
    z-index: @z-index-dialog;
  }

  &.@{prefix}-dialog__ctx--modeless {
    .@{prefix}-dialog {
      box-shadow: @shadow-3;
    }
  }
}