amazeui/widget/accordion/src/accordion.default.less

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

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

.am-accordion-default {
  @accordion-item-border-color: rgba(0, 0, 0, 0.05);
  @accordion-title-color: rgba(0, 0, 0, 0.6);
  @accordion-title-active-color: @global-primary;
  @accordion-title-active-bg-color: @gray-lighter;
  @accordion-content-color: #666;

  margin: 1rem;
  border-radius: @radius-normal;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);

  .am-accordion-item {
    border-top: 1px solid @accordion-item-border-color;
    &:first-child {
      border-top: none;
    }
  }

  .am-accordion-title {
    color: @accordion-title-color;
    transition: background-color 0.2s ease-out;
    padding: .8rem 1rem;

    &:before {
      content: @fa-var-caret-right;
      .am-icon-font;
      transition: transform .2s ease;
      transform: rotate(0deg);
      margin-right: 5px;
    }

    &: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;
      color: @accordion-title-active-color;

      &:before {
        transform: rotate(90deg);
      }
    }
  }

  .hook-am-accordion-default;
}

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