@pi0/framework7/src/components/swiper/swiper-md.less

Full featured mobile HTML framework for building iOS & Android apps

.md {
  @import (multiple) '../../less/colors-md.less';
  .swiper-lazy-preloader {
    width: 32px;
    height: 32px;
    margin-left: -16px;
    margin-top: -16px;
  }

  .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
    .svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'><path d='M0,22L22,0l2.1,2.1L4.2,22l19.9,19.9L22,44L0,22L0,22L0,22z' fill='@{themeColor}'/></svg>");
  }
  .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
    .svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'><path d='M27,22L27,22L5,44l-2.1-2.1L22.8,22L2.9,2.1L5,0L27,22L27,22z' fill='@{themeColor}'/></svg>");
  }

  .swiper-pagination-bullet-active {
    background: @themeColor;
  }

  .swiper-pagination-progressbar {
    .swiper-pagination-progressbar-fill {
      background: @themeColor;
    }
  }

  .color-loop({
    .swiper-button-prev.color-@{colorName},
    .swiper-container-rtl .swiper-button-next.color-@{colorName},
    .color-theme-@{colorName} .swiper-button-prev,
    .color-theme-@{colorName} .swiper-container-rtl .swiper-button-next {
      .svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'><path d='M0,22L22,0l2.1,2.1L4.2,22l19.9,19.9L22,44L0,22L0,22L0,22z' fill='@{colorValue}'/></svg>");
    }
    .swiper-button-next.color-@{colorName},
    .swiper-container-rtl .swiper-button-prev.color-@{colorName},
    .color-theme-@{colorName} .swiper-button-next,
    .color-theme-@{colorName} .swiper-container-rtl .swiper-button-prev {
      .svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'><path d='M27,22L27,22L5,44l-2.1-2.1L22.8,22L2.9,2.1L5,0L27,22L27,22z' fill='@{colorValue}'/></svg>");
    }

    .color-@{colorName}, .color-theme-@{colorName} {
      .swiper-pagination-bullet-active {
        background: @colorValue;
      }
      .swiper-pagination-progressbar, &.swiper-pagination-progressbar {
        background: rgba(red(@colorValue), green(@colorValue), blue(@colorValue), 0.25);
        .swiper-pagination-progressbar-fill {
          background: @colorValue;
        }
      }
    }
  });
}