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/main-settings.scss';
2
+ @import './photoswipe/main.scss';
3
+ @import './photoswipe/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,209 @@
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
+ -webkit-backface-visibility: hidden;
27
+ outline: none;
28
+
29
+ @if $pswp__box-sizing-border-box == true {
30
+ * {
31
+ 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
+ opacity: 0.001;
44
+ will-change:opacity;
45
+ /* for open/close transition */
46
+ 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
+ opacity: 0;
86
+ -webkit-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
+ -webkit-user-select: none;
114
+ -moz-user-select: none;
115
+ user-select: none;
116
+ -webkit-tap-highlight-color: rgba(0,0,0,0);
117
+ -webkit-touch-callout: none;
118
+ }
119
+
120
+ .pswp__zoom-wrap {
121
+ position: absolute;
122
+ width: 100%;
123
+ -webkit-transform-origin: left top;
124
+ -moz-transform-origin: left top;
125
+ -ms-transform-origin: left top;
126
+ transform-origin: left top;
127
+ /* for open/close transition */
128
+ transition: transform $pswp__show-hide-transition-duration cubic-bezier(.4,0,.22,1);
129
+ }
130
+
131
+ .pswp__bg {
132
+ will-change: opacity;
133
+ /* for open/close transition */
134
+ transition: opacity $pswp__show-hide-transition-duration cubic-bezier(.4,0,.22,1);
135
+ }
136
+
137
+ .pswp--animated-in {
138
+ .pswp__bg,
139
+ .pswp__zoom-wrap {
140
+ -webkit-transition: none;
141
+ transition: none;
142
+ }
143
+ }
144
+
145
+ .pswp__container,
146
+ .pswp__zoom-wrap {
147
+ -webkit-backface-visibility: hidden;
148
+ }
149
+
150
+ .pswp__item {
151
+ position: absolute;
152
+ left: 0;
153
+ right: 0;
154
+ top: 0;
155
+ bottom: 0;
156
+ overflow: hidden;
157
+ }
158
+
159
+ .pswp__img {
160
+ position: absolute;
161
+ width: auto;
162
+ height: auto;
163
+ top: 0;
164
+ left: 0;
165
+ }
166
+
167
+ /*
168
+ stretched thumbnail or div placeholder element (see below)
169
+ style is added to avoid flickering in webkit/blink when layers overlap
170
+ */
171
+ .pswp__img--placeholder {
172
+ -webkit-backface-visibility: hidden;
173
+ }
174
+
175
+ /*
176
+ div element that matches size of large image
177
+ large image loads on top of it
178
+ */
179
+ .pswp__img--placeholder--blank {
180
+ background: $pswp__placeholder-color;
181
+ }
182
+
183
+ .pswp--ie .pswp__img {
184
+ width: 100% !important;
185
+ height: auto !important;
186
+ left: 0;
187
+ top: 0;
188
+ }
189
+
190
+ /*
191
+ Error message appears when image is not loaded
192
+ (JS option errorMsg controls markup)
193
+ */
194
+ .pswp__error-msg {
195
+ position: absolute;
196
+ left: 0;
197
+ top: 50%;
198
+ width: 100%;
199
+ text-align: center;
200
+ font-size: 14px;
201
+ line-height: 16px;
202
+ margin-top: -8px;
203
+ color: $pswp__error-text-color;
204
+ }
205
+
206
+ .pswp__error-msg a {
207
+ color: $pswp__error-text-color;
208
+ text-decoration: underline;
209
+ }
@@ -0,0 +1,588 @@
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
+ -webkit-appearance: none;
38
+ display: block;
39
+ border: 0;
40
+ padding: 0;
41
+ margin: 0;
42
+ float: right;
43
+ opacity: 0.75;
44
+ transition: opacity 0.2s;
45
+ box-shadow: none;
46
+
47
+ &:focus,
48
+ &:hover {
49
+ opacity: 1;
50
+ }
51
+
52
+ &:active {
53
+ outline: none;
54
+ 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
+ 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
+ -webkit-user-select: none;
185
+ -moz-user-select: none;
186
+ user-select: none;
187
+ }
188
+
189
+ .pswp__share-modal {
190
+ display: block;
191
+ background: rgba(0, 0, 0, 0.5);
192
+ width: 100%;
193
+ height: 100%;
194
+ top: 0;
195
+ left: 0;
196
+ padding: 10px;
197
+ position: absolute;
198
+ z-index: $pswp__root-z-index + 100;
199
+ opacity: 0;
200
+ transition: opacity 0.25s ease-out;
201
+ -webkit-backface-visibility: hidden;
202
+ will-change: opacity;
203
+ }
204
+
205
+ .pswp__share-modal--hidden {
206
+ display: none;
207
+ }
208
+
209
+ .pswp__share-tooltip {
210
+ z-index: $pswp__root-z-index + 120;
211
+ position: absolute;
212
+ background: #FFF;
213
+ top: 56px;
214
+ border-radius: 2px;
215
+ display: block;
216
+ width: auto;
217
+ right: 44px;
218
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
219
+ transform: translateY(6px);
220
+ transition: transform 0.25s;
221
+ -webkit-backface-visibility: hidden;
222
+ will-change: transform;
223
+
224
+ a {
225
+ display: block;
226
+ padding: 8px 12px;
227
+ color: #000;
228
+ text-decoration: none;
229
+ font-size: 14px;
230
+ line-height: 18px;
231
+
232
+ &:hover {
233
+ text-decoration: none;
234
+ color: #000;
235
+ }
236
+
237
+
238
+ &:first-child {
239
+ /* round corners on the first/last list item */
240
+ border-radius: 2px 2px 0 0;
241
+ }
242
+
243
+ &:last-child {
244
+ border-radius: 0 0 2px 2px;
245
+ }
246
+ }
247
+ }
248
+
249
+ .pswp__share-modal--fade-in {
250
+ opacity: 1;
251
+
252
+ .pswp__share-tooltip {
253
+ transform: translateY(0);
254
+ }
255
+ }
256
+
257
+ /* increase size of share links on touch devices */
258
+ .pswp--touch .pswp__share-tooltip a {
259
+ padding: 16px 12px;
260
+ }
261
+
262
+ a.pswp__share--facebook {
263
+ &:before {
264
+ content: '';
265
+ display: block;
266
+ width: 0;
267
+ height: 0;
268
+ position: absolute;
269
+ top: -12px;
270
+ right: 15px;
271
+ border: 6px solid rgba(0, 0, 0, 0);
272
+ border-bottom-color: #FFF;
273
+ -webkit-pointer-events: none;
274
+ -moz-pointer-events: none;
275
+ pointer-events: none;
276
+ }
277
+
278
+ &:hover {
279
+ background: #3E5C9A;
280
+ color: #FFF;
281
+
282
+ &:before {
283
+ border-bottom-color: #3E5C9A;
284
+ }
285
+ }
286
+ }
287
+
288
+ a.pswp__share--twitter {
289
+ &:hover {
290
+ background: #55ACEE;
291
+ color: #FFF;
292
+ }
293
+ }
294
+
295
+ a.pswp__share--pinterest {
296
+ &:hover {
297
+ background: #CCC;
298
+ color: #CE272D;
299
+ }
300
+ }
301
+
302
+ a.pswp__share--download {
303
+ &:hover {
304
+ background: #DDD;
305
+ }
306
+ }
307
+
308
+
309
+ /*
310
+
311
+ 3. Index indicator ("1 of X" counter)
312
+
313
+ */
314
+
315
+ .pswp__counter {
316
+ position: absolute;
317
+ left: 0;
318
+ top: 0;
319
+ height: 44px;
320
+ font-size: 13px;
321
+ line-height: 44px;
322
+ color: #FFF;
323
+ opacity: 0.75;
324
+ padding: 0 10px;
325
+ }
326
+
327
+
328
+ /*
329
+
330
+ 4. Caption
331
+
332
+ */
333
+
334
+ .pswp__caption {
335
+ position: absolute;
336
+ left: 0;
337
+ bottom: 0;
338
+ width: 100%;
339
+ min-height: 44px;
340
+
341
+ small {
342
+ font-size: 11px;
343
+ color: #BBB;
344
+ }
345
+ }
346
+
347
+ .pswp__caption__center {
348
+ text-align: left;
349
+ max-width: 420px;
350
+ margin: 0 auto;
351
+ font-size: 13px;
352
+ padding: 10px;
353
+ line-height: 20px;
354
+ color: #CCC;
355
+ }
356
+
357
+ .pswp__caption--empty {
358
+ display: none;
359
+ }
360
+
361
+ /* Fake caption element, used to calculate height of next/prev image */
362
+ .pswp__caption--fake {
363
+ visibility: hidden;
364
+ }
365
+
366
+
367
+ /*
368
+
369
+ 5. Loading indicator (preloader)
370
+
371
+ You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR
372
+
373
+ */
374
+
375
+ .pswp__preloader {
376
+ width: 44px;
377
+ height: 44px;
378
+ position: absolute;
379
+ top: 0;
380
+ left: 50%;
381
+ margin-left: -22px;
382
+ opacity: 0;
383
+ transition: opacity 0.25s ease-out;
384
+ will-change: opacity;
385
+ direction: ltr;
386
+ }
387
+
388
+ .pswp__preloader__icn {
389
+ width: 20px;
390
+ height: 20px;
391
+ margin: 12px;
392
+ }
393
+
394
+ .pswp__preloader--active {
395
+ opacity: 1;
396
+
397
+ .pswp__preloader__icn {
398
+ /* We use .gif in browsers that don't support CSS animation */
399
+ background: asset-data-url('photoswipe/preloader.gif') 0 0 no-repeat;
400
+ }
401
+ }
402
+
403
+ .pswp--css_animation {
404
+ .pswp__preloader--active {
405
+ opacity: 1;
406
+
407
+ .pswp__preloader__icn {
408
+ animation: clockwise 500ms linear infinite;
409
+ }
410
+
411
+ .pswp__preloader__donut {
412
+ animation: donut-rotate 1000ms cubic-bezier(.4,0,.22,1) infinite;
413
+ }
414
+ }
415
+
416
+ .pswp__preloader__icn {
417
+ background: none;
418
+ opacity: 0.75;
419
+ width: 14px;
420
+ height: 14px;
421
+ position: absolute;
422
+ left: 15px;
423
+ top: 15px;
424
+ margin: 0;
425
+ }
426
+
427
+
428
+ .pswp__preloader__cut {
429
+ /*
430
+ The idea of animating inner circle is based on Polymer ("material") loading indicator
431
+ by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html
432
+ */
433
+ position: relative;
434
+ width: 7px;
435
+ height: 14px;
436
+ overflow: hidden;
437
+ }
438
+
439
+ .pswp__preloader__donut {
440
+ box-sizing: border-box;
441
+ width: 14px;
442
+ height: 14px;
443
+ border: 2px solid #FFF;
444
+ border-radius: 50%;
445
+ border-left-color: transparent;
446
+ border-bottom-color: transparent;
447
+ position: absolute;
448
+ top: 0;
449
+ left: 0;
450
+ background: none;
451
+ margin: 0;
452
+ }
453
+ }
454
+
455
+ @media screen and (max-width: 1024px) {
456
+ .pswp__preloader {
457
+ position: relative;
458
+ left: auto;
459
+ top: auto;
460
+ margin: 0;
461
+ float: right;
462
+ }
463
+ }
464
+
465
+ @keyframes clockwise {
466
+ 0% { transform: rotate(0deg) }
467
+ 100% { transform: rotate(360deg) }
468
+ }
469
+
470
+ @keyframes donut-rotate {
471
+ 0% { transform: rotate(0) }
472
+ 50% { transform: rotate(-140deg) }
473
+ 100% { transform: rotate(0) }
474
+ }
475
+
476
+
477
+ /*
478
+
479
+ 6. Additional styles
480
+
481
+ */
482
+
483
+ /* root element of UI */
484
+ .pswp__ui {
485
+ -webkit-font-smoothing: auto;
486
+ visibility: visible;
487
+ opacity: 1;
488
+ z-index: $pswp__root-z-index + 50;
489
+ }
490
+
491
+ /* top black bar with buttons and "1 of X" indicator */
492
+ .pswp__top-bar {
493
+ position: absolute;
494
+ left: 0;
495
+ top: 0;
496
+ height: 44px;
497
+ width: 100%;
498
+ }
499
+
500
+ .pswp__caption,
501
+ .pswp__top-bar,
502
+ .pswp--has_mouse .pswp__button--arrow--left,
503
+ .pswp--has_mouse .pswp__button--arrow--right {
504
+ -webkit-backface-visibility: hidden;
505
+ will-change: opacity;
506
+ transition: opacity $pswp__controls-transition-duration cubic-bezier(.4,0,.22,1);
507
+ }
508
+
509
+ /* pswp--has_mouse class is added only when two subsequent mousemove events occur */
510
+ .pswp--has_mouse {
511
+ .pswp__button--arrow--left,
512
+ .pswp__button--arrow--right {
513
+ visibility: visible;
514
+ }
515
+ }
516
+
517
+ .pswp__top-bar,
518
+ .pswp__caption {
519
+ background-color: rgba(0,0,0,0.5);
520
+ }
521
+
522
+ /* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */
523
+ .pswp__ui--fit {
524
+ .pswp__top-bar,
525
+ .pswp__caption {
526
+ background-color: rgba(0,0,0,0.3);
527
+ }
528
+ }
529
+
530
+ /* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */
531
+
532
+ .pswp__ui--idle {
533
+ .pswp__top-bar {
534
+ opacity: 0;
535
+ }
536
+
537
+ .pswp__button--arrow--left,
538
+ .pswp__button--arrow--right {
539
+ opacity: 0;
540
+ }
541
+ }
542
+
543
+ /*
544
+ pswp__ui--hidden class is added when controls are hidden
545
+ e.g. when user taps to toggle visibility of controls
546
+ */
547
+ .pswp__ui--hidden {
548
+ .pswp__top-bar,
549
+ .pswp__caption,
550
+ .pswp__button--arrow--left,
551
+ .pswp__button--arrow--right {
552
+ /* Force paint & create composition layer for controls. */
553
+ opacity: 0.001;
554
+ }
555
+ }
556
+
557
+ /* pswp__ui--one-slide class is added when there is just one item in gallery */
558
+ .pswp__ui--one-slide {
559
+ .pswp__button--arrow--left,
560
+ .pswp__button--arrow--right,
561
+ .pswp__counter {
562
+ display: none;
563
+ }
564
+ }
565
+
566
+ .pswp__element--disabled {
567
+ display: none !important;
568
+ }
569
+
570
+ @if $pswp__include-minimal-style == true {
571
+ .pswp--minimal--dark {
572
+ .pswp__top-bar {
573
+ background: none;
574
+ }
575
+ }
576
+ }
577
+
578
+
579
+
580
+
581
+
582
+
583
+
584
+
585
+
586
+
587
+
588
+