bin-ui/src/styles/components/drawer.styl

基于 vue2.6 / vue-cli3 的 UI 组件库

.bin-drawer {
  position: fixed;
  width: auto;
  height: 100%;
  top: 0;
  &-inner {
    position: absolute;
  }
  &-left {
    left: 0;
  }
  &-right {
    right: 0;
  }
  &-hidden {
    display: none !important;
  }
  &-wrap {
    position: fixed;
    overflow: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    -webkit-overflow-scrolling: touch;
    outline: 0;
    &-inner {
      position: absolute;
      overflow: hidden;
    }
    &-dragging {
      user-select: none;
    }
  }
  &-wrap * {
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  &-mask {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: $color-text-secondary;
    height: 100%;
    z-index: 100;
    &-hidden {
      display: none;
    }
    &-inner {
      position: absolute;
    }
  }
  &-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    overflow: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 0;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    &-no-mask {
      pointer-events: auto;
    }
  }
  &-header {
    border-bottom: $border-base-light;
    padding: 16px 24px;
    p,
    &-inner {
      width: 100%;
      line-height: 22px;
      font-size: $header-font-size;
      color: $color-text-primary;
      font-weight: 500;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  &-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    padding: 0;
    color: $color-text-secondary;
    line-height: 1;
    text-decoration: none;
    background: transparent;
    border: 0;
    outline: 0;
    cursor: pointer;
    transition: color $animation-duration-base;
    .icon-close {
      display: block;
      width: 56px;
      height: 56px;
      font-style: normal;
      line-height: 56px;
      text-align: center;
      text-transform: none;
      text-rendering: auto;
      font-size: 20px;
      color: $color-text-secondary;
      transition: color $animation-duration-base ease;
      &:hover {
        color: $color-text-default;
      }
    }
  }
  &-body {
    width: 100%;
    font-size: $base-font-size;
    word-wrap: break-word;
    overflow: auto;
    flex-grow: 1;
    padding: 24px;
    line-height: $base-line-height;
  }
  &-footer {
    flex-shrink: 0;
    padding: 10px 10px;
    border-top: $border-base-light;
  }
  &-no-header &-body {
    height: 100%;
  }
  &-no-mask {
    pointer-events: none;
    .bin-drawer-drag {
      pointer-events: auto;
    }
  }

  &-drag {
    position: absolute;
    top: 0;
    height: 100%;
    width: 0;
    &-left {
      right: 0;
    }
    &-move-trigger {
      position: absolute;
      top: 50%;
      z-index: 2;
      width: 8px;
      height: 100px;
      line-height: 100px;
      background: rgb(243, 243, 243);
      transform: translate(-50%, -50%);
      border-radius: 4px 6px;
      box-shadow: 0 0 1px 1px rgba(0, 0, 0, .2);
      cursor: col-resize;
      &-point {
        display: inline-block;
        width: 50%;
        transform: translateX(50%);
        i {
          display: block;
          border-bottom: 1px solid rgb(192, 192, 192);
          padding-bottom: 2px;
        }
      }
    }
  }
}