agneta-angularjs/source/ui/gallery/index.styl

Create your agneta applications with AngularJS

.swiper-container{

  height: 100%;
  width: 100%;

  .swiper-wrapper{
    padding: 0;
    margin: 0;
    list-style: none;
    .swiper-slide{
      width: auto !important;
      a{
        width: 100%;
        height: 100%;
        >img{
          display: flex;
          height: 300px;
          width: auto;
        }
      }
      .caption{
        box-sizing: border-box;
        background: #2b2b2b78;
        padding: 8px 20px;
        position: absolute;
        color: white;
        top: 0;
        line-height: 20px;
        text-align: center;
        overflow: hidden;
        width: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }

  .swiper-pagination-bullets{
    bottom: 0;
    .swiper-pagination-bullet{
      background: white;
      padding: 2px;
      box-shadow: 0 1px 5px #2d2d2d;
      opacity: .7;

      &.swiper-pagination-bullet-active{
        padding: 3px;
        opacity: 1;
      }
    }
  }

}