root / snf-cyclades-app / synnefo / ui / new_ui / ui / sass / magnific-popup.scss @ 27a54f35
History | View | Annotate | Download (12.1 kB)
1 |
/* Magnific Popup CSS */ |
---|---|
2 |
|
3 |
@import "settings"; |
4 |
|
5 |
//////////////////////// |
6 |
// |
7 |
// Contents: |
8 |
// |
9 |
// 1. Default Settings |
10 |
// 2. General styles |
11 |
// - Transluscent overlay |
12 |
// - Containers, wrappers |
13 |
// - Cursors |
14 |
// - Helper classes |
15 |
// 3. Appearance |
16 |
// - Preloader & text that displays error messages |
17 |
// - CSS reset for buttons |
18 |
// - Close icon |
19 |
// - "1 of X" counter |
20 |
// - Navigation (left/right) arrows |
21 |
// - Iframe content type styles |
22 |
// - Image content type styles |
23 |
// - Media query where size of arrows is reduced |
24 |
// - IE7 support |
25 |
// |
26 |
//////////////////////// |
27 |
|
28 |
|
29 |
|
30 |
//////////////////////// |
31 |
// 1. Default Settings |
32 |
//////////////////////// |
33 |
|
34 |
$overlay-color: #0b0b0b !default; |
35 |
$overlay-opacity: 0.8 !default; |
36 |
$shadow: 0 0 8px rgba(0, 0, 0, 0.6) !default; // shadow on image or iframe |
37 |
$popup-padding-left: 8px !default; // Padding from left and from right side |
38 |
$popup-padding-left-mobile: 6px !default; // Same as above, but is applied when width of window is less than 800px |
39 |
|
40 |
$z-index-base: 1040 !default; // Base z-index of popup |
41 |
$include-arrows: true !default; // include styles for nav arrows |
42 |
$controls-opacity: 0.65 !default; |
43 |
$controls-color: #FFF !default; |
44 |
$inner-close-icon-color: #333 !default; |
45 |
$controls-text-color: #CCC !default; // Color of preloader and "1 of X" indicator |
46 |
$controls-text-color-hover: #FFF !default; |
47 |
$IE7support: true !default; // Very basic IE7 support |
48 |
|
49 |
// Iframe-type options |
50 |
$include-iframe-type: true !default; |
51 |
$iframe-padding-top: 40px !default; |
52 |
$iframe-background: #000 !default; |
53 |
$iframe-max-width: 900px !default; |
54 |
$iframe-ratio: 9/16 !default; |
55 |
|
56 |
// Image-type options |
57 |
$include-image-type: true !default; |
58 |
$image-background: #444 !default; |
59 |
$image-padding-top: 40px !default; |
60 |
$image-padding-bottom: 40px !default; |
61 |
$include-mobile-layout-for-image: true !default; // Removes paddings from top and bottom |
62 |
|
63 |
// Image caption options |
64 |
$caption-title-color: #F3F3F3 !default; |
65 |
$caption-subtitle-color: #BDBDBD !default; |
66 |
|
67 |
// A11y |
68 |
$use-visuallyhidden: false !default; // Hide content from browsers, but make it available for screen readers |
69 |
|
70 |
|
71 |
|
72 |
//////////////////////// |
73 |
// 2. General styles |
74 |
//////////////////////// |
75 |
|
76 |
// Transluscent overlay |
77 |
.mfp-bg { |
78 |
top: 0; |
79 |
left: 0; |
80 |
width: 100%; |
81 |
height: 100%; |
82 |
z-index: $z-index-base + 2; |
83 |
overflow: hidden; |
84 |
position: fixed; |
85 |
|
86 |
background: $overlay-color; |
87 |
opacity: $overlay-opacity; |
88 |
@if $IE7support { |
89 |
filter: alpha(opacity=$overlay-opacity*100); |
90 |
} |
91 |
} |
92 |
|
93 |
// Wrapper for popup |
94 |
.mfp-wrap { |
95 |
top: 0; |
96 |
left: 0; |
97 |
width: 100%; |
98 |
height: 100%; |
99 |
z-index: $z-index-base + 3; |
100 |
position: fixed; |
101 |
outline: none !important; |
102 |
-webkit-backface-visibility: hidden; // fixes webkit bug that can cause "false" scrollbar |
103 |
} |
104 |
|
105 |
// Root container |
106 |
.mfp-container { |
107 |
text-align: center; |
108 |
position: absolute; |
109 |
width: 100%; |
110 |
height: 100%; |
111 |
left: 0; |
112 |
top: 0; |
113 |
padding: 0 $popup-padding-left; |
114 |
-webkit-box-sizing: border-box; |
115 |
-moz-box-sizing: border-box; |
116 |
box-sizing: border-box; |
117 |
} |
118 |
|
119 |
// Vertical centerer helper |
120 |
.mfp-container:before { |
121 |
content: ''; |
122 |
display: inline-block; |
123 |
height: 100%; |
124 |
vertical-align: middle; |
125 |
} |
126 |
|
127 |
// Remove vertical centering when popup has class `mfp-align-top` |
128 |
.mfp-align-top .mfp-container:before { |
129 |
display: none; |
130 |
} |
131 |
|
132 |
// Popup content holder |
133 |
.mfp-content { |
134 |
position: relative; |
135 |
display: inline-block; |
136 |
vertical-align: middle; |
137 |
margin: 0 auto; |
138 |
text-align: left; |
139 |
z-index: $z-index-base + 5; |
140 |
} |
141 |
.mfp-inline-holder .mfp-content, |
142 |
.mfp-ajax-holder .mfp-content { |
143 |
width: 100%; |
144 |
cursor: auto; |
145 |
} |
146 |
|
147 |
// Cursors |
148 |
.mfp-ajax-cur { |
149 |
cursor: progress; |
150 |
} |
151 |
.mfp-zoom-out-cur, |
152 |
.mfp-zoom-out-cur .mfp-image-holder .mfp-close { |
153 |
cursor: -moz-zoom-out; |
154 |
cursor: -webkit-zoom-out; |
155 |
cursor: zoom-out; |
156 |
} |
157 |
.mfp-zoom { |
158 |
cursor: pointer; |
159 |
cursor: -webkit-zoom-in; |
160 |
cursor: -moz-zoom-in; |
161 |
cursor: zoom-in; |
162 |
} |
163 |
.mfp-auto-cursor .mfp-content { |
164 |
cursor: auto; |
165 |
} |
166 |
|
167 |
.mfp-close, |
168 |
.mfp-arrow, |
169 |
.mfp-preloader, |
170 |
.mfp-counter { |
171 |
-webkit-user-select:none; |
172 |
-moz-user-select: none; |
173 |
user-select: none; |
174 |
} |
175 |
|
176 |
// Hide the image during the loading |
177 |
.mfp-loading.mfp-figure { |
178 |
display: none; |
179 |
} |
180 |
|
181 |
// Helper class that hides stuff |
182 |
@if $use-visuallyhidden { |
183 |
// From HTML5 Boilerplate https://github.com/h5bp/html5-boilerplate/blob/v4.2.0/doc/css.md#visuallyhidden |
184 |
.mfp-hide { |
185 |
border: 0 !important; |
186 |
clip: rect(0 0 0 0) !important; |
187 |
height: 1px !important; |
188 |
margin: -1px !important; |
189 |
overflow: hidden !important; |
190 |
padding: 0 !important; |
191 |
position: absolute !important; |
192 |
width: 1px !important; |
193 |
} |
194 |
} @else { |
195 |
.mfp-hide { |
196 |
display: none !important; |
197 |
} |
198 |
} |
199 |
|
200 |
|
201 |
//////////////////////// |
202 |
// 3. Appearance |
203 |
//////////////////////// |
204 |
|
205 |
// Preloader and text that displays error messages |
206 |
.mfp-preloader { |
207 |
color: $controls-text-color; |
208 |
position: absolute; |
209 |
top: 50%; |
210 |
width: auto; |
211 |
text-align: center; |
212 |
margin-top: -0.8em; |
213 |
left: 8px; |
214 |
right: 8px; |
215 |
z-index: $z-index-base + 4; |
216 |
} |
217 |
.mfp-preloader a { |
218 |
color: $controls-text-color; |
219 |
} |
220 |
.mfp-preloader a:hover { |
221 |
color: $controls-text-color-hover; |
222 |
} |
223 |
|
224 |
// Hide preloader when content successfully loaded |
225 |
.mfp-s-ready .mfp-preloader { |
226 |
display: none; |
227 |
} |
228 |
|
229 |
// Hide content when it was not loaded |
230 |
.mfp-s-error .mfp-content { |
231 |
display: none; |
232 |
} |
233 |
|
234 |
|
235 |
// CSS-reset for buttons |
236 |
button.mfp-close, |
237 |
button.mfp-arrow { |
238 |
overflow: visible; |
239 |
cursor: pointer; |
240 |
background: transparent; |
241 |
border: 0; |
242 |
-webkit-appearance: none; |
243 |
display: block; |
244 |
padding: 0; |
245 |
z-index: $z-index-base + 6; |
246 |
-webkit-box-shadow: none; |
247 |
box-shadow: none; |
248 |
} |
249 |
button::-moz-focus-inner { |
250 |
padding: 0; |
251 |
border: 0 |
252 |
} |
253 |
|
254 |
|
255 |
// Close icon |
256 |
.mfp-close { |
257 |
width: 44px; |
258 |
height: 44px; |
259 |
line-height: 44px; |
260 |
|
261 |
position: absolute; |
262 |
right: 0; |
263 |
top: 0; |
264 |
text-decoration: none; |
265 |
text-align: center; |
266 |
opacity: $controls-opacity; |
267 |
padding: 0 0 18px 10px; |
268 |
color: $controls-color; |
269 |
|
270 |
font-style: normal; |
271 |
font-size: 28px; |
272 |
font-family: Arial, Baskerville, monospace; |
273 |
|
274 |
&:hover, |
275 |
&:focus { |
276 |
opacity: 1; |
277 |
} |
278 |
|
279 |
&:active { |
280 |
top: 1px; |
281 |
} |
282 |
} |
283 |
.mfp-close-btn-in .mfp-close { |
284 |
color: $inner-close-icon-color; |
285 |
} |
286 |
.mfp-image-holder .mfp-close, |
287 |
.mfp-iframe-holder .mfp-close { |
288 |
color: $controls-color; |
289 |
right: -6px; |
290 |
text-align: right; |
291 |
padding-right: 6px; |
292 |
width: 100%; |
293 |
} |
294 |
|
295 |
// "1 of X" counter |
296 |
.mfp-counter { |
297 |
position: absolute; |
298 |
top: 0; |
299 |
right: 0; |
300 |
color: $controls-text-color; |
301 |
font-size: 12px; |
302 |
line-height: 18px; |
303 |
} |
304 |
|
305 |
// Navigation arrows |
306 |
@if $include-arrows { |
307 |
.mfp-arrow { |
308 |
position: absolute; |
309 |
opacity: $controls-opacity; |
310 |
margin: 0; |
311 |
top: 50%; |
312 |
margin-top: -55px; |
313 |
padding: 0; |
314 |
width: 90px; |
315 |
height: 110px; |
316 |
-webkit-tap-highlight-color: rgba(0,0,0,0); |
317 |
} |
318 |
.mfp-arrow:active { |
319 |
margin-top: -54px; |
320 |
} |
321 |
.mfp-arrow:hover, |
322 |
.mfp-arrow:focus { |
323 |
opacity: 1; |
324 |
} |
325 |
|
326 |
.mfp-arrow { |
327 |
|
328 |
&:before, |
329 |
&:after, |
330 |
.mfp-b, |
331 |
.mfp-a { |
332 |
content: ''; |
333 |
display: block; |
334 |
width: 0; |
335 |
height: 0; |
336 |
position: absolute; |
337 |
left: 0; |
338 |
top: 0; |
339 |
margin-top: 35px; |
340 |
margin-left: 35px; |
341 |
border: medium inset transparent; |
342 |
} |
343 |
|
344 |
&:after, |
345 |
.mfp-a { |
346 |
|
347 |
border-top-width: 13px; |
348 |
border-bottom-width: 13px; |
349 |
top:8px; |
350 |
} |
351 |
|
352 |
&:before, |
353 |
.mfp-b { |
354 |
border-top-width: 21px; |
355 |
border-bottom-width: 21px; |
356 |
} |
357 |
|
358 |
} |
359 |
|
360 |
.mfp-arrow-left { |
361 |
left: 0; |
362 |
|
363 |
&:after, |
364 |
.mfp-a { |
365 |
border-right: 17px solid #FFF; |
366 |
margin-left: 31px; |
367 |
} |
368 |
&:before, |
369 |
.mfp-b { |
370 |
margin-left: 25px; |
371 |
border-right: 27px solid #3f3f3f; |
372 |
} |
373 |
} |
374 |
|
375 |
.mfp-arrow-right { |
376 |
right: 0; |
377 |
&:after, |
378 |
.mfp-a { |
379 |
border-left: 17px solid #FFF; |
380 |
margin-left: 39px |
381 |
} |
382 |
&:before, |
383 |
.mfp-b { |
384 |
border-left: 27px solid #3f3f3f; |
385 |
} |
386 |
} |
387 |
} |
388 |
|
389 |
|
390 |
|
391 |
// Iframe content type |
392 |
@if $include-iframe-type { |
393 |
.mfp-iframe-holder { |
394 |
padding-top: $iframe-padding-top; |
395 |
padding-bottom: $iframe-padding-top; |
396 |
} |
397 |
.mfp-iframe-holder .mfp-content { |
398 |
line-height: 0; |
399 |
width: 100%; |
400 |
max-width: $iframe-max-width; |
401 |
} |
402 |
.mfp-iframe-scaler { |
403 |
width: 100%; |
404 |
height: 0; |
405 |
overflow: hidden; |
406 |
padding-top: $iframe-ratio * 100%; |
407 |
} |
408 |
.mfp-iframe-scaler iframe { |
409 |
position: absolute; |
410 |
display: block; |
411 |
top: 0; |
412 |
left: 0; |
413 |
width: 100%; |
414 |
height: 100%; |
415 |
box-shadow: $shadow; |
416 |
background: $iframe-background; |
417 |
} |
418 |
.mfp-iframe-holder .mfp-close { |
419 |
top: -40px; |
420 |
} |
421 |
} |
422 |
|
423 |
|
424 |
|
425 |
// Image content type |
426 |
@if $include-image-type { |
427 |
|
428 |
/* Main image in popup */ |
429 |
img.mfp-img { |
430 |
width: auto; |
431 |
max-width: 100%; |
432 |
height: auto; |
433 |
display: block; |
434 |
line-height: 0; |
435 |
-webkit-box-sizing: border-box; |
436 |
-moz-box-sizing: border-box; |
437 |
box-sizing: border-box; |
438 |
padding: $image-padding-top 0 $image-padding-bottom; |
439 |
margin: 0 auto; |
440 |
} |
441 |
|
442 |
/* The shadow behind the image */ |
443 |
.mfp-figure:after { |
444 |
content: ''; |
445 |
position: absolute; |
446 |
left: 0; |
447 |
top: $image-padding-top; |
448 |
bottom: $image-padding-bottom; |
449 |
display: block; |
450 |
right: 0; |
451 |
width: auto; |
452 |
height: auto; |
453 |
z-index: -1; |
454 |
box-shadow: $shadow; |
455 |
background: $image-background; |
456 |
} |
457 |
.mfp-figure { |
458 |
line-height: 0; |
459 |
} |
460 |
.mfp-bottom-bar { |
461 |
margin-top: -36px; |
462 |
position: absolute; |
463 |
top: 100%; |
464 |
left: 0; |
465 |
width: 100%; |
466 |
cursor: auto; |
467 |
} |
468 |
.mfp-title { |
469 |
text-align: left; |
470 |
line-height: 18px; |
471 |
color: $caption-title-color; |
472 |
word-wrap: break-word; |
473 |
padding-right: 36px; // leave some space for counter at right side |
474 |
} |
475 |
|
476 |
.mfp-figure small { |
477 |
color: $caption-subtitle-color; |
478 |
display: block; |
479 |
font-size: 12px; |
480 |
line-height: 14px; |
481 |
} |
482 |
.mfp-image-holder .mfp-content { |
483 |
max-width: 100%; |
484 |
} |
485 |
|
486 |
.mfp-gallery .mfp-image-holder .mfp-figure { |
487 |
cursor: pointer; |
488 |
} |
489 |
|
490 |
|
491 |
@if $include-mobile-layout-for-image { |
492 |
|
493 |
@media screen and (max-width: 800px) and (orientation:landscape), screen and (max-height: 300px) { |
494 |
/** |
495 |
* Remove all paddings around the image on small screen |
496 |
*/ |
497 |
.mfp-img-mobile .mfp-image-holder { |
498 |
padding-left: 0; |
499 |
padding-right: 0; |
500 |
} |
501 |
.mfp-img-mobile img.mfp-img { |
502 |
padding: 0; |
503 |
} |
504 |
/* The shadow behind the image */ |
505 |
.mfp-img-mobile .mfp-figure:after { |
506 |
top: 0; |
507 |
bottom: 0; |
508 |
} |
509 |
|
510 |
.mfp-img-mobile .mfp-bottom-bar { |
511 |
background: rgba(0,0,0,0.6); |
512 |
bottom: 0; |
513 |
margin: 0; |
514 |
top: auto; |
515 |
padding: 3px 5px; |
516 |
position: fixed; |
517 |
-webkit-box-sizing: border-box; |
518 |
-moz-box-sizing: border-box; |
519 |
box-sizing: border-box; |
520 |
} |
521 |
.mfp-img-mobile .mfp-bottom-bar:empty { |
522 |
padding: 0; |
523 |
} |
524 |
.mfp-img-mobile .mfp-counter { |
525 |
right: 5px; |
526 |
top: 3px; |
527 |
} |
528 |
.mfp-img-mobile .mfp-close { |
529 |
top: 0; |
530 |
right: 0; |
531 |
width: 35px; |
532 |
height: 35px; |
533 |
line-height: 35px; |
534 |
background: rgba(0, 0, 0, 0.6); |
535 |
position: fixed; |
536 |
text-align: center; |
537 |
padding: 0; |
538 |
} |
539 |
.mfp-img-mobile .mfp-figure small { |
540 |
display: inline; |
541 |
margin-left: 5px; |
542 |
} |
543 |
} |
544 |
} |
545 |
|
546 |
} |
547 |
|
548 |
|
549 |
|
550 |
// Scale navigation arrows and reduce padding from sides |
551 |
@media all and (max-width: 900px) { |
552 |
.mfp-arrow { |
553 |
-webkit-transform: scale(0.75); |
554 |
transform: scale(0.75); |
555 |
} |
556 |
.mfp-arrow-left { |
557 |
-webkit-transform-origin: 0; |
558 |
transform-origin: 0; |
559 |
} |
560 |
.mfp-arrow-right { |
561 |
-webkit-transform-origin: 100%; |
562 |
transform-origin: 100%; |
563 |
} |
564 |
.mfp-container { |
565 |
padding-left: $popup-padding-left-mobile; |
566 |
padding-right: $popup-padding-left-mobile; |
567 |
} |
568 |
} |
569 |
|
570 |
|
571 |
|
572 |
// IE7 support |
573 |
// Styles that make popup look nicier in old IE |
574 |
@if $IE7support { |
575 |
.mfp-ie7 { |
576 |
.mfp-img { |
577 |
padding: 0; |
578 |
} |
579 |
.mfp-bottom-bar { |
580 |
width: 600px; |
581 |
left: 50%; |
582 |
margin-left: -300px; |
583 |
margin-top: 5px; |
584 |
padding-bottom: 5px; |
585 |
} |
586 |
.mfp-container { |
587 |
padding: 0; |
588 |
} |
589 |
.mfp-content { |
590 |
padding-top: 44px; |
591 |
} |
592 |
.mfp-close { |
593 |
top: 0; |
594 |
right: 0; |
595 |
padding-top: 0; |
596 |
} |
597 |
} |
598 |
} |