cf7-grid-layout / assets / slippry / slippry.css

slippry.css in Smart Grid-Layout Design for Contact Form 7 4.1.0, at assets/slippry/slippry.css

282 lines 8.1 KB

Raw Download Zip

1	/**
2	*
3	* slippry v1.4.0 - Responsive content slider for jQuery
4	* http://slippry.com
5	*
6	* Authors: Lukas Jakob Hafner - @saftsaak
7	* Thomas Hurd - @SeenNotHurd
8	*
9	* Copyright 2016, booncon oy - http://booncon.com
10	*
11	*
12	* Released under the MIT license - http://opensource.org/licenses/MIT
13	*/
14	/* kenBurns animations, very basic */
15	@-webkit-keyframes left-right {
16	0% {
17	-webkit-transform: translateY(-20%) translateX(-10%);
18	transform: translateY(-20%) translateX(-10%); }
19	100% {
20	-webkit-transform: translateY(0%) translateX(10%);
21	transform: translateY(0%) translateX(10%); } }
22	@-o-keyframes left-right {
23	0% {
24	-o-transform: translateY(-20%) translateX(-10%);
25	transform: translateY(-20%) translateX(-10%); }
26	100% {
27	-o-transform: translateY(0%) translateX(10%);
28	transform: translateY(0%) translateX(10%); } }
29	@keyframes left-right {
30	0% {
31	-webkit-transform: translateY(-20%) translateX(-10%);
32	-o-transform: translateY(-20%) translateX(-10%);
33	transform: translateY(-20%) translateX(-10%); }
34	100% {
35	-webkit-transform: translateY(0%) translateX(10%);
36	-o-transform: translateY(0%) translateX(10%);
37	transform: translateY(0%) translateX(10%); } }
38	@-webkit-keyframes right-left {
39	0% {
40	-webkit-transform: translateY(0%) translateX(10%);
41	transform: translateY(0%) translateX(10%); }
42	100% {
43	-webkit-transform: translateY(-20%) translateX(-10%);
44	transform: translateY(-20%) translateX(-10%); } }
45	@-o-keyframes right-left {
46	0% {
47	-o-transform: translateY(0%) translateX(10%);
48	transform: translateY(0%) translateX(10%); }
49	100% {
50	-o-transform: translateY(-20%) translateX(-10%);
51	transform: translateY(-20%) translateX(-10%); } }
52	@keyframes right-left {
53	0% {
54	-webkit-transform: translateY(0%) translateX(10%);
55	-o-transform: translateY(0%) translateX(10%);
56	transform: translateY(0%) translateX(10%); }
57	100% {
58	-webkit-transform: translateY(-20%) translateX(-10%);
59	-o-transform: translateY(-20%) translateX(-10%);
60	transform: translateY(-20%) translateX(-10%); } }
61	/* added to the original element calling slippry */
62	.sy-box.sy-loading {
63	background: url("/images/sy-loader.gif") 50% 50% no-repeat;
64	-webkit-background-size: 32px 32px;
65	background-size: 32px;
66	min-height: 40px; }
67	.sy-box.sy-loading .sy-slides-wrap, .sy-box.sy-loading .sy-pager {
68	visibility: hidden; }
69
70	/* element that wraps the slides */
71	.sy-slides-wrap {
72	position: relative;
73	height: 100%;
74	width: 100%; }
75	.sy-slides-wrap:hover .sy-controls {
76	display: block; }
77
78	/* element that crops the visible area to the slides */
79	.sy-slides-crop {
80	height: 100%;
81	width: 100%;
82	position: absolute;
83	overflow: hidden; }
84
85	/* list containing the slides */
86	.sy-list {
87	width: 100%;
88	height: 100%;
89	list-style: none;
90	margin: 0;
91	padding: 0;
92	position: absolute; }
93	.sy-list.horizontal {
94	-webkit-transition: left ease;
95	-o-transition: left ease;
96	transition: left ease; }
97	.sy-list.vertical {
98	-webkit-transition: top ease;
99	-o-transition: top ease;
100	transition: top ease; }
101
102	/* single slide */
103	.sy-slide {
104	position: absolute;
105	width: 100%;
106	z-index: 2; }
107	.sy-slide.kenburns {
108	width: 140%;
109	left: -20%; }
110	.sy-slide.kenburns.useCSS {
111	-webkit-transition-property: opacity;
112	-o-transition-property: opacity;
113	transition-property: opacity; }
114	.sy-slide.kenburns.useCSS.sy-ken:nth-child(1n) {
115	-webkit-animation-name: left-right;
116	-o-animation-name: left-right;
117	animation-name: left-right;
118	-webkit-animation-fill-mode: forwards;
119	-o-animation-fill-mode: forwards;
120	animation-fill-mode: forwards; }
121	.sy-slide.kenburns.useCSS.sy-ken:nth-child(2n) {
122	-webkit-animation-name: right-left;
123	-o-animation-name: right-left;
124	animation-name: right-left;
125	-webkit-animation-fill-mode: forwards;
126	-o-animation-fill-mode: forwards;
127	animation-fill-mode: forwards; }
128	.sy-slide.sy-active {
129	z-index: 3; }
130	.sy-slide > img {
131	margin: 0;
132	padding: 0;
133	display: block;
134	width: 100%;
135	border: 0; }
136	.sy-slide > a {
137	margin: 0;
138	padding: 0;
139	display: block;
140	width: 100%; }
141	.sy-slide > a > img {
142	margin: 0;
143	padding: 0;
144	display: block;
145	width: 100%;
146	border: 0; }
147
148	/* next/ prev buttons, with arrows and clickable area a lot larger than the visible buttons */
149	.sy-controls {
150	display: none;
151	list-style: none;
152	height: 100%;
153	width: 100%;
154	position: absolute;
155	padding: 0;
156	margin: 0; }
157	.sy-controls li {
158	position: absolute;
159	width: 10%;
160	min-width: 4.2em;
161	height: 100%;
162	z-index: 33; }
163	.sy-controls li.sy-prev {
164	left: 0;
165	top: 0; }
166	.sy-controls li.sy-prev a:after {
167	background-position: -5% 0; }
168	.sy-controls li.sy-next {
169	right: 0;
170	top: 0; }
171	.sy-controls li.sy-next a:after {
172	background-position: 105% 0; }
173	.sy-controls li a {
174	position: relative;
175	width: 100%;
176	height: 100%;
177	display: block;
178	text-indent: -9999px; }
179	.sy-controls li a:link, .sy-controls li a:visited {
180	opacity: 0.4; }
181	.sy-controls li a:hover, .sy-controls li a:focus {
182	opacity: 0.8;
183	outline: none; }
184	.sy-controls li a:after {
185	content: "";
186	background-image: url("/images/arrows.svg");
187	background-repeat: no-repeat;
188	-webkit-background-size: cover;
189	background-size: cover;
190	text-align: center;
191	text-indent: 0;
192	line-height: 2.8em;
193	color: #111;
194	font-weight: 800;
195	position: absolute;
196	background-color: #fff;
197	width: 2.8em;
198	height: 2.8em;
199	left: 50%;
200	top: 50%;
201	margin-top: -1.4em;
202	margin-left: -1.4em;
203	border-radius: 50%; }
204	@media only screen and (max-device-width: 600px) {
205	.sy-controls {
206	display: block; }
207	.sy-controls li {
208	min-width: 2.1em; }
209	.sy-controls li a:after {
210	width: 1.4em;
211	height: 1.4em;
212	margin-top: -0.7em;
213	margin-left: -0.7em; } }
214
215	/* captions, styled fo the overlay variant */
216	.sy-caption-wrap {
217	position: absolute;
218	bottom: 2em;
219	z-index: 12;
220	left: 50%; }
221	.sy-caption-wrap .sy-caption {
222	position: relative;
223	left: -50%;
224	background-color: rgba(0, 0, 0, 0.54);
225	color: #fff;
226	padding: 0.4em 1em;
227	border-radius: 1.2em; }
228	.sy-caption-wrap .sy-caption a:link, .sy-caption-wrap .sy-caption a:visited {
229	color: #e24b70;
230	font-weight: 600;
231	text-decoration: none; }
232	.sy-caption-wrap .sy-caption a:hover, .sy-caption-wrap .sy-caption a:focus {
233	text-decoration: underline; }
234	@media only screen and (max-device-width: 600px), screen and (max-width: 600px) {
235	.sy-caption-wrap {
236	left: 0;
237	bottom: 0.4em; }
238	.sy-caption-wrap .sy-caption {
239	left: 0;
240	padding: 0.2em 0.4em;
241	font-size: 0.92em;
242	border-radius: 0; } }
243
244	/* pager bubbles */
245	.sy-pager {
246	clear: both;
247	display: block;
248	width: 100%;
249	margin: 1em 0 0;
250	padding: 0;
251	list-style: none;
252	text-align: center; }
253	.sy-pager li {
254	display: inline-block;
255	width: 1.2em;
256	height: 1.2em;
257	margin: 0 1em 0 0;
258	border-radius: 50%; }
259	.sy-pager li.sy-active a {
260	background-color: #e24b70; }
261	.sy-pager li a {
262	width: 100%;
263	height: 100%;
264	display: block;
265	background-color: #ccc;
266	text-indent: -9999px;
267	-webkit-background-size: 2em 2em;
268	background-size: 2em;
269	border-radius: 50%; }
270	.sy-pager li a:link, .sy-pager li a:visited {
271	opacity: 1.0; }
272	.sy-pager li a:hover, .sy-pager li a:focus {
273	opacity: 0.6; }
274
275	/* element to "keep/ fill" the space of the content, gets intrinsic height via js */
276	.sy-filler {
277	width: 100%; }
278	.sy-filler.ready {
279	-webkit-transition: padding 600ms ease;
280	-o-transition: padding 600ms ease;
281	transition: padding 600ms ease; }
282