ng-zorro-antd/collapse/style/index.less

An enterprise-class UI components based on Ant Design and Angular

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

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

.@{collapse-prefix-cls} {
  .reset-component();

  @font-height: floor(@font-size-base * @line-height-base);

  background-color: @collapse-header-bg;
  border: @border-width-base @border-style-base @border-color-base;
  border-radius: @collapse-panel-border-radius;

  &-rtl {
    direction: rtl;
  }

  & > &-item {
    border-bottom: @border-width-base @border-style-base @border-color-base;

    &:first-child {
      &,
      & > .@{collapse-prefix-cls}-header {
        border-radius: @collapse-panel-border-radius @collapse-panel-border-radius 0 0;
      }
    }

    &:last-child {
      &,
      & > .@{collapse-prefix-cls}-header {
        border-radius: 0 0 @collapse-panel-border-radius @collapse-panel-border-radius;
      }
    }

    > .@{collapse-prefix-cls}-header {
      position: relative; // Compatible with old version of antd, should remove in next version
      display: flex;
      flex-wrap: nowrap;
      align-items: flex-start;
      padding: @collapse-header-padding;
      color: @heading-color;
      line-height: @line-height-base;
      cursor: pointer;
      transition: all @animation-duration-slow, visibility 0s;

      > .@{collapse-prefix-cls}-title {
        flex: auto;
      }

      // >>>>> Arrow
      .@{collapse-prefix-cls}-expand-icon {
        display: flex;
        align-items: center;
        height: @font-height;
        margin-inline-end: @margin-sm;
      }

      .@{collapse-prefix-cls}-arrow {
        font-size: @font-size-icon;
        // when `transform: rotate()` is applied to icon's root element
        transition: transform @animation-duration-slow;
        // when `transform: rotate()` is applied to icon's child element
        svg {
          transition: transform @animation-duration-slow;
        }
      }

      // >>>>> Text
      .@{collapse-prefix-cls}-title {
        margin-inline-end: auto;
      }

      &:focus-visible {
        outline: @line-width-focus solid @border-color-primary;
        outline-offset: 1px;
        transition: outline-offset 0s, outline 0s;
      }
    }

    .@{collapse-prefix-cls}-collapsible-header {
      cursor: default;

      .@{collapse-prefix-cls}-title {
        flex: none;
        cursor: pointer;
      }

      .@{collapse-prefix-cls}-expand-icon {
        cursor: pointer;
      }
    }

    .@{collapse-prefix-cls}-collapsible-icon {
      cursor: unset;

      .@{collapse-prefix-cls}-expand-icon {
        cursor: pointer;
      }
    }

    &.@{collapse-prefix-cls}-no-arrow {
      > .@{collapse-prefix-cls}-header {
        padding-left: @padding-sm;
      }
    }
  }

  &-panel {
    color: @text-color;
    background-color: @collapse-content-bg;
    border-top: @border-width-base @border-style-base @border-color-base;

    & > .@{collapse-prefix-cls}-body {
      padding: @collapse-content-padding;
    }

    &-hidden {
      display: none;
    }
  }

  &-small {
    > .@{collapse-prefix-cls}-item {
      > .@{collapse-prefix-cls}-header {
        padding: @padding-xs @padding-sm;
        padding-inline-start: @padding-xs;
      }

      > .@{collapse-prefix-cls}-expand-icon {
        // Arrow offset
        margin-inline-end: calc(@padding-sm - @padding-xs);
      }

      > .@{collapse-prefix-cls}-panel > .@{collapse-prefix-cls}-body {
        padding: @padding-sm;
      }
    }
  }

  &-large {
    > .@{collapse-prefix-cls}-item {
      font-size: @font-size-lg;
      line-height: @line-height-lg;

      > .@{collapse-prefix-cls}-header {
        padding: @padding-md @padding-lg;
        padding-inline-start: @padding-md;
      }

      > .@{collapse-prefix-cls}-panel > .@{collapse-prefix-cls}-body {
        padding: @padding-lg;
      }
    }
  }

  &-item:last-child {
    border-bottom: 0;

    > .@{collapse-prefix-cls}-panel {
      border-radius: 0 0 @collapse-panel-border-radius @collapse-panel-border-radius;
    }
  }

  & &-item-disabled > &-header {
    &,
    & > .arrow {
      color: @disabled-color;
      cursor: not-allowed;
    }
  }

  // ========================== Icon Placement ==========================
  &-icon-placement-end {
    & > .@{collapse-prefix-cls}-item {
      > .@{collapse-prefix-cls}-header {
        .@{collapse-prefix-cls}-expand-icon {
          order: 1;
          margin-inline-end: 0;
          margin-inline-start: @margin-sm;
        }
      }
    }
  }

  &-borderless {
    background-color: @collapse-header-bg;
    border: 0;

    > .@{collapse-prefix-cls}-item {
      border-bottom: 1px solid @border-color-base;
    }

    > .@{collapse-prefix-cls}-item:last-child,
    > .@{collapse-prefix-cls}-item:last-child > .@{collapse-prefix-cls}-header {
      border-radius: 0;
    }

    > .@{collapse-prefix-cls}-item:last-child {
      border-bottom: 0;
    }

    > .@{collapse-prefix-cls}-item > .@{collapse-prefix-cls}-panel {
      background-color: transparent;
      border-top: 0;
    }

    > .@{collapse-prefix-cls}-item > .@{collapse-prefix-cls}-panel > .@{collapse-prefix-cls}-body {
      padding: @padding-xss 12px @padding-md;
    }
  }

  &-ghost {
    background-color: transparent;
    border: 0;

    > .@{collapse-prefix-cls}-item {
      border-bottom: 0;

      > .@{collapse-prefix-cls}-panel {
        background-color: transparent;
        border: 0;

        > .@{collapse-prefix-cls}-body {
          padding-block: @padding-sm;
        }
      }
    }
  }
}