drip-ui/packages/drip-css/src/swiper.css

Lightweight Mobile UI Components built on Vue

.drip-swiper {
  position: relative;
  > .drip-indicator,
  .drip-indicator-right {
    position: absolute;
    right: 30px;
    bottom: 20px;
    > a {
      float: left;
      margin-left: 12px;
      > .drip-icon-dot {
        display: inline-block;
        vertical-align: middle;
        width: 12px;
        height: 12px;
        border-radius: 100%;
        background-color: #d0cdd1;
      }
      > .drip-icon-dot.active {
        background-color: #FFAB11;
      }
    }
  }
  > .drip-indicator-center {
    right: 50%;
    transform: translateX(50%);
  }
  > .drip-indicator-left {
    left: 30px;
    right: auto;
  }
  > .drip-indicator-left-down {
    left: 30px;
    right: auto;
    bottom: -60px;
  }
  > .drip-indicator-right-down {
    bottom: -60px;
  }
  > .drip-indicator-center-down {
    right: 50%;
    transform: translateX(50%);
    bottom: -60px;
  }
  > .drip-swiper {
    overflow: hidden;
    position: relative;
    > .drip-swiper-item {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      > a {
        display: block;
        width: 100%;
        height: 100%;
        > .drip-img {
          display: block;
          width: 100%;
          height: 100%;
          background: center center no-repeat;
          background-size: cover;
        }
        > .drip-swiper-desc {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          height: 1.4em;
          font-size: 32px;
          padding: 40px 100px 24px 26px;
          margin: 0;
          background-image: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 0,
            rgba(0, 0, 0, 0.7) 100%
          );
          color: #fff;
          text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          word-wrap: normal;
        }
      }
    }
  }
}