kui-vue/components/collapse/styles/index.less

A lightweight desktop UI component library suitable for Vue.js 2.

@import "../../styles/var.less";
.k-collapse {
  background-color: var(--kui-color-back);
  border: 1px solid var(--kui-color-border);
  border-radius: var(--kui-border-radius);
  // border-bottom: 0;
  overflow: hidden;
  color: var(--kui-color-font);
  & > .k-collapse-item {
    & > .k-collapse-header {
      line-height: 22px;
      padding: 12px 16px 12px 40px;
      cursor: pointer;
      position: relative;
      color: var(--kui-color-title);
      font-size: 14px;
      border-bottom: 1px solid var(--kui-color-border);
      border-top: 1px solid var(--kui-color-border);
      margin-top: -1px;
      & > .k-collapse-arrow {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        svg {
          transform: rotate(90deg);
          transition: transform 0.3s ease-in-out;
        }
      }
      & > .k-collapse-extra {
        float: right;
      }
    }
    &:last-child {
      .k-collapse-header {
        margin-bottom: -1px;
      }
    }

    .k-collapse-content {
      // background-color: #fff;
      // border: 1px solid var(--kui-color-border);
      // border-top: 1px solid var(--kui-color-border);
      padding: 0 16px;
      transition: all 0.3s ease-in-out;
      box-sizing: border-box;
      overflow: hidden;
      .k-collapse-content-box {
        padding: 16px 0;
      }
    }
  }
  & > .k-collapse-item-active {
    & > .k-collapse-header .k-collapse-arrow svg {
      transform: rotate(180deg);
    }
  }
}

.k-collapse-sample {
  border: none;
  background: none;
  .k-collapse-item {
    background: var(--kui-color-gray-90);
    border: none;
    margin-bottom: 10px;
    border-radius: var(--kui-border-radius);
    overflow: hidden;
    .k-collapse-header {
      border: none;
    }
    .k-collapse-content {
      border: none;
      background: none;
    }
  }
}

.k-collapse-slide-enter-active {
  animation: slide 0.3s ease-in-out;
  animation-fill-mode: both;
}

.k-collapse-slide-leave-active {
  animation: slide 0.3s ease-in-out reverse;
  animation-fill-mode: both;
}

@keyframes slide {
  0% {
    transform: scaleY(0);
    transform-origin: 0% 0%;
    opacity: 0;
  }
  100% {
    transform: scaleY(1);
    transform-origin: 0% 0%;
    opacity: 1;
  }
}