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.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: abfd50231537e928631fc5588235eebef51bf6c2
4
- data.tar.gz: 361ad39aa733891fff06e72cb219d340fdb94980
3
+ metadata.gz: 5eaf794cfab22a4124e10f367d42c468b9acc035
4
+ data.tar.gz: 6895037ebe04b61c4b39cb466a1f4ee07a30a61f
5
5
  SHA512:
6
- metadata.gz: 064c25f6873e6fa8038caacb3ef7042917b7b28922cf49b5aca023544b637736e7ea4cad595191cc457904bdbe08d7d3a8b671195440b0056f2c584d4b55811c
7
- data.tar.gz: 36b018927d06592f371a142f41fba1145ff5827c31567abb315b311c06a7e3aab940cddc6ad2c9825cd1906faf5d065fff38acff559a901ce4df6e06ad41b84f
6
+ metadata.gz: 059304e95b1bd20d5d309589cc70ba72207f41f2afaec0bef3c3137ea4a9b7cf643949365406df4edd8445020199e172c9e38a363207af2d7a3e675973b5b533
7
+ data.tar.gz: 0ea0cbf1b57dbd8e151aca3f19e8feb766e4f15096d2d965e962ecc486f8e533aaedf3d278db1ce518e9e069a86e6c230aecb747b21d87e2f0c1ec5022dd3f10
@@ -1,23 +1,28 @@
1
- require 'pswp-rails/version'
1
+ # encoding: utf-8
2
+ # frozen_string_literal: true
3
+
4
+ require 'rails/railtie'
2
5
 
3
6
  module PhotoSwipe
4
- class Engine < Rails::Engine
5
- # initializer 'sprockets.photoswipe', group: :all, after: 'sprockets.environment' do |app|
6
- # configure_assets app do |env|
7
- # env.precompile += %w( photoswipe.js photoswipe-ui-default.js photoswipe.scss )
8
- #
9
- # end
10
- # end
11
- #
12
- # private
13
- # def configure_assets(app)
14
- # if config.respond_to?(:assets) && config.assets.respond_to?(:configure)
15
- # # Rails 4.x
16
- # config.assets.configure { |env| yield(env) }
17
- # else
18
- # # Rails 3.2
19
- # yield(app.assets)
20
- # end
21
- # end
7
+ class Railtie < Rails::Railtie
8
+ initializer 'sprockets.photoswipe', after: 'sprockets.environment' do |app|
9
+ configure_assets app do |assets|
10
+ assets.precompile += %w( photoswipe.js photoswipe-ui-default.js photoswipe.scss )
11
+ assets.paths += [File.expand_path('../../vendor/assets/images', __FILE__)]
12
+ assets.paths += [File.expand_path('../../vendor/assets/javascripts', __FILE__)]
13
+ assets.paths += [File.expand_path('../../vendor/assets/stylesheets', __FILE__)]
14
+ end
15
+ end
16
+
17
+ private
18
+ def configure_assets(app)
19
+ if config.respond_to?(:assets) && config.assets.respond_to?(:configure)
20
+ # Rails 4.x 5.x
21
+ yield config.assets
22
+ else
23
+ # Rails 3.2
24
+ yield app.assets
25
+ end
26
+ end
22
27
  end
23
28
  end
@@ -1,3 +1,6 @@
1
+ # encoding: utf-8
2
+ # frozen_string_literal: true
3
+
1
4
  module PhotoSwipe
2
- VERSION = '4.1.1.1'.freeze
5
+ VERSION = '4.1.1.2'
3
6
  end
@@ -1,6 +1,8 @@
1
+ # encoding: utf-8
2
+ # frozen_string_literal: true
3
+
1
4
  require File.expand_path('../lib/pswp-rails/version', __FILE__)
2
5
 
3
- # frozen_string_literal: true
4
6
  Gem::Specification.new do |s|
5
7
  s.name = 'pswp-rails'
6
8
  s.version = PhotoSwipe::VERSION
