roadui/widget/accordion/src/accordion.gapped.less

Sleek, intuitive, and powerful front-end framework for faster and easier web development.

/**
  * Accordion Theme: gapped
  * Author: Minwe (minwe@yunshipei.com)
  */

.am-accordion-gapped {
  @accordion-item-border-color: #dedede;
  @accordion-title-color: rgba(0, 0, 0, 0.6);
  @accordion-title-active-color: rgba(0, 0, 0, 0.8);
  @accordion-title-active-bg: #f5f5f5;
  @accordion-content-color: #666;

  margin: .5rem 1rem;

  .am-accordion-item {
    border: 1px solid @accordion-item-border-color;
    border-bottom: none;
    margin: .5rem 0;

    &.am-active {
      border-bottom: 1px solid @accordion-item-border-color;
    }
  }

  .am-accordion-title {
    color: @accordion-title-color;
    transition: background-color 0.15s ease-out;
    border-bottom: 1px solid @accordion-item-border-color;
    padding: 0.8rem 2rem 0.8rem 1rem;
    position: relative;

    &:after {
      .am-icon-font;
      content: @fa-var-angle-right;
      transition: transform .2s linear;
      position: absolute;
      right: 10px;
      top: 50%;
      margin-top: -0.8rem;
    }

    &:hover {
      color: @accordion-title-active-color;
    }
  }

  .am-accordion-content {
    color: @accordion-content-color;
  }

  // active
  .am-active {
    .am-accordion-title {
      background-color: @accordion-title-active-bg;
      color: @accordion-title-active-color;
      &:after {
        transform: rotate(90deg);
      }
    }
  }

  .hook-am-accordion-gapped;
}

.hook-am-accordion-gapped() {}