File: engine/modules/contrib/foundation/source/scss/components/_orbit.scss

// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

////
/// @group orbit
////

/// Default color for Orbit's bullets.
/// @type Color
$orbit-bullet-background: $medium-gray !default;

/// Default active color for Orbit's bullets.
/// @type Color
$orbit-bullet-background-active: $dark-gray !default;

/// Default diameter for Orbit's bullets.
/// @type Number
$orbit-bullet-diameter: 1.2rem !default;

/// Default margin between Orbit's bullets.
/// @type Number
$orbit-bullet-margin: 0.1rem !default;

/// Default distance from slide region for Orbit's bullets.
/// @type Number
$orbit-bullet-margin-top: 0.8rem !default;

/// Default bottom margin from Orbit's bullets to whatever content may lurk below it.
/// @type Number
$orbit-bullet-margin-bottom: 0.8rem !default;

/// Default background color for Orbit's caption.
/// @type Color
$orbit-caption-background: rgba($black, 0.5) !default;

/// Default padding for Orbit's caption.
/// @type Number
$orbit-caption-padding: 1rem !default;

/// Default background color for Orbit's controls when hovered.
/// @type Color
$orbit-control-background-hover: rgba($black, 0.5) !default;

/// Default padding for Orbit's controls.
/// @type Number
$orbit-control-padding: 1rem !default;

/// Default z-index for Orbit's controls.
/// @type Number
$orbit-control-zindex: 10 !default;

/// Adds styles for the outer Orbit wrapper. These styles are used on the `.orbit` class.
@mixin orbit-wrapper {
  position: relative;
}

/// Adds styles for the inner Orbit slide container. These styles are used on the `.orbit-container` class.
@mixin orbit-container {
  position: relative;
  height: 0; // Prevent FOUC by not showing until JS sets height
  margin: 0;
  list-style: none;
  overflow: hidden;
}

/// Adds styles for the individual slides of an Orbit slider. These styles are used on the `.orbit-slide` class.
@mixin orbit-slide {
  width: 100%;

  &.no-motionui {
    &.is-active {
      top: 0;
      left: 0;
    }
  }
}

@mixin orbit-figure {
  margin: 0;
}

/// Adds styles for a slide containing an image. These styles are used on the `.orbit-image` class.
@mixin orbit-image {
  width: 100%;
  max-width: 100%;
  margin: 0;
}

/// Adds styles for an orbit slide caption. These styles are used on the `.orbit-caption` class.
@mixin orbit-caption {
  position: absolute;
  bottom: 0;
  width: 100%;
  margin-bottom: 0;
  padding: $orbit-caption-padding;

  background-color: $orbit-caption-background;
  color: color-pick-contrast($orbit-caption-background);
}

/// Adds base styles for the next/previous buttons in an Orbit slider. These styles are shared between the `.orbit-next` and `.orbit-previous` classes in the default CSS.
@mixin orbit-control {
  @include disable-mouse-outline;
  @include vertical-center;
  z-index: $orbit-control-zindex;
  padding: $orbit-control-padding;
  color: $white;

  &:hover,
  &:active,
  &:focus {
    background-color: $orbit-control-background-hover;
  }
}

/// Adds styles for the Orbit previous button. These styles are used on the `.orbit-previous` class.
@mixin orbit-previous {
  #{$global-left}: 0;
}

/// Adds styles for the Orbit next button. These styles are used on the `.orbit-next` class.
@mixin orbit-next {
  #{$global-left}: auto;
  #{$global-right}: 0;
}

/// Adds styles for a container of Orbit bullets. /// Adds styles for the Orbit previous button. These styles are used on the `.orbit-bullets` class.
@mixin orbit-bullets {
  @include disable-mouse-outline;
  position: relative;
  margin-top: $orbit-bullet-margin-top;
  margin-bottom: $orbit-bullet-margin-bottom;
  text-align: center;

  button {
    width: $orbit-bullet-diameter;
    height: $orbit-bullet-diameter;
    margin: $orbit-bullet-margin;

    border-radius: 50%;
    background-color: $orbit-bullet-background;

    &:hover {
      background-color: $orbit-bullet-background-active;
    }

    &.is-active {
      background-color: $orbit-bullet-background-active;
    }
  }
}

@mixin foundation-orbit {
  .orbit {
    @include orbit-wrapper;
  }

  .orbit-container {
    @include orbit-container;
  }

  .orbit-slide {
    @include orbit-slide;
  }

  .orbit-figure {
    @include orbit-figure;
  }

  .orbit-image {
    @include orbit-image;
  }

  .orbit-caption {
    @include orbit-caption;
  }

  %orbit-control {
    @include orbit-control;
  }

  .orbit-previous {
    @extend %orbit-control;
    @include orbit-previous;
  }

  .orbit-next {
    @extend %orbit-control;
    @include orbit-next;
  }

  .orbit-bullets {
    @include orbit-bullets;
  }
}