@antmjs/vantui/lib/dialog/index.less

一套适用于Taro3及React的vantui组件库

@import '../style/var.less';

.van-dialog {
  top: 45% !important;
  overflow: hidden;
  .theme(width, '@dialog-width');
  .theme(font-size, '@dialog-font-size');
  .theme(border-radius, '@dialog-border-radius');
  .theme(background-color, '@dialog-background-color');

  @media (max-width: 642px) {
    .theme(width, '@dialog-small-screen-width');
  }

  // stylelint-disable-next-line
  taro-button-core + taro-button-core {
    margin-top: 0;
  }

  .van-hairline--left::after {
    /* prettier-ignore */
    border-left-width: 1PX !important;
  }

  &__header {
    text-align: center;
    .theme(padding-top, '@dialog-header-padding-top');
    .theme(font-weight, '@dialog-header-font-weight');
    .theme(line-height, '@dialog-header-line-height');

    &--isolated {
      .theme(padding, '@dialog-header-isolated-padding');
    }
  }

  &__message {
    overflow-y: auto;
    text-align: center;
    -webkit-overflow-scrolling: touch;
    .theme(font-size, '@dialog-message-font-size');
    .theme(line-height, '@dialog-message-line-height');
    .theme(max-height, '@dialog-message-max-height');
    .theme(padding, '@dialog-message-padding');

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

    &--hasTitle {
      .theme(padding-top, '@dialog-has-title-message-padding-top');
      .theme(color, '@dialog-has-title-message-text-color');
    }

    &--round-button {
      .theme(padding-bottom, '@padding-md');

      .theme(color, '@text-color');
    }

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

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

  &__footer {
    display: flex;

    &--round-button {
      position: relative !important;
      padding: @padding-xs @padding-lg @padding-md !important;
    }
  }

  &__button {
    flex: 1;
  }

  &__confirm {
    border: 0 !important;

    .theme(color, '@dialog-confirm-button-color');
  }

  &__cancel {
    border: 0 !important;

    .theme(color, '@dialog-cancel-button-color');
  }

  &-bounce-enter {
    transform: translate3d(-50%, -50%, 0) scale(0.7);
    opacity: 0;
  }

  &-bounce-leave-active {
    transform: translate3d(-50%, -50%, 0) scale(0.9);
    opacity: 0;
  }
}