pswp-rails 4.1.1.1 → 4.1.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,3 +0,0 @@
1
- @import './photoswipe-eskimo/main-settings.scss';
2
- @import './photoswipe-eskimo/main.scss';
3
- @import './photoswipe-eskimo/default-skin/default-skin.scss';
@@ -1,21 +0,0 @@
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.
@@ -1,9 +0,0 @@
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;
@@ -1,194 +0,0 @@
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
- @include 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
- opacity: 0.001;
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
- @include cursor(zoom-in);
55
- }
56
-
57
- .pswp--zoomed-in .pswp__img {
58
- @include cursor(grab);
59
- }
60
-
61
- .pswp--dragging .pswp__img {
62
- @include cursor(grabbing);
63
- }
64
-
65
- /*
66
- Background is added as a separate element.
67
- As animating opacity is much faster than animating rgba() background-color.
68
- */
69
- .pswp__bg {
70
- position: absolute;
71
- left: 0;
72
- top: 0;
73
- width: 100%;
74
- height: 100%;
75
- background: $pswp__background-color;
76
- opacity: 0;
77
- @include backface-visibility(hidden);
78
- will-change:opacity;
79
- }
80
-
81
- .pswp__scroll-wrap {
82
- position: absolute;
83
- left: 0;
84
- top: 0;
85
- width: 100%;
86
- height: 100%;
87
- overflow:hidden;
88
- }
89
-
90
- .pswp__container,
91
- .pswp__zoom-wrap {
92
- -ms-touch-action: none;
93
- touch-action: none;
94
- position: absolute;
95
- left: 0;
96
- right: 0;
97
- top: 0;
98
- bottom: 0;
99
- }
100
-
101
- /* Prevent selection and tap highlights */
102
- .pswp__container,
103
- .pswp__img {
104
- @include noselect;
105
- -webkit-tap-highlight-color: rgba(0,0,0,0);
106
- -webkit-touch-callout: none;
107
- }
108
-
109
- .pswp__zoom-wrap {
110
- position: absolute;
111
- width: 100%;
112
- @include transform-origin(left, top);
113
- /* for open/close transition */
114
- @include transition(transform $pswp__show-hide-transition-duration cubic-bezier(.4,0,.22,1));
115
- }
116
-
117
- .pswp__bg {
118
- will-change: opacity;
119
- /* for open/close transition */
120
- @include transition(opacity $pswp__show-hide-transition-duration cubic-bezier(.4,0,.22,1));
121
- }
122
-
123
- .pswp--animated-in {
124
- .pswp__bg,
125
- .pswp__zoom-wrap {
126
- @include transition(none);
127
- }
128
- }
129
-
130
- .pswp__container,
131
- .pswp__zoom-wrap {
132
- @include backface-visibility(hidden);
133
- }
134
-
135
- .pswp__item {
136
- position: absolute;
137
- left: 0;
138
- right: 0;
139
- top: 0;
140
- bottom: 0;
141
- overflow: hidden;
142
- }
143
-
144
- .pswp__img {
145
- position: absolute;
146
- width: auto;
147
- height: auto;
148
- top: 0;
149
- left: 0;
150
- }
151
-
152
- /*
153
- stretched thumbnail or div placeholder element (see below)
154
- style is added to avoid flickering in webkit/blink when layers overlap
155
- */
156
- .pswp__img--placeholder {
157
- @include backface-visibility(hidden);
158
- }
159
-
160
- /*
161
- div element that matches size of large image
162
- large image loads on top of it
163
- */
164
- .pswp__img--placeholder--blank {
165
- background: $pswp__placeholder-color;
166
- }
167
-
168
- .pswp--ie .pswp__img {
169
- width: 100% !important;
170
- height: auto !important;
171
- left: 0;
172
- top: 0;
173
- }
174
-
175
- /*
176
- Error message appears when image is not loaded
177
- (JS option errorMsg controls markup)
178
- */
179
- .pswp__error-msg {
180
- position: absolute;
181
- left: 0;
182
- top: 50%;
183
- width: 100%;
184
- text-align: center;
185
- font-size: 14px;
186
- line-height: 16px;
187
- margin-top: -8px;
188
- color: $pswp__error-text-color;
189
- }
190
-
191
- .pswp__error-msg a {
192
- color: $pswp__error-text-color;
193
- text-decoration: underline;
194
- }
@@ -1,585 +0,0 @@
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
- @include 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
- opacity: 0.75;
44
- @include transition(opacity 0.2s);
45
- @include 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
- @include noselect;
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
- 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
- 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
- @include pointer-events(none);
272
-
273
- }
274
-
275
- &:hover {
276
- background: #3E5C9A;
277
- color: #FFF;
278
-
279
- &:before {
280
- border-bottom-color: #3E5C9A;
281
- }
282
- }
283
- }
284
-
285
- a.pswp__share--twitter {
286
- &:hover {
287
- background: #55ACEE;
288
- color: #FFF;
289
- }
290
- }
291
-
292
- a.pswp__share--pinterest {
293
- &:hover {
294
- background: #CCC;
295
- color: #CE272D;
296
- }
297
- }
298
-
299
- a.pswp__share--download {
300
- &:hover {
301
- background: #DDD;
302
- }
303
- }
304
-
305
-
306
- /*
307
-
308
- 3. Index indicator ("1 of X" counter)
309
-
310
- */
311
-
312
- .pswp__counter {
313
- position: absolute;
314
- left: 0;
315
- top: 0;
316
- height: 44px;
317
- font-size: 13px;
318
- line-height: 44px;
319
- color: #FFF;
320
- opacity: 0.75;
321
- padding: 0 10px;
322
- }
323
-
324
-
325
- /*
326
-
327
- 4. Caption
328
-
329
- */
330
-
331
- .pswp__caption {
332
- position: absolute;
333
- left: 0;
334
- bottom: 0;
335
- width: 100%;
336
- min-height: 44px;
337
-
338
- small {
339
- font-size: 11px;
340
- color: #BBB;
341
- }
342
- }
343
-
344
- .pswp__caption__center {
345
- text-align: left;
346
- max-width: 420px;
347
- margin: 0 auto;
348
- font-size: 13px;
349
- padding: 10px;
350
- line-height: 20px;
351
- color: #CCC;
352
- }
353
-
354
- .pswp__caption--empty {
355
- display: none;
356
- }
357
-
358
- /* Fake caption element, used to calculate height of next/prev image */
359
- .pswp__caption--fake {
360
- visibility: hidden;
361
- }
362
-
363
-
364
- /*
365
-
366
- 5. Loading indicator (preloader)
367
-
368
- You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR
369
-
370
- */
371
-
372
- .pswp__preloader {
373
- width: 44px;
374
- height: 44px;
375
- position: absolute;
376
- top: 0;
377
- left: 50%;
378
- margin-left: -22px;
379
- opacity: 0;
380
- @include transition(opacity 0.25s ease-out);
381
- will-change: opacity;
382
- direction: ltr;
383
- }
384
-
385
- .pswp__preloader__icn {
386
- width: 20px;
387
- height: 20px;
388
- margin: 12px;
389
- }
390
-
391
- .pswp__preloader--active {
392
- opacity: 1;
393
-
394
- .pswp__preloader__icn {
395
- /* We use .gif in browsers that don't support CSS animation */
396
- background: asset-data-url('photoswipe/default-skin/preloader.gif') 0 0 no-repeat;
397
- }
398
- }
399
-
400
- .pswp--css_animation {
401
- .pswp__preloader--active {
402
- opacity: 1;
403
-
404
- .pswp__preloader__icn {
405
- @include animation(clockwise 500ms linear infinite);
406
- }
407
-
408
- .pswp__preloader__donut {
409
- @include animation(donut-rotate 1000ms cubic-bezier(.4,0,.22,1) infinite);
410
- }
411
- }
412
-
413
- .pswp__preloader__icn {
414
- background: none;
415
- opacity: 0;
416
- width: 14px;
417
- height: 14px;
418
- position: absolute;
419
- left: 15px;
420
- top: 15px;
421
- margin: 0;
422
- }
423
-
424
-
425
- .pswp__preloader__cut {
426
- /*
427
- The idea of animating inner circle is based on Polymer ("material") loading indicator
428
- by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html
429
- */
430
- position: relative;
431
- width: 7px;
432
- height: 14px;
433
- overflow: hidden;
434
- }
435
-
436
- .pswp__preloader__donut {
437
- @include box-sizing(border-box);
438
- width: 14px;
439
- height: 14px;
440
- border: 2px solid #FFF;
441
- @include border-radius(50%);
442
- border-left-color: transparent;
443
- border-bottom-color: transparent;
444
- position: absolute;
445
- top: 0;
446
- left: 0;
447
- background: none;
448
- margin: 0;
449
- }
450
- }
451
-
452
- @media screen and (max-width: 1024px) {
453
- .pswp__preloader {
454
- position: relative;
455
- left: auto;
456
- top: auto;
457
- margin: 0;
458
- float: right;
459
- }
460
- }
461
-
462
- @include keyframes(clockwise) {
463
- 0% { @include transform(rotate(0deg)) }
464
- 100% { @include transform(rotate(360deg)) }
465
- }
466
-
467
- @include keyframes(donut-rotate) {
468
- 0% { @include transform(rotate(0)) }
469
- 50% { @include transform(rotate(-140deg)) }
470
- 100% { @include transform(rotate(0)) }
471
- }
472
-
473
-
474
- /*
475
-
476
- 6. Additional styles
477
-
478
- */
479
-
480
- /* root element of UI */
481
- .pswp__ui {
482
- @include font-smoothing(auto);
483
- visibility: visible;
484
- opacity: 1;
485
- z-index: $pswp__root-z-index + 50;
486
- }
487
-
488
- /* top black bar with buttons and "1 of X" indicator */
489
- .pswp__top-bar {
490
- position: absolute;
491
- left: 0;
492
- top: 0;
493
- height: 44px;
494
- width: 100%;
495
- }
496
-
497
- .pswp__caption,
498
- .pswp__top-bar,
499
- .pswp--has_mouse .pswp__button--arrow--left,
500
- .pswp--has_mouse .pswp__button--arrow--right {
501
- @include backface-visibility(hidden);
502
- will-change: opacity;
503
- @include transition(opacity $pswp__controls-transition-duration cubic-bezier(.4,0,.22,1));
504
- }
505
-
506
- /* pswp--has_mouse class is added only when two subsequent mousemove events occur */
507
- .pswp--has_mouse {
508
- .pswp__button--arrow--left,
509
- .pswp__button--arrow--right {
510
- visibility: visible;
511
- }
512
- }
513
-
514
- .pswp__top-bar,
515
- .pswp__caption {
516
- background-color: rgba(0,0,0,0.5);
517
- }
518
-
519
- /* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */
520
- .pswp__ui--fit {
521
- .pswp__top-bar,
522
- .pswp__caption {
523
- background-color: rgba(0,0,0,0.3);
524
- }
525
- }
526
-
527
- /* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */
528
-
529
- .pswp__ui--idle {
530
- .pswp__top-bar {
531
- opacity: 0;
532
- }
533
-
534
- .pswp__button--arrow--left,
535
- .pswp__button--arrow--right {
536
- opacity: 0;
537
- }
538
- }
539
-
540
- /*
541
- pswp__ui--hidden class is added when controls are hidden
542
- e.g. when user taps to toggle visibility of controls
543
- */
544
- .pswp__ui--hidden {
545
- .pswp__top-bar,
546
- .pswp__caption,
547
- .pswp__button--arrow--left,
548
- .pswp__button--arrow--right {
549
- /* Force paint & create composition layer for controls. */
550
- opacity: 0.001;
551
- }
552
- }
553
-
554
- /* pswp__ui--one-slide class is added when there is just one item in gallery */
555
- .pswp__ui--one-slide {
556
- .pswp__button--arrow--left,
557
- .pswp__button--arrow--right,
558
- .pswp__counter {
559
- display: none;
560
- }
561
- }
562
-
563
- .pswp__element--disabled {
564
- display: none !important;
565
- }
566
-
567
- @if $pswp__include-minimal-style == true {
568
- .pswp--minimal--dark {
569
- .pswp__top-bar {
570
- background: none;
571
- }
572
- }
573
- }
574
-
575
-
576
-
577
-
578
-
579
-
580
-
581
-
582
-
583
-
584
-
585
-