foundation/stylus/foundation/components/joyride.styl

You may also want to checkout:

//
// Joyride Variables
//
$include-html-joyride-classes ?= $include-html-classes;

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

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

// This changes the nub size
$joyride-tip-nub-size ?= 14px;

// This adjusts the styles for the timer when its enabled
$joyride-tip-timer-width ?= 50px;
$joyride-tip-timer-height ?= 3px;
$joyride-tip-timer-color ?= #666;

// This changes up the styles for the close button
$joyride-tip-close-color ?= #777;
$joyride-tip-close-size ?= 30px;
$joyride-tip-close-weight ?= normal;

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


// We decided not to make a mixin for this because it relies on predefined classes to work properly.

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

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

      &.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-top-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: 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: $cursor-pointer-value;
  }
  
  .joyride-expose-wrapper {
    background-color: #ffffff;
    position: absolute;
    border-radius: 3px;
    z-index: 102;
    if $experimental {
      -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);
        }
        &.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;
        }
      }
    }
  }
}