@fe6/water-pro/lib/container-collapse/style/index.less

An enterprise-class UI design language and Vue-based implementation

@import '../../style/themes/index';
@import '../../style/mixins/index';

@collapse-prefix-cls: ~'@{ant-prefix}-container-collapse';
@title-prefix-cls: ~'@{ant-prefix}-basic-title';

.@{collapse-prefix-cls} {
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 2px;
  transition: all 0.3s ease-in-out;

  &-simple {
    border: none;
    border-radius: 0;
  }

  &-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    cursor: pointer;

    &-active {
      border-bottom: 1px solid #f0f0f0;
    }

    &-only {
      cursor: default;

      & .@{title-prefix-cls} {
        cursor: default;
      }
    }

    &-title {
      margin: 0 !important;
    }

    &-simple {
      justify-content: flex-start;
      padding: 0;
      border: none;
    }
  }

  &-action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: right;

    &-default {
      flex: 1;
    }
  }

  &-body {
    padding: 24px;

    &-simple {
      padding: 0;
    }
  }
}