lib/TokiServer/bower_components/foundation/scss/foundation/components/_orbit.scss in TokiCLI-0.2.1 vs lib/TokiServer/bower_components/foundation/scss/foundation/components/_orbit.scss in TokiCLI-0.3.0
- old
+ new
@@ -9,76 +9,64 @@
$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-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: #fff !default;
-$orbit-nav-arrow-color-hover: #fff !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: #ccc !default;
-$orbit-bullet-nav-color-active: #999 !default;
+$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: #fff !default;
+$orbit-slide-number-font-color: $white !default;
$orbit-slide-number-padding: rem-calc(5) !default;
-// We use these to controls the css animation
-$orbit-animation-speed: 500ms !default;
-$orbit-animation-ease: ease-in-out !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;
-// CSS Transform
-// This function is needed in order to put in all of the browser prefixes.
-// The normal tranform attribute still does not work properly across all browsers.
-// In order to receive the transitionEnd events then you will still need to use the vendor prefixes
-@mixin translate3d($x,$y,$z) {
- -ms-transform:translate($x,$y);
- -webkit-transform: translate3d($x,$y,$z);
- -moz-transform: translate3d($x,$y,$z);
- -o-transform: translate3d($x,$y,$z);
- transform: translate3d($x,$y,$z);
-}
-
-@mixin rotate($d) {
- -webkit-transform: rotate($d);
- -moz-transform: rotate($d);
- -ms-transform: rotate($d);
- -o-transform: rotate($d);
- transform: rotate($d);
-}
-
@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 { @include rotate(0deg); }
- to { @include rotate(360deg); }
+ from { transform: rotate(0deg); }
+ to { transform: rotate(360deg); }
}
/* Orbit Graceful Loading */
.#{$wrapper-class} {
position: relative;
@@ -101,10 +89,13 @@
// 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;
@@ -114,19 +105,20 @@
top: 50%;
left: 50%;
margin-top: -20px;
margin-left: -20px;
border: solid 3px;
- border-color: #555 #fff;
+ 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;
@@ -140,65 +132,28 @@
// Prevents images (and captions) from disappearing after first rotation on Chrome for Android
-webkit-transform: translateZ(0);
img { display: block; max-width: 100%; }
- &.fade > li {
- opacity: 0;
- transition: opacity $orbit-animation-speed $orbit-animation-ease;
- @include translate3d(0,0,0);
- &.animate-in {
- opacity: 1;
- z-index: 20;
- transition: opacity $orbit-animation-speed $orbit-animation-ease;
- }
- &.animate-out {
- z-index: 10;
- transition: opacity $orbit-animation-speed $orbit-animation-ease;
- }
- }
-
- &.swipe-next > li {
- @include translate3d(100%,0,0);
- &.animate-in {
- @include translate3d(0,0,0);
- transition-duration:$orbit-animation-speed;
- }
- &.animate-out {
- @include translate3d(-100%,0,0);
- transition-duration:$orbit-animation-speed;
- }
- }
-
- &.swipe-prev > li {
- @include translate3d(-100%,0,0);
- &.animate-in {
- @include translate3d(0,0,0);
- transition-duration:$orbit-animation-speed;
- }
- &.animate-out {
- @include translate3d(100%,0,0);
- transition-duration:$orbit-animation-speed;
- }
- }
-
- > li {
+ &>* {
position: absolute;
top: 0;
- left: 0;
width: 100%;
- @include translate3d(100%,0,0);
+ @if $text-direction == rtl {
+ margin-right: 100%;
+ }
+ @else {
+ margin-left: 100%;
+ }
- > a { display: block; }
-
- &.active {
- opacity: 1;
- // "relative" positioning is required for variable height of children.
- position:relative;
- top: 0;
- left: 0;
- @include translate3d(0,0,0);
+ &:first-child {
+ @if $text-direction == rtl {
+ margin-right: 0%;
+ }
+ @else {
+ margin-left: 0%;
+ }
}
.orbit-caption {
@if $orbit-caption-position == "bottom" {
position: absolute;
@@ -219,11 +174,11 @@
.orbit-slide-number {
position: absolute;
top: 10px;
#{$default-float}: 10px;
font-size: 12px;
- span { font-weight: $font-weight-bold; padding: $orbit-slide-number-padding;}
+ span { font-weight: 700; padding: $orbit-slide-number-padding;}
color: $orbit-slide-number-font-color;
background: $orbit-slide-number-bg;
z-index: 10;
}
@@ -241,12 +196,10 @@
display: block;
width: 0%;
position: relative;
right: 20px;
top: 5px;
- } @else {
- display:none; // This is used by the Javascript to not create a handler.
}
}
// Play button
& > span {
@@ -254,35 +207,35 @@
position: absolute;
top: 0px;
#{$opposite-direction}: 0;
width: 11px;
height: 14px;
- border: solid 4px #fff;
+ 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;
- @include rotate(180deg);
- border-color: transparent #fff transparent transparent;
- &.dark {
- border-color: transparent #333 transparent transparent;
+ 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 {
@@ -331,41 +284,41 @@
}
&: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;
+ .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;
- text-align: center;
- display: block;
+ margin-#{$opposite-direction}: 6px;
+ @include radius(1000px);
- 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; }
+ &.active {
+ background: $orbit-bullet-nav-color-active;
}
+
+ &:last-child { margin-#{$opposite-direction}: 0; }
}
}
-
.touch {
.orbit-container {
.orbit-prev,
.orbit-next { display: none; }
}
@@ -386,38 +339,30 @@
}
}
@media #{$small-only} {
- .orbit-stack-on-small {
+ .orbit-stack-on-small {
+ .orbit-slides-container {height: auto !important;}
+ .orbit-slides-container > * {
+ position: relative;
+ margin:0% !important;
+ opacity:1 !important;
+ }
- .orbit-slides-container {height: auto !important;}
- .orbit-slides-container > * {
- position: relative !important;
- margin-left: 0% !important;
- opacity: 1 !important;
- -webkit-transform: none !important;
- -moz-transform: none !important;
- -ms-transform: none !important;
- -o-transform: none !important;
- transform: none !important;
- transition: none !important;
- }
-
- @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;}
- }
-
- .orbit-slide-number {
- display: none;
- }
+ .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;}
+ }
+ }
}
}