@@ -11,8 +13,6 @@ Gem::Specification.new do |s|
11
13
  s.homepage = 'https://github.com/yivo/pswp-rails'
12
14
  s.license = 'MIT'
13
15
 
14
- s.executables = `git ls-files -z -- bin/*`.split("\x0").map{ |f| File.basename(f) }
15
16
  s.files = `git ls-files -z`.split("\x0")
16
- s.test_files = `git ls-files -z -- {test,spec,features}/*`.split("\x0")
17
17
  s.require_paths = ['lib']
18
18
  end
@@ -6,4 +6,13 @@ $pswp__box-sizing-border-box: true !default; // disable .pswp * { box-sizing:bor
6
6
  $pswp__root-z-index: 1500 !default;
7
7
  $pswp__assets-path: '' !default; // path to skin assets folder (preloader, PNG and SVG sprite)
8
8
  $pswp__error-text-color: #CCC !default; // "Image not loaded" text color
9
- $pswp__include-minimal-style: true !default;
9
+ $pswp__include-minimal-style: true !default;
10
+ $pswp__inline-assets: false !default;
11
+
12
+ @function pswp__inline-asset($asset-path) {
13
+ @if ($pswp__inline-assets) {
14
+ @return asset-data-url($asset-path);
15
+ } @else {
16
+ @return asset-url($asset-path);
17
+ }
18
+ }
@@ -1,209 +1,178 @@
1
1
  /*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */
2
-
3
2
  /*
4
3
  Styles for basic PhotoSwipe functionality (sliding area, open/close transitions)
5
4
  */
6
-
7
- // PhotoSwipe uses Autoprefixer, so vendor prefixed are added automatically when needed.
8
-
9
- @import "main-settings";
10
-
11
-
12
5
  /* pswp = photoswipe */
13
6
  .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
- }
7
+ display: none;
8
+ position: absolute;
9
+ width: 100%;
10
+ height: 100%;
11
+ left: 0;
12
+ top: 0;
13
+ overflow: hidden;
14
+ -ms-touch-action: none;
15
+ touch-action: none;
16
+ z-index: 1500;
17
+ -webkit-text-size-adjust: 100%;
18
+ /* create separate layer, to avoid paint on window.onscroll in webkit/blink */
19
+ -webkit-backface-visibility: hidden;
20
+ outline: none; }
21
+ @if $pswp__box-sizing-border-box == true {
22
+ .pswp * {
23
+ -webkit-box-sizing: border-box;
24
+ box-sizing: border-box; } }
25
+ .pswp img {
26
+ max-width: none; }
39
27
 
40
28
  /* style is added when JS option showHideOpacity is set to true */
41
29
  .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
- }
30
+ /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
31
+ opacity: 0.001;
32
+ will-change: opacity;
33
+ /* for open/close transition */
34
+ -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
35
+ transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
48
36
 
49
37
  .pswp--open {
50
- display: block;
51
- }
38
+ display: block; }
52
39
 
53
40
  .pswp--zoom-allowed .pswp__img {
54
- /* autoprefixer: off */
55
- cursor: -webkit-zoom-in;
56
- cursor: -moz-zoom-in;
57
- cursor: zoom-in;
58
- }
41
+ /* autoprefixer: off */
42
+ cursor: -webkit-zoom-in;
43
+ cursor: -moz-zoom-in;
44
+ cursor: zoom-in; }
59
45
 
60
46
  .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
- }
47
+ /* autoprefixer: off */
48
+ cursor: -webkit-grab;
49
+ cursor: -moz-grab;
50
+ cursor: grab; }
51
+
52
+ .pswp--dragging .pswp__img {
53
+ /* autoprefixer: off */
54
+ cursor: -webkit-grabbing;
55
+ cursor: -moz-grabbing;
56
+ cursor: grabbing; }
73
57
 
74
58
  /*
75
59
  Background is added as a separate element.
76
60
  As animating opacity is much faster than animating rgba() background-color.
77
61
  */
