pswp-rails 4.1.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (36) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +3 -0
  3. data/LICENSE +21 -0
  4. data/README.md +23 -0
  5. data/lib/pswp-rails.rb +23 -0
  6. data/lib/pswp-rails/version.rb +3 -0
  7. data/pswp-rails.gemspec +18 -0
  8. data/vendor/assets/images/photoswipe/LICENSE +21 -0
  9. data/vendor/assets/images/photoswipe/default-skin/default-skin-svg.sketch/Data +0 -0
  10. data/vendor/assets/images/photoswipe/default-skin/default-skin-svg.sketch/metadata +18 -0
  11. data/vendor/assets/images/photoswipe/default-skin/default-skin-svg.sketch/version +1 -0
  12. data/vendor/assets/images/photoswipe/default-skin/default-skin.png +0 -0
  13. data/vendor/assets/images/photoswipe/default-skin/default-skin.psd +0 -0
  14. data/vendor/assets/images/photoswipe/default-skin/default-skin.svg +1 -0
  15. data/vendor/assets/images/photoswipe/default-skin/preloader.gif +0 -0
  16. data/vendor/assets/javascripts/photoswipe.js +2 -0
  17. data/vendor/assets/javascripts/photoswipe/LICENSE +21 -0
  18. data/vendor/assets/javascripts/photoswipe/index.js +2 -0
  19. data/vendor/assets/javascripts/photoswipe/photoswipe-ui-default.js +861 -0
  20. data/vendor/assets/javascripts/photoswipe/photoswipe.js +3718 -0
  21. data/vendor/assets/stylesheets/photoswipe-compass.scss +3 -0
  22. data/vendor/assets/stylesheets/photoswipe-compass/LICENSE +21 -0
  23. data/vendor/assets/stylesheets/photoswipe-compass/_main-settings.scss +9 -0
  24. data/vendor/assets/stylesheets/photoswipe-compass/_main.scss +203 -0
  25. data/vendor/assets/stylesheets/photoswipe-compass/default-skin/_default-skin.scss +587 -0
  26. data/vendor/assets/stylesheets/photoswipe-eskimo.scss +3 -0
  27. data/vendor/assets/stylesheets/photoswipe-eskimo/LICENSE +21 -0
  28. data/vendor/assets/stylesheets/photoswipe-eskimo/_main-settings.scss +9 -0
  29. data/vendor/assets/stylesheets/photoswipe-eskimo/_main.scss +194 -0
  30. data/vendor/assets/stylesheets/photoswipe-eskimo/default-skin/_default-skin.scss +585 -0
  31. data/vendor/assets/stylesheets/photoswipe.scss +3 -0
  32. data/vendor/assets/stylesheets/photoswipe/LICENSE +21 -0
  33. data/vendor/assets/stylesheets/photoswipe/_main-settings.scss +9 -0
  34. data/vendor/assets/stylesheets/photoswipe/_main.scss +209 -0
  35. data/vendor/assets/stylesheets/photoswipe/default-skin/_default-skin.scss +588 -0
  36. metadata +79 -0
