tdesign-mobile-vue/esm/_common/style/mobile/components/dialog/v2/_index.less

tdesign-mobile-vue

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

@import "./_var.less";

.@{dialog} {
  overflow: hidden;
  width: @dialog-width;
  border-radius: @dialog-border-radius;
  background-color: @bg-color-container;

  &__close-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: @dialog-close-font-size;
    color: @dialog-close-color;
  }

  &__content {
    padding: @spacer-4 @spacer-3 0;
    max-height: @dialog-body-max-height;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: @font-size-m;
  }

  &__header {
    text-align: center;
    font-weight: bold;
    font-size: @dialog-title-font-size;
    line-height: @dialog-title-line-height;
    color: @dialog-title-color;
  }

  &__header + &__body {
    margin-top: 8px;
  }

  &__body {
    overflow-y: scroll;
    text-align: center;
    -webkit-overflow-scrolling: touch;
    font-size: @dialog-content-font-size;
    color: @dialog-content-color;
    line-height: @dialog-content-line-height;

    &-text {
      word-wrap: break-word;
    }

    &--left {
      text-align: left;
    }

    &--right {
      text-align: right;
    }
  }

  &__footer {
    display: flex;
    padding: 24px;

    &--column {
      flex-flow: column-reverse;

      .@{dialog}__button {
        width: 100%;
        flex: unset;
      }
    }

    &--full {
      padding: 32px 0 0;
    }
  }

  &__button {
    position: relative;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    &--horizontal + &--horizontal {
      margin-left: 12px;
    }

    &--vertical + &--vertical {
      margin-bottom: 12px;
    }

    &--text {
      flex: 1;

      --td-button-border-radius: 0;
      --td-button-medium-height: 56px;

      border-radius: 0;

      &::before {
        content: " ";
        position: absolute;
        box-sizing: border-box;
        top: 0;
        left: 0;
        border-top: 1px solid @border-color;
        border-left: 1px solid @border-color;
        transform: scale(.5);
        transform-origin: 0 0;
        width: 200%;
        height: 200%;
        border-radius: 0;
      }
    }
  }
}