78
62
  .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
- }
63
+ position: absolute;
64
+ left: 0;
65
+ top: 0;
66
+ width: 100%;
67
+ height: 100%;
68
+ background: #000;
69
+ opacity: 0;
70
+ -webkit-backface-visibility: hidden;
71
+ will-change: opacity; }
89
72
 
90
73
  .pswp__scroll-wrap {
91
- position: absolute;
92
- left: 0;
93
- top: 0;
94
- width: 100%;
95
- height: 100%;
96
- overflow:hidden;
97
- }
74
+ position: absolute;
75
+ left: 0;
76
+ top: 0;
77
+ width: 100%;
78
+ height: 100%;
79
+ overflow: hidden; }
98
80
 
99
81
  .pswp__container,
100
82
  .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
- }
83
+ -ms-touch-action: none;
84
+ touch-action: none;
85
+ position: absolute;
86
+ left: 0;
87
+ right: 0;
88
+ top: 0;
89
+ bottom: 0; }
109
90
 
110
91
  /* Prevent selection and tap highlights */
111
92
  .pswp__container,
112
93
  .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
- }
94
+ -webkit-user-select: none;
95
+ -moz-user-select: none;
96
+ -ms-user-select: none;
97
+ user-select: none;
98
+ -webkit-tap-highlight-color: transparent;
99
+ -webkit-touch-callout: none; }
119
100
 
120
101
  .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
- }
102
+ position: absolute;
103
+ width: 100%;
104
+ -webkit-transform-origin: left top;
105
+ -ms-transform-origin: left top;
106
+ transform-origin: left top;
107
+ /* for open/close transition */
108
+ -webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
109
+ transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); }
130
110
 
131
111
  .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
- }
112
+ will-change: opacity;
113
+ /* for open/close transition */
114
+ -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
115
+ transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
116
+
117
+ .pswp--animated-in .pswp__bg,
118
+ .pswp--animated-in .pswp__zoom-wrap {
119
+ -webkit-transition: none;
120
+ transition: none; }
144
121
 
145
122
  .pswp__container,
146
123
  .pswp__zoom-wrap {
147
- -webkit-backface-visibility: hidden;
148
- }
124
+ -webkit-backface-visibility: hidden; }
149
125
 
150
126
  .pswp__item {
151
- position: absolute;
152
- left: 0;
153
- right: 0;
154
- top: 0;
155
- bottom: 0;
156
- overflow: hidden;
157
- }
127
+ position: absolute;
128
+ left: 0;
129
+ right: 0;
130
+ top: 0;
131
+ bottom: 0;
132
+ overflow: hidden; }
158
133
 
159
134
  .pswp__img {
160
- position: absolute;
161
- width: auto;
162
- height: auto;
163
- top: 0;
164
- left: 0;
165
- }
135
+ position: absolute;
136
+ width: auto;
137
+ height: auto;
138
+ top: 0;
139
+ left: 0; }
166
140
 
167
141
  /*
168
142
  stretched thumbnail or div placeholder element (see below)
169
143
  style is added to avoid flickering in webkit/blink when layers overlap
170
144
  */
171
145
  .pswp__img--placeholder {
172
- -webkit-backface-visibility: hidden;
173
- }
146
+ -webkit-backface-visibility: hidden; }
174
147
 
175
148
  /*
176
149
  div element that matches size of large image
177
150
  large image loads on top of it
178
151
  */
179
152
  .pswp__img--placeholder--blank {
180
- background: $pswp__placeholder-color;
181
- }
153
+ background: #222; }
182
154
 
183
155
  .pswp--ie .pswp__img {
184
- width: 100% !important;
185
- height: auto !important;
186
- left: 0;
187
- top: 0;
188
- }
156
+ width: 100% !important;
157
+ height: auto !important;
158
+ left: 0;
159
+ top: 0; }
189
160
 
