antd-mini/native/Collapse/index.less

antd-mini 是支付宝小程序 UI 组件库，遵循 Ant Design 规范。

@import (reference) './variable.less';
@import '../style/mixins/hairline.less';

@collapsePrefix: ant-collapse-item;

.@{collapsePrefix} {
  &-disabled {
    .ant-collapse-item-title-node,
    .ant-collapse-item-brief-container {
      opacity: 0.4;
    }
    .@{collapsePrefix}-title:active {
      background: @collapse-title-background-color;
      transition: 0s;
    }
  }
  &-line {
    display: flex;
    flex: 1;
    border-bottom: 1px solid @collapse-border-color;
    padding: @collapse-title-padding;
  }
  &-title {
    position: relative;
    display: flex;
    text-align: justify;
    align-items: center;
    justify-content: space-between;
    line-height: 48 * @rpx;
    font-size: @collapse-title-size;
    color: @collapse-title-color;
    background-color: @collapse-title-background-color;
    transition: all 300ms linear;
    box-sizing: border-box;
    &-node {
      display: flex;
      flex: 1;
      max-width: 100%;
      font-size: 34 * @rpx;
      color: @collapse-title-color;
    }
    &-arrow {
      color: @collapse-title-icon-color;
    }

    &:active {
      background-color: @collapse-border-color;
      transition: 0s;
    }
  }

  &-brief {
    &-container {
      display: flex;
      .ant-icon {
        font-size: 40 * @rpx;
      }
    }

    &-node {
      display: flex;
      flex: 1;
      font-size: 30 * @rpx;
      color: @collapse-node-text-color;
      margin-right: 8 * @rpx;
    }
  }

  &-content {
    color: @collapse-title-color;
    border-bottom: 1px solid @collapse-border-color;
    box-sizing: border-box;
    padding: 24 * @rpx;
    &-container {
      background: @collapse-container-background-color;
    }
    &-wrap {
      will-change: height;
      overflow: hidden;

      &-active {
        animation: trigger1 0.2s;
      }

      &-non-active {
        animation: trigger2 0.2s;
      }

      &-transition {
        transition: height 0.2s ease-in-out;
      }

      &-first {
        height: 0;
      }
    }
  }
}

@keyframes trigger1 {
  0% {
    content: '';
  }

  100% {
    content: '';
  }
}

@keyframes trigger2 {
  0% {
    content: '';
  }

  100% {
    content: '';
  }
}