@pi0/framework7/src/components/photo-browser/photo-browser.less

Full featured mobile HTML framework for building iOS & Android apps

/* === Photo Browser === */
.photo-browser {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 400;
}
.photo-browser-standalone {
  &.modal-in {
    transition-duration: 0ms;
    animation: photo-browser-in 400ms;
  }
  &.modal-out {
    transition-duration: 0ms;
    animation: photo-browser-out 400ms;
    &.swipe-close-to-bottom, &.swipe-close-to-top {
      animation: none;
    }
  }
}
.photo-browser-popup {
  &.modal-out {
    &.swipe-close-to-bottom, &.swipe-close-to-top {
      transition-duration: 300ms;
    }
    &.swipe-close-to-bottom {
      transform: translate3d(0, 100%, 0);
    }
    &.swipe-close-to-top {
      transform: translate3d(0, -100%, 0);
    }
  }
}

.page.photo-browser-page {
  background: none;
}
.photo-browser-popup {
  background: none;
}

.photo-browser-exposed {
  .navbar, .toolbar {
    opacity: 0;
    visibility: hidden;
    pointer-events:none;
  }
  .photo-browser-swiper-container {
    background: #000;
  }
}
.photo-browser-of {
  margin: 0 5px;
}
.photo-browser-captions {
  pointer-events:none;
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 0;
  z-index: 10;
  opacity: 1;
  transition: 400ms;
  &.photo-browser-captions-exposed {
    opacity: 0;
  }
}

.photo-browser-caption {
  box-sizing: border-box;
  transition: 300ms;
  position:absolute;
  bottom:0;
  left:0;
  opacity: 0;
  padding:4px 5px;
  width:100%;
  text-align:center;
  color: #fff;
  background: rgba(0,0,0,0.8);
  &:empty {
    display: none;
  }
  &.photo-browser-caption-active {
    opacity: 1;
  }
  .photo-browser-captions-light & {
    background: rgba(255,255,255,0.8);
    color: #000;
  }
  .photo-browser-captions-dark & {
    color: #fff;
  }
  .photo-browser-exposed & {
    color:#fff;
    background: rgba(0,0,0,0.8);
  }
}

.photo-browser-swiper-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
  transition: 400ms;
  transition-property: background-color;
}

.photo-browser-prev, .photo-browser-next {
  &.swiper-button-disabled {
    opacity: 0.3;
  }
}
.photo-browser-slide {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;

  &.photo-browser-transitioning {
    transition: 400ms;
    transition-property: transform;
  }
  span.swiper-zoom-container {
    display: none;
  }
  img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    display: none;
  }
  &.swiper-slide-active, &.swiper-slide-next, &.swiper-slide-prev {
    span.swiper-zoom-container {
      display: flex;
    }
    img {
      display: inline;
    }
    &.photo-browser-slide-lazy {
      .preloader {
        display: block;
      }
    }
  }
  iframe {
    width: 100%;
    height: 100%;
  }
  .preloader {
    display: none;
    position: absolute;
    width: 42px;
    height: 42px;
    margin-left: -21px;
    margin-top: -21px;
    left: 50%;
    top: 50%;
  }
}

.photo-browser-dark, .photo-browser-page-dark {
  .photo-browser-swiper-container {
    background: #000;
  }
}

@keyframes photo-browser-in {
  0% {
    transform: translate3d(0,0,0) scale(0.5);
    opacity: 0;
  }
  50% {
    transform: translate3d(0,0,0) scale(1.05);
    opacity: 1;
  }
  100% {
    transform: translate3d(0,0,0) scale(1);
    opacity: 1;
  }
}
@keyframes photo-browser-out {
  0% {
    transform: translate3d(0,0,0) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate3d(0,0,0) scale(1.05);
    opacity: 1;
  }
  100% {
    transform: translate3d(0,0,0) scale(0.5);
    opacity: 0;
  }
}

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