190
161
  /*
191
162
  Error message appears when image is not loaded
192
163
  (JS option errorMsg controls markup)
193
164
  */
194
165
  .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
- }
166
+ position: absolute;
167
+ left: 0;
168
+ top: 50%;
169
+ width: 100%;
170
+ text-align: center;
171
+ font-size: 14px;
172
+ line-height: 16px;
173
+ margin-top: -8px;
174
+ color: #CCC; }
205
175
 
206
176
  .pswp__error-msg a {
207
- color: $pswp__error-text-color;
208
- text-decoration: underline;
209
- }
177
+ color: #CCC;
178
+ text-decoration: underline; }
@@ -1,5 +1,4 @@
1
1
  /*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */
2
-
3
2
  /*
4
3
 
5
4
  Contents:
@@ -12,123 +11,91 @@
12
11
  6. Additional styles (root element, top bar, idle state, hidden state, etc.)
13
12
 
14
13
  */
15
-
16
- // PhotoSwipe uses Autoprefixer, so vendor prefixed are added automatically when needed.
17
-
18
-
19
-
20
- @import "../main-settings";
21
-
22
-
23
14
  /*
24
-
15
+
25
16
  1. Buttons
26
17
 
27
18
  */
28
-
29
19
  /* <button> css reset */
30
20
  .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
- }
21
+ width: 44px;
22
+ height: 44px;
23
+ position: relative;
24
+ background: none;
25
+ cursor: pointer;
26
+ overflow: visible;
27
+ -webkit-appearance: none;
28
+ display: block;
29
+ border: 0;
30
+ padding: 0;
31
+ margin: 0;
32
+ float: right;
33
+ opacity: 0.75;
34
+ -webkit-transition: opacity 0.2s;
35
+ transition: opacity 0.2s;
36
+ -webkit-box-shadow: none;
37
+ box-shadow: none; }
38
+ .pswp__button:focus,
39
+ .pswp__button:hover {
40
+ opacity: 1; }
41
+ .pswp__button:active {
42
+ outline: none;
43
+ opacity: 0.9; }
44
+ .pswp__button::-moz-focus-inner {
45
+ padding: 0;
46
+ border: 0; }
62
47
 
63
48
  /* pswp__ui--over-close class it added when mouse is over element that should close gallery */
64
49
  .pswp__ui--over-close .pswp__button--close {
65
- opacity: 1;
66
- }
50
+ opacity: 1; }
67
51
 
68
52
  .pswp__button,
69
53
  .pswp__button--arrow--left:before,
70
54
  .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
- }
55
+ background: pswp__inline-asset('photoswipe/default-skin/default-skin.png') 0 0 no-repeat;
56
+ background-size: 264px 88px;
57
+ width: 44px;
58
+ height: 44px; }
59
+
60
+ @media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
61
+ /* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */
62
+ .pswp--svg .pswp__button,
63
+ .pswp--svg .pswp__button--arrow--left:before,
64
+ .pswp--svg .pswp__button--arrow--right:before {
65
+ background-image: pswp__inline-asset('photoswipe/default-skin/default-skin.svg'); }
66
+ .pswp--svg .pswp__button--arrow--left,
67
+ .pswp--svg .pswp__button--arrow--right {
68
+ background: none; } }
91
69
 
92
70
  .pswp__button--close {
93
- background-position: 0 -44px;
94
- }
71
+ background-position: 0 -44px; }
95
72
 
96
73
  .pswp__button--share {
97
- background-position: -44px -44px;
98
- }
74
+ background-position: -44px -44px; }
99
75
 
100
76
  .pswp__button--fs {
101
- display: none;
102
- }
77
+ display: none; }
103
78
 
104
79
  .pswp--supports-fs .pswp__button--fs {
105
- display: block;
106
- }
80
+ display: block; }
107
81
 
108
82
  .pswp--fs .pswp__button--fs {
109
- background-position: -44px 0;
110
- }
83
+ background-position: -44px 0; }
111
84
 
