@arco-design/web-react/lib/Drawer/style/index.less

Arco Design React UI Library.

@import './token.less';

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

.@{drawer-prefix-cls}-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(~'@{arco-cssvars-prefix}-color-mask-bg');
}

.@{drawer-prefix-cls}-no-mask {
  pointer-events: none;

  .@{drawer-prefix-cls} {
    pointer-events: auto;
  }
}

.@{drawer-prefix-cls}-wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: @z-index-drawer;

  &-hide {
    display: none;
  }
}

.@{drawer-prefix-cls} {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(~'@{arco-cssvars-prefix}-color-bg-3');
  line-height: @line-height-base;

  &-wrapper {
    position: relative;
    height: 100%;
  }

  &-fixed {
    position: fixed;
    top: 0;
    z-index: @z-index-drawer;
  }

  &-inner {
    height: 100%;
    overflow: hidden;
  }

  &-scroll {
    overflow: auto;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  &-header {
    height: @drawer-size-header-height;
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 0 @drawer-padding-horizontal;
    border-bottom: @border-1 solid @drawer-color-border;
    flex-shrink: 0;

    &-title {
      font-size: @drawer-font-header-size;
      font-weight: @drawer-font-header-weight;
      color: @drawer-color-header-text;
      text-align: left;
    }
  }

  &-footer {
    box-sizing: border-box;
    padding: @drawer-padding-footer-vertical @drawer-padding-horizontal;
    border-top: @border-1 solid @drawer-color-border;
    text-align: right;
    flex-shrink: 0;

    > .@{prefix}-btn {
      margin-left: @drawer-margin-footer-button-left;
    }
  }

  & &-close-icon {
    position: absolute;
    right: @drawer-position-close-icon-right +
      ((@icon-hover-size-default-height - @drawer-font-size-close-icon) / 2);
    top: ((@drawer-size-header-height - @drawer-font-size-close-icon) / 2);
    cursor: pointer;
    z-index: 1;
    font-size: @drawer-font-size-close-icon;
    color: @drawer-color-header-text;
  }

  &-content {
    flex: 1;
    height: 100%;
    padding: @drawer-padding-content-vertical @drawer-padding-horizontal;
    color: @drawer-color-content-text;
    box-sizing: border-box;
    position: relative;
    overflow: auto;

    // &-inner {
    //   max-height: 100%;
    //   overflow: auto;
    //   padding: 0 28px;
    //   position: relative;
    //   box-sizing: border-box;
    // }
  }
}

.@{drawer-prefix-cls}-rtl {
  direction: rtl;

  .@{drawer-prefix-cls}-close-icon {
    right: initial;
    left: @drawer-position-close-icon-right +
      ((@icon-hover-size-default-height - @drawer-font-size-close-icon) / 2);
  }

  .@{drawer-prefix-cls}-footer {
    text-align: left;
  }
}