prettyPhoto.scss — WooCommerce 9.4.0-rc.2

woocommerce / assets / css / prettyPhoto.scss

woocommerce / assets / css Last commit date

prettyPhoto.scss

606 lines

1	/**
2	* prettyPhoto.scss
3	* Styles for the prettyPhoto lightbox script. Includes a custom WooCommerce theme.
4	* http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
5	*/
6
7	/**
8	* Imports
9	*/
10	@import 'mixins';
11	@import 'variables';
12	@import 'fonts';
13
14	/**
15	* Mixins
16	*/
17	@mixin button() {
18	border-radius: 100%;
19	height: 1em;
20	width: 1em;
21	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
22	background-color: #444;
23	color: #fff !important;
24	font-size: 16px !important;
25	line-height: 1em;
26	@include transition();
27
28	&:hover {
29	background-color: #000;
30	}
31	}
32
33	/**
34	* Custom WooCommerce prettyPhoto theme
35	*/
36	div.pp_woocommerce {
37	.pp_content_container {
38	background: #fff;
39	border-radius: 3px;
40	box-shadow: 0 1px 30px rgba(0, 0, 0, 0.25);
41	padding: 20px 0;
42	@include clearfix();
43	}
44
45	.pp_loaderIcon {
46	@include loader();
47	}
48
49	div.ppt {
50	color: black;
51	}
52
53	.pp_gallery {
54	ul {
55	li {
56	a {
57	border: 1px solid rgba(0, 0, 0, 0.5);
58	background: #fff;
59	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
60	border-radius: 2px;
61	display: block;
62
63	&:hover {
64	border-color: #000;
65	}
66	}
67
68	&.selected {
69	a {
70	border-color: #000;
71	}
72	}
73	}
74	}
75	}
76
77	.pp_previous,
78	.pp_next {
79	&::before {
80	@include button();
81	font-family: 'WooCommerce';
82	content: '\e00b';
83	text-indent: 0;
84	display: none;
85	position: absolute;
86	top: 50%;
87	margin-top: -10px;
88	text-align: center;
89	}
90
91	&:hover {
92	&::before {
93	display: block;
94	}
95	}
96	}
97
98	.pp_previous {
99	&::before {
100	left: 1em;
101	}
102	}
103
104	.pp_next {
105	&::before {
106	right: 1em;
107	font-family: 'WooCommerce';
108	content: '\e008';
109	}
110	}
111
112	.pp_details {
113	margin: 0;
114	padding-top: 1em;
115	}
116
117	.pp_nav,
118	.pp_description {
119	font-size: 14px;
120	}
121
122	.pp_nav,
123	.pp_nav p,
124	.pp_play,
125	.pp_nav .pp_pause,
126	.pp_arrow_previous,
127	.pp_arrow_next {
128	margin: 0;
129	}
130
131	.pp_nav {
132	margin-right: 1em;
133	position: relative;
134	}
135
136	.pp_close {
137	@include button();
138	top: -0.5em;
139	right: -0.5em;
140	font-size: 1.618em !important;
141
142	&::before {
143	font-family: 'WooCommerce';
144	content: '\e013';
145	display: block;
146	position: absolute;
147	top: 0;
148	left: 0;
149	right: 0;
150	bottom: 0;
151	text-align: center;
152	text-indent: 0;
153	}
154	}
155
156	.pp_arrow_previous,
157	.pp_arrow_next {
158	@include button();
159	position: relative;
160	margin-top: -1px;
161
162	&::before {
163	font-family: 'WooCommerce';
164	content: '\e00b';
165	display: block;
166	position: absolute;
167	top: 0;
168	left: 0;
169	right: 0;
170	bottom: 0;
171	text-align: center;
172	text-indent: 0;
173	}
174	}
175
176	.pp_arrow_previous {
177	margin-right: 0.5em;
178	}
179
180	.pp_arrow_next {
181	margin-left: 0.5em;
182
183	&::before {
184	content: '\e008';
185	}
186	}
187
188	a.pp_expand,
189	a.pp_contract {
190	@include button();
191	right: auto;
192	left: -0.5em;
193	top: -0.5em;
194	font-size: 1.618em !important;
195
196	&::before {
197	font-family: 'WooCommerce';
198	content: '\e005';
199	display: block;
200	position: absolute;
201	top: 0;
202	left: 0;
203	right: 0;
204	bottom: 0;
205	text-align: center;
206	text-indent: 0;
207	}
208	}
209
210	a.pp_contract {
211	&::before {
212	content: '\e004';
213	}
214	}
215
216	#respond {
217	margin: 0;
218	width: 100%;
219	background: none;
220	border: none;
221	padding: 0;
222
223	.form-submit {
224	margin-top: 0;
225	float: none;
226	}
227	}
228
229	.pp_inline {
230	padding: 0!important;
231	}
232	}
233
234	// RTL support
235	.rtl {
236	div.pp_woocommerce {
237	.pp_content_container {
238	text-align: right;
239	}
240	}
241	}
242
243	@media only screen and (max-width: 768px) {
244	div.pp_woocommerce {
245	left: 5% !important;
246	right: 5% !important;
247	box-sizing: border-box;
248	width: 90% !important;
249
250	.pp_gallery,
251	.pp_previous,
252	.pp_next,
253	.pp_expand,
254	.pp_contract {
255	display: none !important;
256	}
257
258	.pp_arrow_previous,
259	.pp_arrow_next,
260	.pp_close {
261	height: 44px;
262	width: 44px;
263	font-size: 44px;
264	line-height: 44px;
265
266	&::before {
267	font-size: 44px;
268	}
269	}
270
271	.pp_description {
272	display: none !important;
273	}
274
275	.pp_details {
276	width: 100% !important;
277	}
278	}
279
280	.pp_content {
281	width: 100% !important;
282
283	#pp_full_res {
284	& > img {
285	width: 100% !important;
286	height: auto !important;
287	}
288	}
289	}
290
291	.currentTextHolder {
292	line-height: 3;
293	}
294	}
295
296	/**
297	* Default prettyPhoto css
298	* Do not edit!
299	*/
300	div.pp_pic_holder a:focus {
301	outline: none;
302	}
303
304	div.pp_overlay {
305	background: #000;
306	display: none;
307	left: 0;
308	position: absolute;
309	top: 0;
310	width: 100%;
311	z-index: 9999;
312	}
313
314	div.pp_pic_holder {
315	display: none;
316	position: absolute;
317	width: 100px;
318	z-index: 10000;
319	}
320
321	.pp_top {
322	height: 20px;
323	position: relative;
324	}
325
326	* html .pp_top {
327	padding: 0 20px;
328	}
329
330	.pp_top .pp_left {
331	height: 20px;
332	left: 0;
333	position: absolute;
334	width: 20px;
335	}
336
337	.pp_top .pp_middle {
338	height: 20px;
339	left: 20px;
340	position: absolute;
341	right: 20px;
342	}
343
344	* html .pp_top .pp_middle {
345	left: 0;
346	position: static;
347	}
348
349	.pp_top .pp_right {
350	height: 20px;
351	left: auto;
352	position: absolute;
353	right: 0;
354	top: 0;
355	width: 20px;
356	}
357
358	.pp_content {
359	height: 40px;
360	min-width: 40px;
361	}
362
363	* html .pp_content {
364	width: 40px;
365	}
366
367	.pp_fade {
368	display: none;
369	}
370
371	.pp_content_container {
372	position: relative;
373	text-align: left;
374	width: 100%;
375	}
376
377	.pp_content_container .pp_left {
378	padding-left: 20px;
379	}
380
381	.pp_content_container .pp_right {
382	padding-right: 20px;
383	}
384
385	.pp_content_container .pp_details {
386	float: left;
387	margin: 10px 0 2px;
388	}
389
390	.pp_description {
391	display: none;
392	margin: 0;
393	}
394
395	.pp_social {
396	float: left;
397	margin: 0;
398	}
399
400	.pp_social .facebook {
401	float: left;
402	margin-left: 5px;
403	width: 55px;
404	overflow: hidden;
405	}
406
407	.pp_social .twitter {
408	float: left;
409	}
410
411	.pp_nav {
412	clear: right;
413	float: left;
414	margin: 3px 10px 0 0;
415	}
416
417	.pp_nav p {
418	float: left;
419	margin: 2px 4px;
420	white-space: nowrap;
421	}
422
423	.pp_nav .pp_play,
424	.pp_nav .pp_pause {
425	float: left;
426	margin-right: 4px;
427	text-indent: -10000px;
428	}
429
430	a.pp_arrow_previous,
431	a.pp_arrow_next {
432	display: block;
433	float: left;
434	height: 15px;
435	margin-top: 3px;
436	text-indent: -100000px;
437	width: 14px;
438	}
439
440	.pp_hoverContainer {
441	position: absolute;
442	top: 0;
443	width: 100%;
444	z-index: 2000;
445	}
446
447	.pp_gallery {
448	display: none;
449	left: 50%;
450	margin-top: -50px;
451	position: absolute;
452	z-index: 10000;
453	}
454
455	.pp_gallery div {
456	float: left;
457	overflow: hidden;
458	position: relative;
459	}
460
461	.pp_gallery ul {
462	float: left;
463	height: 35px;
464	margin: 0 0 0 5px;
465	padding: 0;
466	position: relative;
467	white-space: nowrap;
468	}
469
470	.pp_gallery ul a {
471	border: 1px #000 solid;
472	border: 1px rgba(0, 0, 0, 0.5) solid;
473	display: block;
474	float: left;
475	height: 33px;
476	overflow: hidden;
477	}
478
479	.pp_gallery ul a:hover,
480	.pp_gallery li.selected a {
481	border-color: #fff;
482	}
483
484	.pp_gallery ul a img {
485	border: 0;
486	}
487
488	.pp_gallery li {
489	display: block;
490	float: left;
491	margin: 0 5px 0 0;
492	padding: 0;
493	}
494
495	.pp_gallery li.default a {
496	display: block;
497	height: 33px;
498	width: 50px;
499	}
500
501	.pp_gallery li.default a img {
502	display: none;
503	}
504
505	.pp_gallery .pp_arrow_previous,
506	.pp_gallery .pp_arrow_next {
507	margin-top: 7px !important;
508	}
509
510	a.pp_next {
511	display: block;
512	float: right;
513	height: 100%;
514	text-indent: -10000px;
515	width: 49%;
516	}
517
518	a.pp_previous {
519	display: block;
520	float: left;
521	height: 100%;
522	text-indent: -10000px;
523	width: 49%;
524	}
525
526	a.pp_expand,
527	a.pp_contract {
528	cursor: pointer;
529	display: none;
530	height: 20px;
531	position: absolute;
532	right: 30px;
533	text-indent: -10000px;
534	top: 10px;
535	width: 20px;
536	z-index: 20000;
537	}
538
539	a.pp_close {
540	position: absolute;
541	right: 0;
542	top: 0;
543	display: block;
544	text-indent: -10000px;
545	}
546
547	.pp_bottom {
548	height: 20px;
549	position: relative;
550	}
551
552	* html .pp_bottom {
553	padding: 0 20px;
554	}
555
556	.pp_bottom .pp_left {
557	height: 20px;
558	left: 0;
559	position: absolute;
560	width: 20px;
561	}
562
563	.pp_bottom .pp_middle {
564	height: 20px;
565	left: 20px;
566	position: absolute;
567	right: 20px;
568	}
569
570	* html .pp_bottom .pp_middle {
571	left: 0;
572	position: static;
573	}
574
575	.pp_bottom .pp_right {
576	height: 20px;
577	left: auto;
578	position: absolute;
579	right: 0;
580	top: 0;
581	width: 20px;
582	}
583
584	.pp_loaderIcon {
585	display: block;
586	height: 24px;
587	left: 50%;
588	margin: -12px 0 0 -12px;
589	position: absolute;
590	top: 50%;
591	width: 24px;
592	}
593
594	#pp_full_res .pp_inline {
595	text-align: left;
596	}
597
598	div.ppt {
599	color: #fff !important;
600	font-weight: 700;
601	display: none;
602	font-size: 17px;
603	margin: 0 0 5px 15px;
604	z-index: 9999;
605	}
606