112
85
  .pswp__button--zoom {
113
- display: none;
114
- background-position: -88px 0;
115
- }
86
+ display: none;
87
+ background-position: -88px 0; }
116
88
 
117
89
  .pswp--zoom-allowed .pswp__button--zoom {
118
- display: block;
119
- }
90
+ display: block; }
120
91
 
121
92
  .pswp--zoomed-in .pswp__button--zoom {
122
- background-position: -132px 0;
123
- }
93
+ background-position: -132px 0; }
124
94
 
125
95
  /* no arrows on touch screens */
126
- .pswp--touch {
127
- .pswp__button--arrow--left,
128
- .pswp__button--arrow--right {
129
- visibility: hidden;
130
- }
131
- }
96
+ .pswp--touch .pswp__button--arrow--left,
97
+ .pswp--touch .pswp__button--arrow--right {
98
+ visibility: hidden; }
132
99
 
133
100
  /*
134
101
  Arrow buttons hit area
@@ -136,233 +103,189 @@
136
103
  */
137
104
  .pswp__button--arrow--left,
138
105
  .pswp__button--arrow--right {
139
- background: none;
140
- top: 50%;
141
- margin-top: -50px;
142
- width: 70px;
143
- height: 100px;
144
- position: absolute;
145
- }
106
+ background: none;
107
+ top: 50%;
108
+ margin-top: -50px;
109
+ width: 70px;
110
+ height: 100px;
111
+ position: absolute; }
146
112
 
147
113
  .pswp__button--arrow--left {
148
- left: 0;
149
- }
114
+ left: 0; }
150
115
 
151
116
  .pswp__button--arrow--right {
152
- right: 0;
153
- }
117
+ right: 0; }
154
118
 
155
119
  .pswp__button--arrow--left:before,
156
120
  .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
- }
121
+ content: '';
122
+ top: 35px;
123
+ background-color: rgba(0, 0, 0, 0.3);
124
+ height: 30px;
125
+ width: 32px;
126
+ position: absolute; }
164
127
 
165
128
  .pswp__button--arrow--left:before {
166
- left: 6px;
167
- background-position: -138px -44px;
168
- }
129
+ left: 6px;
130
+ background-position: -138px -44px; }
169
131
 
170
132
  .pswp__button--arrow--right:before {
171
- right: 6px;
172
- background-position: -94px -44px;
173
- }
174
-
133
+ right: 6px;
134
+ background-position: -94px -44px; }
175
135
 
176
136
  /*
177
137
 
178
138
  2. Share modal/popup and links
179
139
 
180
140
  */
181
-
182
141
  .pswp__counter,
183
142
  .pswp__share-modal {
184
- -webkit-user-select: none;
185
- -moz-user-select: none;
186
- user-select: none;
187
- }
143
+ -webkit-user-select: none;
144
+ -moz-user-select: none;
145
+ -ms-user-select: none;
146
+ user-select: none; }
188
147
 
189
148
  .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
- }
149
+ display: block;
150
+ background: rgba(0, 0, 0, 0.5);
151
+ width: 100%;
152
+ height: 100%;
153
+ top: 0;
154
+ left: 0;
155
+ padding: 10px;
156
+ position: absolute;
157
+ z-index: 1600;
158
+ opacity: 0;
159
+ -webkit-transition: opacity 0.25s ease-out;
160
+ transition: opacity 0.25s ease-out;
161
+ -webkit-backface-visibility: hidden;
162
+ will-change: opacity; }
204
163
 
205
164
  .pswp__share-modal--hidden {
206
- display: none;
207
- }
165
+ display: none; }
208
166
 
209
167
  .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
