diff options
Diffstat (limited to 'source/bower_components/foundation/scss/foundation/components/_orbit.scss')
| -rw-r--r-- | source/bower_components/foundation/scss/foundation/components/_orbit.scss | 368 |
1 files changed, 368 insertions, 0 deletions
diff --git a/source/bower_components/foundation/scss/foundation/components/_orbit.scss b/source/bower_components/foundation/scss/foundation/components/_orbit.scss new file mode 100644 index 0000000..36a516e --- /dev/null +++ b/source/bower_components/foundation/scss/foundation/components/_orbit.scss @@ -0,0 +1,368 @@ +// Foundation by ZURB +// foundation.zurb.com +// Licensed under MIT Open Source + +@import "global"; + +// @variables +// +$include-html-orbit-classes: $include-html-classes !default; + +// We use these to control the caption styles +$orbit-container-bg: none !default; +$orbit-caption-bg: rgba(51,51,51, 0.8) !default; +$orbit-caption-font-color: $white !default; +$orbit-caption-font-size: rem-calc(14) !default; +$orbit-caption-position: "bottom" !default; // Supported values: "bottom", "under" +$orbit-caption-padding: rem-calc(10 14) !default; +$orbit-caption-height: auto !default; + +// We use these to control the left/right nav styles +$orbit-nav-bg: transparent !default; +$orbit-nav-bg-hover: rgba(0,0,0,0.3) !default; +$orbit-nav-arrow-color: $white !default; +$orbit-nav-arrow-color-hover: $white !default; + +// We use these to control the timer styles +$orbit-timer-bg: rgba(255,255,255,0.3) !default; +$orbit-timer-show-progress-bar: true !default; + +// We use these to control the bullet nav styles +$orbit-bullet-nav-color: $iron !default; +$orbit-bullet-nav-color-active: $aluminum !default; +$orbit-bullet-radius: rem-calc(9) !default; + +// We use these to controls the style of slide numbers +$orbit-slide-number-bg: rgba(0,0,0,0) !default; +$orbit-slide-number-font-color: $white !default; +$orbit-slide-number-padding: rem-calc(5) !default; + +// Graceful Loading Wrapper and preloader +$wrapper-class: "slideshow-wrapper" !default; +$preloader-class: "preloader" !default; + +// Hide controls on small +$orbit-nav-hide-for-small: true !default; +$orbit-bullet-hide-for-small: true !default; +$orbit-timer-hide-for-small: true !default; + + +@include exports("orbit") { + @if $include-html-orbit-classes { + + @-webkit-keyframes rotate { + from { -webkit-transform: rotate(0deg); } + to { -webkit-transform: rotate(360deg); } + } + @-moz-keyframes rotate { + from { -moz-transform: rotate(0deg); } + to { -moz-transform: rotate(360deg); } + } + @-o-keyframes rotate { + from { -o-transform: rotate(0deg); } + to { -o-transform: rotate(360deg); } + } + @keyframes rotate { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } + } + + /* Orbit Graceful Loading */ + .#{$wrapper-class} { + position: relative; + + ul { + // Prevent bullets showing before .orbit-container is loaded + list-style-type: none; + margin: 0; + + // Hide all list items + li, + li .orbit-caption { display: none; } + + // ...except for the first one + li:first-child { display: block; } + } + + .orbit-container { background-color: transparent; + + // Show images when .orbit-container is loaded + li { display: block; + + .orbit-caption { display: block; } + } + .orbit-bullets li { + display: inline-block; + } + } + + // Orbit preloader + .#{$preloader-class} { + display: block; + width: 40px; + height: 40px; + position: absolute; + top: 50%; + left: 50%; + margin-top: -20px; + margin-left: -20px; + border: solid 3px; + border-color: $charcoal $white; + @include radius(1000px); + animation-name: rotate; + animation-duration: 1.5s; + animation-iteration-count: infinite; + animation-timing-function: linear; + } + } + + + .orbit-container { + overflow: hidden; + width: 100%; + position: relative; + background: $orbit-container-bg; + + .orbit-slides-container { + list-style: none; + margin: 0; + padding: 0; + position: relative; + + // Prevents images (and captions) from disappearing after first rotation on Chrome for Android + -webkit-transform: translateZ(0); + + img { display: block; max-width: 100%; } + + &>* { + position: absolute; + top: 0; + width: 100%; + @if $text-direction == rtl { + margin-right: 100%; + } + @else { + margin-left: 100%; + } + + &:first-child { + @if $text-direction == rtl { + margin-right: 0%; + } + @else { + margin-left: 0%; + } + } + + .orbit-caption { + @if $orbit-caption-position == "bottom" { + position: absolute; + bottom: 0; + } @else if $orbit-caption-position == "under" { + position: relative; + } + + background-color: $orbit-caption-bg; + color: $orbit-caption-font-color; + width: 100%; + padding: $orbit-caption-padding; + font-size: $orbit-caption-font-size; + } + } + } + + .orbit-slide-number { + position: absolute; + top: 10px; + #{$default-float}: 10px; + font-size: 12px; + span { font-weight: 700; padding: $orbit-slide-number-padding;} + color: $orbit-slide-number-font-color; + background: $orbit-slide-number-bg; + z-index: 10; + } + + .orbit-timer { + position: absolute; + top: 12px; + #{$opposite-direction}: 10px; + height: 6px; + width: 100px; + z-index: 10; + .orbit-progress { + @if $orbit-timer-show-progress-bar { + height: 3px; + background-color: $orbit-timer-bg; + display: block; + width: 0%; + position: relative; + right: 20px; + top: 5px; + } + } + + // Play button + & > span { + display: none; + position: absolute; + top: 0px; + #{$opposite-direction}: 0; + width: 11px; + height: 14px; + border: solid 4px $white; + border-top: none; + border-bottom: none; + } + + // Pause button + &.paused { + & > span { + #{$opposite-direction}: -4px; + top: 0px; + width: 11px; + height: 14px; + border: inset 8px; + border-left-style: solid; + border-color: transparent; + border-left-color: $white; + &.dark { + border-left-color: $oil; + } + } + } + } + + + + &:hover .orbit-timer > span { display: block; } + + // Let's get those controls to be right in the center on each side + .orbit-prev, + .orbit-next { + position: absolute; + top: 45%; + margin-top: -25px; + width: 36px; + height: 60px; + line-height: 50px; + color: white; + background-color: $orbit-nav-bg; + text-indent: -9999px !important; + z-index: 10; + + &:hover { + background-color: $orbit-nav-bg-hover; + } + + & > span { + position: absolute; + top: 50%; + margin-top: -10px; + display: block; + width: 0; + height: 0; + border: inset 10px; + } + } + .orbit-prev { #{$default-float}: 0; + & > span { + border-#{$opposite-direction}-style: solid; + border-color: transparent; + border-#{$opposite-direction}-color: $orbit-nav-arrow-color; + } + &:hover > span { + border-#{$opposite-direction}-color: $orbit-nav-arrow-color-hover; + } + } + .orbit-next { #{$opposite-direction}: 0; + & > span { + border-color: transparent; + border-#{$default-float}-style: solid; + border-#{$default-float}-color: $orbit-nav-arrow-color; + #{$default-float}: 50%; + margin-#{$default-float}: -4px; + } + &:hover > span { + border-#{$default-float}-color: $orbit-nav-arrow-color-hover; + } + } + } + + .orbit-bullets-container { text-align: center; } + .orbit-bullets { + margin: 0 auto 30px auto; + overflow: hidden; + position: relative; + top: 10px; + float: none; + text-align: center; + display: block; + + li { + cursor:pointer; + display: inline-block; + width: $orbit-bullet-radius; + height: $orbit-bullet-radius; + background: $orbit-bullet-nav-color; + // float: $default-float; + float: none; + margin-#{$opposite-direction}: 6px; + @include radius(1000px); + + &.active { + background: $orbit-bullet-nav-color-active; + } + + &:last-child { margin-#{$opposite-direction}: 0; } + } + } + + .touch { + .orbit-container { + .orbit-prev, + .orbit-next { display: none; } + } + + .orbit-bullets { display: none; } + } + + + @media #{$medium-up} { + + .touch { + .orbit-container { + .orbit-prev, + .orbit-next { display: inherit; } + } + + .orbit-bullets { display: block; } + } + + } + + @media #{$small-only} { + .orbit-stack-on-small { + .orbit-slides-container {height: auto !important;} + .orbit-slides-container > * { + position: relative; + margin:0% !important; + opacity:1 !important; + } + + .orbit-slide-number { + display: none; + } + } + + @if $orbit-timer-hide-for-small { + .orbit-timer{display: none;} + } + @if $orbit-nav-hide-for-small { + .orbit-next,.orbit-prev{display: none;} + } + @if $orbit-bullet-hide-for-small { + .orbit-bullets{display: none;} + } + } + } +} |