@@ -0,0 +1,3 @@
1
+ @import './photoswipe-compass/main-settings.scss';
2
+ @import './photoswipe-compass/main.scss';
3
+ @import './photoswipe-compass/default-skin/default-skin.scss';
@@ -0,0 +1,21 @@
1
+ The MIT License (MIT)
2
+
3
+ Copyright (c) 2014-2016 Dmitry Semenov, http://dimsemenov.com
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in
13
+ all copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21
+ THE SOFTWARE.
@@ -0,0 +1,9 @@
1
+ $pswp__show-hide-transition-duration: 333ms !default;
2
+ $pswp__controls-transition-duration: 333ms !default;
3
+ $pswp__background-color: #000 !default;
4
+ $pswp__placeholder-color: #222 !default;
5
+ $pswp__box-sizing-border-box: true !default; // disable .pswp * { box-sizing:border-box } (in case you already have it in your site css)
6
+ $pswp__root-z-index: 1500 !default;
7
+ $pswp__assets-path: '' !default; // path to skin assets folder (preloader, PNG and SVG sprite)
8
+ $pswp__error-text-color: #CCC !default; // "Image not loaded" text color
9
+ $pswp__include-minimal-style: true !default;
@@ -0,0 +1,203 @@
1
+ /*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */
2
+
3
+ /*
4
+ Styles for basic PhotoSwipe functionality (sliding area, open/close transitions)
5
+ */
6
+
7
+ // PhotoSwipe uses Autoprefixer, so vendor prefixed are added automatically when needed.
8
+
9
+ @import "main-settings";
10
+
11
+
12
+ /* pswp = photoswipe */
13
+ .pswp {
14
+ display: none;
15
+ position:absolute;
16
+ width: 100%;
17
+ height: 100%;
18
+ left:0;
19
+ top:0;
20
+ overflow: hidden;
21
+ -ms-touch-action: none;
22
+ touch-action: none;
23
+ z-index: $pswp__root-z-index;
24
+ -webkit-text-size-adjust: 100%;
25
+ /* create separate layer, to avoid paint on window.onscroll in webkit/blink */
26
+ @include backface-visibility(hidden);
27
+ outline: none;
28
+
29
+ @if $pswp__box-sizing-border-box == true {
30
+ * {
31
+ @include box-sizing(border-box);
32
+ }
33
+ }
34
+
35
+ img {
36
+ max-width: none;
37
+ }
38
+ }
39
+
40
+ /* style is added when JS option showHideOpacity is set to true */
41
+ .pswp--animate_opacity {
42
+ /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
43
+ @include opacity(0);
44
+ will-change:opacity;
45
+ /* for open/close transition */
46
+ @include transition(opacity $pswp__show-hide-transition-duration cubic-bezier(.4,0,.22,1));
47
+ }
48
+
49
+ .pswp--open {
50
+ display: block;
51
+ }
52
+
53
+ .pswp--zoom-allowed .pswp__img {
54
+ /* autoprefixer: off */
55
+ cursor: -webkit-zoom-in;
56
+ cursor: -moz-zoom-in;
57
+ cursor: zoom-in;
58
+ }
59
+
60
+ .pswp--zoomed-in .pswp__img {
61
+ /* autoprefixer: off */
62
+ cursor: -webkit-grab;
63
+ cursor: -moz-grab;
64
+ cursor: grab;
65
+ }
66
+
67
+ .pswp--dragging .pswp__img {
68
+ /* autoprefixer: off */
69
+ cursor: -webkit-grabbing;
70
+ cursor: -moz-grabbing;
71
+ cursor: grabbing;
72
+ }
73
+
74
+ /*
75
+ Background is added as a separate element.
76
+ As animating opacity is much faster than animating rgba() background-color.
77
+ */
78
+ .pswp__bg {
79
+ position: absolute;
80
+ left: 0;
81
+ top: 0;
82
+ width: 100%;
83
+ height: 100%;
84
+ background: $pswp__background-color;
85
+ @include opacity(0);
86
+ @include backface-visibility(hidden);
87
+ will-change:opacity;
88
+ }
89
+
90
+ .pswp__scroll-wrap {
91
+ position: absolute;
92
+ left: 0;
93
+ top: 0;
94
+ width: 100%;
95
+ height: 100%;
96
+ overflow:hidden;
97
+ }
98
+
99
+ .pswp__container,
100
+ .pswp__zoom-wrap {
101
+ -ms-touch-action: none;
102
+ touch-action: none;
103
+ position: absolute;
104
+ left: 0;
105
+ right: 0;
106
+ top: 0;
107
+ bottom: 0;
108
+ }
109
+
110
+ /* Prevent selection and tap highlights */
111
+ .pswp__container,
112
+ .pswp__img {
113
+ @include user-select(none);
114
+ -webkit-tap-highlight-color: rgba(0,0,0,0);
115
+ -webkit-touch-callout: none;
116
+ }
117
+
118
+ .pswp__zoom-wrap {
119
+ position: absolute;
120
+ width: 100%;
121
+ @include transform-origin(left, top);
122
+ /* for open/close transition */
123
+ @include transition(transform $pswp__show-hide-transition-duration cubic-bezier(.4,0,.22,1));
124
+ }
125
+
126
+ .pswp__bg {
127
+ will-change: opacity;
128
+ /* for open/close transition */
129
+ @include transition(opacity $pswp__show-hide-transition-duration cubic-bezier(.4,0,.22,1));
130
+ }
131
+
132
+ .pswp--animated-in {
133
+ .pswp__bg,
134
+ .pswp__zoom-wrap {
135
+ @include transition(none);
136
+ }
137
+ }
138
+
139
+ .pswp__container,
140
+ .pswp__zoom-wrap {
141
+ @include backface-visibility(hidden);
142
+ }
143
+
144
+ .pswp__item {
145
+ position: absolute;
146
+ left: 0;
147
+ right: 0;
148
+ top: 0;
149
+ bottom: 0;
150
+ overflow: hidden;
151
+ }
152
+
153
+ .pswp__img {
154
+ position: absolute;
155
+ width: auto;
156
+ height: auto;
157
+ top: 0;
158
+ left: 0;
159
+ }
160
+
161
+ /*
162
+ stretched thumbnail or div placeholder element (see below)
163
+ style is added to avoid flickering in webkit/blink when layers overlap
164
+ */
165
+ .pswp__img--placeholder {
166
+ @include backface-visibility(hidden);
167
+ }
168
+
169
+ /*
170
+ div element that matches size of large image
171
+ large image loads on top of it
172
+ */
173
+ .pswp__img--placeholder--blank {
174
+ background: $pswp__placeholder-color;
175
+ }
176
+
177
+ .pswp--ie .pswp__img {
178
+ width: 100% !important;
179
+ height: auto !important;
180
+ left: 0;
181
+ top: 0;
182
+ }
183
+
184
+ /*
185
+ Error message appears when image is not loaded
186
+ (JS option errorMsg controls markup)
187
+ */
188
+ .pswp__error-msg {
189
+ position: absolute;
190
+ left: 0;
191
+ top: 50%;
192
+ width: 100%;
193
+ text-align: center;
194
+ font-size: 14px;
195
+ line-height: 16px;
196
+ margin-top: -8px;
197
+ color: $pswp__error-text-color;
198
+ }
199
+
200
+ .pswp__error-msg a {
201
+ color: $pswp__error-text-color;
202
+ text-decoration: underline;
203
+ }
@@ -0,0 +1,587 @@
1
+ /*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */
2
+
3
+ /*
4
+
5
+ Contents:
6
+
7
+ 1. Buttons
8
+ 2. Share modal and links
9
+ 3. Index indicator ("1 of X" counter)
10
+ 4. Caption
11
+ 5. Loading indicator
12
+ 6. Additional styles (root element, top bar, idle state, hidden state, etc.)
13
+
14
+ */
15
+
16
+ // PhotoSwipe uses Autoprefixer, so vendor prefixed are added automatically when needed.
17
+
18
+
19
+
20
+ @import "../main-settings";
21
+
22
+
23
+ /*
24
+
25
+ 1. Buttons
26
+
27
+ */
28
+
29
+ /* <button> css reset */
30
+ .pswp__button {
31
+ width: 44px;
32
+ height: 44px;
33
+ position: relative;
34
+ background: none;
35
+ cursor: pointer;
36
+ overflow: visible;
37
+ @include appearance(none);
38
+ display: block;
39
+ border: 0;
40
+ padding: 0;
41
+ margin: 0;
42
+ float: right;
43
+ @include opacity(0.75);
44
+ @include transition(opacity 0.2s);
45
+ @include box-shadow(none);
46
+
47
+ &:focus,
48
+ &:hover {
49
+ @include opacity(1);
50
+ }
51
+
52
+ &:active {
53
+ outline: none;
54
+ @include opacity(0.9);
55
+ }
56
+
57
+ &::-moz-focus-inner {
58
+ padding: 0;
59
+ border: 0
60
+ }
61
+ }
62
+
63
+ /* pswp__ui--over-close class it added when mouse is over element that should close gallery */
64
+ .pswp__ui--over-close .pswp__button--close {
65
+ @include opacity(1);
66
+ }
67
+
68
+ .pswp__button,
69
+ .pswp__button--arrow--left:before,
70
+ .pswp__button--arrow--right:before {
71
+ background: asset-data-url('photoswipe/default-skin/default-skin.png') 0 0 no-repeat;
72
+ background-size: 264px 88px;
73
+ width: 44px;
74
+ height: 44px;
75
+ }
76
+
77
+ @media (-webkit-min-device-pixel-ratio: 1.1), (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
78
+
79
+ /* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */
80
+ .pswp--svg .pswp__button,
81
+ .pswp--svg .pswp__button--arrow--left:before,
82
+ .pswp--svg .pswp__button--arrow--right:before {
83
+ background-image: asset-data-url('photoswipe/default-skin/default-skin.svg');
84
+ }
85
+
86
+ .pswp--svg .pswp__button--arrow--left,
87
+ .pswp--svg .pswp__button--arrow--right {
88
+ background: none;
89
+ }
90
+ }
91
+
92
+ .pswp__button--close {
93
+ background-position: 0 -44px;
94
+ }
95
+
96
+ .pswp__button--share {
97
+ background-position: -44px -44px;
98
+ }
99
+
100
+ .pswp__button--fs {
101
+ display: none;
102
+ }
103
+
104
+ .pswp--supports-fs .pswp__button--fs {
105
+ display: block;
106
+ }
107
+
108
+ .pswp--fs .pswp__button--fs {
109
+ background-position: -44px 0;
110
+ }
111
+
112
+ .pswp__button--zoom {
113
+ display: none;
114
+ background-position: -88px 0;
115
+ }
116
+
117
+ .pswp--zoom-allowed .pswp__button--zoom {
118
+ display: block;
119
+ }
120
+
121
+ .pswp--zoomed-in .pswp__button--zoom {
122
+ background-position: -132px 0;
123
+ }
124
+
125
+ /* no arrows on touch screens */
126
+ .pswp--touch {
127
+ .pswp__button--arrow--left,
128
+ .pswp__button--arrow--right {
129
+ visibility: hidden;
130
+ }
131
+ }
132
+
133
+ /*
134
+ Arrow buttons hit area
135
+ (icon is added to :before pseudo-element)
136
+ */
137
+ .pswp__button--arrow--left,
138
+ .pswp__button--arrow--right {
139
+ background: none;
140
+ top: 50%;
141
+ margin-top: -50px;
142
+ width: 70px;
143
+ height: 100px;
144
+ position: absolute;
145
+ }
146
+
147
+ .pswp__button--arrow--left {
148
+ left: 0;
149
+ }
150
+
151
+ .pswp__button--arrow--right {
152
+ right: 0;
153
+ }
154
+
155
+ .pswp__button--arrow--left:before,
156
+ .pswp__button--arrow--right:before {
157
+ content: '';
158
+ top: 35px;
159
+ background-color: rgba(0,0,0,0.3);
160
+ height: 30px;
161
+ width: 32px;
162
+ position: absolute;
163
+ }
164
+
165
+ .pswp__button--arrow--left:before {
166
+ left: 6px;
167
+ background-position: -138px -44px;
168
+ }
169
+
170
+ .pswp__button--arrow--right:before {
171
+ right: 6px;
172
+ background-position: -94px -44px;
173
+ }
174
+
175
+
176
+ /*
177
+
178
+ 2. Share modal/popup and links
179
+
180
+ */
181
+
182
+ .pswp__counter,
183
+ .pswp__share-modal {
184
+ @include user-select(none);
185
+ }
186
+
187
+ .pswp__share-modal {
188
+ display: block;
189
+ background: rgba(0, 0, 0, 0.5);
190
+ width: 100%;
191
+ height: 100%;
192
+ top: 0;
193
+ left: 0;
194
+ padding: 10px;
195
+ position: absolute;
196
+ z-index: $pswp__root-z-index + 100;
197
+ @include opacity(0);
198
+ @include transition(opacity 0.25s ease-out);
199
+ @include backface-visibility(hidden);
200
+ will-change: opacity;
201
+ }
202
+
203
+ .pswp__share-modal--hidden {
204
+ display: none;
205
+ }
206
+
207
+ .pswp__share-tooltip {
208
+ z-index: $pswp__root-z-index + 120;
209
+ position: absolute;
210
+ background: #FFF;
211
+ top: 56px;
212
+ @include border-radius(2px);
213
+ display: block;
214
+ width: auto;
215
+ right: 44px;
216
+ @include box-shadow(0 2px 5px rgba(0, 0, 0, 0.25));
217
+ @include transform(translateY(6px));
218
+ @include transition(transform 0.25s);
219
+ @include backface-visibility(hidden);
220
+ will-change: transform;
221
+
222
+ a {
223
+ display: block;
224
+ padding: 8px 12px;
225
+ color: #000;
226
+ text-decoration: none;
227
+ font-size: 14px;
228
+ line-height: 18px;
229
+
230
+ &:hover {
231
+ text-decoration: none;
232
+ color: #000;
233
+ }
234
+
235
+
236
+ &:first-child {
237
+ /* round corners on the first/last list item */
238
+ @include border-radius(2px 2px 0 0);
239
+ }
240
+
241
+ &:last-child {
242
+ @include border-radius(0 0 2px 2px);
243
+ }
244
+ }
245
+ }
246
+
247
+ .pswp__share-modal--fade-in {
248
+ @include opacity(1);
249
+
250
+ .pswp__share-tooltip {
251
+ @include transform(translateY(0));
252
+ }
253
+ }
254
+
255
+ /* increase size of share links on touch devices */
256
+ .pswp--touch .pswp__share-tooltip a {
257
+ padding: 16px 12px;
258
+ }
259
+
260
+ a.pswp__share--facebook {
261
+ &:before {
262
+ content: '';
263
+ display: block;
264
+ width: 0;
265
+ height: 0;
266
+ position: absolute;
267
+ top: -12px;
268
+ right: 15px;
269
+ border: 6px solid rgba(0, 0, 0, 0);
270
+ border-bottom-color: #FFF;
271
+ -webkit-pointer-events: none;
272
+ -moz-pointer-events: none;
273
+ pointer-events: none;
274
+
275
+ }
276
+
277
+ &:hover {
278
+ background: #3E5C9A;
279
+ color: #FFF;
280
+
281
+ &:before {
282
+ border-bottom-color: #3E5C9A;
283
+ }
284
+ }
285
+ }
286
+
287
+ a.pswp__share--twitter {
288
+ &:hover {
289
+ background: #55ACEE;
290
+ color: #FFF;
291
+ }
292
+ }
293
+
294
+ a.pswp__share--pinterest {
295
+ &:hover {
296
+ background: #CCC;
297
+ color: #CE272D;
298
+ }
299
+ }
300
+
301
+ a.pswp__share--download {
302
+ &:hover {
303
+ background: #DDD;
304
+ }
305
+ }
306
+
307
+
308
+ /*
309
+
310
+ 3. Index indicator ("1 of X" counter)
311
+
312
+ */
313
+
314
+ .pswp__counter {
315
+ position: absolute;
316
+ left: 0;
317
+ top: 0;
318
+ height: 44px;
319
+ font-size: 13px;
320
+ line-height: 44px;
321
+ color: #FFF;
322
+ @include opacity(0.75);
323
+ padding: 0 10px;
324
+ }
325
+
326
+
327
+ /*
328
+
329
+ 4. Caption
330
+
331
+ */
332
+
333
+ .pswp__caption {
334
+ position: absolute;
335
+ left: 0;
336
+ bottom: 0;
337
+ width: 100%;
338
+ min-height: 44px;
339
+
340
+ small {
341
+ font-size: 11px;
342
+ color: #BBB;
343
+ }
344
+ }
345
+
346
+ .pswp__caption__center {
347
+ text-align: left;
348
+ max-width: 420px;
349
+ margin: 0 auto;
350
+ font-size: 13px;
351
+ padding: 10px;
352
+ line-height: 20px;
353
+ color: #CCC;
354
+ }
355
+
356
+ .pswp__caption--empty {
357
+ display: none;
358
+ }
359
+
360
+ /* Fake caption element, used to calculate height of next/prev image */
361
+ .pswp__caption--fake {
362
+ visibility: hidden;
363
+ }
364
+
365
+
366
+ /*
367
+
368
+ 5. Loading indicator (preloader)
369
+
370
+ You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR
371
+
372
+ */
373
+
374
+ .pswp__preloader {
375
+ width: 44px;
376
+ height: 44px;
377
+ position: absolute;
378
+ top: 0;
379
+ left: 50%;
380
+ margin-left: -22px;
381
+ @include opacity(0);
382
+ @include transition(opacity 0.25s ease-out);
383
+ will-change: opacity;
384
+ direction: ltr;
385
+ }
386
+
387
+ .pswp__preloader__icn {
388
+ width: 20px;
389
+ height: 20px;
390
+ margin: 12px;
391
+ }
392
+
393
+ .pswp__preloader--active {
394
+ @include opacity(1);
395
+
396
+ .pswp__preloader__icn {
397
+ /* We use .gif in browsers that don't support CSS animation */
398
+ background: asset-data-url('photoswipe/default-skin/preloader.gif') 0 0 no-repeat;
399
+ }
400
+ }
401
+
402
+ .pswp--css_animation {
403
+ .pswp__preloader--active {
404
+ @include opacity(1);
405
+
406
+ .pswp__preloader__icn {
407
+ @include animation(clockwise 500ms linear infinite);
408
+ }
409
+
410
+ .pswp__preloader__donut {
411
+ @include animation(donut-rotate 1000ms cubic-bezier(.4,0,.22,1) infinite);
412
+ }
413
+ }
414
+
415
+ .pswp__preloader__icn {
416
+ background: none;
417
+ @include opacity(0);
418
+ width: 14px;
419
+ height: 14px;
420
+ position: absolute;
421
+ left: 15px;
422
+ top: 15px;
423
+ margin: 0;
424
+ }
425
+
426
+
427
+ .pswp__preloader__cut {
428
+ /*
429
+ The idea of animating inner circle is based on Polymer ("material") loading indicator
430
+ by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html
431
+ */
432
+ position: relative;
433
+ width: 7px;
434
+ height: 14px;
435
+ overflow: hidden;
436
+ }
437
+
438
+ .pswp__preloader__donut {
439
+ @include box-sizing(border-box);
440
+ width: 14px;
441
+ height: 14px;
442
+ border: 2px solid #FFF;
443
+ @include border-radius(50%);
444
+ border-left-color: transparent;
445
+ border-bottom-color: transparent;
446
+ position: absolute;
447
+ top: 0;
448
+ left: 0;
449
+ background: none;
450
+ margin: 0;
451
+ }
452
+ }
453
+
454
+ @media screen and (max-width: 1024px) {
455
+ .pswp__preloader {
456
+ position: relative;
457
+ left: auto;
458
+ top: auto;
459
+ margin: 0;
460
+ float: right;
461
+ }
462
+ }
463
+
464
+ @include keyframes(clockwise) {
465
+ 0% { @include transform(rotate(0deg)) }
466
+ 100% { @include transform(rotate(360deg)) }
467
+ }
468
+
469
+ @include keyframes(donut-rotate) {
470
+ 0% { @include transform(rotate(0)) }
471
+ 50% { @include transform(rotate(-140deg)) }
472
+ 100% { @include transform(rotate(0)) }
473
+ }
474
+
475
+
476
+ /*
477
+
478
+ 6. Additional styles
479
+
480
+ */
481
+
482
+ /* root element of UI */
483
+ .pswp__ui {
484
+ -webkit-font-smoothing: auto;
485
+ visibility: visible;
486
+ @include opacity(1);
487
+ z-index: $pswp__root-z-index + 50;
488
+ }
489
+
490
+ /* top black bar with buttons and "1 of X" indicator */
491
+ .pswp__top-bar {
492
+ position: absolute;
493
+ left: 0;
494
+ top: 0;
495
+ height: 44px;
496
+ width: 100%;
497
+ }
498
+
499
+ .pswp__caption,
500
+ .pswp__top-bar,
501
+ .pswp--has_mouse .pswp__button--arrow--left,
502
+ .pswp--has_mouse .pswp__button--arrow--right {
503
+ @include backface-visibility(hidden);
504
+ will-change: opacity;
505
+ @include transition(opacity $pswp__controls-transition-duration cubic-bezier(.4,0,.22,1));
506
+ }
507
+
508
+ /* pswp--has_mouse class is added only when two subsequent mousemove events occur */
509
+ .pswp--has_mouse {
510
+ .pswp__button--arrow--left,
511
+ .pswp__button--arrow--right {
512
+ visibility: visible;
513
+ }
514
+ }
515
+
516
+ .pswp__top-bar,
517
+ .pswp__caption {
518
+ background-color: rgba(0,0,0,0.5);
519
+ }
520
+
521
+ /* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */
522
+ .pswp__ui--fit {
523
+ .pswp__top-bar,
524
+ .pswp__caption {
525
+ background-color: rgba(0,0,0,0.3);
526
+ }
527
+ }
528
+
529
+ /* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */
530
+
531
+ .pswp__ui--idle {
532
+ .pswp__top-bar {
533
+ @include opacity(0);
534
+ }
535
+
536
+ .pswp__button--arrow--left,
537
+ .pswp__button--arrow--right {
538
+ @include opacity(0);
539
+ }
540
+ }
541
+
542
+ /*
543
+ pswp__ui--hidden class is added when controls are hidden
544
+ e.g. when user taps to toggle visibility of controls
545
+ */
546
+ .pswp__ui--hidden {
547
+ .pswp__top-bar,
548
+ .pswp__caption,
549
+ .pswp__button--arrow--left,
550
+ .pswp__button--arrow--right {
551
+ /* Force paint & create composition layer for controls. */
552
+ @include opacity(0.001);
553
+ }
554
+ }
555
+
556
+ /* pswp__ui--one-slide class is added when there is just one item in gallery */
557
+ .pswp__ui--one-slide {
558
+ .pswp__button--arrow--left,
559
+ .pswp__button--arrow--right,
560
+ .pswp__counter {
561
+ display: none;
562
+ }
563
+ }
564
+
565
+ .pswp__element--disabled {
566
+ display: none !important;
567
+ }
568
+
569
+ @if $pswp__include-minimal-style == true {
570
+ .pswp--minimal--dark {
571
+ .pswp__top-bar {
572
+ background: none;
573
+ }
574
+ }
575
+ }
576
+
577
+
578
+
579
+
580
+
581
+
582
+
583
+
584
+
585
+
586
+
587
+