- }
168
+ z-index: 1620;
169
+ position: absolute;
170
+ background: #FFF;
171
+ top: 56px;
172
+ border-radius: 2px;
173
+ display: block;
174
+ width: auto;
175
+ right: 44px;
176
+ -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
177
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
178
+ -webkit-transform: translateY(6px);
179
+ -ms-transform: translateY(6px);
180
+ transform: translateY(6px);
181
+ -webkit-transition: -webkit-transform 0.25s;
182
+ transition: transform 0.25s;
183
+ -webkit-backface-visibility: hidden;
184
+ will-change: transform; }
185
+ .pswp__share-tooltip a {
186
+ display: block;
187
+ padding: 8px 12px;
188
+ color: #000;
189
+ text-decoration: none;
190
+ font-size: 14px;
191
+ line-height: 18px; }
192
+ .pswp__share-tooltip a:hover {
193
+ text-decoration: none;
194
+ color: #000; }
195
+ .pswp__share-tooltip a:first-child {
196
+ /* round corners on the first/last list item */
197
+ border-radius: 2px 2px 0 0; }
198
+ .pswp__share-tooltip a:last-child {
199
+ border-radius: 0 0 2px 2px; }
248
200
 
249
201
  .pswp__share-modal--fade-in {
250
- opacity: 1;
251
-
252
- .pswp__share-tooltip {
253
- transform: translateY(0);
254
- }
255
- }
202
+ opacity: 1; }
203
+ .pswp__share-modal--fade-in .pswp__share-tooltip {
204
+ -webkit-transform: translateY(0);
205
+ -ms-transform: translateY(0);
206
+ transform: translateY(0); }
256
207
 
257
208
  /* increase size of share links on touch devices */
258
209
  .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
-
210
+ padding: 16px 12px; }
211
+
212
+ a.pswp__share--facebook:before {
213
+ content: '';
214
+ display: block;
215
+ width: 0;
216
+ height: 0;
217
+ position: absolute;
218
+ top: -12px;
219
+ right: 15px;
220
+ border: 6px solid transparent;
221
+ border-bottom-color: #FFF;
222
+ -webkit-pointer-events: none;
223
+ -moz-pointer-events: none;
224
+ pointer-events: none; }
225
+
226
+ a.pswp__share--facebook:hover {
227
+ background: #3E5C9A;
228
+ color: #FFF; }
229
+ a.pswp__share--facebook:hover:before {
230
+ border-bottom-color: #3E5C9A; }
231
+
232
+ a.pswp__share--twitter:hover {
233
+ background: #55ACEE;
234
+ color: #FFF; }
235
+
236
+ a.pswp__share--pinterest:hover {
237
+ background: #CCC;
238
+ color: #CE272D; }
239
+
240
+ a.pswp__share--download:hover {
241
+ background: #DDD; }
308
242
 
309
243
  /*
310
244
 
311
245
  3. Index indicator ("1 of X" counter)
312
246
 
313
247
  */
314
-
315
248
  .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
-
249
+ position: absolute;
250
+ left: 0;
251
+ top: 0;
252
+ height: 44px;
253
+ font-size: 13px;
254
+ line-height: 44px;
255
+ color: #FFF;
256
+ opacity: 0.75;
257
+ padding: 0 10px; }
327
258
 
328
259
  /*
329
-
260
+
330
261
  4. Caption
331
262
 
332
263
  */
333
-
334
264
  .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
- }
265
+ position: absolute;
266
+ left: 0;
267
+ bottom: 0;
268
+ width: 100%;
269
+ min-height: 44px; }
270
+ .pswp__caption small {
271
+ font-size: 11px;
272
+ color: #BBB; }
346
273
 
347
274
  .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
- }
275
+ text-align: left;
276
+ max-width: 420px;
277
+ margin: 0 auto;
278
+ font-size: 13px;
279
+ padding: 10px;
280
+ line-height: 20px;
281
+ color: #CCC; }
356
282
 
357
283
  .pswp__caption--empty {
358
- display: none;
359
- }
284
+ display: none; }
360
285
 
361
286
  /* Fake caption element, used to calculate height of next/prev image */
362
287
  .pswp__caption--fake {
363
- visibility: hidden;
364
- }
365
-
288
+ visibility: hidden; }
366
289
 
