|
3
|
1 @import "compass/reset";
|
|
|
2 @import "compass/css3/border-radius";
|
|
|
3 @import "compass/css3/box";
|
|
|
4 @import "compass/css3/box-shadow";
|
|
|
5 @import "compass/css3/box-sizing";
|
|
|
6 @import "compass/css3/images";
|
|
|
7 @import "compass/css3/text-shadow";
|
|
|
8 @import "compass/css3/background-size";
|
|
|
9 @import "compass/css3/transform";
|
|
|
10 @import "compass/css3/transition";
|
|
|
11
|
|
|
12 @mixin font-smoothing($val: antialiased) {
|
|
|
13 -webkit-font-smoothing: $val;
|
|
|
14 -moz-font-smoothing: $val;
|
|
|
15 -ms-font-smoothing: $val;
|
|
|
16 -o-font-smoothing: $val;
|
|
|
17 }
|
|
|
18
|
|
|
19 @mixin flexbox {
|
|
|
20 display: -webkit-box !important;
|
|
|
21 display: -moz-box !important;
|
|
|
22 display: -ms-box !important;
|
|
|
23 display: -o-box !important;
|
|
|
24 display: box !important;
|
|
|
25 }
|
|
|
26
|
|
|
27 @mixin flex-center-center {
|
|
|
28 @include box-orient(vertical);
|
|
|
29 @include box-align(center);
|
|
|
30 @include box-pack(center);
|
|
|
31 }
|
|
|
32
|
|
|
33 @mixin flex-left-center {
|
|
|
34 @include box-orient(vertical);
|
|
|
35 @include box-align(left);
|
|
|
36 @include box-pack(center);
|
|
|
37 }
|
|
|
38
|
|
|
39 @mixin flex-right-center {
|
|
|
40 @include box-orient(vertical);
|
|
|
41 @include box-align(end);
|
|
|
42 @include box-pack(center);
|
|
|
43 }
|
|
|
44
|
|
|
45 /**
|
|
|
46 * Base SlideDeck Styles
|
|
|
47 */
|
|
|
48 html {
|
|
|
49 height: 100%;
|
|
|
50 overflow: hidden;
|
|
|
51 }
|
|
|
52
|
|
|
53 body {
|
|
|
54 margin: 0;
|
|
|
55 padding: 0;
|
|
|
56
|
|
|
57 opacity: 0;
|
|
|
58
|
|
|
59 height: 100%;
|
|
|
60 min-height: 740px;
|
|
|
61 width: 100%;
|
|
|
62
|
|
|
63 overflow: hidden;
|
|
|
64
|
|
|
65 color: #fff;
|
|
|
66 @include font-smoothing(antialiased);
|
|
|
67 @include transition(opacity 800ms ease-in 100ms); // Add small delay to prevent jank.
|
|
|
68
|
|
|
69 &.loaded {
|
|
|
70 opacity: 1 !important;
|
|
|
71 }
|
|
|
72 }
|
|
|
73
|
|
|
74 input, button {
|
|
|
75 vertical-align: middle;
|
|
|
76 }
|
|
|
77
|
|
|
78 slides > slide[hidden] {
|
|
|
79 display: none !important;
|
|
|
80 }
|
|
|
81
|
|
|
82 slides {
|
|
|
83 width: 100%;
|
|
|
84 height: 100%;
|
|
|
85 position: absolute;
|
|
|
86 left: 0;
|
|
|
87 top: 0;
|
|
|
88 @include transform(translate3d(0, 0, 0));
|
|
|
89 @include perspective(1000);
|
|
|
90 @include transform-style(preserve-3d);
|
|
|
91 @include transition(opacity 800ms ease-in 100ms); // Add small delay to prevent jank.
|
|
|
92 }
|
|
|
93
|
|
|
94 slides > slide {
|
|
|
95 display: block;
|
|
|
96 position: absolute;
|
|
|
97 overflow: hidden;
|
|
|
98 left: 50%;
|
|
|
99 top: 50%;
|
|
|
100 @include box-sizing(border-box);
|
|
|
101 }
|
|
|
102
|
|
|
103 /* Slide styles */
|
|
|
104
|
|
|
105
|
|
|
106 /*article.fill iframe {
|
|
|
107 position: absolute;
|
|
|
108 left: 0;
|
|
|
109 top: 0;
|
|
|
110 width: 100%;
|
|
|
111 height: 100%;
|
|
|
112
|
|
|
113 border: 0;
|
|
|
114 margin: 0;
|
|
|
115
|
|
|
116 @include border-radius(10px);
|
|
|
117
|
|
|
118 z-index: -1;
|
|
|
119 }
|
|
|
120
|
|
|
121 slide.fill {
|
|
|
122 background-repeat: no-repeat;
|
|
|
123 @include background-size(cover);
|
|
|
124 }
|
|
|
125
|
|
|
126 slide.fill img {
|
|
|
127 position: absolute;
|
|
|
128 left: 0;
|
|
|
129 top: 0;
|
|
|
130 min-width: 100%;
|
|
|
131 min-height: 100%;
|
|
|
132
|
|
|
133 z-index: -1;
|
|
|
134 }
|
|
|
135 */
|
