@pi0/framework7/src/components/accordion/accordion.less

Full featured mobile HTML framework for building iOS & Android apps

/* === Accordion === */
.accordion-item-toggle {
  cursor: pointer;
  transition-duration: 300ms;
  &.active-state {
    transition-duration: 300ms;
    > .item-inner {
      .hairline-color(bottom, transparent);
    }
  }
}
.accordion-item-toggle {
  .item-inner {
    transition-duration: 300ms;
    transition-property: background-color;
    &:after {
      transition-duration: 300ms;
    }
  }
}
.accordion-item {
  .item-link .item-inner:after {
    transition-duration: 300ms;
  }
  .list, .block {
    margin-top: 0;
    margin-bottom: 0;
  }
  .block {
    > h1, > h2, > h3, > h4, > p {
      &:first-child {
        margin-top: 10px;
      }
      &:last-child {
        margin-bottom: 10px;
      }
    }
  }
}
.accordion-item-opened {
  .accordion-item-toggle .item-inner, > .item-link .item-inner {
    .hairline-color(bottom, transparent);
  }
}

.list li.accordion-item ul {
  .ltr({
    padding-left: 0;
  });
  .rtl({
    padding-right: 0;
  })
}
.accordion-item-content {
  position: relative;
  overflow: hidden;
  height: 0;
  font-size: 14px;
  transition-duration: 300ms;
  transform: scale(1) translate3d(0,0,0);
  .accordion-item-opened > & {
    height: auto;
  }
  html.device-android-4 & {
    transform: none;
  }
}

& when (@include-ios-theme) {
  @import url('./accordion-ios.less');
}
& when (@include-md-theme) {
  @import url('./accordion-md.less');
}