367
290
  /*
368
291
 
@@ -371,218 +294,190 @@ a.pswp__share--download {
371
294
  You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR
372
295
 
373
296
  */
374
-
375
297
  .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
- }
298
+ width: 44px;
299
+ height: 44px;
300
+ position: absolute;
301
+ top: 0;
302
+ left: 50%;
303
+ margin-left: -22px;
304
+ opacity: 0;
305
+ -webkit-transition: opacity 0.25s ease-out;
306
+ transition: opacity 0.25s ease-out;
307
+ will-change: opacity;
308
+ direction: ltr; }
387
309
 
388
310
  .pswp__preloader__icn {
389
- width: 20px;
390
- height: 20px;
391
- margin: 12px;
392
- }
311
+ width: 20px;
312
+ height: 20px;
313
+ margin: 12px; }
393
314
 
394
315
  .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/default-skin/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
316
+ opacity: 1; }
317
+ .pswp__preloader--active .pswp__preloader__icn {
318
+ /* We use .gif in browsers that don't support CSS animation */
319
+ background: pswp__inline-asset('photoswipe/default-skin/preloader.gif') 0 0 no-repeat; }
320
+
321
+ .pswp--css_animation .pswp__preloader--active {
322
+ opacity: 1; }
323
+ .pswp--css_animation .pswp__preloader--active .pswp__preloader__icn {
324
+ -webkit-animation: clockwise 500ms linear infinite;
325
+ animation: clockwise 500ms linear infinite; }
326
+ .pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {
327
+ -webkit-animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
328
+ animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite; }
329
+
330
+ .pswp--css_animation .pswp__preloader__icn {
331
+ background: none;
332
+ opacity: 0.75;
333
+ width: 14px;
334
+ height: 14px;
335
+ position: absolute;
336
+ left: 15px;
337
+ top: 15px;
338
+ margin: 0; }
339
+
340
+ .pswp--css_animation .pswp__preloader__cut {
341
+ /*
342
+ The idea of animating inner circle is based on Polymer ("material") loading indicator
431
343
  by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html
432
344
  */
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
- }
345
+ position: relative;
346
+ width: 7px;
347
+ height: 14px;
348
+ overflow: hidden; }
349
+
350
+ .pswp--css_animation .pswp__preloader__donut {
351
+ -webkit-box-sizing: border-box;
352
+ box-sizing: border-box;
353
+ width: 14px;
354
+ height: 14px;
355
+ border: 2px solid #FFF;
356
+ border-radius: 50%;
357
+ border-left-color: transparent;
358
+ border-bottom-color: transparent;
359
+ position: absolute;
360
+ top: 0;
361
+ left: 0;
362
+ background: none;
363
+ margin: 0; }
454
364
 
455
365
  @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
- }
366
+ .pswp__preloader {
367
+ position: relative;
368
+ left: auto;
369
+ top: auto;
370
+ margin: 0;
371
+ float: right; } }
372
+
373
+ @-webkit-keyframes clockwise {
374
+ 0% {
375
+ -webkit-transform: rotate(0deg);
376
+ transform: rotate(0deg); }
377
+ 100% {
378
+ -webkit-transform: rotate(360deg);
379
+ transform: rotate(360deg); } }
464
380
 
465
381
  @keyframes clockwise {
466
- 0% { transform: rotate(0deg) }
467
- 100% { transform: rotate(360deg) }
468
- }
382
+ 0% {
383
+ -webkit-transform: rotate(0deg);
384
+ transform: rotate(0deg); }
385
+ 100% {
386
+ -webkit-transform: rotate(360deg);
387
+ transform: rotate(360deg); } }
388
+
389
+ @-webkit-keyframes donut-rotate {
390
+ 0% {
391
+ -webkit-transform: rotate(0);
392
+ transform: rotate(0); }
393
+ 50% {
394
+ -webkit-transform: rotate(-140deg);
395
+ transform: rotate(-140deg); }
396
+ 100% {
397
+ -webkit-transform: rotate(0);
398
+ transform: rotate(0); } }
469
399
 
