foundation/stylus/foundation/components/orbit.styl

You may also want to checkout:

// Orbit Settings
$include-html-orbit-classes ?= $include-html-classes;

// We use these to control the caption styles
$orbit-container-bg ?= #f5f5f5;
$orbit-caption-bg-old ?= rgb(0,0,0);
$orbit-caption-bg ?= rgba(0,0,0,0.6);
$orbit-caption-font-color ?= #fff;

// We use these to control the left/right nav styles
$orbit-nav-bg-old ?= rgb(0,0,0);
$orbit-nav-bg ?= rgba(0,0,0,0.6);

// We use these to control the timer styles
$orbit-timer-bg-old ?= rgb(0,0,0);
$orbit-timer-bg ?= rgba(0,0,0,0.6);

// We use these to control the bullet nav styles
$orbit-bullet-nav-color ?= #999;
$orbit-bullet-nav-color-active ?= #222;

// We use thes to controls the style of slide numbers
$orbit-slide-number-bg ?= rgba(0,0,0,0);
$orbit-slide-number-font-color ?= #fff;
$orbit-slide-number-padding ?= emCalc(5px);

// Graceful Loading Wrapper and preloader
$wrapper-class ?= "slideshow-wrapper";
$preloader-class ?= "preloader";


if $include-html-orbit-classes != false {

  if $experimental {
    @-webkit-keyframes rotate {
      from { -webkit-transform: rotate(0deg); }
      to { -webkit-transform: rotate(360deg); }
    }
    @-moz-keyframes rotate {
      from { -webkit-transform: rotate(0deg); }
      to { -webkit-transform: rotate(360deg); }
    }
    @-o-keyframes rotate {
      from { -webkit-transform: rotate(0deg); }
      to { -webkit-transform: rotate(360deg); }
    }
  }
  @keyframes rotate {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
  }

  /* Orbit Graceful Loading */
  .{$wrapper-class} {
    position: relative;

    ul {
      // Prevent bullets showing before .orbit-container is loaded
      list-style-type: none;
      margin: 0;

      // Hide all list items
      li,
      li .orbit-caption { display: none; }

      // ...except for the first one
      li:first-child { display: block; }
    }

    .orbit-container { background-color: transparent;

      // Show images when .orbit-container is loaded
      li { display: block;

        .orbit-caption { display: block; }
      }
    }
  }

  // Orbit preloader
  .{$preloader-class} {
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -20px;
    margin-left: -20px;
    border: solid 3px;
    border-color: #555 #fff;
    radius(1000px);
    if $experimental {
      -webkit-animation-name: rotate;
      -webkit-animation-duration: 1.5s;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-timing-function: linear;
      -moz-animation-name: rotate;
      -moz-animation-duration: 1.5s;
      -moz-animation-iteration-count: infinite;
      -moz-animation-timing-function: linear;
      -o-animation-name: rotate;
      -o-animation-duration: 1.5s;
      -o-animation-iteration-count: infinite;
      -o-animation-timing-function: linear;
    }
    animation-name: rotate;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }

  .orbit-container {
    overflow: hidden;
    width: 100%;
    position: relative;
    background: $orbit-container-bg;

    .orbit-slides-container {
      list-style: none;
      margin: 0;
      padding: 0;
      position: relative;

      img { display: block; }

      &>* {
        position: relative;
        float: $default-float;
        height: auto;

        .orbit-caption {
          position: absolute;
          bottom: 0;
          background-color: $orbit-caption-bg-old;
          background-color: $orbit-caption-bg;
          color: $orbit-caption-font-color;
          width: 100%;
          padding: 10px 14px;
          font-size: emCalc(14px);
        }
      }
    }

    .orbit-slide-number {
      position: absolute;
      top: 10px;
      {$default-float}: 10px;
      font-size: 12px;
      span { font-weight: 700; padding: $orbit-slide-number-padding;}
      color: $orbit-slide-number-font-color;
      background: $orbit-slide-number-bg;
    }

    .orbit-timer {
      position: absolute;
      top: 10px;
      {$opposite-direction}: 10px;
      height: 6px;
      width: 100px;
      .orbit-progress {
        height: 100%;
        background-color: $orbit-timer-bg-old;
        background-color: $orbit-timer-bg;
        display: block;
        width: 0%;
      }

      & > span {
        display: none;
        position: absolute;
        top: 10px;
        {$opposite-direction}: 0px;
        width: 11px;
        height: 14px;
        border: solid 4px #000;
        border-top: none;
        border-bottom: none;
      }

      &.paused {
        & > span {
          {$opposite-direction}: -6px;
          top: 9px;
          width: 11px;
          height: 14px;
          border: inset 8px;
          border-right-style: solid;
          border-color: transparent transparent transparent #000;
        }
      }
    }

    &:hover .orbit-timer > span { display: block; }

    // Let's get those controls to be right in the center on each side
    .orbit-prev,
    .orbit-next {
      position: absolute;
      top: 50%;
      margin-top: -25px;
      background-color: $orbit-nav-bg-old;
      background-color: $orbit-nav-bg;
      width: 50px;
      height: 60px;
      line-height: 50px;
      color: white;
      text-indent: -9999px !important;

      & > span {
        position: absolute;
        top: 50%;
        margin-top: -16px;
        display: block;
        width: 0;
        height: 0;
        border: inset 16px;
      }
    }
    .orbit-prev {
      {$default-float}: 0;
      & > span {
        border-{$opposite-direction}-style: solid;
        border-color: transparent;
        border-{$opposite-direction}-color: #fff;
      }
      &:hover > span {
        border-{$opposite-direction}-color: #ccc;
      }
    }
    .orbit-next {
      {$opposite-direction}: 0;
      & > span {
        border-color: transparent;
        border-{$default-float}-style: solid;
        border-{$default-float}-color: #fff;
        {$default-float}: 50%;
        margin-{$default-float}: -8px;
      }
      &:hover > span {
        border-{$default-float}-color: #ccc;
      }
    }
  }

  .orbit-bullets {
    margin: 0 auto 30px auto;
    overflow: hidden;
    position: relative;
    top: 10px;

    li {
      display: block;
      width: 18px;
      height: 18px;
      background: $orbit-bullet-nav-color;
      float: $default-float;
      margin-{$opposite-direction}: 6px;
      border: solid 2px $orbit-bullet-nav-color-active;
      radius(1000px);

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

      &:last-child {
        margin-{$opposite-direction}: 0;
      }
    }
  }

  .touch {
    .orbit-container {
      .orbit-prev,
      .orbit-next { display: none; }
    }

    .orbit-bullets { display: none; }
  }


  @media $small {

    .touch {
      .orbit-container {
        .orbit-prev,
        .orbit-next { display: inherit; }
      }

      .orbit-bullets { display: block; }
    }

  }

}