formstone/src/less/carousel.less

Library of modular front end components.

/**
 * @component
 * @name Carousel
 */

@import "imports/utils.less";

// Config

@fs-carousel-transition-duration: 0.5s;
@fs-carousel-transition-timing: ease;

@fs-carousel-control-left: 0;
@fs-carousel-control-right: 0;


/**
 * @class
 * @name .fs-carousel-element
 * @type element
 * @description Target element
 */

/**
 * @class
 * @name .fs-carousel
 * @type element
 * @description Base widget class
 */

/**
 * @class
 * @name .fs-carousel.fs-enabled
 * @type modifier
 * @description Indicates enabled state
 */

/**
 * @class
 * @name .fs-carousel.fs-rtl
 * @type modifier
 * @description Indicates right to left display
 */

/**
 * @class
 * @name .fs-carousel.fs-carousel-auto_height
 * @type modifier
 * @description Indicates auto height sizing
 */

/**
 * @class
 * @name .fs-carousel.fs-carousel-contained
 * @type modifier
 * @description Indicates overflow: hidden
 */

/**
 * @class
 * @name .fs-carousel.fs-carousel-single
 * @type modifier
 * @description Indicates single item display
 */

.fs-carousel {

  &&-enabled {
    .fs_clearfix();
    width: 100%;

    position: relative;
  }

  &,
  &:after,
  &:before,
  *,
  *:after,
  *:before {
    box-sizing: border-box;
    transition: none;
    user-select: none !important;
  }

  // Contained

  &-enabled&-contained,
  &-enabled&-contained &-viewport,
  &-enabled&-contained &-wrapper,
  &-enabled&-contained &-container {
    overflow: hidden;
  }

  /**
   * @class
   * @name .fs-carousel-viewport
   * @type element
   * @description Carousel container
   */

  &-enabled &-viewport {
    .fs_clearfix();

    position: relative;
  }

  /**
   * @class
   * @name .fs-carousel-wrapper
   * @type element
   * @description Carousel container
   */

  &-enabled &-wrapper {
    .fs_clearfix();

    position: relative;
  }

  /**
   * @class
   * @name .fs-carousel-container
   * @type element
   * @description Canister container
   */

  &-enabled &-container {
    // .fs_clearfix();

    position: relative;
  }

  /**
   * @class
   * @name .fs-carousel-canister
   * @type element
   * @description Item container
   */

  &-enabled &-canister {
    position: relative;

    backface-visibility: hidden;
    display: flex;
    margin: 0;
    overflow: hidden;
    transition: transform @fs-carousel-transition-duration @fs-carousel-transition-timing;
    transform: translate3d(0, 0, 0);
  }

  /**
   * @class
   * @name .fs-carousel-canister
   * @type element
   * @description Item container
   */

  &-enabled&-auto_height &-canister {
    transition:
      height @fs-carousel-transition-duration @fs-carousel-transition-timing,
      transform @fs-carousel-transition-duration @fs-carousel-transition-timing;
  }

  /**
   * @class
   * @name .fs-carousel-item
   * @type element
   * @description Individual item
   */

  &-enabled &-item {
    min-height: 1px;

    display: block;

    img {
      -webkit-user-drag: none;
      user-select: none;
    }
  }



  &-single &-item {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }

  &-single &-item&-visible {
    position: relative;
    z-index: 2;
  }


  /**
   * @class
   * @name .fs-carousel-controls
   * @type element
   * @description Controls container
   */

  /**
   * @class
   * @name .fs-carousel-controls.fs-carousel-visible
   * @type modifier
   * @description Indicates visible state
   */

  &-controls {
    display: none;
  }

  &-enabled &-controls {
    width: 100%;

    margin: 0;
    padding: 0;
  }

  &-enabled &-controls&-visible,
  &-controls_custom&-visible {
    display: block;
  }

  /**
   * @class
   * @name .fs-carousel-control
   * @type element
   * @description Control element
   */

  &-enabled &-control {
    .fs_button;

    cursor: pointer;
    padding: 0;
  }

  &-enabled &-control&-visible {

  }

  /**
   * @class
   * @name .fs-carousel-control.fs-carousel-control_previous
   * @type modifier
   * @description Indicates previous control
   */

  &-enabled &-control_previous,
  &-enabled&-rtl &-control_next {

  }

  /**
   * @class
   * @name .fs-carousel-control.fs-carousel-control_next
   * @type modifier
   * @description Indicates next control
   */

  &-enabled &-control_next,
  &-enabled&-rtl &-control_previous {

  }

  /**
   * @class
   * @name .fs-carousel-control.fs-carousel-control_disabled
   * @type modifier
   * @description Indicates disbaled state
   */

  &-enabled &-control_disabled {

  }

  /**
   * @class
   * @name .fs-carousel-pagination
   * @type element
   * @description Item element
   */

  /**
   * @class
   * @name .fs-carousel-pagination.fs-carousel-visible
   * @type modifier
   * @description Indicates visible state
   */

  &-pagination {
    display: none;
  }

  &-enabled &-pagination {
    width: 100%;
  }

  &-enabled &-pagination&-visible {
    display: block;
  }

  /**
   * @class
   * @name .fs-carousel-page
   * @type element
   * @description Pagiantion item element
   */

  &-enabled &-page {
    .fs_button;

    cursor: pointer;
    display: inline-block;
    padding: 0;
  }

  /**
   * @class
   * @name .fs-carousel-page.fs-carousel-active
   * @type modifier
   * @description Indicates active state
   */

  &-enabled &-page&-active {

  }

  // RTL

  &-enabled&-rtl {
    direction: rtl;
  }

  &-enabled&-rtl &-item {
  }

}