amazeui/widget/slider/src/slider.d2.less

Sleek, intuitive, and powerful front-end framework for faster and easier web development.

/**
  * Slider Theme: d2
  */

.am-slider-d2 {
  @desc-color: @white;

  @control-nav-bg-color: rgba(0,0,0,0.5);
  @control-nav-active-bg-color: @global-primary;

  @content-bg-color: rgba(0,0,0,0.7);

  @more-color: @gray-lighter;
  @more-bg-color: @global-primary;

  margin-bottom: 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);

  .am-viewport {
    max-height: 2000px;
    transition: all 1s ease;

    .loading & {
      max-height: 300px;
    }
  }

  // desc
  .am-slider-desc {
    position: absolute;
    left: 10px;
    bottom: 20px;
    right: 50px;
    color: @desc-color;
  }

  .am-slider-content {
    background-color: @content-bg-color;
    padding: 10px 6px;
    margin-bottom: 10px;

    p {
      margin: 0;
      .text-overflow(block);
      font-size: 1.4rem;
    }
  }

  .am-slider-title {
    font-weight: normal;
    margin-bottom: 5px;
    .text-overflow(block);
  }

  .am-slider-more {
    color: @more-color;
    font-size: 1.3rem;
    background-color: @more-bg-color;
    padding: 2px 10px;
  }


  /* Control Nav */
  .am-control-nav {
    width: 100%;
    position: absolute;
    bottom: -15px;
    text-align: center;

    li {
      margin: 0 6px;
      display: inline-block;

      a {
        width: 8px;
        height: 8px;
        display: block;
        background-color: @control-nav-bg-color;
        cursor: pointer;
        text-indent: -9999px;
        border-radius: 50%;
        font-size: 0;
        line-height: 0;
        box-shadow: inset 0 0 3px rgba(0,0,0,0.3);

        &:hover {
          background: darken(@control-nav-bg-color, 8%);
        }

        &.am-active {
          background: @control-nav-active-bg-color;
          cursor: default; }
      }
    }
  }

  .am-direction-nav,
  .am-pauseplay {
    display: none;
  }

  .hook-am-slider-d2;
}

.hook-am-slider-d2(){}