framework7/components/accordion/accordion.less

Full featured mobile HTML framework for building iOS & Android apps

/* === Accordion === */
@import url('./accordion-vars.less');

.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;
  .accordion-item-opened > & {
    height: auto;
  }
  html.device-android-4 & {
    transform: none;
  }
}
.list .accordion-item-toggle .item-inner {
  .ltr({
    padding-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-safe-area-right));
  });
  .rtl({
    padding-left: calc(var(--f7-list-chevron-icon-area) + var(--f7-safe-area-left));
  });
  &:before {
    .core-icons-font();
    position: absolute;
    top: 50%;
    width: 14px;
    height: 8px;
    margin-top: -4px;
    font-size: 20px;
    line-height: 14px;
    color: var(--f7-list-chevron-icon-color);
    pointer-events: none;
    .ltr({
      right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
      content: 'chevron_right';
    });
    .rtl({
      left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
      content: 'chevron_left';
    });
  }
}
.list .accordion-item-toggle.active-state {
  background-color: var(--f7-list-link-pressed-bg-color);
}

.list .accordion-item-toggle .item-inner,
.list:not(.media-list) .accordion-item:not(.media-item) .accordion-item-toggle .item-inner,
.list:not(.media-list) .accordion-item:not(.media-item) > .item-link .item-inner,
.media-list .accordion-item .accordion-item-toggle .item-title-row,
.media-list .accordion-item > .item-link .item-title-row,
.accordion-item.media-item .accordion-item-toggle .item-title-row,
.accordion-item.media-item > .item-link .item-title-row,
.links-list .accordion-item > a {
  &:before {
    content: 'chevron_down';
    width: 14px;
    height: 8px;
    margin-top: -4px;
    line-height: 8px;
  }
}
.list .accordion-item-toggle.accordion-item-opened .item-inner,
.list:not(.media-list) .accordion-item-opened:not(.media-item) .accordion-item-toggle .item-inner,
.list:not(.media-list) .accordion-item-opened:not(.media-item) > .item-link .item-inner,
.media-list .accordion-item-opened .accordion-item-toggle .item-title-row,
.media-list .accordion-item-opened > .item-link .item-title-row,
.accordion-item-opened.media-item .accordion-item-toggle .item-title-row,
.accordion-item-opened.media-item > .item-link .item-title-row,
.links-list .accordion-item-opened > a {
  &:before {
    content: 'chevron_up';
    width: 14px;
    height: 8px;
    margin-top: -4px;
    line-height: 8px;
  }
}

.if-ios-theme({
  @import url('./accordion-ios.less');
});
.if-md-theme({
  @import url('./accordion-md.less');
});
.if-aurora-theme({
  @import url('./accordion-aurora.less');
});