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

Full featured mobile HTML framework for building iOS & Android apps

.ios {
  @import (multiple) '../../less/colors-ios.less';
  .list {
    .accordion-item-toggle {
      .item-inner {
        background-size: 8px 13px;
        .ltr({
          background: no-repeat calc(~"100% - 15px") center;
          .svg-background("<svg width='8px' height='13px' viewBox='0 0 8 13' xmlns='http://www.w3.org/2000/svg'><polygon fill='#c7c7cc' transform='translate(1.500000, 6.500000) rotate(-45.000000) translate(-1.500000, -6.500000) ' points='6 11 6 2 4 2 4 9 -3 9 -3 11 5 11'></polygon></svg>");
          padding-right: 35px;
        });
        .rtl({
          padding-left: 35px;
          background-repeat: no-repeat;
          background-position: 15px center;
          .svg-background("<svg width='8px' height='13px' viewBox='0 0 8 13' xmlns='http://www.w3.org/2000/svg'><polygon fill='#c7c7cc' transform='translate(6.500000, 6.500000) rotate(-225.000000) translate(-6.500000, -6.500000) ' points='11 11 11 2 9 2 9 9 2 9 2 11 10 11'></polygon></svg>");
        });
      }
      &.active-state {
        background-color: #d9d9d9;
      }
    }
  }

  .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
  {
    .svg-background("<svg width='13px' height='8px' viewBox='0 0 8 13' xmlns='http://www.w3.org/2000/svg'><polygon fill='#c7c7cc' transform='translate(6.5, 6.5) rotate(-315) translate(-10, -6.5)' points='11 11 11 2 9 2 9 9 2 9 2 11 10 11'></polygon></svg>");
    background-size: 13px 13px;
  }
}