amazeui/less/ui.flexslider.less

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

// Name:            FlexSlider
//
// Description:     Define style for FlexSlider Plugin
//
// Component:       `.am-slider`
//
// Uses:            Icon
//
// =============================================================================


/* ==========================================================================
   Component: Flex Slider Plugin
 ============================================================================ */

// Browser Resets
// =============================================================================
.@{ns}slider {
  a:hover,
  a:focus{
    outline: none;
  }
}

.@{ns}slides,
.@{ns}control-nav,
.@{ns}direction-nav {
  margin: 0;
  padding: 0;
  list-style: none;
}


// FlexSlider Necessary Styles
// =============================================================================
.@{ns}slider {
  margin: 0;
  padding: 0;

  .@{ns}slides {
    .clearfix(); // Clearfix for the .slides element

    & > li {
      display: none;
      -webkit-backface-visibility: hidden;
      // Hide the slides before the JS is loaded. Avoids image jumping
      position: relative;

      // No JavaScript Fallback
      .no-js & {
        &:first-child {
          display: block;
        }
      }
    }

    img {
      width: 100%;
      display: block;
    }
  }
}

.@{ns}pauseplay span {
  text-transform: capitalize;
}


// =============================================================================
// FlexSlider Theme Core
// =============================================================================

.@{ns}slider {
  position: relative;
}

.@{ns}viewport {
  transition: all 1s ease;
}

.@{ns}slider-carousel li {
  margin-right: 5px;
}

// Control Nav
.@{ns}control-nav {
  position: absolute;
  li {
    display: inline-block;
  }
}

.@{ns}control-thumbs {
  position: static;
  overflow: hidden;

  img {
    transition: all 1s ease;
  }
}

// Style for Amaze UI React
.@{ns}slider-slide {
  .@{ns}slides {
    > li {
      display: none;
      position: relative;

      // WebKit CSS3 transforms for supported devices
      @media all and (transform-3d), (-webkit-transform-3d) {
        transition: transform 0.6s ease-in-out;
        backface-visibility: hidden;
        perspective: 1000px;

        &.next,
        &.active.right {
          transform: translate3d(100%, 0, 0);
          left: 0;
        }

        &.prev,
        &.active.left {
          transform: translate3d(-100%, 0, 0);
          left: 0;
        }

        &.next.left,
        &.prev.right,
        &.active {
          transform: translate3d(0, 0, 0);
          left: 0;
        }
      }
    }

    > .active,
    > .next,
    > .prev {
      display: block;
    }

    > .active {
      left: 0;
    }

    > .next,
    > .prev {
      position: absolute;
      top: 0;
      width: 100%;
    }

    > .next {
      left: 100%;
    }
    > .prev {
      left: -100%;
    }
    > .next.left,
    > .prev.right {
      left: 0;
    }

    > .active.left {
      left: -100%;
    }
    > .active.right {
      left: 100%;
    }
  }
}

/**
  * Slider Theme: Default
  */

.@{ns}slider-default {
  @direction-nav-color: @gray-dark;
  @pauseplay-color: #000;

  @desc-color: #fff;
  @desc-bg-color: rgba(0,0,0,0.7);

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

  margin: 0 0 20px;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 0 2px rgba(0,0,0,.15);

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

  .carousel li {
    margin-right: 5px;
  }

  /* Direction Nav */
  .am-direction-nav {
    a {
      position: absolute;
      top: 50%;
      z-index: 10;
      display: block;
      width: 36px;
      height: 36px;
      margin: -18px 0 0;
      overflow: hidden;
      opacity: 0.45;
      cursor: pointer;
      color: rgba(0, 0, 0, 0.65);
      transition: all .3s ease;

      &:before {
        .am-icon-font;
        width: 100%;
        color: @direction-nav-color;
        content: @fa-var-chevron-circle-left;
        font-size: 24px!important;
        text-align: center;
        line-height: 36px!important;
        height: 36px;
      }
      &.am-next {
        &:before {
          content: @fa-var-chevron-circle-right;
        }
      }
    }

    .am-prev {
      left: 10px;
    }
    .am-next {
      right: 10px;
      text-align: right;
    }

    .am-disabled {
      opacity: 0!important;
      cursor: default;
    }
  }

  &:hover {
    .am-prev {
      opacity: 0.7;
      left: 10px;
      &:hover {
        opacity: 1;
      }
    }
    .am-next {
      opacity: 0.7;
      right: 10px;
      &:hover {
        opacity: 1;
      }
    }
  }

  /* Pause/Play */
  .am-pauseplay {
    a {
      display: block;
      width: 20px;
      height: 20px;
      position: absolute;
      bottom: 5px;
      left: 10px;
      opacity: 0.8;
      z-index: 10;
      overflow: hidden;
      cursor: pointer;
      color: @pauseplay-color;
      &::before {
        .am-icon-font;
        font-size: 20px;
        display: inline-block;
        content: @fa-var-pause;
      }
      &:hover {
        opacity: 1;
      }
      &.am-play {
        &::before {
          content: @fa-var-play;
        }
      }
    }
  }

  // desc
  .am-slider-desc {
    background-color: @desc-bg-color;
    position: absolute;
    bottom: 0;
    padding: 10px;
    width: 100%;
    color: @desc-color;
  }

  /* 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: #666;
        background-color: @control-nav-bg-color;
        line-height: 0;
        font-size: 0;
        cursor: pointer;
        text-indent: -9999px;
        border-radius: 20px;
        box-shadow: inset 0 0 3px rgba(0,0,0,0.3);

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

  .am-control-thumbs {
    margin: 5px 0 0;
    position: static;
    overflow: hidden;
    // display: flex;

    li {
      // flex: 1;
      width: 25%;
      float: left;
      margin: 0;
    }

    img {
      width: 100%;
      height: auto;
      display: block;
      opacity: .7;
      cursor: pointer;

      &:hover {
        opacity: 1;
      }
    }

    .am-active {
      opacity: 1;
      cursor: default;
    }

    i {
      position: absolute;
    }
  }

  .hook-flexslider-default;
}

.hook-flexslider-default() {}