fine-true/lib/drawer/index.less

A small and beautiful Vue3 version of the UI Library

/*
jiangbei 2021/10/25
*/

.fine-drawer {
}
.fine-drawer-content {
  position: fixed;
  background-color: #fff;
  z-index: var(--fine-drawer-zindex);
  display: flex;
  flex-direction: column;
  &.fine-drawer-rtl {
    right: 0;
    top: 0;
    height: 100%;
  }
  &.fine-drawer-ltr {
    left: 0;
    top: 0;
    height: 100%;
  }
  &.fine-drawer-ttb {
    left: 0;
    top: 0;
    width: 100%;
  }
  &.fine-drawer-btt {
    left: 0;
    bottom: 0;
    width: 100%;
  }
}
.fine-drawer-head {
  display: flex;
  padding: var(--fine-drawer-head-padding);
  line-height: var(--fine-drawer-head-line-height);
  .fine-drawer-title {
    flex: 1;
    font-size: var(--fine-drawer-title-size);
    color: var(--fine-drawer-title-color);
  }
  .fine-drawer-close {
    .fine-icon {
      font-size: var(--fine-drawer-head-icon-size);
      color: var(--fine-drawer-head-icon-color);
      transition: color 0.25s;
      &:hover {
        color: var(--fine-drawer-head-icon-hover-color);
      }
    }
  }
}

.fine-drawer-body {
  padding: var(--fine-drawer-body-padding);
  font-size: var(--fine-drawer-body-size);
  color: var(--fine-drawer-body-color);
  line-height: var(--fine-drawer-body-line-height);
  flex: 1;
  overflow: auto;
}

.fine-drawer-fade-rtl-enter-active,
.fine-drawer-fade-ltr-enter-active,
.fine-drawer-fade-ttb-enter-active,
.fine-drawer-fade-btt-enter-active {
  transition: all 0.15s ease-out;
}

.fine-drawer-fade-rtl-leave-active,
.fine-drawer-fade-ltr-leave-active,
.fine-drawer-fade-ttb-leave-active,
.fine-drawer-fade-btt-leave-active {
  transition: all 0.15s cubic-bezier(1, 0.5, 0.8, 1);
}

//right to left
.fine-drawer-fade-rtl-enter-from,
.fine-drawer-fade-rtl-leave-to {
  transform: translateX(100%);
}
//left to right
.fine-drawer-fade-ltr-enter-from,
.fine-drawer-fade-ltr-leave-to {
  transform: translateX(-100%);
}
//top to bottom
.fine-drawer-fade-ttb-enter-from,
.fine-drawer-fade-ttb-leave-to {
  transform: translateY(-100%);
}
// bottom to top
.fine-drawer-fade-btt-enter-from,
.fine-drawer-fade-btt-leave-to {
  transform: translateY(100%);
}