devroom.io/content/css/zurb-foundation/foundation/components/_joyride.scss

//
// Joyride Variables
//

// Controlling default Joyride styles
$joyride-tip-bg:              rgb(0,0,0) !default;
$joyride-tip-default-width:   300px !default;
$joyride-tip-padding:         emCalc(18px) emCalc(20px) emCalc(24px) !default;
$joyride-tip-border:          solid 1px #555 !default;
$joyride-tip-radius:          4px !default;
$joyride-tip-position-offset: 22px !default;

// Here, we're setting the tip dont styles
$joyride-tip-font-color:      #fff !default;
$joyride-tip-font-size:       emCalc(14px) !default;
$joyride-tip-header-weight:   bold !default;

// This changes the nub size
$joyride-tip-nub-size:        14px !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:     #666 !default;

// This changes up the styles for the close button
$joyride-tip-close-color:     #777 !default;
$joyride-tip-close-size:      30px !default;
$joyride-tip-close-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.

/* 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: 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; }
}

/* 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: solid $joyride-tip-nub-size;

    &.top {
      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: none;
    }
    &.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);
      bottom: none;
    }

    &.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: 0 0 emCalc(18px) 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}: emCalc(17px);
  bottom: emCalc(16px);
}
.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: #eee !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: pointer;
}

.joyride-expose-wrapper {
  background-color: #ffffff;
  position: absolute;
  border-radius: 3px;
  z-index: 102;
  -moz-box-shadow: 0px 0px 30px #ffffff;
  -webkit-box-shadow: 0px 0px 15px #ffffff;
  box-shadow: 0px 0px 15px #ffffff;
}

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


/* Styles for screens that are atleast 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);
        bottom: none;
      }
      &.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;
        bottom: none;
        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; bottom: none;
      }
    }
  }
}