abc/assets/scss/foundation/components/_joyride.scss

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

@import "global";

//
// @variables
//
$include-html-joyride-classes: $include-html-classes !default;

// Controlling default Joyride styles
$joyride-tip-bg: $oil !default;
$joyride-tip-default-width: 300px !default;
$joyride-tip-padding: rem-calc(18 20 24) !default;
$joyride-tip-border: solid 1px $charcoal !default;
$joyride-tip-radius: 4px !default;
$joyride-tip-position-offset: 22px !default;

// Here, we're setting the tip font styles
$joyride-tip-font-color: $white !default;
$joyride-tip-font-size: rem-calc(14) !default;
$joyride-tip-header-weight: $font-weight-bold !default;

// This changes the nub size
$joyride-tip-nub-size: 10px !default;

// This adjusts the styles for the timer when its enabled
$joyride-tip-timer-width: 50px !default;
$joyride-tip-timer-height: 3px !default;
$joyride-tip-timer-color: $steel !default;

// This changes up the styles for the close button
$joyride-tip-close-color: $monsoon !default;
$joyride-tip-close-size: 24px !default;
$joyride-tip-close-weight: $font-weight-normal !default;

// When Joyride is filling the screen, we use this style for the bg
$joyride-screenfill: rgba(0,0,0,0.5) !default;


// We decided not to make a mixin for this because it relies on
// predefined classes to work properly.
@include exports("joyride") {
  @if $include-html-joyride-classes {

    /* Foundation Joyride */
    .joyride-list { display: none; }

    /* Default styles for the container */
    .joyride-tip-guide {
      display: none;
      position: absolute;
      background: $joyride-tip-bg;
      color: $joyride-tip-font-color;
      z-index: 101;
      top: 0;
      #{$default-float}: 2.5%;
      font-family: inherit;
      font-weight: $font-weight-normal;
      width: 95%;
    }

    .lt-ie9 .joyride-tip-guide {
      max-width:800px;
      #{$default-float}: 50%;
      margin-#{$default-float}:-400px;
    }

    .joyride-content-wrapper {
      width: 100%;

      padding: $joyride-tip-padding;

      .button { margin-bottom: 0 !important; }

      .joyride-prev-tip { margin-right: 10px; }
    }

    /* Add a little css triangle pip, older browser just miss out on the fanciness of it */
    .joyride-tip-guide {
      .joyride-nub {
        display: block;
        position: absolute;
        #{$default-float}: $joyride-tip-position-offset;
        width: 0;
        height: 0;
        border: $joyride-tip-nub-size solid $joyride-tip-bg;

        &.top {
          border-top-style: solid;
          border-color: $joyride-tip-bg;
          border-top-color: transparent !important;
          border-#{$default-float}-color: transparent !important;
          border-#{$opposite-direction}-color: transparent !important;
          top: -($joyride-tip-nub-size*2);
        }
        &.bottom {
          border-bottom-style: solid;
          border-color: $joyride-tip-bg !important;
          border-bottom-color: transparent !important;
          border-#{$default-float}-color: transparent !important;
          border-#{$opposite-direction}-color: transparent !important;
          bottom: -($joyride-tip-nub-size*2);
        }

        &.right { right: -($joyride-tip-nub-size*2); }
        &.left { left: -($joyride-tip-nub-size*2); }
      }
    }

    /* Typography */
    .joyride-tip-guide h1,
    .joyride-tip-guide h2,
    .joyride-tip-guide h3,
    .joyride-tip-guide h4,
    .joyride-tip-guide h5,
    .joyride-tip-guide h6 {
      line-height: 1.25;
      margin: 0;
      font-weight: $joyride-tip-header-weight;
      color: $joyride-tip-font-color;
    }
    .joyride-tip-guide p {
      margin: rem-calc(0 0 18 0);
      font-size: $joyride-tip-font-size;
      line-height: 1.3;
    }

    .joyride-timer-indicator-wrap {
      width: $joyride-tip-timer-width;
      height: $joyride-tip-timer-height;
      border: $joyride-tip-border;
      position: absolute;
      #{$opposite-direction}: rem-calc(17);
      bottom: rem-calc(16);
    }
    .joyride-timer-indicator {
      display: block;
      width: 0;
      height: inherit;
      background: $joyride-tip-timer-color;
    }

    .joyride-close-tip {
      position: absolute;
      #{$opposite-direction}: 12px;
      top: 10px;
      color: $joyride-tip-close-color !important;
      text-decoration: none;
      font-size: $joyride-tip-close-size;
      font-weight: $joyride-tip-close-weight;
      line-height: .5 !important;

      &:hover,
      &:focus { color: $smoke !important; }
    }

    .joyride-modal-bg {
      position: fixed;
      height: 100%;
      width: 100%;
      background: transparent;
      background: $joyride-screenfill;
      z-index: 100;
      display: none;
      top: 0;
      #{$default-float}: 0;
      cursor: $cursor-pointer-value;
    }

    .joyride-expose-wrapper {
      background-color: $white;
      position: absolute;
      border-radius: 3px;
      z-index: 102;
      box-shadow: 0 0 15px $white;
    }

    .joyride-expose-cover {
      background: transparent;
      border-radius: 3px;
      position: absolute;
      z-index: 9999;
      top: 0;
      left: 0;
    }


    /* Styles for screens that are at least 768px; */
    @media #{$small} {
      .joyride-tip-guide { width: $joyride-tip-default-width; #{$default-float}: inherit;
        .joyride-nub {
          &.bottom {
            border-color: $joyride-tip-bg !important;
            border-bottom-color: transparent !important;
            border-#{$default-float}-color: transparent !important;
            border-#{$opposite-direction}-color: transparent !important;
            bottom: -($joyride-tip-nub-size*2);
          }
          &.right {
            border-color: $joyride-tip-bg !important;
            border-top-color: transparent !important;
            border-right-color: transparent !important; border-bottom-color: transparent !important;
            top: $joyride-tip-position-offset;
            left: auto;
            right: -($joyride-tip-nub-size*2);
          }
          &.left {
            border-color: $joyride-tip-bg !important;
            border-top-color: transparent !important;
            border-left-color: transparent !important;
            border-bottom-color: transparent !important;
            top: $joyride-tip-position-offset;
            left: -($joyride-tip-nub-size*2);
            right: auto;
          }
        }
      }
    }
  }
}