vue-ant-patterns/lib/d-drawer/style/index.less

vue-ant-patterns

@import '../../style/themes/index.less';
@import '../../style/mixins/flex.less';

@depot-prefix-cls: ~'@{depot-prefix}-drawer';

.@{depot-prefix-cls} {
  // 让出 header
  .ant-drawer-content-wrapper {
    top: @header-height;
    height: calc(~'100% - @{header-height}');
  }
  .ant-drawer-body {
    padding: 0 @padding-sm @padding-sm;
  }

  .ant-drawer-close {
    height: 48px;
    line-height: 48px;
  }

  &.ant-drawer .ant-drawer-content {
    & .ant-drawer-wrapper-body {
      overflow: hidden;
      position: relative;
    }

    & .ant-drawer-body {
      position: absolute;
      top: 55px;
      bottom: 0;
      left: 0;
      right: 0;
      overflow: scroll;
    }
  }

  &-no-title {
    &.ant-drawer .ant-drawer-content {
      & .ant-drawer-body {
        top: 0;
      }
    }
  }

  .drawer-content {
    padding: 0;
  }
  & .drawer-scroll-container {
    height: 100%;
  }
  &.drawer-submit-bar {
    &.ant-drawer .ant-drawer-content {
      & .ant-drawer-body {
        overflow: hidden;
        padding-bottom: @drawer-submit-bar-height;
        padding-right: 0;
      }

      & .drawer-scroll-container {
        width: 100%;
        height: 100%;
        padding-right: 12px;
        overflow: auto;
      }

      & .drawer-submit-bar {
        position: absolute;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        height: @drawer-submit-bar-height;
        .flex;
        .flex-center-between;
        padding: 0 24px;
        border-top: 1px solid #d9d9d9;
      }
    }
  }
}