formstone/src/less/themes/light/carousel.less

Library of modular front end components.

/**
 * @theme
 * @name Light
 * @component Carousel
 */

.fs-carousel {

    @import "_config.less";

  @theme_name: fs-light;

  // Config

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

  // Controls

  @fs-carousel-control-background: @fs-light-white;
  @fs-carousel-control-height: 40px;
  @fs-carousel-control-width: 40px;

  @fs-carousel-control-transition-duration: 0.15s;
  @fs-carousel-control-transition-timing: ease;

  @fs-carousel-control-border-radius: 100%;

  @fs-carousel-control-left: 20px;
  @fs-carousel-control-right: 20px;

  @fs-carousel-control-disabled-opacity: 0;

  // Control Carets

  @fs-carousel-control-caret-color: @fs-light-primary_900;
  @fs-carousel-control-caret-size: 7px;

  @fs-carousel-control-caret-width: (@fs-carousel-control-caret-size * 1.5);
  @fs-carousel-control-caret-margin: (@fs-carousel-control-width - (@fs-carousel-control-caret-size * 1.8)) / 2;

  @fs-carousel-control-hover-background: @fs-light-primary_100;

  // Carousel pagination

  @fs-carousel-pagination-margin: 10px 0 0;
  @fs-carousel-pagination-padding: 0;

  @fs-carousel-page-background: @fs-light-primary_900;
  @fs-carousel-page-border-radius: 100%;
  @fs-carousel-page-margin: 0 3px;
  @fs-carousel-page-opacity: 0.5;
  @fs-carousel-page-height: 10px;
  @fs-carousel-page-width: 10px;

  // Canister

  &.@{theme_name}&-enabled &-canister {
    position: relative;

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

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

  // Controls

  &.@{theme_name}&-enabled &-control {
    width: @fs-carousel-control-width;
    height: @fs-carousel-control-height;

    position: absolute;
    top: 0;
    bottom: 0;

    background: @fs-carousel-control-background;
    border-radius: @fs-carousel-control-border-radius;
    display: block;
    margin: auto;
    opacity: @fs-carousel-control-disabled-opacity;
    overflow: hidden;
    text-indent: 200%;
    transition:
      opacity @fs-carousel-control-transition-duration @fs-carousel-control-transition-timing,
      visibility @fs-carousel-control-transition-duration @fs-carousel-control-transition-timing;
    visibility: hidden;
    white-space: nowrap;

    &:before {
      width: 0;
      height: 0;

      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;

      content: '';
      margin: auto;
    }
  }

  &.@{theme_name}&-enabled &-control&-visible {
    opacity: 1;
    visibility: visible;

    .no-touchevents &:hover {
      background: @fs-carousel-control-hover-background;
    }
  }

  &.@{theme_name}&-enabled &-control_previous,
  &.@{theme_name}&-enabled&-rtl &-control_next {
    right: auto;
    left: @fs-carousel-control-left;

    &:before {
      border-top: @fs-carousel-control-caret-size solid transparent;
      border-bottom: @fs-carousel-control-caret-size solid transparent;
      border-right: @fs-carousel-control-caret-width solid @fs-carousel-control-caret-color;
      border-left: none;
      margin-left: @fs-carousel-control-caret-margin;
      margin-right: auto;
    }
  }

  &.@{theme_name}&-enabled &-control_next,
  &.@{theme_name}&-enabled&-rtl &-control_previous {
    left: auto;
    right: @fs-carousel-control-right;

    &:before {
      border-top: @fs-carousel-control-caret-size solid transparent;
      border-bottom: @fs-carousel-control-caret-size solid transparent;
      border-left: @fs-carousel-control-caret-width solid @fs-carousel-control-caret-color;
      border-right: none;
      margin-right: @fs-carousel-control-caret-margin;
      margin-left: auto;
    }
  }

  &.@{theme_name}&-enabled &-control_disabled {
    opacity: 0;
  }

  // Pagination

  &.@{theme_name}&-enabled &-pagination {
    width: 100%;

    margin: @fs-carousel-pagination-margin;
    padding: @fs-carousel-pagination-padding;
    text-align: center;
  }

  &.@{theme_name}&-enabled &-page {
    width: @fs-carousel-page-width;
    height: @fs-carousel-page-height;

    background: @fs-carousel-page-background;
    border-radius: @fs-carousel-page-border-radius;
    margin: @fs-carousel-page-margin;
    opacity: @fs-carousel-page-opacity;
    overflow: hidden;
    text-indent: 200%;
    white-space: nowrap;
  }

  &.@{theme_name}&-enabled &-page&-active,
  .no-touchevents .@{theme_name}&-enabled &-page:hover {
    opacity: 1;
  }

}