ten-design-vue/lib/theme/components/drawer.less

ten-vue

/* dependencies icon,button */
@import "../vars.less";

@ANIMATION_DURATION: 0.24s;
@ANIMATION_PREFIX: ten-drawer-effect;

// Drawer Container
.ten-drawer__container {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  overflow: auto;
  pointer-events: none;
}
.ten-drawer__mask {
  position: fixed;
  left: 0;
  top: 0;
  content: '';
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .5);
  pointer-events: auto;
  &.@{ANIMATION_PREFIX}-enter-active,
  &.@{ANIMATION_PREFIX}-enter-to {
    animation: drawerFadeIn @ANIMATION_DURATION cubic-bezier(0.0, 0.0, 0.2, 1) both;
  }

  &.@{ANIMATION_PREFIX}-leave-active,
  &.@{ANIMATION_PREFIX}-leave-to {
    animation: drawerFadeOut @ANIMATION_DURATION cubic-bezier(0.4, 0.0, 1, 1) both;
  }
}

// Drawer
.ten-drawer {
  overflow: hidden;
  position: absolute;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  box-shadow: -3px 0 8px rgba(0, 0, 0, 0.06);
  pointer-events: auto;
  &__resizebar {
    position: absolute;
  }
  &__left {
    left: 0;
    right: auto;
    max-width: 100vw;
    height: 100%;
    // transform: translateX(-100%);
    &.@{ANIMATION_PREFIX}-enter-active,
    &.@{ANIMATION_PREFIX}-enter-to {
      animation: drawerLeftIn @ANIMATION_DURATION cubic-bezier(0.0, 0.0, 0.2, 1) both;
    }
    &.@{ANIMATION_PREFIX}-leave-active,
    &.@{ANIMATION_PREFIX}-leave-to {
      animation: drawerLeftOut @ANIMATION_DURATION cubic-bezier(0.4, 0.0, 1, 1) both;
    }
    .ten-drawer__resizebar {
      width: 6px;
      top: 0;
      right: -3px;
      bottom: 0;
      cursor: col-resize;
    }
  }
  &__right {
    right: 0;
    left: auto;
    max-width: 100vw;
    height: 100%;
    // transform: translateX(100%);
    &.@{ANIMATION_PREFIX}-enter-active,
    &.@{ANIMATION_PREFIX}-enter-to {
      animation: drawerRightIn @ANIMATION_DURATION cubic-bezier(0.0, 0.0, 0.2, 1) both;
    }

    &.@{ANIMATION_PREFIX}-leave-active,
    &.@{ANIMATION_PREFIX}-leave-to {
      animation: drawerRightOut @ANIMATION_DURATION cubic-bezier(0.4, 0.0, 1, 1) both;
    }
    .ten-drawer__resizebar {
      width: 6px;
      top: 0;
      left: -3px;
      bottom: 0;
      cursor: col-resize;
    }
  }
  &__top {
    top: 0;
    bottom: auto;
    width: 100vw;
    max-height: 100%;
    // transform: translateY(-100%);
    &.@{ANIMATION_PREFIX}-enter-active,
    &.@{ANIMATION_PREFIX}-enter-to {
      animation: drawerTopIn @ANIMATION_DURATION cubic-bezier(0.0, 0.0, 0.2, 1) both;
    }

    &.@{ANIMATION_PREFIX}-leave-active,
    &.@{ANIMATION_PREFIX}-leave-to {
      animation: drawerTopOut @ANIMATION_DURATION cubic-bezier(0.4, 0.0, 1, 1) both;
    }
    .ten-drawer__resizebar {
      height: 6px;
      right: 0;
      left: 0;
      bottom: -3px;
      cursor: row-resize;
    }
  }
  &__bottom {
    bottom: 0;
    top: auto;
    width: 100vw;
    max-height: 100vh;
    // transform: translateY(100%);
    &.@{ANIMATION_PREFIX}-enter-active,
    &.@{ANIMATION_PREFIX}-enter-to {
      animation: drawerBottomIn @ANIMATION_DURATION cubic-bezier(0.0, 0.0, 0.2, 1) both;
    }

    &.@{ANIMATION_PREFIX}-leave-active,
    &.@{ANIMATION_PREFIX}-leave-to {
      animation: drawerBottomOut @ANIMATION_DURATION cubic-bezier(0.4, 0.0, 1, 1) both;
    }
    .ten-drawer__resizebar {
      height: 6px;
      right: 0;
      left: 0;
      top: -3px;
      cursor: row-resize;
    }
  }

  &__header {
    position: relative;
    display: flex;
    padding: 16px 24px;
    &::after {
      content: '';
      width: 100%;
      height: 1px;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      background: #F0F0F0;
    }
    &-title {
      font-size: @title-level-3-size;
      color: @text-color;
      font-weight: bold;
    }
  }
  &__close {
    position: absolute;
    top: 16px;
    right: 15px;
    padding: 5px;
    font-size: @text-level-1-size;
    color: @text-color-lighter-2;
    cursor: pointer;
  }
  // content
  &__body {
    overflow-y: auto;
  }
}

// backdrop
@keyframes drawerFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1
  }
}
@keyframes drawerFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0
  }
}

// left
@keyframes drawerLeftIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes drawerLeftOut {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

// right
@keyframes drawerRightIn {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes drawerRightOut {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

// top
@keyframes drawerTopIn {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes drawerTopOut {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}

// bottom
@keyframes drawerBottomIn {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes drawerBottomOut {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}