@@ -7,6 +7,7 @@ |
||
7 | 7 |
<meta name="viewport" content="width=device-width"> |
8 | 8 |
|
9 | 9 |
<link rel="stylesheet" href="styles/main.css"> |
10 |
+ <link rel="stylesheet" href="styles/slider.css"> |
|
10 | 11 |
|
11 | 12 |
<!-- bower:js --> |
12 | 13 |
|
@@ -17,12 +18,18 @@ |
||
17 | 18 |
<script src="../bower_components/angular-route/angular-route.js"></script> |
18 | 19 |
<script src="../bower_components/angular-sanitize/angular-sanitize.js"></script> |
19 | 20 |
<script src="../bower_components/angular-touch/angular-touch.js"></script> |
21 |
+ |
|
20 | 22 |
<script src="../bower_components/famous-angular/dist/famous-angular.js"></script> |
21 | 23 |
<script src="../bower_components/famous/dist/famous-global.js"></script> |
24 |
+ |
|
25 |
+ |
|
22 | 26 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script> |
23 | 27 |
<script src="../bower_components/ngFx/dist/ngFx.min.js"></script> |
28 |
+ |
|
24 | 29 |
<script src="http://code.createjs.com/createjs-2013.12.12.min.js"></script> |
25 | 30 |
|
31 |
+ |
|
32 |
+ |
|
26 | 33 |
<!-- endbower --> |
27 | 34 |
|
28 | 35 |
<script src="scripts/app.js"></script> |
@@ -30,8 +37,11 @@ |
||
30 | 37 |
<script src="scripts/controllers/background.js"></script> |
31 | 38 |
<script src="scripts/controllers/navigation.js"></script> |
32 | 39 |
<script src="scripts/controllers/slideshow.js"></script> |
40 |
+ <script src="scripts/directives/wallop-slider.js"></script> |
|
33 | 41 |
<script src="scripts/services/data.js"></script> |
34 | 42 |
|
43 |
+ |
|
44 |
+ |
|
35 | 45 |
</head> |
36 | 46 |
<body ng-app="goApp"> |
37 | 47 |
|
@@ -22,7 +22,8 @@ angular |
||
22 | 22 |
'goApp.index', |
23 | 23 |
'goApp.background', |
24 | 24 |
'goApp.navigation', |
25 |
- 'goApp.slideshow' |
|
25 |
+ 'goApp.slideshow', |
|
26 |
+ 'goApp.slider' |
|
26 | 27 |
]) |
27 | 28 |
|
28 | 29 |
.config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider) { |
@@ -10,6 +10,7 @@ |
||
10 | 10 |
angular.module('goApp.slideshow', ['ngFx', 'ngAnimate', 'goApp.data']) |
11 | 11 |
.controller('SlideshowController',['$scope', '$rootScope', '$famous', '$timeline', '$location', '$route', '$timeout', 'Data', function ($scope, $rootScope, $famous, $timeline, $location, $route, $timeout, Data) { |
12 | 12 |
|
13 |
+ // Get Page Data |
|
13 | 14 |
var link = $location.url() |
14 | 15 |
$scope.pageData = Data.getPageData(link); |
15 | 16 |
$rootScope.$on('data:loaded', function(data) { |
@@ -19,12 +20,12 @@ angular.module('goApp.slideshow', ['ngFx', 'ngAnimate', 'goApp.data']) |
||
19 | 20 |
}); |
20 | 21 |
} |
21 | 22 |
}); |
22 |
- |
|
23 |
+ |
|
23 | 24 |
// FadeIn |
24 | 25 |
$timeout(function(){ |
25 | 26 |
$scope.showView = true; |
26 | 27 |
},100); |
27 |
- |
|
28 |
+ // FadeOut |
|
28 | 29 |
$scope.fadeOut = function() { |
29 | 30 |
$scope.showView = false; |
30 | 31 |
$timeout(function(){ |
@@ -32,34 +33,19 @@ angular.module('goApp.slideshow', ['ngFx', 'ngAnimate', 'goApp.data']) |
||
32 | 33 |
},500); |
33 | 34 |
} |
34 | 35 |
|
35 |
- |
|
36 |
- // Moving Cube |
|
37 |
- var Transitionable = $famous['famous/transitions/Transitionable']; |
|
38 |
- var Easing = $famous['famous/transitions/Easing']; |
|
39 |
- |
|
40 |
- $scope.t = new Transitionable(0); |
|
41 |
- |
|
42 |
- $scope.translation = $timeline([ |
|
43 |
- [0, [500, 400, 100], Easing.inOutQuad], |
|
44 |
- [0.25, [400, 200, 100], Easing.inOutQuad], |
|
45 |
- [0.5, [300, 300, 100], Easing.inOutQuad], |
|
46 |
- [0.75, [200, 500, 100], Easing.inOutQuad], |
|
47 |
- [1, [100, 100, 100], Easing.inOutQuad], |
|
48 |
- ]); |
|
49 |
- |
|
50 |
- $scope.startAnimations = function(){ |
|
51 |
- $scope.t.delay((1000), function(){ // we will delay each animation based on index |
|
52 |
- $scope.t.set(1, {duration: 3400}, function(){ |
|
53 |
- // Animation Completion Callback |
|
54 |
- }); |
|
55 |
- }); |
|
36 |
+ $scope.index = 0; |
|
37 |
+ $scope.images = []; |
|
38 |
+ for (var i = 0; i < $scope.pageData.slides.length; i++) { |
|
39 |
+ $scope.images.push($scope.pageData.slides[i].url); |
|
56 | 40 |
} |
57 | 41 |
|
58 |
- //$scope.startAnimations(); |
|
59 |
- |
|
60 |
- |
|
61 | 42 |
|
62 |
- $scope.pageData = Data.getPageData(); |
|
63 |
- $scope.startAnimations(); |
|
43 |
+ // callbacks for change in slides |
|
44 |
+ $scope.updateTsPrevious = function() { |
|
45 |
+ $scope.tsPrevious = +new Date(); |
|
46 |
+ }; |
|
47 |
+ $scope.updateTsNext = function() { |
|
48 |
+ $scope.tsNext = +new Date(); |
|
49 |
+ }; |
|
64 | 50 |
|
65 | 51 |
}]); |
@@ -0,0 +1,65 @@ |
||
1 |
+'use strict'; |
|
2 |
+ |
|
3 |
+/** |
|
4 |
+ * @ngdoc function |
|
5 |
+ * @name domainManagerApp.controller:AboutCtrl |
|
6 |
+ * @description |
|
7 |
+ * # AboutCtrl |
|
8 |
+ * Controller of the domainManagerApp |
|
9 |
+ */ |
|
10 |
+angular.module('goApp.test', ['ngFx', 'ngAnimate', 'goApp.data']) |
|
11 |
+ .controller('TestController',['$scope', '$rootScope', '$famous', '$timeline', '$location', '$route', '$timeout', 'Data', function ($scope, $rootScope, $famous, $timeline, $location, $route, $timeout, Data) { |
|
12 |
+ |
|
13 |
+ var link = $location.url() |
|
14 |
+ $scope.pageData = Data.getPageData(link); |
|
15 |
+ $rootScope.$on('data:loaded', function(data) { |
|
16 |
+ if(!$scope.$$phase) { |
|
17 |
+ $scope.$apply(function(){ |
|
18 |
+ $scope.pageData = Data.getPageData(link); |
|
19 |
+ }); |
|
20 |
+ } |
|
21 |
+ }); |
|
22 |
+ |
|
23 |
+ // FadeIn |
|
24 |
+ $timeout(function(){ |
|
25 |
+ $scope.showView = true; |
|
26 |
+ },100); |
|
27 |
+ |
|
28 |
+ $scope.fadeOut = function() { |
|
29 |
+ $scope.showView = false; |
|
30 |
+ $timeout(function(){ |
|
31 |
+ $location.path("/"); |
|
32 |
+ },500); |
|
33 |
+ } |
|
34 |
+ |
|
35 |
+ |
|
36 |
+ // Moving Cube |
|
37 |
+ var Transitionable = $famous['famous/transitions/Transitionable']; |
|
38 |
+ var Easing = $famous['famous/transitions/Easing']; |
|
39 |
+ |
|
40 |
+ $scope.t = new Transitionable(0); |
|
41 |
+ |
|
42 |
+ $scope.translation = $timeline([ |
|
43 |
+ [0, [500, 400, 100], Easing.inOutQuad], |
|
44 |
+ [0.25, [400, 200, 100], Easing.inOutQuad], |
|
45 |
+ [0.5, [300, 300, 100], Easing.inOutQuad], |
|
46 |
+ [0.75, [200, 500, 100], Easing.inOutQuad], |
|
47 |
+ [1, [100, 100, 100], Easing.inOutQuad], |
|
48 |
+ ]); |
|
49 |
+ |
|
50 |
+ $scope.startAnimations = function(){ |
|
51 |
+ $scope.t.delay((1000), function(){ // we will delay each animation based on index |
|
52 |
+ $scope.t.set(1, {duration: 3400}, function(){ |
|
53 |
+ // Animation Completion Callback |
|
54 |
+ }); |
|
55 |
+ }); |
|
56 |
+ } |
|
57 |
+ |
|
58 |
+ //$scope.startAnimations(); |
|
59 |
+ |
|
60 |
+ |
|
61 |
+ |
|
62 |
+ $scope.pageData = Data.getPageData(); |
|
63 |
+ $scope.startAnimations(); |
|
64 |
+ |
|
65 |
+ }]); |
@@ -14,11 +14,11 @@ |
||
14 | 14 |
[ |
15 | 15 |
{ |
16 | 16 |
"title" : "Caligrama 1", |
17 |
- "url" : "/content/images/A3.jpg" |
|
17 |
+ "url" : "content/images/A3.jpg" |
|
18 | 18 |
}, |
19 | 19 |
{ |
20 | 20 |
"title" : "Caligrama 2", |
21 |
- "url" : "/content/images/cave-1.jpg" |
|
21 |
+ "url" : "content/images/cave-1.jpg" |
|
22 | 22 |
} |
23 | 23 |
] |
24 | 24 |
}, |
@@ -0,0 +1,121 @@ |
||
1 |
+"use strict" |
|
2 |
+ |
|
3 |
+angular.module('goApp.slider', []) |
|
4 |
+.directive('wallopSlider', function () { |
|
5 |
+ return { |
|
6 |
+ template: '<div class="wallop-slider {{animationClass}}"><ul class="wallop-slider__list"><li class="wallop-slider__item {{itemClasses[$index]}}" ng-repeat="i in images"><img src="{{i}}"></li></ul><button ng-show="images.length>1" class="st-button wallop-slider__btn wallop-slider__btn--previous btn btn--previous" ng-disabled="prevDisabled" ng-click="onPrevButtonClicked()">Previous</button><button ng-show="images.length>1" class="st-button wallop-slider__btn wallop-slider__btn--next btn btn--next" ng-disabled="nextDisabled" ng-click="onNextButtonClicked()">Next</button></div>', |
|
7 |
+ restrict: 'EA', |
|
8 |
+ transclude: true, |
|
9 |
+ replace: false, |
|
10 |
+ scope: { |
|
11 |
+ images: '=', |
|
12 |
+ animation: '@', |
|
13 |
+ currentItemIndex: '=', |
|
14 |
+ onNext: '&', |
|
15 |
+ onPrevious: '&' |
|
16 |
+ }, |
|
17 |
+ controller: function($scope, $timeout) { |
|
18 |
+ |
|
19 |
+ $scope.itemClasses = []; |
|
20 |
+ |
|
21 |
+ $scope.$watch('images', function(images) { |
|
22 |
+ if (images.length) { |
|
23 |
+ _goTo(0); |
|
24 |
+ } |
|
25 |
+ }); |
|
26 |
+ |
|
27 |
+ $scope.$watch('itemClasses', function(itemClasses) { |
|
28 |
+ console.log('itemClasses', itemClasses); |
|
29 |
+ }); |
|
30 |
+ |
|
31 |
+ // set animation class corresponding to animation defined in CSS. e.g. rotate, slide |
|
32 |
+ if ($scope.animation) { |
|
33 |
+ $scope.animationClass = 'wallop-slider--' + $scope.animation; |
|
34 |
+ } |
|
35 |
+ |
|
36 |
+ var _displayOptions = { |
|
37 |
+ btnPreviousClass: 'wallop-slider__btn--previous', |
|
38 |
+ btnNextClass: 'wallop-slider__btn--next', |
|
39 |
+ itemClass: 'wallop-slider__item', |
|
40 |
+ currentItemClass: 'wallop-slider__item--current', |
|
41 |
+ showPreviousClass: 'wallop-slider__item--show-previous', |
|
42 |
+ showNextClass: 'wallop-slider__item--show-next', |
|
43 |
+ hidePreviousClass: 'wallop-slider__item--hide-previous', |
|
44 |
+ hideNextClass: 'wallop-slider__item--hide-next' |
|
45 |
+ }; |
|
46 |
+ |
|
47 |
+ function updateClasses() { |
|
48 |
+ if ($scope.itemClasses.length !== $scope.images.length) { |
|
49 |
+ $scope.itemClasses = []; |
|
50 |
+ for (var i=0; i<$scope.images.length; i++) { |
|
51 |
+ $scope.itemClasses.push(''); |
|
52 |
+ } |
|
53 |
+ } |
|
54 |
+ } |
|
55 |
+ function _nextDisabled() { |
|
56 |
+ console.log('$scope.currentItemIndex', $scope.currentItemIndex, $scope.images.length); |
|
57 |
+ |
|
58 |
+ return ($scope.currentItemIndex + 1) === $scope.images.length; |
|
59 |
+ } |
|
60 |
+ function _prevDisabled() { |
|
61 |
+ return !$scope.currentItemIndex; |
|
62 |
+ } |
|
63 |
+ function _updatePagination() { |
|
64 |
+ $scope.nextDisabled = _nextDisabled(); |
|
65 |
+ $scope.prevDisabled = _prevDisabled(); |
|
66 |
+ } |
|
67 |
+ function _clearClasses() { |
|
68 |
+ for (var i=0; i<$scope.images.length; i++) { |
|
69 |
+ $scope.itemClasses[i] = ''; |
|
70 |
+ } |
|
71 |
+ |
|
72 |
+ } |
|
73 |
+ |
|
74 |
+ // go to slide |
|
75 |
+ function _goTo(index) { |
|
76 |
+ console.log('_goTo', index); |
|
77 |
+ if (index >= $scope.images.length || index < 0 || index === $scope.currentItemIndex) { |
|
78 |
+ |
|
79 |
+ if (!index) { |
|
80 |
+ $scope.itemClasses[0] = _displayOptions.currentItemClass; |
|
81 |
+ } |
|
82 |
+ return; |
|
83 |
+ } |
|
84 |
+ |
|
85 |
+ _clearClasses(); |
|
86 |
+ |
|
87 |
+ $scope.itemClasses[$scope.currentItemIndex] = (index > $scope.currentItemIndex) ? _displayOptions.hidePreviousClass : _displayOptions.hideNextClass; |
|
88 |
+ |
|
89 |
+ var currentClass = (index > $scope.currentItemIndex) ? _displayOptions.showNextClass : _displayOptions.showPreviousClass; |
|
90 |
+ $scope.itemClasses[index] = _displayOptions.currentItemClass + ' ' + currentClass; |
|
91 |
+ |
|
92 |
+ $scope.currentItemIndex = index; |
|
93 |
+ |
|
94 |
+ _updatePagination(); |
|
95 |
+ |
|
96 |
+ } |
|
97 |
+ |
|
98 |
+ // button event handlers |
|
99 |
+ // consider using the ng-tap directive to remove delay |
|
100 |
+ $scope.onPrevButtonClicked = function () { |
|
101 |
+ _goTo($scope.currentItemIndex - 1); |
|
102 |
+ }; |
|
103 |
+ $scope.onNextButtonClicked = function () { |
|
104 |
+ _goTo($scope.currentItemIndex + 1); |
|
105 |
+ }; |
|
106 |
+ |
|
107 |
+ $scope.$watch('currentItemIndex', function(newVal, oldVal) { |
|
108 |
+ if (oldVal > newVal) { |
|
109 |
+ if (typeof $scope.onPrevious === 'function') { |
|
110 |
+ $scope.onPrevious(); |
|
111 |
+ } |
|
112 |
+ } else { |
|
113 |
+ if (typeof $scope.onNext === 'function') { |
|
114 |
+ $scope.onNext(); |
|
115 |
+ } |
|
116 |
+ } |
|
117 |
+ }); |
|
118 |
+ |
|
119 |
+ } |
|
120 |
+ }; |
|
121 |
+}); |
@@ -26,9 +26,7 @@ body { |
||
26 | 26 |
z-index: 2; |
27 | 27 |
position: absolute; |
28 | 28 |
} |
29 |
-ng-view { |
|
30 |
- z-index: 4; |
|
31 |
-} |
|
29 |
+ |
|
32 | 30 |
.layer-content { |
33 | 31 |
z-index: 3; |
34 | 32 |
position: absolute; |
@@ -39,6 +37,35 @@ ng-view { |
||
39 | 37 |
width: 100%; |
40 | 38 |
height: 100%; |
41 | 39 |
background-color: rgba(0,0,0,0.7); |
40 |
+ overflow: hidden; |
|
41 |
+} |
|
42 |
+ |
|
43 |
+.Aligner { |
|
44 |
+ display: flex; |
|
45 |
+ align-items: center; |
|
46 |
+ height: 24em; /* 1 */ |
|
47 |
+ justify-content: center; |
|
48 |
+ height: 100%; |
|
49 |
+} |
|
50 |
+ |
|
51 |
+ |
|
52 |
+.Aligner-item { |
|
53 |
+ flex: 1; |
|
54 |
+ max-width: 90%; |
|
55 |
+ max-height: 90%; |
|
56 |
+} |
|
57 |
+ |
|
58 |
+.Aligner-item--top { |
|
59 |
+ align-self: flex-start; |
|
60 |
+} |
|
61 |
+ |
|
62 |
+.Aligner-item--bottom { |
|
63 |
+ align-self: flex-end; |
|
64 |
+} |
|
65 |
+ |
|
66 |
+.Aligner-item--fixed { |
|
67 |
+ flex: none; |
|
68 |
+ max-width: 50%; |
|
42 | 69 |
} |
43 | 70 |
|
44 | 71 |
.bg-dark { background-color: black;} |
@@ -0,0 +1,1199 @@ |
||
1 |
+* { |
|
2 |
+ margin: 0; |
|
3 |
+ padding: 0; |
|
4 |
+} |
|
5 |
+ |
|
6 |
+ |
|
7 |
+ |
|
8 |
+section { |
|
9 |
+ text-align: left; |
|
10 |
+ padding-bottom: 60px; |
|
11 |
+} |
|
12 |
+section ul { |
|
13 |
+ list-style: inside; |
|
14 |
+} |
|
15 |
+ |
|
16 |
+ |
|
17 |
+.photo-slider { |
|
18 |
+ margin-bottom: 20px; |
|
19 |
+ display: inline-block; |
|
20 |
+ max-width: 612px; |
|
21 |
+} |
|
22 |
+ |
|
23 |
+.wallop-slider { |
|
24 |
+ position: relative; |
|
25 |
+} |
|
26 |
+ |
|
27 |
+.small-slider { |
|
28 |
+ max-width: 320px; |
|
29 |
+ display: inline-block; |
|
30 |
+ vertical-align: top; |
|
31 |
+ margin: 10px; |
|
32 |
+} |
|
33 |
+ |
|
34 |
+ |
|
35 |
+@media only screen and (min-width: 480px) { |
|
36 |
+ .btn { |
|
37 |
+ margin-top: -10px; |
|
38 |
+ position: absolute; |
|
39 |
+ z-index: 3; |
|
40 |
+ top: 50%; |
|
41 |
+ opacity: 0; |
|
42 |
+ -webkit-transition: opacity 200ms ease; |
|
43 |
+ -moz-transition: opacity 200ms ease; |
|
44 |
+ -ms-transition: opacity 200ms ease; |
|
45 |
+ transition: opacity 200ms ease; |
|
46 |
+ } |
|
47 |
+ .wallop-slider:hover .btn { |
|
48 |
+ opacity: .75; |
|
49 |
+ } |
|
50 |
+ .wallop-slider:hover .btn:hover { |
|
51 |
+ opacity: 1; |
|
52 |
+ } |
|
53 |
+} |
|
54 |
+.btn:hover { |
|
55 |
+ cursor: pointer; |
|
56 |
+} |
|
57 |
+.btn[disabled] { |
|
58 |
+ opacity: .4; |
|
59 |
+} |
|
60 |
+.btn[disabled], .btn[disabled]:hover { |
|
61 |
+ cursor: default; |
|
62 |
+} |
|
63 |
+@media only screen and (min-width: 480px) { |
|
64 |
+ .btn[disabled] { |
|
65 |
+ visibility: hidden; |
|
66 |
+ } |
|
67 |
+} |
|
68 |
+ |
|
69 |
+@media only screen and (min-width: 480px) { |
|
70 |
+ .btn--previous { |
|
71 |
+ left: 10px; |
|
72 |
+ } |
|
73 |
+} |
|
74 |
+ |
|
75 |
+@media only screen and (min-width: 480px) { |
|
76 |
+ .btn--next { |
|
77 |
+ right: 10px; |
|
78 |
+ } |
|
79 |
+} |
|
80 |
+ |
|
81 |
+.goto { |
|
82 |
+ padding: 5px; |
|
83 |
+} |
|
84 |
+ |
|
85 |
+footer { |
|
86 |
+ padding-bottom: 30px; |
|
87 |
+} |
|
88 |
+ |
|
89 |
+.wallop-slider { |
|
90 |
+ width: 100%; |
|
91 |
+} |
|
92 |
+ |
|
93 |
+.wallop-slider__list { |
|
94 |
+ list-style: none; |
|
95 |
+ position: relative; |
|
96 |
+ overflow: hidden; |
|
97 |
+} |
|
98 |
+ |
|
99 |
+.wallop-slider__item { |
|
100 |
+ display: none; |
|
101 |
+ position: absolute; |
|
102 |
+ top: 0; |
|
103 |
+ left: 0; |
|
104 |
+ width: 100%; |
|
105 |
+} |
|
106 |
+.wallop-slider__item img { |
|
107 |
+ display: block; |
|
108 |
+ width: 100%; |
|
109 |
+} |
|
110 |
+ |
|
111 |
+.wallop-slider__item--current { |
|
112 |
+ display: block; |
|
113 |
+ position: static; |
|
114 |
+} |
|
115 |
+ |
|
116 |
+/*========== SLIDE CONFIG ==========*/ |
|
117 |
+/* the 10ms animation-delay fixed some weird rendering issues with iPhone */ |
|
118 |
+.wallop-slider--slide .wallop-slider__item--show-previous { |
|
119 |
+ -webkit-animation: slideFromLeft 350ms 10ms linear both; |
|
120 |
+ -moz-animation: slideFromLeft 350ms 10ms linear both; |
|
121 |
+ -ms-animation: slideFromLeft 350ms 10ms linear both; |
|
122 |
+ animation: slideFromLeft 350ms 10ms linear both; |
|
123 |
+} |
|
124 |
+.wallop-slider--slide .wallop-slider__item--show-next { |
|
125 |
+ -webkit-animation: slideFromRight 350ms 10ms linear both; |
|
126 |
+ -moz-animation: slideFromRight 350ms 10ms linear both; |
|
127 |
+ -ms-animation: slideFromRight 350ms 10ms linear both; |
|
128 |
+ animation: slideFromRight 350ms 10ms linear both; |
|
129 |
+} |
|
130 |
+.wallop-slider--slide .wallop-slider__item--hide-previous, .wallop-slider--slide .wallop-slider__item--hide-next { |
|
131 |
+ display: block; |
|
132 |
+} |
|
133 |
+.wallop-slider--slide .wallop-slider__item--hide-previous { |
|
134 |
+ -webkit-animation: slideToLeft 350ms 10ms linear both; |
|
135 |
+ -moz-animation: slideToLeft 350ms 10ms linear both; |
|
136 |
+ -ms-animation: slideToLeft 350ms 10ms linear both; |
|
137 |
+ animation: slideToLeft 350ms 10ms linear both; |
|
138 |
+} |
|
139 |
+.wallop-slider--slide .wallop-slider__item--hide-next { |
|
140 |
+ -webkit-animation: slideToRight 350ms 10ms linear both; |
|
141 |
+ -moz-animation: slideToRight 350ms 10ms linear both; |
|
142 |
+ -ms-animation: slideToRight 350ms 10ms linear both; |
|
143 |
+ animation: slideToRight 350ms 10ms linear both; |
|
144 |
+} |
|
145 |
+ |
|
146 |
+/*========== SLIDE ANIMATIONS ==========*/ |
|
147 |
+@-webkit-keyframes slideFromLeft { |
|
148 |
+ 0% { |
|
149 |
+ -webkit-transform: translate3d(-100%, 0, 0); |
|
150 |
+ -moz-transform: translate3d(-100%, 0, 0); |
|
151 |
+ -ms-transform: translate3d(-100%, 0, 0); |
|
152 |
+ transform: translate3d(-100%, 0, 0); |
|
153 |
+ } |
|
154 |
+} |
|
155 |
+ |
|
156 |
+@-moz-keyframes slideFromLeft { |
|
157 |
+ 0% { |
|
158 |
+ -webkit-transform: translate3d(-100%, 0, 0); |
|
159 |
+ -moz-transform: translate3d(-100%, 0, 0); |
|
160 |
+ -ms-transform: translate3d(-100%, 0, 0); |
|
161 |
+ transform: translate3d(-100%, 0, 0); |
|
162 |
+ } |
|
163 |
+} |
|
164 |
+ |
|
165 |
+@-ms-keyframes slideFromLeft { |
|
166 |
+ 0% { |
|
167 |
+ -webkit-transform: translate3d(-100%, 0, 0); |
|
168 |
+ -moz-transform: translate3d(-100%, 0, 0); |
|
169 |
+ -ms-transform: translate3d(-100%, 0, 0); |
|
170 |
+ transform: translate3d(-100%, 0, 0); |
|
171 |
+ } |
|
172 |
+} |
|
173 |
+ |
|
174 |
+@keyframes slideFromLeft { |
|
175 |
+ 0% { |
|
176 |
+ -webkit-transform: translate3d(-100%, 0, 0); |
|
177 |
+ -moz-transform: translate3d(-100%, 0, 0); |
|
178 |
+ -ms-transform: translate3d(-100%, 0, 0); |
|
179 |
+ transform: translate3d(-100%, 0, 0); |
|
180 |
+ } |
|
181 |
+} |
|
182 |
+ |
|
183 |
+@-webkit-keyframes slideFromRight { |
|
184 |
+ 0% { |
|
185 |
+ -webkit-transform: translate3d(100%, 0, 0); |
|
186 |
+ -moz-transform: translate3d(100%, 0, 0); |
|
187 |
+ -ms-transform: translate3d(100%, 0, 0); |
|
188 |
+ transform: translate3d(100%, 0, 0); |
|
189 |
+ } |
|
190 |
+} |
|
191 |
+ |
|
192 |
+@-moz-keyframes slideFromRight { |
|
193 |
+ 0% { |
|
194 |
+ -webkit-transform: translate3d(100%, 0, 0); |
|
195 |
+ -moz-transform: translate3d(100%, 0, 0); |
|
196 |
+ -ms-transform: translate3d(100%, 0, 0); |
|
197 |
+ transform: translate3d(100%, 0, 0); |
|
198 |
+ } |
|
199 |
+} |
|
200 |
+ |
|
201 |
+@-ms-keyframes slideFromRight { |
|
202 |
+ 0% { |
|
203 |
+ -webkit-transform: translate3d(100%, 0, 0); |
|
204 |
+ -moz-transform: translate3d(100%, 0, 0); |
|
205 |
+ -ms-transform: translate3d(100%, 0, 0); |
|
206 |
+ transform: translate3d(100%, 0, 0); |
|
207 |
+ } |
|
208 |
+} |
|
209 |
+ |
|
210 |
+@keyframes slideFromRight { |
|
211 |
+ 0% { |
|
212 |
+ -webkit-transform: translate3d(100%, 0, 0); |
|
213 |
+ -moz-transform: translate3d(100%, 0, 0); |
|
214 |
+ -ms-transform: translate3d(100%, 0, 0); |
|
215 |
+ transform: translate3d(100%, 0, 0); |
|
216 |
+ } |
|
217 |
+} |
|
218 |
+ |
|
219 |
+@-webkit-keyframes slideToLeft { |
|
220 |
+ 99% { |
|
221 |
+ opacity: 1; |
|
222 |
+ } |
|
223 |
+ |
|
224 |
+ 100% { |
|
225 |
+ opacity: 0; |
|
226 |
+ -webkit-transform: translate3d(-100%, 0, 0); |
|
227 |
+ -moz-transform: translate3d(-100%, 0, 0); |
|
228 |
+ -ms-transform: translate3d(-100%, 0, 0); |
|
229 |
+ transform: translate3d(-100%, 0, 0); |
|
230 |
+ } |
|
231 |
+} |
|
232 |
+ |
|
233 |
+@-moz-keyframes slideToLeft { |
|
234 |
+ 99% { |
|
235 |
+ opacity: 1; |
|
236 |
+ } |
|
237 |
+ |
|
238 |
+ 100% { |
|
239 |
+ opacity: 0; |
|
240 |
+ -webkit-transform: translate3d(-100%, 0, 0); |
|
241 |
+ -moz-transform: translate3d(-100%, 0, 0); |
|
242 |
+ -ms-transform: translate3d(-100%, 0, 0); |
|
243 |
+ transform: translate3d(-100%, 0, 0); |
|
244 |
+ } |
|
245 |
+} |
|
246 |
+ |
|
247 |
+@-ms-keyframes slideToLeft { |
|
248 |
+ 99% { |
|
249 |
+ opacity: 1; |
|
250 |
+ } |
|
251 |
+ |
|
252 |
+ 100% { |
|
253 |
+ opacity: 0; |
|
254 |
+ -webkit-transform: translate3d(-100%, 0, 0); |
|
255 |
+ -moz-transform: translate3d(-100%, 0, 0); |
|
256 |
+ -ms-transform: translate3d(-100%, 0, 0); |
|
257 |
+ transform: translate3d(-100%, 0, 0); |
|
258 |
+ } |
|
259 |
+} |
|
260 |
+ |
|
261 |
+@keyframes slideToLeft { |
|
262 |
+ 99% { |
|
263 |
+ opacity: 1; |
|
264 |
+ } |
|
265 |
+ |
|
266 |
+ 100% { |
|
267 |
+ opacity: 0; |
|
268 |
+ -webkit-transform: translate3d(-100%, 0, 0); |
|
269 |
+ -moz-transform: translate3d(-100%, 0, 0); |
|
270 |
+ -ms-transform: translate3d(-100%, 0, 0); |
|
271 |
+ transform: translate3d(-100%, 0, 0); |
|
272 |
+ } |
|
273 |
+} |
|
274 |
+ |
|
275 |
+@-webkit-keyframes slideToRight { |
|
276 |
+ 99% { |
|
277 |
+ opacity: 1; |
|
278 |
+ } |
|
279 |
+ |
|
280 |
+ 100% { |
|
281 |
+ opacity: 0; |
|
282 |
+ -webkit-transform: translate3d(100%, 0, 0); |
|
283 |
+ -moz-transform: translate3d(100%, 0, 0); |
|
284 |
+ -ms-transform: translate3d(100%, 0, 0); |
|
285 |
+ transform: translate3d(100%, 0, 0); |
|
286 |
+ } |
|
287 |
+} |
|
288 |
+ |
|
289 |
+@-moz-keyframes slideToRight { |
|
290 |
+ 99% { |
|
291 |
+ opacity: 1; |
|
292 |
+ } |
|
293 |
+ |
|
294 |
+ 100% { |
|
295 |
+ opacity: 0; |
|
296 |
+ -webkit-transform: translate3d(100%, 0, 0); |
|
297 |
+ -moz-transform: translate3d(100%, 0, 0); |
|
298 |
+ -ms-transform: translate3d(100%, 0, 0); |
|
299 |
+ transform: translate3d(100%, 0, 0); |
|
300 |
+ } |
|
301 |
+} |
|
302 |
+ |
|
303 |
+@-ms-keyframes slideToRight { |
|
304 |
+ 99% { |
|
305 |
+ opacity: 1; |
|
306 |
+ } |
|
307 |
+ |
|
308 |
+ 100% { |
|
309 |
+ opacity: 0; |
|
310 |
+ -webkit-transform: translate3d(100%, 0, 0); |
|
311 |
+ -moz-transform: translate3d(100%, 0, 0); |
|
312 |
+ -ms-transform: translate3d(100%, 0, 0); |
|
313 |
+ transform: translate3d(100%, 0, 0); |
|
314 |
+ } |
|
315 |
+} |
|
316 |
+ |
|
317 |
+@keyframes slideToRight { |
|
318 |
+ 99% { |
|
319 |
+ opacity: 1; |
|
320 |
+ } |
|
321 |
+ |
|
322 |
+ 100% { |
|
323 |
+ opacity: 0; |
|
324 |
+ -webkit-transform: translate3d(100%, 0, 0); |
|
325 |
+ -moz-transform: translate3d(100%, 0, 0); |
|
326 |
+ -ms-transform: translate3d(100%, 0, 0); |
|
327 |
+ transform: translate3d(100%, 0, 0); |
|
328 |
+ } |
|
329 |
+} |
|
330 |
+ |
|
331 |
+/*========== VERTICAL SLIDE CONFIG ==========*/ |
|
332 |
+.wallop-slider--vertical-slide { |
|
333 |
+ /* the 10ms animation-delay fixed some weird rendering issues with iPhone */ |
|
334 |
+} |
|
335 |
+.wallop-slider--vertical-slide .wallop-slider__list { |
|
336 |
+ position: relative; |
|
337 |
+ overflow: hidden; |
|
338 |
+} |
|
339 |
+.wallop-slider--vertical-slide .wallop-slider__item--show-next { |
|
340 |
+ -webkit-animation: slideFromTop 350ms 10ms linear both; |
|
341 |
+ -moz-animation: slideFromTop 350ms 10ms linear both; |
|
342 |
+ -ms-animation: slideFromTop 350ms 10ms linear both; |
|
343 |
+ animation: slideFromTop 350ms 10ms linear both; |
|
344 |
+} |
|
345 |
+.wallop-slider--vertical-slide .wallop-slider__item--show-previous { |
|
346 |
+ -webkit-animation: slideFromBottom 350ms 10ms linear both; |
|
347 |
+ -moz-animation: slideFromBottom 350ms 10ms linear both; |
|
348 |
+ -ms-animation: slideFromBottom 350ms 10ms linear both; |
|
349 |
+ animation: slideFromBottom 350ms 10ms linear both; |
|
350 |
+} |
|
351 |
+.wallop-slider--vertical-slide .wallop-slider__item--hide-previous, |
|
352 |
+.wallop-slider--vertical-slide .wallop-slider__item--hide-next { |
|
353 |
+ display: block; |
|
354 |
+} |
|
355 |
+.wallop-slider--vertical-slide .wallop-slider__item--hide-previous { |
|
356 |
+ -webkit-animation: slideToBottom 350ms 10ms linear both; |
|
357 |
+ -moz-animation: slideToBottom 350ms 10ms linear both; |
|
358 |
+ -ms-animation: slideToBottom 350ms 10ms linear both; |
|
359 |
+ animation: slideToBottom 350ms 10ms linear both; |
|
360 |
+} |
|
361 |
+.wallop-slider--vertical-slide .wallop-slider__item--hide-next { |
|
362 |
+ -webkit-animation: slideToTop 350ms 10ms linear both; |
|
363 |
+ -moz-animation: slideToTop 350ms 10ms linear both; |
|
364 |
+ -ms-animation: slideToTop 350ms 10ms linear both; |
|
365 |
+ animation: slideToTop 350ms 10ms linear both; |
|
366 |
+} |
|
367 |
+ |
|
368 |
+/*========== VERTICAL SLIDE ANIMATIONS ==========*/ |
|
369 |
+@-webkit-keyframes slideFromTop { |
|
370 |
+ 0% { |
|
371 |
+ -webkit-transform: translate3d(0, -100%, 0); |
|
372 |
+ -moz-transform: translate3d(0, -100%, 0); |
|
373 |
+ -ms-transform: translate3d(0, -100%, 0); |
|
374 |
+ transform: translate3d(0, -100%, 0); |
|
375 |
+ } |
|
376 |
+} |
|
377 |
+ |
|
378 |
+@-moz-keyframes slideFromTop { |
|
379 |
+ 0% { |
|
380 |
+ -webkit-transform: translate3d(0, -100%, 0); |
|
381 |
+ -moz-transform: translate3d(0, -100%, 0); |
|
382 |
+ -ms-transform: translate3d(0, -100%, 0); |
|
383 |
+ transform: translate3d(0, -100%, 0); |
|
384 |
+ } |
|
385 |
+} |
|
386 |
+ |
|
387 |
+@-ms-keyframes slideFromTop { |
|
388 |
+ 0% { |
|
389 |
+ -webkit-transform: translate3d(0, -100%, 0); |
|
390 |
+ -moz-transform: translate3d(0, -100%, 0); |
|
391 |
+ -ms-transform: translate3d(0, -100%, 0); |
|
392 |
+ transform: translate3d(0, -100%, 0); |
|
393 |
+ } |
|
394 |
+} |
|
395 |
+ |
|
396 |
+@keyframes slideFromTop { |
|
397 |
+ 0% { |
|
398 |
+ -webkit-transform: translate3d(0, -100%, 0); |
|
399 |
+ -moz-transform: translate3d(0, -100%, 0); |
|
400 |
+ -ms-transform: translate3d(0, -100%, 0); |
|
401 |
+ transform: translate3d(0, -100%, 0); |
|
402 |
+ } |
|
403 |
+} |
|
404 |
+ |
|
405 |
+@-webkit-keyframes slideFromBottom { |
|
406 |
+ 0% { |
|
407 |
+ -webkit-transform: translate3d(0, 100%, 0); |
|
408 |
+ -moz-transform: translate3d(0, 100%, 0); |
|
409 |
+ -ms-transform: translate3d(0, 100%, 0); |
|
410 |
+ transform: translate3d(0, 100%, 0); |
|
411 |
+ } |
|
412 |
+} |
|
413 |
+ |
|
414 |
+@-moz-keyframes slideFromBottom { |
|
415 |
+ 0% { |
|
416 |
+ -webkit-transform: translate3d(0, 100%, 0); |
|
417 |
+ -moz-transform: translate3d(0, 100%, 0); |
|
418 |
+ -ms-transform: translate3d(0, 100%, 0); |
|
419 |
+ transform: translate3d(0, 100%, 0); |
|
420 |
+ } |
|
421 |
+} |
|
422 |
+ |
|
423 |
+@-ms-keyframes slideFromBottom { |
|
424 |
+ 0% { |
|
425 |
+ -webkit-transform: translate3d(0, 100%, 0); |
|
426 |
+ -moz-transform: translate3d(0, 100%, 0); |
|
427 |
+ -ms-transform: translate3d(0, 100%, 0); |
|
428 |
+ transform: translate3d(0, 100%, 0); |
|
429 |
+ } |
|
430 |
+} |
|
431 |
+ |
|
432 |
+@keyframes slideFromBottom { |
|
433 |
+ 0% { |
|
434 |
+ -webkit-transform: translate3d(0, 100%, 0); |
|
435 |
+ -moz-transform: translate3d(0, 100%, 0); |
|
436 |
+ -ms-transform: translate3d(0, 100%, 0); |
|
437 |
+ transform: translate3d(0, 100%, 0); |
|
438 |
+ } |
|
439 |
+} |
|
440 |
+ |
|
441 |
+@-webkit-keyframes slideToTop { |
|
442 |
+ 99% { |
|
443 |
+ opacity: 1; |
|
444 |
+ } |
|
445 |
+ |
|
446 |
+ 100% { |
|
447 |
+ -webkit-transform: translate3d(0, -100%, 0); |
|
448 |
+ -moz-transform: translate3d(0, -100%, 0); |
|
449 |
+ -ms-transform: translate3d(0, -100%, 0); |
|
450 |
+ transform: translate3d(0, -100%, 0); |
|
451 |
+ opacity: 0; |
|
452 |
+ } |
|
453 |
+} |
|
454 |
+ |
|
455 |
+@-moz-keyframes slideToTop { |
|
456 |
+ 99% { |
|
457 |
+ opacity: 1; |
|
458 |
+ } |
|
459 |
+ |
|
460 |
+ 100% { |
|
461 |
+ -webkit-transform: translate3d(0, -100%, 0); |
|
462 |
+ -moz-transform: translate3d(0, -100%, 0); |
|
463 |
+ -ms-transform: translate3d(0, -100%, 0); |
|
464 |
+ transform: translate3d(0, -100%, 0); |
|
465 |
+ opacity: 0; |
|
466 |
+ } |
|
467 |
+} |
|
468 |
+ |
|
469 |
+@-ms-keyframes slideToTop { |
|
470 |
+ 99% { |
|
471 |
+ opacity: 1; |
|
472 |
+ } |
|
473 |
+ |
|
474 |
+ 100% { |
|
475 |
+ -webkit-transform: translate3d(0, -100%, 0); |
|
476 |
+ -moz-transform: translate3d(0, -100%, 0); |
|
477 |
+ -ms-transform: translate3d(0, -100%, 0); |
|
478 |
+ transform: translate3d(0, -100%, 0); |
|
479 |
+ opacity: 0; |
|
480 |
+ } |
|
481 |
+} |
|
482 |
+ |
|
483 |
+@keyframes slideToTop { |
|
484 |
+ 99% { |
|
485 |
+ opacity: 1; |
|
486 |
+ } |
|
487 |
+ |
|
488 |
+ 100% { |
|
489 |
+ -webkit-transform: translate3d(0, -100%, 0); |
|
490 |
+ -moz-transform: translate3d(0, -100%, 0); |
|
491 |
+ -ms-transform: translate3d(0, -100%, 0); |
|
492 |
+ transform: translate3d(0, -100%, 0); |
|
493 |
+ opacity: 0; |
|
494 |
+ } |
|
495 |
+} |
|
496 |
+ |
|
497 |
+@-webkit-keyframes slideToBottom { |
|
498 |
+ 99% { |
|
499 |
+ opacity: 1; |
|
500 |
+ } |
|
501 |
+ |
|
502 |
+ 100% { |
|
503 |
+ -webkit-transform: translate3d(0, 100%, 0); |
|
504 |
+ -moz-transform: translate3d(0, 100%, 0); |
|
505 |
+ -ms-transform: translate3d(0, 100%, 0); |
|
506 |
+ transform: translate3d(0, 100%, 0); |
|
507 |
+ opacity: 0; |
|
508 |
+ } |
|
509 |
+} |
|
510 |
+ |
|
511 |
+@-moz-keyframes slideToBottom { |
|
512 |
+ 99% { |
|
513 |
+ opacity: 1; |
|
514 |
+ } |
|
515 |
+ |
|
516 |
+ 100% { |
|
517 |
+ -webkit-transform: translate3d(0, 100%, 0); |
|
518 |
+ -moz-transform: translate3d(0, 100%, 0); |
|
519 |
+ -ms-transform: translate3d(0, 100%, 0); |
|
520 |
+ transform: translate3d(0, 100%, 0); |
|
521 |
+ opacity: 0; |
|
522 |
+ } |
|
523 |
+} |
|
524 |
+ |
|
525 |
+@-ms-keyframes slideToBottom { |
|
526 |
+ 99% { |
|
527 |
+ opacity: 1; |
|
528 |
+ } |
|
529 |
+ |
|
530 |
+ 100% { |
|
531 |
+ -webkit-transform: translate3d(0, 100%, 0); |
|
532 |
+ -moz-transform: translate3d(0, 100%, 0); |
|
533 |
+ -ms-transform: translate3d(0, 100%, 0); |
|
534 |
+ transform: translate3d(0, 100%, 0); |
|
535 |
+ opacity: 0; |
|
536 |
+ } |
|
537 |
+} |
|
538 |
+ |
|
539 |
+@keyframes slideToBottom { |
|
540 |
+ 99% { |
|
541 |
+ opacity: 1; |
|
542 |
+ } |
|
543 |
+ |
|
544 |
+ 100% { |
|
545 |
+ -webkit-transform: translate3d(0, 100%, 0); |
|
546 |
+ -moz-transform: translate3d(0, 100%, 0); |
|
547 |
+ -ms-transform: translate3d(0, 100%, 0); |
|
548 |
+ transform: translate3d(0, 100%, 0); |
|
549 |
+ opacity: 0; |
|
550 |
+ } |
|
551 |
+} |
|
552 |
+ |
|
553 |
+/*========== FADE CONFIG ==========*/ |
|
554 |
+.wallop-slider--fade .wallop-slider__item--hide-previous, |
|
555 |
+.wallop-slider--fade .wallop-slider__item--hide-next { |
|
556 |
+ display: block; |
|
557 |
+ -webkit-animation: fadeOut 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both; |
|
558 |
+ -moz-animation: fadeOut 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both; |
|
559 |
+ -ms-animation: fadeOut 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both; |
|
560 |
+ animation: fadeOut 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both; |
|
561 |
+} |
|
562 |
+ |
|
563 |
+/*========== FADE ANIMATIONS ==========*/ |
|
564 |
+@-webkit-keyframes fadeOut { |
|
565 |
+ 100% { |
|
566 |
+ opacity: 0; |
|
567 |
+ } |
|
568 |
+} |
|
569 |
+ |
|
570 |
+@-moz-keyframes fadeOut { |
|
571 |
+ 100% { |
|
572 |
+ opacity: 0; |
|
573 |
+ } |
|
574 |
+} |
|
575 |
+ |
|
576 |
+@-ms-keyframes fadeOut { |
|
577 |
+ 100% { |
|
578 |
+ opacity: 0; |
|
579 |
+ } |
|
580 |
+} |
|
581 |
+ |
|
582 |
+@keyframes fadeOut { |
|
583 |
+ 100% { |
|
584 |
+ opacity: 0; |
|
585 |
+ } |
|
586 |
+} |
|
587 |
+ |
|
588 |
+/*========== FOLD CONFIG ==========*/ |
|
589 |
+.wallop-slider--fold .wallop-slider__list { |
|
590 |
+ -webkit-perspective: 1000; |
|
591 |
+ -moz-perspective: 1000; |
|
592 |
+ -ms-perspective: 1000; |
|
593 |
+ perspective: 1000; |
|
594 |
+} |
|
595 |
+.wallop-slider--fold .wallop-slider__item--current { |
|
596 |
+ position: relative; |
|
597 |
+} |
|
598 |
+.wallop-slider--fold .wallop-slider__item--show-previous { |
|
599 |
+ -webkit-transform: translateZ(0); |
|
600 |
+ -moz-transform: translateZ(0); |
|
601 |
+ -ms-transform: translateZ(0); |
|
602 |
+ transform: translateZ(0); |
|
603 |
+ -webkit-transform-origin: center left; |
|
604 |
+ -moz-transform-origin: center left; |
|
605 |
+ -ms-transform-origin: center left; |
|
606 |
+ transform-origin: center left; |
|
607 |
+ -webkit-animation: foldFromLeft 550ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both; |
|
608 |
+ -moz-animation: foldFromLeft 550ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both; |
|
609 |
+ -ms-animation: foldFromLeft 550ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both; |
|
610 |
+ animation: foldFromLeft 550ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both; |
|
611 |
+ z-index: 2; |
|
612 |
+} |
|
613 |
+.wallop-slider--fold .wallop-slider__item--show-next { |
|
614 |
+ -webkit-transform: translateZ(0); |
|
615 |
+ -moz-transform: translateZ(0); |
|
616 |
+ -ms-transform: translateZ(0); |
|
617 |
+ transform: translateZ(0); |
|
618 |
+ -webkit-transform-origin: center right; |
|
619 |
+ -moz-transform-origin: center right; |
|
620 |
+ -ms-transform-origin: center right; |
|
621 |
+ transform-origin: center right; |
|
622 |
+ -webkit-animation: foldFromRight 550ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both; |
|
623 |
+ -moz-animation: foldFromRight 550ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both; |
|
624 |
+ -ms-animation: foldFromRight 550ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both; |
|
625 |
+ animation: foldFromRight 550ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both; |
|
626 |
+ z-index: 1; |
|
627 |
+} |
|
628 |
+.wallop-slider--fold .wallop-slider__item--hide-previous, |
|
629 |
+.wallop-slider--fold .wallop-slider__item--hide-next { |
|
630 |
+ display: block; |
|
631 |
+} |
|
632 |
+ |
|
633 |
+/*========== FOLD ANIMATIONS ==========*/ |
|
634 |
+@-webkit-keyframes foldFromLeft { |
|
635 |
+ 0% { |
|
636 |
+ -webkit-transform: rotateY(-90deg); |
|
637 |
+ -moz-transform: rotateY(-90deg); |
|
638 |
+ -ms-transform: rotateY(-90deg); |
|
639 |
+ transform: rotateY(-90deg); |
|
640 |
+ } |
|
641 |
+} |
|
642 |
+ |
|
643 |
+@-moz-keyframes foldFromLeft { |
|
644 |
+ 0% { |
|
645 |
+ -webkit-transform: rotateY(-90deg); |
|
646 |
+ -moz-transform: rotateY(-90deg); |
|
647 |
+ -ms-transform: rotateY(-90deg); |
|
648 |
+ transform: rotateY(-90deg); |
|
649 |
+ } |
|
650 |
+} |
|
651 |
+ |
|
652 |
+@-ms-keyframes foldFromLeft { |
|
653 |
+ 0% { |
|
654 |
+ -webkit-transform: rotateY(-90deg); |
|
655 |
+ -moz-transform: rotateY(-90deg); |
|
656 |
+ -ms-transform: rotateY(-90deg); |
|
657 |
+ transform: rotateY(-90deg); |
|
658 |
+ } |
|
659 |
+} |
|
660 |
+ |
|
661 |
+@keyframes foldFromLeft { |
|
662 |
+ 0% { |
|
663 |
+ -webkit-transform: rotateY(-90deg); |
|
664 |
+ -moz-transform: rotateY(-90deg); |
|
665 |
+ -ms-transform: rotateY(-90deg); |
|
666 |
+ transform: rotateY(-90deg); |
|
667 |
+ } |
|
668 |
+} |
|
669 |
+ |
|
670 |
+@-webkit-keyframes foldFromRight { |
|
671 |
+ 0% { |
|
672 |
+ -webkit-transform: rotateY(90deg); |
|
673 |
+ -moz-transform: rotateY(90deg); |
|
674 |
+ -ms-transform: rotateY(90deg); |
|
675 |
+ transform: rotateY(90deg); |
|
676 |
+ } |
|
677 |
+} |
|
678 |
+ |
|
679 |
+@-moz-keyframes foldFromRight { |
|
680 |
+ 0% { |
|
681 |
+ -webkit-transform: rotateY(90deg); |
|
682 |
+ -moz-transform: rotateY(90deg); |
|
683 |
+ -ms-transform: rotateY(90deg); |
|
684 |
+ transform: rotateY(90deg); |
|
685 |
+ } |
|
686 |
+} |
|
687 |
+ |
|
688 |
+@-ms-keyframes foldFromRight { |
|
689 |
+ 0% { |
|
690 |
+ -webkit-transform: rotateY(90deg); |
|
691 |
+ -moz-transform: rotateY(90deg); |
|
692 |
+ -ms-transform: rotateY(90deg); |
|
693 |
+ transform: rotateY(90deg); |
|
694 |
+ } |
|
695 |
+} |
|
696 |
+ |
|
697 |
+@keyframes foldFromRight { |
|
698 |
+ 0% { |
|
699 |
+ -webkit-transform: rotateY(90deg); |
|
700 |
+ -moz-transform: rotateY(90deg); |
|
701 |
+ -ms-transform: rotateY(90deg); |
|
702 |
+ transform: rotateY(90deg); |
|
703 |
+ } |
|
704 |
+} |
|
705 |
+ |
|
706 |
+/*========== SCALE CONFIG ==========*/ |
|
707 |
+.wallop-slider--scale .wallop-slider__item--hide-previous, |
|
708 |
+.wallop-slider--scale .wallop-slider__item--hide-next { |
|
709 |
+ display: block; |
|
710 |
+ -webkit-animation: scaleOut 350ms cubic-bezier(0.55, 0.055, 0.675, 0.19) both; |
|
711 |
+ -moz-animation: scaleOut 350ms cubic-bezier(0.55, 0.055, 0.675, 0.19) both; |
|
712 |
+ -ms-animation: scaleOut 350ms cubic-bezier(0.55, 0.055, 0.675, 0.19) both; |
|
713 |
+ animation: scaleOut 350ms cubic-bezier(0.55, 0.055, 0.675, 0.19) both; |
|
714 |
+} |
|
715 |
+ |
|
716 |
+/*========== SCALE ANIMATIONS ==========*/ |
|
717 |
+@-webkit-keyframes scaleOut { |
|
718 |
+ 100% { |
|
719 |
+ -webkit-transform: scale(1.6); |
|
720 |
+ -moz-transform: scale(1.6); |
|
721 |
+ -ms-transform: scale(1.6); |
|
722 |
+ transform: scale(1.6); |
|
723 |
+ opacity: 0; |
|
724 |
+ } |
|
725 |
+} |
|
726 |
+ |
|
727 |
+@-moz-keyframes scaleOut { |
|
728 |
+ 100% { |
|
729 |
+ -webkit-transform: scale(1.6); |
|
730 |
+ -moz-transform: scale(1.6); |
|
731 |
+ -ms-transform: scale(1.6); |
|
732 |
+ transform: scale(1.6); |
|
733 |
+ opacity: 0; |
|
734 |
+ } |
|
735 |
+} |
|
736 |
+ |
|
737 |
+@-ms-keyframes scaleOut { |
|
738 |
+ 100% { |
|
739 |
+ -webkit-transform: scale(1.6); |
|
740 |
+ -moz-transform: scale(1.6); |
|
741 |
+ -ms-transform: scale(1.6); |
|
742 |
+ transform: scale(1.6); |
|
743 |
+ opacity: 0; |
|
744 |
+ } |
|
745 |
+} |
|
746 |
+ |
|
747 |
+@keyframes scaleOut { |
|
748 |
+ 100% { |
|
749 |
+ -webkit-transform: scale(1.6); |
|
750 |
+ -moz-transform: scale(1.6); |
|
751 |
+ -ms-transform: scale(1.6); |
|
752 |
+ transform: scale(1.6); |
|
753 |
+ opacity: 0; |
|
754 |
+ } |
|
755 |
+} |
|
756 |
+ |
|
757 |
+/*========== SPECIAL CONFIG ==========*/ |
|
758 |
+.wallop-slider--rotate .wallop-slider__item--hide-previous, |
|
759 |
+.wallop-slider--rotate .wallop-slider__item--hide-next { |
|
760 |
+ display: block; |
|
761 |
+} |
|
762 |
+.wallop-slider--rotate .wallop-slider__item--hide-previous { |
|
763 |
+ -webkit-animation: rotateToLeft 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both; |
|
764 |
+ -moz-animation: rotateToLeft 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both; |
|
765 |
+ -ms-animation: rotateToLeft 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both; |
|
766 |
+ animation: rotateToLeft 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both; |
|
767 |
+} |
|
768 |
+.wallop-slider--rotate .wallop-slider__item--hide-next { |
|
769 |
+ -webkit-animation: rotateToRight 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both; |
|
770 |
+ -moz-animation: rotateToRight 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both; |
|
771 |
+ -ms-animation: rotateToRight 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both; |
|
772 |
+ animation: rotateToRight 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both; |
|
773 |
+} |
|
774 |
+ |
|
775 |
+/*========== SPCECIAL ANIMATIONS ==========*/ |
|
776 |
+@-webkit-keyframes rotateToLeft { |
|
777 |
+ 99% { |
|
778 |
+ opacity: 1; |
|
779 |
+ } |
|
780 |
+ |
|
781 |
+ 100% { |
|
782 |
+ opacity: 0; |
|
783 |
+ -webkit-transform: translate3d(-100%, 0, 0) rotate(90deg); |
|
784 |
+ -moz-transform: translate3d(-100%, 0, 0) rotate(90deg); |
|
785 |
+ -ms-transform: translate3d(-100%, 0, 0) rotate(90deg); |
|
786 |
+ transform: translate3d(-100%, 0, 0) rotate(90deg); |
|
787 |
+ } |
|
788 |
+} |
|
789 |
+ |
|
790 |
+@-moz-keyframes rotateToLeft { |
|
791 |
+ 99% { |
|
792 |
+ opacity: 1; |
|
793 |
+ } |
|
794 |
+ |
|
795 |
+ 100% { |
|
796 |
+ opacity: 0; |
|
797 |
+ -webkit-transform: translate3d(-100%, 0, 0) rotate(90deg); |
|
798 |
+ -moz-transform: translate3d(-100%, 0, 0) rotate(90deg); |
|
799 |
+ -ms-transform: translate3d(-100%, 0, 0) rotate(90deg); |
|
800 |
+ transform: translate3d(-100%, 0, 0) rotate(90deg); |
|
801 |
+ } |
|
802 |
+} |
|
803 |
+ |
|
804 |
+@-ms-keyframes rotateToLeft { |
|
805 |
+ 99% { |
|
806 |
+ opacity: 1; |
|
807 |
+ } |
|
808 |
+ |
|
809 |
+ 100% { |
|
810 |
+ opacity: 0; |
|
811 |
+ -webkit-transform: translate3d(-100%, 0, 0) rotate(90deg); |
|
812 |
+ -moz-transform: translate3d(-100%, 0, 0) rotate(90deg); |
|
813 |
+ -ms-transform: translate3d(-100%, 0, 0) rotate(90deg); |
|
814 |
+ transform: translate3d(-100%, 0, 0) rotate(90deg); |
|
815 |
+ } |
|
816 |
+} |
|
817 |
+ |
|
818 |
+@keyframes rotateToLeft { |
|
819 |
+ 99% { |
|
820 |
+ opacity: 1; |
|
821 |
+ } |
|
822 |
+ |
|
823 |
+ 100% { |
|
824 |
+ opacity: 0; |
|
825 |
+ -webkit-transform: translate3d(-100%, 0, 0) rotate(90deg); |
|
826 |
+ -moz-transform: translate3d(-100%, 0, 0) rotate(90deg); |
|
827 |
+ -ms-transform: translate3d(-100%, 0, 0) rotate(90deg); |
|
828 |
+ transform: translate3d(-100%, 0, 0) rotate(90deg); |
|
829 |
+ } |
|
830 |
+} |
|
831 |
+ |
|
832 |
+@-webkit-keyframes rotateToRight { |
|
833 |
+ 99% { |
|
834 |
+ opacity: 1; |
|
835 |
+ } |
|
836 |
+ |
|
837 |
+ 100% { |
|
838 |
+ opacity: 0; |
|
839 |
+ -webkit-transform: translate3d(100%, 0, 0) rotate(-90deg); |
|
840 |
+ -moz-transform: translate3d(100%, 0, 0) rotate(-90deg); |
|
841 |
+ -ms-transform: translate3d(100%, 0, 0) rotate(-90deg); |
|
842 |
+ transform: translate3d(100%, 0, 0) rotate(-90deg); |
|
843 |
+ } |
|
844 |
+} |
|
845 |
+ |
|
846 |
+@-moz-keyframes rotateToRight { |
|
847 |
+ 99% { |
|
848 |
+ opacity: 1; |
|
849 |
+ } |
|
850 |
+ |
|
851 |
+ 100% { |
|
852 |
+ opacity: 0; |
|
853 |
+ -webkit-transform: translate3d(100%, 0, 0) rotate(-90deg); |
|
854 |
+ -moz-transform: translate3d(100%, 0, 0) rotate(-90deg); |
|
855 |
+ -ms-transform: translate3d(100%, 0, 0) rotate(-90deg); |
|
856 |
+ transform: translate3d(100%, 0, 0) rotate(-90deg); |
|
857 |
+ } |
|
858 |
+} |
|
859 |
+ |
|
860 |
+@-ms-keyframes rotateToRight { |
|
861 |
+ 99% { |
|
862 |
+ opacity: 1; |
|
863 |
+ } |
|
864 |
+ |
|
865 |
+ 100% { |
|
866 |
+ opacity: 0; |
|
867 |
+ -webkit-transform: translate3d(100%, 0, 0) rotate(-90deg); |
|
868 |
+ -moz-transform: translate3d(100%, 0, 0) rotate(-90deg); |
|
869 |
+ -ms-transform: translate3d(100%, 0, 0) rotate(-90deg); |
|
870 |
+ transform: translate3d(100%, 0, 0) rotate(-90deg); |
|
871 |
+ } |
|
872 |
+} |
|
873 |
+ |
|
874 |
+@keyframes rotateToRight { |
|
875 |
+ 99% { |
|
876 |
+ opacity: 1; |
|
877 |
+ } |
|
878 |
+ |
|
879 |
+ 100% { |
|
880 |
+ opacity: 0; |
|
881 |
+ -webkit-transform: translate3d(100%, 0, 0) rotate(-90deg); |
|
882 |
+ -moz-transform: translate3d(100%, 0, 0) rotate(-90deg); |
|
883 |
+ -ms-transform: translate3d(100%, 0, 0) rotate(-90deg); |
|
884 |
+ transform: translate3d(100%, 0, 0) rotate(-90deg); |
|
885 |
+ } |
|
886 |
+} |
|
887 |
+ |
|
888 |
+@media only screen and (min-width: 480px) { |
|
889 |
+ .wallop-slider--targeted .wallop-slider__item--hide-previous, |
|
890 |
+ .wallop-slider--targeted .wallop-slider__item--hide-next { |
|
891 |
+ display: block; |
|
892 |
+ -webkit-animation: fadeOut 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both; |
|
893 |
+ -moz-animation: fadeOut 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both; |
|
894 |
+ -ms-animation: fadeOut 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both; |
|
895 |
+ animation: fadeOut 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both; |
|
896 |
+ } |
|
897 |
+} |
|
898 |
+ |
|
899 |
+/*========== FADE ANIMATIONS ==========*/ |
|
900 |
+@-webkit-keyframes fadeOut { |
|
901 |
+ 100% { |
|
902 |
+ opacity: 0; |
|
903 |
+ } |
|
904 |
+} |
|
905 |
+ |
|
906 |
+@-moz-keyframes fadeOut { |
|
907 |
+ 100% { |
|
908 |
+ opacity: 0; |
|
909 |
+ } |
|
910 |
+} |
|
911 |
+ |
|
912 |
+@-ms-keyframes fadeOut { |
|
913 |
+ 100% { |
|
914 |
+ opacity: 0; |
|
915 |
+ } |
|
916 |
+} |
|
917 |
+ |
|
918 |
+@keyframes fadeOut { |
|
919 |
+ 100% { |
|
920 |
+ opacity: 0; |
|
921 |
+ } |
|
922 |
+} |
|
923 |
+ |
|
924 |
+/*========== EXPERIMENTAL CONFIG ==========*/ |
|
925 |
+.wallop-slider--experimental .wallop-slider__list { |
|
926 |
+ overflow: visible; |
|
927 |
+ -webkit-perspective: 1000; |
|
928 |
+} |
|
929 |
+.wallop-slider--experimental .wallop-slider__item { |
|
930 |
+ -webkit-transition: all 650ms cubic-bezier(0.455, 0.03, 0.515, 0.955); |
|
931 |
+ -webkit-transform: translateZ(0); |
|
932 |
+} |
|
933 |
+.wallop-slider--experimental .wallop-slider__item--current { |
|
934 |
+ position: relative; |
|
935 |
+} |
|
936 |
+.wallop-slider--experimental .wallop-slider__item--current + .wallop-slider__item, |
|
937 |
+.wallop-slider--experimental .wallop-slider__item--hide-next { |
|
938 |
+ display: block; |
|
939 |
+ -webkit-transform: translate3d(100%, 0, 0) rotateY(-18deg); |
|
940 |
+ -webkit-transform-origin: left center; |
|
941 |
+} |
|
942 |
+.wallop-slider--experimental .wallop-slider__item--before-current { |
|
943 |
+ display: block; |
|
944 |
+ -webkit-transform: translate3d(-100%, 0, 0) rotateY(18deg); |
|
945 |
+ -webkit-transform-origin: right center; |
|
946 |
+} |
|
947 |
+.wallop-slider--experimental .wallop-slider__item--before-before { |
|
948 |
+ display: block; |
|
949 |
+ -webkit-transform: translate3d(-200%, 0, 0) rotateY(18deg); |
|
950 |
+ -webkit-transform-origin: right center; |
|
951 |
+} |
|
952 |
+.wallop-slider--experimental .wallop-slider__item--hide-next + .wallop-slider__item { |
|
953 |
+ display: block; |
|
954 |
+ -webkit-transform-origin: left center; |
|
955 |
+} |
|
956 |
+.wallop-slider--experimental .wallop-slider__item--show-next + .wallop-slider__item { |
|
957 |
+ display: block; |
|
958 |
+ -webkit-animation: showNext 650ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both; |
|
959 |
+ -webkit-transform-origin: left center; |
|
960 |
+} |
|
961 |
+.wallop-slider--experimental .wallop-slider__item--hide-next + .wallop-slider__item { |
|
962 |
+ display: block; |
|
963 |
+ -webkit-animation: hideNext 650ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both; |
|
964 |
+ -webkit-transform-origin: left center; |
|
965 |
+} |
|
966 |
+.wallop-slider--experimental .wallop-slider__item--hide-previous { |
|
967 |
+ -webkit-transform: translate3d(-100%, 0, 0) rotateY(18deg); |
|
968 |
+ -webkit-transform-origin: right center; |
|
969 |
+} |
|
970 |
+ |
|
971 |
+/*========== EXPERIMENTAL ANIMATIONS ==========*/ |
|
972 |
+@-webkit-keyframes showNext { |
|
973 |
+ 0% { |
|
974 |
+ -webkit-transform: translate3d(200%, 0, 0); |
|
975 |
+ } |
|
976 |
+ |
|
977 |
+ 100% { |
|
978 |
+ -webkit-transform: translate3d(100%, 0, 0) rotateY(-18deg); |
|
979 |
+ } |
|
980 |
+} |
|
981 |
+ |
|
982 |
+@-webkit-keyframes hideNext { |
|
983 |
+ 0% { |
|
984 |
+ -webkit-transform: translate3d(100%, 0, 0) rotateY(-18deg); |
|
985 |
+ } |
|
986 |
+ |
|
987 |
+ 100% { |
|
988 |
+ -webkit-transform: translate3d(200%, 0, 0) rotateY(-18deg); |
|
989 |
+ } |
|
990 |
+} |
|
991 |
+ |
|
992 |
+/** |
|
993 |
+ * prism.js Twilight theme |
|
994 |
+ * Based (more or less) on the Twilight theme originally of Textmate fame. |
|
995 |
+ * @author Remy Bach |
|
996 |
+ */ |
|
997 |
+code[class*="language-"], |
|
998 |
+pre[class*="language-"] { |
|
999 |
+ color: white; |
|
1000 |
+ direction: ltr; |
|
1001 |
+ font-family: Consolas, Monaco, 'Andale Mono', monospace; |
|
1002 |
+ text-align: left; |
|
1003 |
+ white-space: pre; |
|
1004 |
+ word-spacing: normal; |
|
1005 |
+ -moz-tab-size: 4; |
|
1006 |
+ -o-tab-size: 4; |
|
1007 |
+ tab-size: 4; |
|
1008 |
+ font-size: 18px; |
|
1009 |
+ -webkit-hyphens: none; |
|
1010 |
+ -moz-hyphens: none; |
|
1011 |
+ -ms-hyphens: none; |
|
1012 |
+ hyphens: none; |
|
1013 |
+} |
|
1014 |
+ |
|
1015 |
+pre[class*="language-"], |
|
1016 |
+:not(pre) > code[class*="language-"] { |
|
1017 |
+ background: #141414; |
|
1018 |
+ /* #141414 */ |
|
1019 |
+} |
|
1020 |
+ |
|
1021 |
+/* Code blocks */ |
|
1022 |
+pre[class*="language-"] { |
|
1023 |
+ margin: .5em 0; |
|
1024 |
+ overflow: auto; |
|
1025 |
+ padding: 1em; |
|
1026 |
+} |
|
1027 |
+ |
|
1028 |
+pre[class*="language-"]::selection { |
|
1029 |
+ /* Safari */ |
|
1030 |
+ background: #27292a; |
|
1031 |
+ /* #282A2B */ |
|
1032 |
+} |
|
1033 |
+ |
|
1034 |
+pre[class*="language-"]::selection { |
|
1035 |
+ /* Firefox */ |
|
1036 |
+ background: #27292a; |
|
1037 |
+ /* #282A2B */ |
|
1038 |
+} |
|
1039 |
+ |
|
1040 |
+/* Text Selection colour */ |
|
1041 |
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, |
|
1042 |
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { |
|
1043 |
+ text-shadow: none; |
|
1044 |
+ background: rgba(237, 237, 237, 0.15); |
|
1045 |
+ /* #EDEDED */ |
|
1046 |
+} |
|
1047 |
+ |
|
1048 |
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection, |
|
1049 |
+code[class*="language-"]::selection, code[class*="language-"] ::selection { |
|
1050 |
+ text-shadow: none; |
|
1051 |
+ background: rgba(237, 237, 237, 0.15); |
|
1052 |
+ /* #EDEDED */ |
|
1053 |
+} |
|
1054 |
+ |
|
1055 |
+/* Inline code */ |
|
1056 |
+:not(pre) > code[class*="language-"] { |
|
1057 |
+ border-radius: .3em; |
|
1058 |
+ border: 0.13em solid #545454; |
|
1059 |
+ /* #545454 */ |
|
1060 |
+ box-shadow: 1px 1px 0.3em -0.1em black inset; |
|
1061 |
+ padding: .15em .2em .05em; |
|
1062 |
+} |
|
1063 |
+ |
|
1064 |
+.token.comment, |
|
1065 |
+.token.prolog, |
|
1066 |
+.token.doctype, |
|
1067 |
+.token.cdata { |
|
1068 |
+ color: #787878; |
|
1069 |
+ /* #777777 */ |
|
1070 |
+} |
|
1071 |
+ |
|
1072 |
+.token.punctuation { |
|
1073 |
+ opacity: .7; |
|
1074 |
+} |
|
1075 |
+ |
|
1076 |
+.namespace { |
|
1077 |
+ opacity: .7; |
|
1078 |
+} |
|
1079 |
+ |
|
1080 |
+.token.tag, |
|
1081 |
+.token.boolean, |
|
1082 |
+.token.number { |
|
1083 |
+ color: #cf694a; |
|
1084 |
+ /* #CF6A4C */ |
|
1085 |
+} |
|
1086 |
+ |
|
1087 |
+.token.keyword, |
|
1088 |
+.token.property, |
|
1089 |
+.token.selector, |
|
1090 |
+.token.constant, |
|
1091 |
+.token.symbol, |
|
1092 |
+.token.builtin { |
|
1093 |
+ color: #f9ee9a; |
|
1094 |
+ /* #F9EE98 */ |
|
1095 |
+} |
|
1096 |
+ |
|
1097 |
+.token.attr-name, |
|
1098 |
+.token.attr-value, |
|
1099 |
+.token.string, |
|
1100 |
+.token.operator, |
|
1101 |
+.token.entity, |
|
1102 |
+.token.url, |
|
1103 |
+.language-css .token.string, |
|
1104 |
+.style .token.string, |
|
1105 |
+.token.variable { |
|
1106 |
+ color: #919e6b; |
|
1107 |
+ /* #8F9D6A */ |
|
1108 |
+} |
|
1109 |
+ |
|
1110 |
+.token.atrule { |
|
1111 |
+ color: #7386a5; |
|
1112 |
+ /* #7587A6 */ |
|
1113 |
+} |
|
1114 |
+ |
|
1115 |
+.token.regex, |
|
1116 |
+.token.important { |
|
1117 |
+ color: #e9c163; |
|
1118 |
+ /* #E9C062 */ |
|
1119 |
+} |
|
1120 |
+ |
|
1121 |
+.token.important { |
|
1122 |
+ font-weight: bold; |
|
1123 |
+} |
|
1124 |
+ |
|
1125 |
+.token.entity { |
|
1126 |
+ cursor: help; |
|
1127 |
+} |
|
1128 |
+ |
|
1129 |
+pre[data-line] { |
|
1130 |
+ padding: 1em 0 1em 3em; |
|
1131 |
+ position: relative; |
|
1132 |
+} |
|
1133 |
+ |
|
1134 |
+/* Markup */ |
|
1135 |
+.language-markup .token.tag, |
|
1136 |
+.language-markup .token.attr-name, |
|
1137 |
+.language-markup .token.punctuation { |
|
1138 |
+ color: #ad895c; |
|
1139 |
+ /* #AC885B */ |
|
1140 |
+} |
|
1141 |
+ |
|
1142 |
+/* Make the tokens sit above the line highlight so the colours don't look faded. */ |
|
1143 |
+.token { |
|
1144 |
+ position: relative; |
|
1145 |
+ z-index: 1; |
|
1146 |
+} |
|
1147 |
+ |
|
1148 |
+.line-highlight { |
|
1149 |
+ background: -moz-linear-gradient(left, rgba(84, 84, 84, 0.1) 70%, rgba(84, 84, 84, 0)); |
|
1150 |
+ /* #545454 */ |
|
1151 |
+ background: -o-linear-gradient(left, rgba(84, 84, 84, 0.1) 70%, rgba(84, 84, 84, 0)); |
|
1152 |
+ /* #545454 */ |
|
1153 |
+ background: -webkit-linear-gradient(left, rgba(84, 84, 84, 0.1) 70%, rgba(84, 84, 84, 0)); |
|
1154 |
+ /* #545454 */ |
|
1155 |
+ background: rgba(84, 84, 84, 0.25); |
|
1156 |
+ /* #545454 */ |
|
1157 |
+ background: linear-gradient(left, rgba(84, 84, 84, 0.1) 70%, rgba(84, 84, 84, 0)); |
|
1158 |
+ /* #545454 */ |
|
1159 |
+ border-bottom: 1px dashed #545454; |
|
1160 |
+ /* #545454 */ |
|
1161 |
+ border-top: 1px dashed #545454; |
|
1162 |
+ /* #545454 */ |
|
1163 |
+ left: 0; |
|
1164 |
+ line-height: inherit; |
|
1165 |
+ margin-top: 0.75em; |
|
1166 |
+ /* Same as .prism’s padding-top */ |
|
1167 |
+ padding: inherit 0; |
|
1168 |
+ pointer-events: none; |
|
1169 |
+ position: absolute; |
|
1170 |
+ right: 0; |
|
1171 |
+ white-space: pre; |
|
1172 |
+ z-index: 0; |
|
1173 |
+} |
|
1174 |
+ |
|
1175 |
+.line-highlight:before, |
|
1176 |
+.line-highlight[data-end]:after { |
|
1177 |
+ background-color: #8794a6; |
|
1178 |
+ /* #8794A6 */ |
|
1179 |
+ border-radius: 999px; |
|
1180 |
+ box-shadow: 0 1px white; |
|
1181 |
+ color: #f5f2f0; |
|
1182 |
+ /* #F5F2F0 */ |
|
1183 |
+ content: attr(data-start); |
|
1184 |
+ font: bold 65%/1.5 sans-serif; |
|
1185 |
+ left: .6em; |
|
1186 |
+ min-width: 1em; |
|
1187 |
+ padding: 0 .5em; |
|
1188 |
+ position: absolute; |
|
1189 |
+ text-align: center; |
|
1190 |
+ text-shadow: none; |
|
1191 |
+ top: .4em; |
|
1192 |
+ vertical-align: .3em; |
|
1193 |
+} |
|
1194 |
+ |
|
1195 |
+.line-highlight[data-end]:after { |
|
1196 |
+ bottom: .4em; |
|
1197 |
+ content: attr(data-end); |
|
1198 |
+ top: auto; |
|
1199 |
+} |
@@ -1,14 +1,16 @@ |
||
1 |
-<div class="layer-content fx-fade-normal fx-easing-quad fx-speed-500" ng-show="showView" ng-click="fadeOut()"> |
|
2 |
- <fa-app id="app2"> |
|
3 |
- <fa-modifier fa-size="[true, true]" fa-origin="[0,0]" fa-translate="[0, 0, 0]" fa-index="1"> |
|
4 |
- <ui-view style="position: absolute; z-index: 2;"> |
|
5 |
- <fa-modifier fa-size="[100, 100]" fa-translate="translation(t.get())" > |
|
6 |
- <fa-surface fa-background-color="'#FA5C4F'" fa-color="'red'" > |
|
7 |
- {{data.message}} |
|
8 |
- </fa-surface> |
|
9 |
- </fa-modifier> |
|
10 |
- </fa-modifier> |
|
11 |
- </ui-view> |
|
12 |
- </fa-modifier> |
|
13 |
-</fa-app> |
|
1 |
+<div class="layer-content fx-fade-normal fx-easing-quad fx-speed-500" ng-show="showView"> |
|
2 |
+ <div class="Aligner"> |
|
3 |
+ <div class="Aligner-item"> |
|
4 |
+ <wallop-slider |
|
5 |
+ data-images="images" |
|
6 |
+ data-animation="fade" |
|
7 |
+ data-current-item-index="index" |
|
8 |
+ data-on-previous="updateTsPrevious()" |
|
9 |
+ data-on-next="updateTsNext()" |
|
10 |
+ ></wallop-slider> |
|
11 |
+ </div> |
|
12 |
+ </div> |
|
13 |
+ |
|
14 |
+ |
|
15 |
+ |
|
14 | 16 |
</div> |
@@ -0,0 +1,14 @@ |
||
1 |
+<div class="layer-content fx-fade-normal fx-easing-quad fx-speed-500" ng-show="showView" ng-click="fadeOut()"> |
|
2 |
+ <fa-app id="app2"> |
|
3 |
+ <fa-modifier fa-size="[true, true]" fa-origin="[0,0]" fa-translate="[0, 0, 0]" fa-index="1"> |
|
4 |
+ <ui-view style="position: absolute; z-index: 2;"> |
|
5 |
+ <fa-modifier fa-size="[100, 100]" fa-translate="translation(t.get())" > |
|
6 |
+ <fa-surface fa-background-color="'#FA5C4F'" fa-color="'red'" > |
|
7 |
+ {{data.message}} |
|
8 |
+ </fa-surface> |
|
9 |
+ </fa-modifier> |
|
10 |
+ </fa-modifier> |
|
11 |
+ </ui-view> |
|
12 |
+ </fa-modifier> |
|
13 |
+</fa-app> |
|
14 |
+</div> |
@@ -28,7 +28,8 @@ |
||
28 | 28 |
"angular-sanitize": "^1.3.0", |
29 | 29 |
"angular-touch": "^1.3.0", |
30 | 30 |
"jQuery": "~2.1.4", |
31 |
- "ngFx": "~1.1.0" |
|
31 |
+ "ngFx": "~1.1.0", |
|
32 |
+ "famous-bkimagesurface": "~1.0.3" |
|
32 | 33 |
}, |
33 | 34 |
"resolutions": { |
34 | 35 |
"angular": "1.3.8" |