You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
355 lines
9.1 KiB
355 lines
9.1 KiB
@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: #fff !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: none !default;
|
|
$orbit-nav-bg-hover: rgba(0,0,0,0.3) !default;
|
|
$orbit-nav-arrow-color: #fff !default;
|
|
$orbit-nav-arrow-color-hover: #fff !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: #ccc !default;
|
|
$orbit-bullet-nav-color-active: #999 !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: #fff !default;
|
|
$orbit-slide-number-padding: rem-calc(5) !default;
|
|
|
|
// Graceful Loading Wrapper and preloader
|
|
$wrapper-class: "slideshow-wrapper" !default;
|
|
$preloader-class: "preloader" !default;
|
|
|
|
@include exports("orbit") {
|
|
@if $include-html-orbit-classes {
|
|
|
|
@if $experimental {
|
|
@-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 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: #555 #fff;
|
|
@include radius(1000px);
|
|
@if $experimental {
|
|
-webkit-animation-name: rotate;
|
|
-webkit-animation-duration: 1.5s;
|
|
-webkit-animation-iteration-count: infinite;
|
|
-webkit-animation-timing-function: linear;
|
|
-moz-animation-name: rotate;
|
|
-moz-animation-duration: 1.5s;
|
|
-moz-animation-iteration-count: infinite;
|
|
-moz-animation-timing-function: linear;
|
|
-o-animation-name: rotate;
|
|
-o-animation-duration: 1.5s;
|
|
-o-animation-iteration-count: infinite;
|
|
-o-animation-timing-function: linear;
|
|
}
|
|
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;
|
|
|
|
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 #fff;
|
|
border-top: none;
|
|
border-bottom: none;
|
|
}
|
|
|
|
// Pause button
|
|
&.paused {
|
|
& > span {
|
|
#{$opposite-direction}: -4px;
|
|
top: 0px;
|
|
width: 11px;
|
|
height: 14px;
|
|
border: inset 8px;
|
|
border-right-style: solid;
|
|
border-color: transparent transparent transparent #fff;
|
|
&.dark {
|
|
border-color: transparent transparent transparent #333;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
&: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 {
|
|
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-left: 0% !important;
|
|
}
|
|
.orbit-timer,
|
|
.orbit-next,
|
|
.orbit-prev,
|
|
.orbit-bullets {display: none;}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|