@alfalab/core-components-gallery 7.1.8 → 7.1.9-alfasans

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.
Files changed (79) hide show
  1. package/components/bottom-button/index.css +5 -5
  2. package/components/bottom-button/index.module.css.js +1 -1
  3. package/components/buttons/index.css +5 -5
  4. package/components/buttons/index.module.css.js +1 -1
  5. package/components/header/index.css +1 -1
  6. package/components/header/index.module.css.js +1 -1
  7. package/components/header-info-block/index.css +4 -4
  8. package/components/header-info-block/index.module.css.js +1 -1
  9. package/components/header-mobile/index.css +6 -6
  10. package/components/header-mobile/index.module.css.js +1 -1
  11. package/components/image-preview/index.css +17 -17
  12. package/components/image-preview/index.module.css.js +1 -1
  13. package/components/image-viewer/index.css +148 -124
  14. package/components/image-viewer/index.module.css.js +1 -1
  15. package/components/image-viewer/index.module.css.js.map +1 -1
  16. package/components/image-viewer/video/index.css +7 -7
  17. package/components/image-viewer/video/index.module.css.js +1 -1
  18. package/components/info-bar/index.css +3 -3
  19. package/components/info-bar/index.module.css.js +1 -1
  20. package/components/navigation-bar/index.css +8 -8
  21. package/components/navigation-bar/index.module.css.js +1 -1
  22. package/components/subtitles/index.css +3 -3
  23. package/components/subtitles/index.module.css.js +1 -1
  24. package/cssm/components/image-viewer/index.module.css +147 -123
  25. package/esm/components/bottom-button/index.css +5 -5
  26. package/esm/components/bottom-button/index.module.css.js +1 -1
  27. package/esm/components/buttons/index.css +5 -5
  28. package/esm/components/buttons/index.module.css.js +1 -1
  29. package/esm/components/header/index.css +1 -1
  30. package/esm/components/header/index.module.css.js +1 -1
  31. package/esm/components/header-info-block/index.css +4 -4
  32. package/esm/components/header-info-block/index.module.css.js +1 -1
  33. package/esm/components/header-mobile/index.css +6 -6
  34. package/esm/components/header-mobile/index.module.css.js +1 -1
  35. package/esm/components/image-preview/index.css +17 -17
  36. package/esm/components/image-preview/index.module.css.js +1 -1
  37. package/esm/components/image-viewer/index.css +148 -124
  38. package/esm/components/image-viewer/index.module.css.js +1 -1
  39. package/esm/components/image-viewer/index.module.css.js.map +1 -1
  40. package/esm/components/image-viewer/video/index.css +7 -7
  41. package/esm/components/image-viewer/video/index.module.css.js +1 -1
  42. package/esm/components/info-bar/index.css +3 -3
  43. package/esm/components/info-bar/index.module.css.js +1 -1
  44. package/esm/components/navigation-bar/index.css +8 -8
  45. package/esm/components/navigation-bar/index.module.css.js +1 -1
  46. package/esm/components/subtitles/index.css +3 -3
  47. package/esm/components/subtitles/index.module.css.js +1 -1
  48. package/esm/index.css +9 -9
  49. package/esm/index.module.css.js +1 -1
  50. package/index.css +9 -9
  51. package/index.module.css.js +1 -1
  52. package/modern/components/bottom-button/index.css +5 -5
  53. package/modern/components/bottom-button/index.module.css.js +1 -1
  54. package/modern/components/buttons/index.css +5 -5
  55. package/modern/components/buttons/index.module.css.js +1 -1
  56. package/modern/components/header/index.css +1 -1
  57. package/modern/components/header/index.module.css.js +1 -1
  58. package/modern/components/header-info-block/index.css +4 -4
  59. package/modern/components/header-info-block/index.module.css.js +1 -1
  60. package/modern/components/header-mobile/index.css +6 -6
  61. package/modern/components/header-mobile/index.module.css.js +1 -1
  62. package/modern/components/image-preview/index.css +17 -17
  63. package/modern/components/image-preview/index.module.css.js +1 -1
  64. package/modern/components/image-viewer/index.css +148 -124
  65. package/modern/components/image-viewer/index.module.css.js +1 -1
  66. package/modern/components/image-viewer/index.module.css.js.map +1 -1
  67. package/modern/components/image-viewer/video/index.css +7 -7
  68. package/modern/components/image-viewer/video/index.module.css.js +1 -1
  69. package/modern/components/info-bar/index.css +3 -3
  70. package/modern/components/info-bar/index.module.css.js +1 -1
  71. package/modern/components/navigation-bar/index.css +8 -8
  72. package/modern/components/navigation-bar/index.module.css.js +1 -1
  73. package/modern/components/subtitles/index.css +3 -3
  74. package/modern/components/subtitles/index.module.css.js +1 -1
  75. package/modern/index.css +9 -9
  76. package/modern/index.module.css.js +1 -1
  77. package/moderncssm/components/image-viewer/index.module.css +125 -125
  78. package/package.json +12 -12
  79. package/src/components/image-viewer/index.module.css +120 -120
@@ -3,20 +3,20 @@
3
3
  --color-static-neutral-translucent-500-inverted-hover: rgba(233, 233, 250, 0.37);
4
4
  --color-static-neutral-translucent-500-inverted-press: rgba(238, 238, 254, 0.46);
5
5
  }