470
400
  @keyframes donut-rotate {
471
- 0% { transform: rotate(0) }
472
- 50% { transform: rotate(-140deg) }
473
- 100% { transform: rotate(0) }
474
- }
475
-
401
+ 0% {
402
+ -webkit-transform: rotate(0);
403
+ transform: rotate(0); }
404
+ 50% {
405
+ -webkit-transform: rotate(-140deg);
406
+ transform: rotate(-140deg); }
407
+ 100% {
408
+ -webkit-transform: rotate(0);
409
+ transform: rotate(0); } }
476
410
 
477
411
  /*
478
-
412
+
479
413
  6. Additional styles
480
414
 
481
415
  */
482
-
483
416
  /* root element of UI */
484
417
  .pswp__ui {
485
- -webkit-font-smoothing: auto;
486
- visibility: visible;
487
- opacity: 1;
488
- z-index: $pswp__root-z-index + 50;
489
- }
418
+ -webkit-font-smoothing: auto;
419
+ visibility: visible;
420
+ opacity: 1;
421
+ z-index: 1550; }
490
422
 
491
423
  /* top black bar with buttons and "1 of X" indicator */
492
424
  .pswp__top-bar {
493
- position: absolute;
494
- left: 0;
495
- top: 0;
496
- height: 44px;
497
- width: 100%;
498
- }
425
+ position: absolute;
426
+ left: 0;
427
+ top: 0;
428
+ height: 44px;
429
+ width: 100%; }
499
430
 
500
431
  .pswp__caption,
501
432
  .pswp__top-bar,
502
433
  .pswp--has_mouse .pswp__button--arrow--left,
503
434
  .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
- }
435
+ -webkit-backface-visibility: hidden;
436
+ will-change: opacity;
437
+ -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
438
+ transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
508
439
 
509
440
  /* 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
- }
441
+ .pswp--has_mouse .pswp__button--arrow--left,
442
+ .pswp--has_mouse .pswp__button--arrow--right {
443
+ visibility: visible; }
516
444
 
517
445
  .pswp__top-bar,
518
446
  .pswp__caption {
519
- background-color: rgba(0,0,0,0.5);
520
- }
447
+ background-color: rgba(0, 0, 0, 0.5); }
521
448
 
522
449
  /* 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
- }
450
+ .pswp__ui--fit .pswp__top-bar,
451
+ .pswp__ui--fit .pswp__caption {
452
+ background-color: rgba(0, 0, 0, 0.3); }
529
453
 
530
454
  /* 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
- }
455
+ .pswp__ui--idle .pswp__top-bar {
456
+ opacity: 0; }
457
+
458
+ .pswp__ui--idle .pswp__button--arrow--left,
459
+ .pswp__ui--idle .pswp__button--arrow--right {
460
+ opacity: 0; }
542
461
 
543
462
  /*
544
463
  pswp__ui--hidden class is added when controls are hidden
545
464
  e.g. when user taps to toggle visibility of controls
546
465
  */
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
- }
466
+ .pswp__ui--hidden .pswp__top-bar,
467
+ .pswp__ui--hidden .pswp__caption,
468
+ .pswp__ui--hidden .pswp__button--arrow--left,
469
+ .pswp__ui--hidden .pswp__button--arrow--right {
470
+ /* Force paint & create composition layer for controls. */
471
+ opacity: 0.001; }
556
472
 
557
473
  /* 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
- }
474
+ .pswp__ui--one-slide .pswp__button--arrow--left,
475
+ .pswp__ui--one-slide .pswp__button--arrow--right,
476
+ .pswp__ui--one-slide .pswp__counter {
477
+ display: none; }
565
478
 
566
479
  .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
-
480
+ display: none !important; }
588
481
 
482
+ .pswp--minimal--dark .pswp__top-bar {
483
+ background: none; }