Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / sass / magnific-popup.scss @ eda4930e

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
}