6
- .gallery__component_1eogt {
6
+ .gallery__component_15xed {
7
7
  background-color: var(--color-static-neutral-translucent-500-inverted);
8
8
  }
9
- .gallery__component_1eogt:hover {
9
+ .gallery__component_15xed:hover {
10
10
  background-color: var(--color-static-neutral-translucent-500-inverted-hover);
11
11
  }
12
- .gallery__component_1eogt:active {
12
+ .gallery__component_15xed:active {
13
13
  background-color: var(--color-static-neutral-translucent-500-inverted-press);
14
14
  }
15
- .gallery__component_1eogt {
15
+ .gallery__component_15xed {
16
16
 
17
17
  transition: transform 1s ease-in-out;
18
18
  will-change: transform;
19
19
  }
20
- .gallery__notVisible_1eogt {
20
+ .gallery__notVisible_15xed {
21
21
  transform: translateY(250%);
22
22
  }
@@ -2,7 +2,7 @@
2
2
 
3
3
  require('./index.css');
4
4
 
5
- var styles = {"component":"gallery__component_1eogt","notVisible":"gallery__notVisible_1eogt"};
5
+ var styles = {"component":"gallery__component_15xed","notVisible":"gallery__notVisible_15xed"};
6
6
 
7
7
  module.exports = styles;
8
8
  //# sourceMappingURL=index.module.css.js.map
@@ -8,19 +8,19 @@
8
8
  --gap-2xl: 32px;
9
9
  --gap-32: var(--gap-2xl);
10
10
  }
11
- .gallery__buttons_d8zcl {
11
+ .gallery__buttons_1f6vr {
12
12
  display: flex;
13
13
  padding-left: var(--gap-32);
14
14
  }
15
- .gallery__buttons_d8zcl path {
15
+ .gallery__buttons_1f6vr path {
16
16
  color: var(--color-static-neutral-translucent-1300-inverted);
17
17
  }
18
- .gallery__iconButton_d8zcl path {
18
+ .gallery__iconButton_1f6vr path {
19
19
  color: var(--color-static-neutral-100);
20
20
  }
21
- .gallery__iconButton_d8zcl:hover path {
21
+ .gallery__iconButton_1f6vr:hover path {
22
22
  color: var(--color-static-neutral-100-hover);
23
23
  }
24
- .gallery__iconButton_d8zcl:active path {
24
+ .gallery__iconButton_1f6vr:active path {
25
25
  color: var(--color-static-neutral-100-press);
26
26
  }
@@ -2,7 +2,7 @@
2
2
 
3
3
  require('./index.css');
4
4
 
5
- var styles = {"iconButton":"gallery__iconButton_d8zcl"};
5
+ var styles = {"iconButton":"gallery__iconButton_1f6vr"};
6
6
 
7
7
  module.exports = styles;
8
8
  //# sourceMappingURL=index.module.css.js.map
@@ -4,7 +4,7 @@
4
4
  --gap-16: var(--gap-m);
5
5
  --gap-32: var(--gap-2xl);
6
6
  }
7
- .gallery__header_g8mrd {
7
+ .gallery__header_1gjh2 {
8
8
  display: flex;
9
9
  justify-content: space-between;
10
10
  flex-shrink: 0;
@@ -2,7 +2,7 @@
2
2
 
3
3
  require('./index.css');
4
4
 
5
- var styles = {"header":"gallery__header_g8mrd"};
5
+ var styles = {"header":"gallery__header_1gjh2"};
6
6
 
7
7
  module.exports = styles;
8
8
  //# sourceMappingURL=index.module.css.js.map
@@ -2,24 +2,24 @@
2
2
  --gap-2xs: 4px;
3
3
  --gap-4: var(--gap-2xs);
4
4
  }
5
- .gallery__info_19iou {
5
+ .gallery__info_1i0ih {
6
6
  height: 100%;
7
7
  display: flex;
8
8
  flex-direction: column;
9
9
  justify-content: center;
10
10
  overflow: hidden;
11
11
  }
12
- .gallery__filenameHead_19iou {
12
+ .gallery__filenameHead_1i0ih {
13
13
  display: inline;
14
14
  text-overflow: ellipsis;
15
15
  overflow: hidden;
16
16
  white-space: nowrap;
17
17
  }
18
- .gallery__filenameContainer_19iou {
18
+ .gallery__filenameContainer_1i0ih {
19
19
  overflow: hidden;
20
20
  display: inline-flex;
21
21
  }
22
- .gallery__description_19iou {
22
+ .gallery__description_1i0ih {
23
23
  display: inline;
24
24
  text-overflow: ellipsis;
25
25
  overflow: hidden;
@@ -2,7 +2,7 @@
2
2
 
3
3
  require('./index.css');
4
4
 
5
- var styles = {"info":"gallery__info_19iou","filenameHead":"gallery__filenameHead_19iou","filenameContainer":"gallery__filenameContainer_19iou","description":"gallery__description_19iou"};
5
+ var styles = {"info":"gallery__info_1i0ih","filenameHead":"gallery__filenameHead_1i0ih","filenameContainer":"gallery__filenameContainer_1i0ih","description":"gallery__description_1i0ih"};
6
6
 
7
7
  module.exports = styles;
8
8
  //# sourceMappingURL=index.module.css.js.map
@@ -1,7 +1,7 @@
1
1
  :root {
2
2
  --color-static-neutral-0-inverted: #262629;
3
3
  }
4
- .gallery__headerMobile_1j3qh {
4
+ .gallery__headerMobile_11md7 {
5
5
  position: relative;
6
6
  height: 72px;
7
7
  z-index: 3;
@@ -10,21 +10,21 @@
10
10
  justify-content: space-between;
11
11
  align-items: center;
12
12
  }
13
- .gallery__headerMobile_1j3qh.gallery__video_1j3qh {
13
+ .gallery__headerMobile_11md7.gallery__video_11md7 {
14
14
  position: absolute;
15
15
  width: 100%;
16
16
  background-color: var(--color-static-neutral-0-inverted);
17
17
  transition: transform 0.3s ease-in-out;
18
18
  }
19
- .gallery__hide_1j3qh {
19
+ .gallery__hide_11md7 {
20
20
  transform: translateY(-96px);
21
21
  }
22
- .gallery__leftButton_1j3qh,
23
- .gallery__rightButtons_1j3qh {
22
+ .gallery__leftButton_11md7,
23
+ .gallery__rightButtons_11md7 {
24
24
  display: flex;
25
25
  align-items: center;
26
26
  }
27
- .gallery__description_1j3qh {
27
+ .gallery__description_11md7 {
28
28
  position: absolute;
29
29
  left: 50%;
30
30
  transform: translateX(-50%);
@@ -2,7 +2,7 @@
2
2
 
3
3
  require('./index.css');
4
4
 
5
- var styles = {"headerMobile":"gallery__headerMobile_1j3qh","video":"gallery__video_1j3qh","hide":"gallery__hide_1j3qh","rightButtons":"gallery__rightButtons_1j3qh","description":"gallery__description_1j3qh"};
5
+ var styles = {"headerMobile":"gallery__headerMobile_11md7","video":"gallery__video_11md7","hide":"gallery__hide_11md7","rightButtons":"gallery__rightButtons_11md7","description":"gallery__description_11md7"};
6
6
 
7
7
  module.exports = styles;
8
8
  //# sourceMappingURL=index.module.css.js.map
@@ -12,23 +12,23 @@
12
12
  :root {
13
13
  --focus-color: var(--color-light-status-info);
14
14
  }
15
- .gallery__component_fcv7j {
15
+ .gallery__component_zvjvr {
16
16
  display: flex;
17
17
  z-index: 3;
18
18
  overflow: hidden;
19
19
  transition: border 0.15s ease-in-out;
20
20
  outline: none;
21
21
  }
22
- .gallery__component_fcv7j .gallery__image_fcv7j {
22
+ .gallery__component_zvjvr .gallery__image_zvjvr {
23
23
  opacity: 0.3;
24
24
  }
25
- .gallery__component_fcv7j.gallery__mobile_fcv7j {
25
+ .gallery__component_zvjvr.gallery__mobile_zvjvr {
26
26
  padding: 0;
27
27
  }
28
- .gallery__active_fcv7j > .gallery__image_fcv7j {
28
+ .gallery__active_zvjvr > .gallery__image_zvjvr {
29
29
  opacity: 1;
30
30
  }
31
- .gallery__preview_fcv7j {
31
+ .gallery__preview_zvjvr {
32
32
  width: 56px;
33
33
  height: 56px;
34
34
  flex-shrink: 0;
@@ -38,15 +38,15 @@
38
38
  -moz-user-select: none;
39
39
  user-select: none;
40
40
  }
41
- .gallery__preview_fcv7j.gallery__mobile_fcv7j {
41
+ .gallery__preview_zvjvr.gallery__mobile_zvjvr {
42
42
  width: 46px;
43
43
  height: 46px;
44
44
  border-radius: var(--border-radius-8);
45
45
  }
46
- .gallery__image_fcv7j {
46
+ .gallery__image_zvjvr {
47
47
  transition: opacity 0.15s ease-in-out;
48
48
  }
49
- .gallery__image_fcv7j > img {
49
+ .gallery__image_zvjvr > img {
50
50
  display: block;
51
51
  width: 100%;
52
52
  height: 100%;
@@ -56,36 +56,36 @@
56
56
  overflow: clip;
57
57
  overflow-clip-margin: border-box;
58
58
  }
59
- .gallery__image_fcv7j:hover {
59
+ .gallery__image_zvjvr:hover {
60
60
  opacity: 0.7;
61
61
  }
62
- .gallery__loading_fcv7j {
62
+ .gallery__loading_zvjvr {
63
63
  background-color: var(--color-static-neutral-100-inverted);
64
64
  }
65
- .gallery__loading_fcv7j .gallery__active_fcv7j {
65
+ .gallery__loading_zvjvr .gallery__active_zvjvr {
66
66
  background-color: var(--color-static-neutral-300-inverted);
67
67
  }
68
- .gallery__brokenImageWrapper_fcv7j {
68
+ .gallery__brokenImageWrapper_zvjvr {
69
69
  display: flex;
70
70
  justify-content: center;
71
71
  align-items: center;
72
72
  background-color: var(--color-static-neutral-300-inverted);
73
73
  opacity: 0.3;
74
74
  }
75
- .gallery__brokenImageWrapper_fcv7j.gallery__active_fcv7j {
75
+ .gallery__brokenImageWrapper_zvjvr.gallery__active_zvjvr {
76
76
  opacity: 1;
77
77
  }
78
- .gallery__brokenIcon_fcv7j {
78
+ .gallery__brokenIcon_zvjvr {
79
79
  width: 40px;
80
80
  height: 40px;
81
81
  }
82
- .gallery__focused_fcv7j {
82
+ .gallery__focused_zvjvr {
83
83
  outline: 2px solid var(--focus-color);
84
84
  outline-offset: 2px;
85
85
  }
86
- .gallery__canvasPreview_fcv7j {
86
+ .gallery__canvasPreview_zvjvr {
87
87
  border-radius: var(--border-radius-12);
88
88
  }
89
- .gallery__canvasPreview_fcv7j.gallery__mobile_fcv7j {
89
+ .gallery__canvasPreview_zvjvr.gallery__mobile_zvjvr {
90
90
  border-radius: var(--border-radius-8);
91
91
  }
@@ -2,7 +2,7 @@
2
2
 
3
3
  require('./index.css');
4
4
 
5
- var styles = {"component":"gallery__component_fcv7j","image":"gallery__image_fcv7j","mobile":"gallery__mobile_fcv7j","active":"gallery__active_fcv7j","preview":"gallery__preview_fcv7j","loading":"gallery__loading_fcv7j","brokenImageWrapper":"gallery__brokenImageWrapper_fcv7j","brokenIcon":"gallery__brokenIcon_fcv7j","focused":"gallery__focused_fcv7j","canvasPreview":"gallery__canvasPreview_fcv7j"};
5
+ var styles = {"component":"gallery__component_zvjvr","image":"gallery__image_zvjvr","mobile":"gallery__mobile_zvjvr","active":"gallery__active_zvjvr","preview":"gallery__preview_zvjvr","loading":"gallery__loading_zvjvr","brokenImageWrapper":"gallery__brokenImageWrapper_zvjvr","brokenIcon":"gallery__brokenIcon_zvjvr","focused":"gallery__focused_zvjvr","canvasPreview":"gallery__canvasPreview_zvjvr"};
6
6
 
7
7
  module.exports = styles;
8
8
  //# sourceMappingURL=index.module.css.js.map
@@ -24,7 +24,7 @@
24
24
  :root {
25
25
  --focus-color: var(--color-light-status-info);
26
26
  }
27
- .gallery__component_1653q {
27
+ .gallery__component_1rzvc {
28
28
  display: flex;
29
29
  flex-grow: 1;
30
30
  justify-content: center;
@@ -90,134 +90,158 @@
90
90
  opacity: 0;
91
91
  z-index: -1000;
92
92
  }
93
- }
94
- .gallery__swiper_1653q {
95
- display: flex;
96
- width: 100%;
97
- height: 100%;
98
- max-height: calc(100vh - 168px);
99
- padding: var(--gap-32) var(--gap-16);
100
- box-sizing: border-box;
101
- }
102
- .gallery__swiper_1653q.gallery__mobile_1653q {
103
- max-height: calc(100vh - 210px);
93
+
94
+ .gallery__swiper_1rzvc {
95
+ display: flex;
96
+ width: 100%;
97
+ height: 100%;
98
+ max-height: calc(100vh - 168px);
99
+ padding: var(--gap-32) var(--gap-16);
100
+ box-sizing: border-box;
104
101
  }
105
- .gallery__swiper_1653q.gallery__mobileVideo_1653q {
106
- max-height: 100vh;
102
+
103
+ .gallery__swiper_1rzvc.gallery__mobile_1rzvc {
104
+ max-height: calc(100vh - 210px);
105
+ }
106
+
107
+ .gallery__swiper_1rzvc.gallery__mobileVideo_1rzvc {
108
+ max-height: 100vh;
109
+ }
110
+
111
+ .gallery__singleSlideContainer_1rzvc {
112
+ display: flex;
113
+ width: 100%;
114
+ height: 100%;
115
+
116
+ max-height: calc(100vh - 80px);
117
+ padding: var(--gap-32);
118
+ box-sizing: border-box;
107
119
  }
108
- .gallery__singleSlideContainer_1653q {
109
- display: flex;
110
- width: 100%;
111
- height: 100%;
112
120
 
113
- max-height: calc(100vh - 80px);
114
- padding: var(--gap-32);
115
- box-sizing: border-box;
116
- }
117
- .gallery__singleSlideContainer_1653q.gallery__mobile_1653q {
118
- max-height: calc(100vh - 174px);
119
- padding: 0;
121
+ .gallery__singleSlideContainer_1rzvc.gallery__mobile_1rzvc {
122
+ max-height: calc(100vh - 174px);
123
+ padding: 0;
124
+ }
125
+
126
+ .gallery__singleSlideContainer_1rzvc.gallery__mobileVideo_1rzvc {
127
+ max-height: 100vh;
128
+ }
129
+
130
+ .gallery__hidden_1rzvc {
131
+ display: none;
120
132
  }
121
- .gallery__singleSlideContainer_1653q.gallery__mobileVideo_1653q {
122
- max-height: 100vh;
133
+
134
+ .gallery__slide_1rzvc {
135
+ position: relative;
136
+ display: flex;
137
+ justify-content: center;
138
+ align-items: center;
139
+ width: 100%;
140
+ height: 100%;
123
141
  }
124
- .gallery__hidden_1653q {
125
- display: none;
126
- }
127
- .gallery__slide_1653q {
128
- position: relative;
129
- display: flex;
130
- justify-content: center;
131
- align-items: center;
132
- width: 100%;
133
- height: 100%;
134
- }
135
- .gallery__slideLoading_1653q {
136
- background-color: var(--color-static-neutral-translucent-100-inverted);
137
- border-radius: var(--border-radius-8);
138
- }
139
- .gallery__spinner_1653q {
140
- position: absolute;
141
- color: var(--color-static-neutral-translucent-1300-inverted);
142
- }
143
- .gallery__image_1653q {
144
- width: 0;
145
- height: 0;
146
- -webkit-user-select: none;
147
- -moz-user-select: none;
148
- user-select: none;
149
- border-radius: var(--border-radius-8);
150
- }
151
- .gallery__image_1653q.gallery__mobile_1653q {
152
- border-radius: var(--border-radius-0);
153
- }
154
- .gallery__smallImage_1653q {
155
- position: relative;
156
- width: auto;
157
- height: auto;
158
- -webkit-user-select: none;
159
- -moz-user-select: none;
160
- user-select: none;
161
- }
162
- .gallery__verticalImageFit_1653q {
163
- width: auto;
164
- height: 100%;
165
- }
166
- .gallery__horizontalImageFit_1653q {
167
- width: 100%;
168
- height: auto;
169
- }
170
- .gallery__arrow_1653q {
171
- display: flex;
172
- flex-direction: column;
173
- justify-content: center;
174
- align-items: center;
175
- flex-shrink: 0;
176
- width: 96px;
177
- height: 100%;
178
- cursor: pointer;
179
- color: var(--color-static-neutral-translucent-1300-inverted);
180
- transition: background-color 0.15s ease-in-out;
181
- outline: none;
182
- }
183
- .gallery__arrow_1653q:hover {
184
- background-color: var(--color-static-neutral-0-inverted-hover);
142
+
143
+ .gallery__slideLoading_1rzvc {
144
+ background-color: var(--color-static-neutral-translucent-100-inverted);
145
+ border-radius: var(--border-radius-8);
185
146
  }
186
- .gallery__arrow_1653q:active {
187
- background-color: var(--color-static-neutral-0-inverted-press);
147
+
148
+ .gallery__spinner_1rzvc {
149
+ position: absolute;
150
+ color: var(--color-static-neutral-translucent-1300-inverted);
151
+ }
152
+
153
+ .gallery__image_1rzvc {
154
+ width: 0;
155
+ height: 0;
156
+ -webkit-user-select: none;
157
+ -moz-user-select: none;
158
+ user-select: none;
159
+ border-radius: var(--border-radius-8);
160
+ }
161
+
162
+ .gallery__image_1rzvc.gallery__mobile_1rzvc {
163
+ border-radius: var(--border-radius-0);
164
+ }
165
+
166
+ .gallery__smallImage_1rzvc {
167
+ position: relative;
168
+ width: auto;
169
+ height: auto;
170
+ -webkit-user-select: none;
171
+ -moz-user-select: none;
172
+ user-select: none;
173
+ }
174
+
175
+ .gallery__verticalImageFit_1rzvc {
176
+ width: auto;
177
+ height: 100%;
178
+ }
179
+
180
+ .gallery__horizontalImageFit_1rzvc {
181
+ width: 100%;
182
+ height: auto;
183
+ }
184
+
185
+ .gallery__arrow_1rzvc {
186
+ display: flex;
187
+ flex-direction: column;
188
+ justify-content: center;
189
+ align-items: center;
190
+ flex-shrink: 0;
191
+ width: 96px;
192
+ height: 100%;
193
+ cursor: pointer;
194
+ color: var(--color-static-neutral-translucent-1300-inverted);
195
+ transition: background-color 0.15s ease-in-out;
196
+ outline: none;
197
+ }
198
+
199
+ .gallery__arrow_1rzvc:hover {
200
+ background-color: var(--color-static-neutral-0-inverted-hover);
201
+ }
202
+
203
+ .gallery__arrow_1rzvc:active {
204
+ background-color: var(--color-static-neutral-0-inverted-press);
205
+ }
206
+
207
+ .gallery__focused_1rzvc {
208
+ outline: 2px solid var(--focus-color);
209
+ outline-offset: 2px;
210
+ }
211
+
212
+ .gallery__placeholder_1rzvc {
213
+ display: flex;
214
+ justify-content: center;
215
+ align-items: center;
216
+ width: 100%;
217
+ height: 100%;
218
+ border-radius: var(--border-radius-8);
219
+ background-color: var(--color-static-neutral-300-inverted);
220
+ }
221
+
222
+ .gallery__brokenImgWrapper_1rzvc {
223
+ position: relative;
224
+ display: flex;
225
+ flex-direction: column;
226
+ align-items: center;
227
+ width: 150px;
228
+ text-align: center;
229
+ }
230
+
231
+ .gallery__brokenImgIcon_1rzvc {
232
+ width: 80px;
233
+ height: 80px;
234
+ margin-bottom: var(--gap-4);
235
+ }
236
+
237
+ .gallery__fullScreenImage_1rzvc {
238
+ width: 100%;
239
+ height: auto;
240
+ background-color: var(--color-light-base-bg-primary);
241
+ }
242
+
243
+ .gallery__fullScreenVideo_1rzvc {
244
+ width: calc(100% - 192px);
245
+ max-height: calc(100vh - 82px);
188
246
  }
189
- .gallery__focused_1653q {
190
- outline: 2px solid var(--focus-color);
191
- outline-offset: 2px;
192
- }
193
- .gallery__placeholder_1653q {
194
- display: flex;
195
- justify-content: center;
196
- align-items: center;
197
- width: 100%;
198
- height: 100%;
199
- border-radius: var(--border-radius-8);
200
- background-color: var(--color-static-neutral-300-inverted);
201
- }
202
- .gallery__brokenImgWrapper_1653q {
203
- position: relative;
204
- display: flex;
205
- flex-direction: column;
206
- align-items: center;
207
- width: 150px;
208
- text-align: center;
209
- }
210
- .gallery__brokenImgIcon_1653q {
211
- width: 80px;
212
- height: 80px;
213
- margin-bottom: var(--gap-4);
214
- }
215
- .gallery__fullScreenImage_1653q {
216
- width: 100%;
217
- height: auto;
218
- background-color: var(--color-light-base-bg-primary);
219
- }
220
- .gallery__fullScreenVideo_1653q {
221
- width: calc(100% - 192px);
222
- max-height: calc(100vh - 82px);
223
247
  }
@@ -2,7 +2,7 @@
2
2
 
3
3
  require('./index.css');
4
4
 
5
- var styles = {"component":"gallery__component_1653q","swiper":"gallery__swiper_1653q","mobile":"gallery__mobile_1653q","mobileVideo":"gallery__mobileVideo_1653q","singleSlideContainer":"gallery__singleSlideContainer_1653q","hidden":"gallery__hidden_1653q","slide":"gallery__slide_1653q","slideLoading":"gallery__slideLoading_1653q","spinner":"gallery__spinner_1653q","image":"gallery__image_1653q","smallImage":"gallery__smallImage_1653q","verticalImageFit":"gallery__verticalImageFit_1653q","horizontalImageFit":"gallery__horizontalImageFit_1653q","arrow":"gallery__arrow_1653q","focused":"gallery__focused_1653q","placeholder":"gallery__placeholder_1653q","brokenImgWrapper":"gallery__brokenImgWrapper_1653q","brokenImgIcon":"gallery__brokenImgIcon_1653q","fullScreenImage":"gallery__fullScreenImage_1653q","fullScreenVideo":"gallery__fullScreenVideo_1653q"};
5
+ var styles = {"component":"gallery__component_1rzvc","swiper":"gallery__swiper_1rzvc","mobile":"gallery__mobile_1rzvc","mobileVideo":"gallery__mobileVideo_1rzvc","singleSlideContainer":"gallery__singleSlideContainer_1rzvc","hidden":"gallery__hidden_1rzvc","slide":"gallery__slide_1rzvc","slideLoading":"gallery__slideLoading_1rzvc","spinner":"gallery__spinner_1rzvc","image":"gallery__image_1rzvc","smallImage":"gallery__smallImage_1rzvc","verticalImageFit":"gallery__verticalImageFit_1rzvc","horizontalImageFit":"gallery__horizontalImageFit_1rzvc","arrow":"gallery__arrow_1rzvc","focused":"gallery__focused_1rzvc","placeholder":"gallery__placeholder_1rzvc","brokenImgWrapper":"gallery__brokenImgWrapper_1rzvc","brokenImgIcon":"gallery__brokenImgIcon_1rzvc","fullScreenImage":"gallery__fullScreenImage_1rzvc","fullScreenVideo":"gallery__fullScreenVideo_1rzvc"};
6
6
 
7
7
  module.exports = styles;
8
8
  //# sourceMappingURL=index.module.css.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.module.css.js","sources":["../../src/components/image-viewer/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component {\n display: flex;\n flex-grow: 1;\n justify-content: center;\n background-color: var(--color-static-neutral-0-inverted);\n\n /* swiper/swiper.css; */\n :global(.swiper) {\n margin-left: auto;\n margin-right: auto;\n position: relative;\n overflow: hidden;\n list-style: none;\n padding: 0;\n z-index: 1;\n display: block;\n }\n :global(.swiper-wrapper) {\n position: relative;\n width: 100%;\n height: 100%;\n z-index: 1;\n display: flex;\n transition-property: transform;\n transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);\n box-sizing: content-box;\n }\n :global(.swiper-android) :global(.swiper-slide),\n :global(.swiper-ios) :global(.swiper-slide),\n :global(.swiper-wrapper) {\n transform: translate3d(0, 0, 0);\n }\n :global(.swiper-horizontal) {\n touch-action: pan-y;\n }\n :global(.swiper-slide) {\n flex-shrink: 0;\n width: 100%;\n height: 100%;\n position: relative;\n transition-property: transform;\n display: block;\n }\n :global(.swiper-slide-invisible-blank) {\n visibility: hidden;\n }\n :global(.swiper-autoheight),\n :global(.swiper-autoheight) :global(.swiper-slide) {\n height: auto;\n }\n :global(.swiper-autoheight) :global(.swiper-wrapper) {\n align-items: flex-start;\n transition-property: transform, height;\n }\n :global(.swiper-backface-hidden) :global(.swiper-slide) {\n transform: translateZ(0);\n backface-visibility: hidden;\n }\n\n /* swiper/modules/a11y.css */\n :global(.swiper) :global(.swiper-notification) {\n position: absolute;\n left: 0;\n top: 0;\n pointer-events: none;\n opacity: 0;\n z-index: -1000;\n }\n}\n\n.swiper {\n display: flex;\n width: 100%;\n height: 100%;\n\n /* 168px - высота хэдера и футера */\n max-height: calc(100vh - 168px);\n padding: var(--gap-32) var(--gap-16);\n box-sizing: border-box;\n\n &.mobile {\n max-height: calc(100vh - 210px);\n }\n\n &.mobileVideo {\n max-height: 100vh;\n }\n}\n\n.singleSlideContainer {\n display: flex;\n width: 100%;\n height: 100%;\n\n max-height: calc(100vh - 80px);\n padding: var(--gap-32);\n box-sizing: border-box;\n\n &.mobile {\n max-height: calc(100vh - 174px);\n padding: 0;\n }\n\n &.mobileVideo {\n max-height: 100vh;\n }\n}\n\n.hidden {\n display: none;\n}\n\n.slide {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n}\n\n.slideLoading {\n background-color: var(--color-static-neutral-translucent-100-inverted);\n border-radius: var(--border-radius-8);\n}\n\n.spinner {\n position: absolute;\n color: var(--color-static-neutral-translucent-1300-inverted);\n}\n\n.image {\n width: 0;\n height: 0;\n user-select: none;\n border-radius: var(--border-radius-8);\n\n &.mobile {\n border-radius: var(--border-radius-0);\n }\n}\n\n.smallImage {\n position: relative;\n width: auto;\n height: auto;\n user-select: none;\n}\n\n.verticalImageFit {\n width: auto;\n height: 100%;\n}\n\n.horizontalImageFit {\n width: 100%;\n height: auto;\n}\n\n.arrow {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n flex-shrink: 0;\n width: 96px;\n height: 100%;\n cursor: pointer;\n color: var(--color-static-neutral-translucent-1300-inverted);\n transition: background-color 0.15s ease-in-out;\n outline: none;\n\n &:hover {\n background-color: var(--color-static-neutral-0-inverted-hover);\n }\n\n &:active {\n background-color: var(--color-static-neutral-0-inverted-press);\n }\n}\n\n.focused {\n @mixin focus-outline;\n}\n\n.placeholder {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n border-radius: var(--border-radius-8);\n background-color: var(--color-static-neutral-300-inverted);\n}\n\n.brokenImgWrapper {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 150px;\n text-align: center;\n}\n\n.brokenImgIcon {\n width: 80px;\n height: 80px;\n margin-bottom: var(--gap-4);\n}\n\n.fullScreenImage {\n width: 100%;\n height: auto;\n background-color: var(--color-light-base-bg-primary);\n}\n\n.fullScreenVideo {\n width: calc(100% - 192px);\n max-height: calc(100vh - 82px);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,0BAA0B,CAAC,QAAQ,CAAC,uBAAuB,CAAC,QAAQ,CAAC,uBAAuB,CAAC,aAAa,CAAC,4BAA4B,CAAC,sBAAsB,CAAC,qCAAqC,CAAC,QAAQ,CAAC,uBAAuB,CAAC,OAAO,CAAC,sBAAsB,CAAC,cAAc,CAAC,6BAA6B,CAAC,SAAS,CAAC,wBAAwB,CAAC,OAAO,CAAC,sBAAsB,CAAC,YAAY,CAAC,2BAA2B,CAAC,kBAAkB,CAAC,iCAAiC,CAAC,oBAAoB,CAAC,mCAAmC,CAAC,OAAO,CAAC,sBAAsB,CAAC,SAAS,CAAC,wBAAwB,CAAC,aAAa,CAAC,4BAA4B,CAAC,kBAAkB,CAAC,iCAAiC,CAAC,eAAe,CAAC,8BAA8B,CAAC,iBAAiB,CAAC,gCAAgC,CAAC,iBAAiB,CAAC,gCAAgC,CAAC;;;;"}
1
+ {"version":3,"file":"index.module.css.js","sources":["../../src/components/image-viewer/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component {\n display: flex;\n flex-grow: 1;\n justify-content: center;\n background-color: var(--color-static-neutral-0-inverted);\n\n /* swiper/swiper.css; */\n :global(.swiper) {\n margin-left: auto;\n margin-right: auto;\n position: relative;\n overflow: hidden;\n list-style: none;\n padding: 0;\n z-index: 1;\n display: block;\n }\n :global(.swiper-wrapper) {\n position: relative;\n width: 100%;\n height: 100%;\n z-index: 1;\n display: flex;\n transition-property: transform;\n transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);\n box-sizing: content-box;\n }\n :global(.swiper-android) :global(.swiper-slide),\n :global(.swiper-ios) :global(.swiper-slide),\n :global(.swiper-wrapper) {\n transform: translate3d(0, 0, 0);\n }\n :global(.swiper-horizontal) {\n touch-action: pan-y;\n }\n :global(.swiper-slide) {\n flex-shrink: 0;\n width: 100%;\n height: 100%;\n position: relative;\n transition-property: transform;\n display: block;\n }\n :global(.swiper-slide-invisible-blank) {\n visibility: hidden;\n }\n :global(.swiper-autoheight),\n :global(.swiper-autoheight) :global(.swiper-slide) {\n height: auto;\n }\n :global(.swiper-autoheight) :global(.swiper-wrapper) {\n align-items: flex-start;\n transition-property: transform, height;\n }\n :global(.swiper-backface-hidden) :global(.swiper-slide) {\n transform: translateZ(0);\n backface-visibility: hidden;\n }\n\n /* swiper/modules/a11y.css */\n :global(.swiper) :global(.swiper-notification) {\n position: absolute;\n left: 0;\n top: 0;\n pointer-events: none;\n opacity: 0;\n z-index: -1000;\n }\n\n .swiper {\n display: flex;\n width: 100%;\n height: 100%;\n\n /* 168px - высота хэдера и футера */\n max-height: calc(100vh - 168px);\n padding: var(--gap-32) var(--gap-16);\n box-sizing: border-box;\n\n &.mobile {\n max-height: calc(100vh - 210px);\n }\n\n &.mobileVideo {\n max-height: 100vh;\n }\n }\n\n .singleSlideContainer {\n display: flex;\n width: 100%;\n height: 100%;\n\n max-height: calc(100vh - 80px);\n padding: var(--gap-32);\n box-sizing: border-box;\n\n &.mobile {\n max-height: calc(100vh - 174px);\n padding: 0;\n }\n\n &.mobileVideo {\n max-height: 100vh;\n }\n }\n\n .hidden {\n display: none;\n }\n\n .slide {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n }\n\n .slideLoading {\n background-color: var(--color-static-neutral-translucent-100-inverted);\n border-radius: var(--border-radius-8);\n }\n\n .spinner {\n position: absolute;\n color: var(--color-static-neutral-translucent-1300-inverted);\n }\n\n .image {\n width: 0;\n height: 0;\n user-select: none;\n border-radius: var(--border-radius-8);\n\n &.mobile {\n border-radius: var(--border-radius-0);\n }\n }\n\n .smallImage {\n position: relative;\n width: auto;\n height: auto;\n user-select: none;\n }\n\n .verticalImageFit {\n width: auto;\n height: 100%;\n }\n\n .horizontalImageFit {\n width: 100%;\n height: auto;\n }\n\n .arrow {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n flex-shrink: 0;\n width: 96px;\n height: 100%;\n cursor: pointer;\n color: var(--color-static-neutral-translucent-1300-inverted);\n transition: background-color 0.15s ease-in-out;\n outline: none;\n\n &:hover {\n background-color: var(--color-static-neutral-0-inverted-hover);\n }\n\n &:active {\n background-color: var(--color-static-neutral-0-inverted-press);\n }\n }\n\n .focused {\n @mixin focus-outline;\n }\n\n .placeholder {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n border-radius: var(--border-radius-8);\n background-color: var(--color-static-neutral-300-inverted);\n }\n\n .brokenImgWrapper {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 150px;\n text-align: center;\n }\n\n .brokenImgIcon {\n width: 80px;\n height: 80px;\n margin-bottom: var(--gap-4);\n }\n\n .fullScreenImage {\n width: 100%;\n height: auto;\n background-color: var(--color-light-base-bg-primary);\n }\n\n .fullScreenVideo {\n width: calc(100% - 192px);\n max-height: calc(100vh - 82px);\n }\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,0BAA0B,CAAC,QAAQ,CAAC,uBAAuB,CAAC,QAAQ,CAAC,uBAAuB,CAAC,aAAa,CAAC,4BAA4B,CAAC,sBAAsB,CAAC,qCAAqC,CAAC,QAAQ,CAAC,uBAAuB,CAAC,OAAO,CAAC,sBAAsB,CAAC,cAAc,CAAC,6BAA6B,CAAC,SAAS,CAAC,wBAAwB,CAAC,OAAO,CAAC,sBAAsB,CAAC,YAAY,CAAC,2BAA2B,CAAC,kBAAkB,CAAC,iCAAiC,CAAC,oBAAoB,CAAC,mCAAmC,CAAC,OAAO,CAAC,sBAAsB,CAAC,SAAS,CAAC,wBAAwB,CAAC,aAAa,CAAC,4BAA4B,CAAC,kBAAkB,CAAC,iCAAiC,CAAC,eAAe,CAAC,8BAA8B,CAAC,iBAAiB,CAAC,gCAAgC,CAAC,iBAAiB,CAAC,gCAAgC,CAAC;;;;"}
@@ -7,22 +7,22 @@
7
7
  --border-radius-0: 0;
8
8
  --border-radius-24: var(--border-radius-3xl);
9
9
  }
10
- .gallery__videoWrapper_91hpk {
10
+ .gallery__videoWrapper_i1p91 {
11
11
  display: flex;
12
12
  justify-content: center;
13
13
  height: 100%;
14
14
  width: auto;
15
15
  position: relative;
16
16
  }
17
- .gallery__video_91hpk {
17
+ .gallery__video_i1p91 {
18
18
  max-width: 100%;
19
19
  max-height: 100%;
20
20
  border-radius: var(--border-radius-24);
21
21
  }
22
- .gallery__mobile_91hpk {
22
+ .gallery__mobile_i1p91 {
23
23
  border-radius: var(--border-radius-0);
24
24
  }
25
- .gallery__videoButton_91hpk {
25
+ .gallery__videoButton_i1p91 {
26
26
  position: absolute;
27
27
  top: 50%;
28
28
  left: 50%;
@@ -30,13 +30,13 @@
30
30
  z-index: 1;
31
31
  color: green;
32
32
  }
33
- .gallery__icon_91hpk {
33
+ .gallery__icon_i1p91 {
34
34
  color: var(--color-static-neutral-0);
35
35
  }
36
- .gallery__iconShape_91hpk {
36
+ .gallery__iconShape_i1p91 {
37
37
  fill: var(--color-static-neutral-translucent-700);
38
38
  }
39
- .gallery__bottomButton_91hpk {
39
+ .gallery__bottomButton_i1p91 {
40
40
  position: absolute;
41
41
  bottom: 48px;
42
42
  left: 32px;