Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (12.1 kB)

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