pswp-rails 4.1.1.1 → 4.1.1.2

Sign up to get free protection for your applications and to get access to all the features.
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: pswp-rails
3
3
  version: !ruby/object:Gem::Version
4
- version: 4.1.1.1
4
+ version: 4.1.1.2
5
5
  platform: ruby
6
6
  authors:
7
7
  - Yaroslav Konoplov
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2016-09-25 00:00:00.000000000 Z
11
+ date: 2017-01-05 00:00:00.000000000 Z
12
12
  dependencies: []
13
13
  description: PhotoSwipe image gallery (github.com/dimsemenov/PhotoSwipe) integration
14
14
  with Rails asset pipeline.
@@ -24,11 +24,7 @@ files:
24
24
  - lib/pswp-rails/version.rb
25
25
  - pswp-rails.gemspec
26
26
  - vendor/assets/images/photoswipe/LICENSE
27
- - vendor/assets/images/photoswipe/default-skin/default-skin-svg.sketch/Data
28
- - vendor/assets/images/photoswipe/default-skin/default-skin-svg.sketch/metadata
29
- - vendor/assets/images/photoswipe/default-skin/default-skin-svg.sketch/version
30
27
  - vendor/assets/images/photoswipe/default-skin/default-skin.png
31
- - vendor/assets/images/photoswipe/default-skin/default-skin.psd
32
28
  - vendor/assets/images/photoswipe/default-skin/default-skin.svg
33
29
  - vendor/assets/images/photoswipe/default-skin/preloader.gif
34
30
  - vendor/assets/javascripts/photoswipe.js
@@ -36,16 +32,6 @@ files:
36
32
  - vendor/assets/javascripts/photoswipe/index.js
37
33
  - vendor/assets/javascripts/photoswipe/photoswipe-ui-default.js
38
34
  - vendor/assets/javascripts/photoswipe/photoswipe.js
39
- - vendor/assets/stylesheets/photoswipe-compass.scss
40
- - vendor/assets/stylesheets/photoswipe-compass/LICENSE
41
- - vendor/assets/stylesheets/photoswipe-compass/_main-settings.scss
42
- - vendor/assets/stylesheets/photoswipe-compass/_main.scss
43
- - vendor/assets/stylesheets/photoswipe-compass/default-skin/_default-skin.scss
44
- - vendor/assets/stylesheets/photoswipe-eskimo.scss
45
- - vendor/assets/stylesheets/photoswipe-eskimo/LICENSE
46
- - vendor/assets/stylesheets/photoswipe-eskimo/_main-settings.scss
47
- - vendor/assets/stylesheets/photoswipe-eskimo/_main.scss
48
- - vendor/assets/stylesheets/photoswipe-eskimo/default-skin/_default-skin.scss
49
35
  - vendor/assets/stylesheets/photoswipe.scss
50
36
  - vendor/assets/stylesheets/photoswipe/LICENSE
51
37
  - vendor/assets/stylesheets/photoswipe/_main-settings.scss
@@ -1,18 +0,0 @@
1
- <?xml version="1.0" encoding="UTF-8"?>
2
- <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
3
- <plist version="1.0">
4
- <dict>
5
- <key>app</key>
6
- <string>com.bohemiancoding.sketch3</string>
7
- <key>build</key>
8
- <integer>7574</integer>
9
- <key>commit</key>
10
- <string>8099b4f0b25d32201a4f1a171811eda68e6b1bd1</string>
11
- <key>fonts</key>
12
- <array/>
13
- <key>length</key>
14
- <integer>57208</integer>
15
- <key>version</key>
16
- <integer>36</integer>
17
- </dict>
18
- </plist>
@@ -1,3 +0,0 @@
1
- @import './photoswipe-compass/main-settings.scss';
2
- @import './photoswipe-compass/main.scss';
3
- @import './photoswipe-compass/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,203 +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
- -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
- 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
- /* 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
- @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
- }
@@ -1,587 +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
- 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 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
- 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
- -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
- 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
- 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
- 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
- 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
- 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
- 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
- opacity: 0;
534
- }
535
-
536
- .pswp__button--arrow--left,
537
- .pswp__button--arrow--right {
538
- 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
- 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
-