diff options
Diffstat (limited to 'source/bower_components/foundation/scss/foundation/components/_joyride.scss')
| -rw-r--r-- | source/bower_components/foundation/scss/foundation/components/_joyride.scss | 222 |
1 files changed, 222 insertions, 0 deletions
diff --git a/source/bower_components/foundation/scss/foundation/components/_joyride.scss b/source/bower_components/foundation/scss/foundation/components/_joyride.scss new file mode 100644 index 0000000..37ac233 --- /dev/null +++ b/source/bower_components/foundation/scss/foundation/components/_joyride.scss @@ -0,0 +1,222 @@ +// 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; + } + } + } + } + } +} |