qt-public-ui/lib/DragDrawer/style.less

新设计规范下业务组件库

@import (reference) '../../style/common.less';

.umui-dragger-horizontal() {
  top: 50%;
  width: 16px;
  height: 60px;
  cursor: ew-resize;
  transform: translateY(-50%);
  &::after,
  &::before {
    content: '';
    position: absolute;
    top: 5px;
    height: 50px;
    width: 2px;
    background-color: hsv(0, 0, 85%);
    border-radius: 4px 0 0 4px;
  }
  &::after {
    left: 4px;
  }
  &::before {
    right: 4px;
  }
}

.umui-dragger-vertical() {
  left: 50%;
  width: 60px;
  height: 16px;
  cursor: ns-resize;
  transform: translateX(-50%);
  &::after,
  &::before {
    content: '';
    position: absolute;
    left: 5px;
    width: 50px;
    height: 2px;
    background-color: hsv(0, 0, 85%);
    border-radius: 4px 0 0 4px;
  }
  &::after {
    top: 4px;
  }
  &::before {
    bottom: 4px;
  }
}

.umui-draggable-drawer {
  .@{ant-prefix}-drawer-content {
    overflow: unset;
    transform: translateY(0);
  }
  .umui-drawer-drager {
    position: absolute;
    background: @component-background;
    z-index: 1;
    &.umui-left {
      .umui-dragger-horizontal;

      right: -16px;
      box-shadow: @shadow-1-right;
      border-top-right-radius: 6px;
      border-bottom-right-radius: 6px;
    }
    &.umui-right {
      .umui-dragger-horizontal;

      left: -16px;
      box-shadow: @shadow-1-left;
      border-top-left-radius: 6px;
      border-bottom-left-radius: 6px;
    }
    &.umui-top {
      .umui-dragger-vertical;

      bottom: -16px;
      box-shadow: @shadow-1-down;
      border-bottom-left-radius: 6px;
      border-bottom-right-radius: 6px;
    }
    &.umui-bottom {
      .umui-dragger-vertical;

      top: -16px;
      box-shadow: @shadow-1-up;
      border-top-left-radius: 6px;
      border-top-right-radius: 6px;
    }
  }
}

.umui-drawer {
  &.umui-has-title .@{ant-prefix}-drawer-body {
    height: calc(~"100% - 46px");
  }
  &.umui-has-footer .@{ant-prefix}-drawer-body {
    height: calc(~"100% - 62px");
    padding-bottom: 53px; // fix 带footer滚动不到底部
  }
  &.umui-has-title-footer .@{ant-prefix}-drawer-body {
    height: calc(~"100% - 108px");
    padding-bottom: 53px; // fix 带footer滚动不到底部
  }

  &.umui-has-title-footer {
    .@{ant-prefix}-drawer-close {
      padding: unset;
    }
  }

  .@{ant-prefix}-drawer-header {
    height: 44px;
    padding: 0px 20px;
    background-color: #FAFBFC;
    overflow: hidden;
    .@{ant-prefix}-drawer-header-title{
      display: block;
      width: 100%;
      line-height: 44px;
      .@{ant-prefix}-drawer-title{
        line-height: 44px;
      }
      .@{ant-prefix}-drawer-close {
        height:44px;
        width: 0;
        float: right;
        padding: 0;
      }
    }
  }

  .umui-drawer-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1;
    border-top: 1px solid @border-color-base;
    background-color: @component-background;
    padding: @drawer-header-padding;
  }
}