roadui/widget/accordion/src/accordion.one.less

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

/**
  * Accordion Theme: one
  * Author: hzp (hzp@yunshipei.com)
  */

.am-accordion-one {
  @accordion-bg: @white;
  @accordion-item-border-color: #dfdfdf;
  @accordion-title-color: @gray;
  @accordion-title-active-color: @one-primary;
  @accordion-title-active-bg: #f8f8f8;
  @accordion-content-color: #666;

  margin: 0 10px 0 10px;

  .am-accordion-item {
    border: 1px solid @accordion-item-border-color;
    margin: .5rem 0;
    background: @accordion-bg;
  }

  .am-accordion-title {
    color: @accordion-title-color;
    transition: background-color 0.2s ease-out;
    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-one;
}

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