zurb-foundation-5/doc/includes/joyride/examples_joyride_variables.html

Foundation 5 for npm (no code modification from original repo)

{{#markdown}}
```scss
$include-html-joyride-classes: $include-html-classes;

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

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

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

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

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

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