luna-one 3.1.373 → 3.1.374
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.
|
@@ -7,6 +7,18 @@
|
|
|
7
7
|
&--reverse {
|
|
8
8
|
flex-direction: column-reverse;
|
|
9
9
|
padding-bottom: 35px;
|
|
10
|
+
.ter-image-gallery__nav {
|
|
11
|
+
padding: 30px 90px 30px 90px;
|
|
12
|
+
@media screen and (max-width: $breakpoint-md) {
|
|
13
|
+
padding: 0 60px 30px 60px;
|
|
14
|
+
}
|
|
15
|
+
@media screen and (max-width: $breakpoint-sm) {
|
|
16
|
+
padding: 0 30px 20px 30px;
|
|
17
|
+
}
|
|
18
|
+
@media screen and (max-width: $breakpoint-xs) {
|
|
19
|
+
padding: 0 0 20px 0;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
10
22
|
}
|
|
11
23
|
}
|
|
12
24
|
&__inner {
|
|
@@ -21,16 +33,16 @@
|
|
|
21
33
|
flex-direction: row;
|
|
22
34
|
justify-content: space-between;
|
|
23
35
|
align-items: center;
|
|
24
|
-
padding: 30px 90px;
|
|
36
|
+
padding: 30px 90px 0 90px;
|
|
25
37
|
@media screen and (max-width: $breakpoint-md) {
|
|
26
|
-
padding: 30px 60px;
|
|
38
|
+
padding: 30px 60px 0 60px;
|
|
27
39
|
}
|
|
28
40
|
@media screen and (max-width: $breakpoint-sm) {
|
|
29
|
-
padding: 20px 30px;
|
|
41
|
+
padding: 20px 30px 0 30px;
|
|
30
42
|
flex-wrap: wrap;
|
|
31
43
|
}
|
|
32
44
|
@media screen and (max-width: $breakpoint-xs) {
|
|
33
|
-
padding: 20px
|
|
45
|
+
padding: 20px 0 0 0;
|
|
34
46
|
flex-wrap: wrap;
|
|
35
47
|
}
|
|
36
48
|
.ter-button {
|
|
@@ -63,12 +75,11 @@
|
|
|
63
75
|
}
|
|
64
76
|
}
|
|
65
77
|
&__thumbnail-wrapper {
|
|
66
|
-
padding:
|
|
78
|
+
padding: 10px;
|
|
67
79
|
border: 2px solid transparent;
|
|
68
80
|
transition: 0.3s linear border;
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
}
|
|
81
|
+
margin-left: 5px;
|
|
82
|
+
margin-right: 5px;
|
|
72
83
|
@media screen and (max-width: $breakpoint-xs){
|
|
73
84
|
padding: 5px;
|
|
74
85
|
}
|
|
@@ -110,55 +121,80 @@
|
|
|
110
121
|
height: auto;
|
|
111
122
|
}
|
|
112
123
|
&__images {
|
|
113
|
-
|
|
124
|
+
margin-top: 30px;
|
|
114
125
|
width: 100%;
|
|
115
126
|
position: relative;
|
|
116
127
|
@media screen and (max-width: $breakpoint-sm){
|
|
117
|
-
|
|
128
|
+
margin-top: 10px;
|
|
118
129
|
}
|
|
119
130
|
}
|
|
120
|
-
&
|
|
131
|
+
&__image-border {
|
|
132
|
+
background-image: url("../../images/gallery-image-corner-border.svg");
|
|
133
|
+
background-repeat: no-repeat;
|
|
121
134
|
position: absolute;
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
width:
|
|
126
|
-
@media screen and (max-width: $breakpoint-md) {
|
|
135
|
+
height: 32px;
|
|
136
|
+
width: 32px;
|
|
137
|
+
bottom: -32px;
|
|
138
|
+
@media screen and (max-width: $breakpoint-md){
|
|
127
139
|
width: 24px;
|
|
128
140
|
height: 24px;
|
|
141
|
+
bottom: -24px;
|
|
129
142
|
}
|
|
130
|
-
@media screen and (max-width: $breakpoint-xs)
|
|
143
|
+
@media screen and (max-width: $breakpoint-xs){
|
|
131
144
|
width: 10px;
|
|
132
145
|
height: 10px;
|
|
146
|
+
bottom: -10px;
|
|
133
147
|
}
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
148
|
+
&-left {
|
|
149
|
+
left: -32px;
|
|
150
|
+
transform: rotate(90deg);
|
|
151
|
+
@media screen and (max-width: $breakpoint-md){
|
|
152
|
+
left: -24px;
|
|
153
|
+
}
|
|
154
|
+
@media screen and (max-width: $breakpoint-xs){
|
|
155
|
+
left: -10px;
|
|
156
|
+
}
|
|
139
157
|
}
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
158
|
+
&-right {
|
|
159
|
+
right: -32px;
|
|
160
|
+
@media screen and (max-width: $breakpoint-md){
|
|
161
|
+
right: -24px;
|
|
162
|
+
}
|
|
163
|
+
@media screen and (max-width: $breakpoint-xs){
|
|
164
|
+
right: -10px;
|
|
165
|
+
}
|
|
145
166
|
}
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
@media screen and (max-width: $breakpoint-
|
|
152
|
-
|
|
167
|
+
&-top-left,
|
|
168
|
+
&-top-right {
|
|
169
|
+
bottom: initial;
|
|
170
|
+
top: -32px;
|
|
171
|
+
transform: rotate(180deg);
|
|
172
|
+
@media screen and (max-width: $breakpoint-md){
|
|
173
|
+
top: -24px;
|
|
174
|
+
}
|
|
175
|
+
@media screen and (max-width: $breakpoint-xs){
|
|
176
|
+
top: -10px;
|
|
153
177
|
}
|
|
154
178
|
}
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
179
|
+
&-top {
|
|
180
|
+
&-left {
|
|
181
|
+
left: -32px;
|
|
182
|
+
@media screen and (max-width: $breakpoint-md){
|
|
183
|
+
left: -24px;
|
|
184
|
+
}
|
|
185
|
+
@media screen and (max-width: $breakpoint-xs){
|
|
186
|
+
left: -10px;
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
&-right {
|
|
190
|
+
transform: rotate(270deg);
|
|
191
|
+
right: -32px;
|
|
192
|
+
@media screen and (max-width: $breakpoint-md){
|
|
193
|
+
right: -24px;
|
|
194
|
+
}
|
|
195
|
+
@media screen and (max-width: $breakpoint-xs){
|
|
196
|
+
right: -10px;
|
|
197
|
+
}
|
|
162
198
|
}
|
|
163
199
|
}
|
|
164
200
|
}
|
|
@@ -331,51 +367,72 @@
|
|
|
331
367
|
}
|
|
332
368
|
}
|
|
333
369
|
&--split {
|
|
334
|
-
display:
|
|
370
|
+
display: grid;
|
|
371
|
+
grid-template-columns: repeat(16, 1fr);
|
|
372
|
+
grid-template-rows: 1fr;
|
|
335
373
|
flex-wrap: wrap;
|
|
336
374
|
align-items: center;
|
|
337
375
|
padding-bottom: 35px;
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
@media screen and (min-width: $breakpoint-
|
|
342
|
-
|
|
343
|
-
|
|
376
|
+
&.ter-image-gallery--split-reverse {
|
|
377
|
+
.ter-image-gallery__content {
|
|
378
|
+
grid-column: 1/span 16;
|
|
379
|
+
@media screen and (min-width: $breakpoint-sm){
|
|
380
|
+
grid-column: 1/span 7;
|
|
381
|
+
grid-row: 1;
|
|
382
|
+
}
|
|
383
|
+
}
|
|
384
|
+
.ter-image-gallery__holder {
|
|
385
|
+
grid-column: 1/span 16;
|
|
386
|
+
@media screen and (min-width: $breakpoint-sm){
|
|
387
|
+
grid-column: 9/span 8;
|
|
344
388
|
}
|
|
345
389
|
}
|
|
390
|
+
.ter-image-gallery__holder--reverse {
|
|
391
|
+
padding-bottom: 0;
|
|
392
|
+
}
|
|
346
393
|
}
|
|
347
394
|
.ter-image-gallery__thumbnail {
|
|
348
|
-
width:
|
|
349
|
-
|
|
395
|
+
@media screen and (min-width: $breakpoint-sm){
|
|
396
|
+
width: 72px;
|
|
397
|
+
height: 72px;
|
|
398
|
+
}
|
|
350
399
|
&-wrapper {
|
|
351
400
|
padding: 10px;
|
|
401
|
+
@media screen and (max-width: $breakpoint-xs){
|
|
402
|
+
padding: 5px;
|
|
403
|
+
}
|
|
352
404
|
}
|
|
353
405
|
}
|
|
354
406
|
.ter-image-gallery__nav {
|
|
355
|
-
padding: 20px
|
|
407
|
+
padding: 20px 0 0 0;
|
|
356
408
|
width: 100%;
|
|
357
409
|
@media screen and (min-width: $breakpoint-md){
|
|
358
|
-
padding: 30px
|
|
410
|
+
padding: 30px 0 0 0;
|
|
359
411
|
}
|
|
360
412
|
}
|
|
361
413
|
.ter-image-gallery__content {
|
|
362
414
|
padding: 0;
|
|
363
415
|
display: flex;
|
|
364
416
|
width: 100%;
|
|
365
|
-
padding-top:
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
417
|
+
padding-top: 64px;
|
|
418
|
+
grid-column: 1/span 16;
|
|
419
|
+
@media screen and (min-width: $breakpoint-sm) {
|
|
420
|
+
grid-row: 1;
|
|
421
|
+
grid-column: 10/span 8;
|
|
370
422
|
padding-bottom: 64px;
|
|
371
423
|
}
|
|
424
|
+
.default-layout.accordion {
|
|
425
|
+
margin-bottom: 0;
|
|
426
|
+
}
|
|
372
427
|
}
|
|
373
428
|
.ter-image-gallery__holder {
|
|
374
429
|
display: flex;
|
|
375
430
|
width: 100%;
|
|
376
431
|
align-items: flex-start;
|
|
377
|
-
|
|
378
|
-
|
|
432
|
+
grid-column: 1/span 16;
|
|
433
|
+
@media screen and (min-width: $breakpoint-sm) {
|
|
434
|
+
grid-column: 1/span 8;
|
|
435
|
+
grid-row: 1;
|
|
379
436
|
}
|
|
380
437
|
}
|
|
381
438
|
}
|
|
@@ -103,16 +103,37 @@ var renderMosaicGallery = function renderMosaicGallery() {
|
|
|
103
103
|
|
|
104
104
|
var renderMainImageBorders = function renderMainImageBorders() {
|
|
105
105
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
106
|
-
className: "ter-image-
|
|
106
|
+
className: "ter-image-gallery__image-border ter-image-gallery__image-border-top-left"
|
|
107
107
|
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
108
|
-
className: "ter-image-
|
|
108
|
+
className: "ter-image-gallery__image-border ter-image-gallery__image-border-top-right"
|
|
109
109
|
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
110
|
-
className: "ter-image-
|
|
110
|
+
className: "ter-image-gallery__image-border ter-image-gallery__image-border-left"
|
|
111
111
|
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
112
|
-
className: "ter-image-
|
|
112
|
+
className: "ter-image-gallery__image-border ter-image-gallery__image-border-right"
|
|
113
113
|
}));
|
|
114
114
|
};
|
|
115
115
|
|
|
116
|
+
var renderGalleryPanel = function renderGalleryPanel(content, noButton, updateCurrentImage, currentThumb, updateCurrentThumb, thumbnailWrapper, updateShowLightbox, currentImage, type) {
|
|
117
|
+
var _content$images;
|
|
118
|
+
|
|
119
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
120
|
+
className: "ter-image-gallery__holder ".concat(!(content !== null && content !== void 0 && content.thumbnailAlignment) ? 'ter-image-gallery__holder--reverse' : '')
|
|
121
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
122
|
+
className: "ter-image-gallery__nav"
|
|
123
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
124
|
+
className: "ter-image-gallery__thumbnails ".concat(noButton ? "ter-image-gallery__thumbnails--no-button" : ''),
|
|
125
|
+
ref: thumbnailWrapper
|
|
126
|
+
}, renderThumbnails(content, updateCurrentImage, currentThumb, updateCurrentThumb, thumbnailWrapper)), !noButton && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_terraOne.Button, {
|
|
127
|
+
onClick: function onClick() {
|
|
128
|
+
return openLightBox(updateShowLightbox);
|
|
129
|
+
},
|
|
130
|
+
text: "View All (".concat(content === null || content === void 0 ? void 0 : (_content$images = content.images) === null || _content$images === void 0 ? void 0 : _content$images.length, ")"),
|
|
131
|
+
className: "ter-button--primary--2"
|
|
132
|
+
}))), /*#__PURE__*/_react.default.createElement("div", {
|
|
133
|
+
className: "ter-image-gallery__images"
|
|
134
|
+
}, renderMainScrollImage(currentImage, type), renderMainImageBorders()));
|
|
135
|
+
};
|
|
136
|
+
|
|
116
137
|
var renderGallery = function renderGallery(content, type, thumbnailWrapper, currentImage, updateCurrentImage, currentThumb, updateCurrentThumb, updateShowLightbox, noButton) {
|
|
117
138
|
if (type === "ContentfulImageGalleryMosaic") {
|
|
118
139
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -121,56 +142,22 @@ var renderGallery = function renderGallery(content, type, thumbnailWrapper, curr
|
|
|
121
142
|
className: "ter-image-gallery__mosaic"
|
|
122
143
|
}, renderMosaicGallery()));
|
|
123
144
|
} else if (type === "Split") {
|
|
124
|
-
var _content$images;
|
|
125
|
-
|
|
126
145
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
127
146
|
className: "ter-image-gallery--split ".concat((content === null || content === void 0 ? void 0 : content.reverseAlignment) === true ? 'ter-image-gallery--split-reverse' : '')
|
|
128
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
129
|
-
className: "ter-image-gallery__holder ".concat((content === null || content === void 0 ? void 0 : content.thumbnailAlignment) === true ? 'ter-image-gallery__holder--reverse' : '')
|
|
130
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
131
|
-
className: "ter-image-gallery__nav"
|
|
132
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
133
|
-
className: "ter-image-gallery__thumbnails ".concat(noButton ? "ter-image-gallery__thumbnails--no-button" : ''),
|
|
134
|
-
ref: thumbnailWrapper
|
|
135
|
-
}, renderThumbnails(content, updateCurrentImage, currentThumb, updateCurrentThumb, thumbnailWrapper)), !noButton && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_terraOne.Button, {
|
|
136
|
-
onClick: function onClick() {
|
|
137
|
-
return openLightBox(updateShowLightbox);
|
|
138
|
-
},
|
|
139
|
-
text: "View All (".concat(content === null || content === void 0 ? void 0 : (_content$images = content.images) === null || _content$images === void 0 ? void 0 : _content$images.length, ")"),
|
|
140
|
-
className: "ter-button--primary--2"
|
|
141
|
-
}))), /*#__PURE__*/_react.default.createElement("div", {
|
|
142
|
-
className: "ter-image-gallery__images"
|
|
143
|
-
}, renderMainScrollImage(currentImage, type), renderMainImageBorders())), (content === null || content === void 0 ? void 0 : content.sideContent) && /*#__PURE__*/_react.default.createElement("div", {
|
|
147
|
+
}, renderGalleryPanel(content, noButton, updateCurrentImage, currentThumb, updateCurrentThumb, thumbnailWrapper, updateShowLightbox, currentImage, type), (content === null || content === void 0 ? void 0 : content.sideContent) && /*#__PURE__*/_react.default.createElement("div", {
|
|
144
148
|
className: "ter-image-gallery__content"
|
|
145
149
|
}, content === null || content === void 0 ? void 0 : content.sideContent));
|
|
146
150
|
} else {
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
return /*#__PURE__*/_react.default.createElement("div", {
|
|
150
|
-
className: "ter-image-gallery__holder ".concat(!(content !== null && content !== void 0 && content.thumbnailAlignment) ? 'ter-image-gallery__holder--reverse' : '')
|
|
151
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
152
|
-
className: "ter-image-gallery__nav"
|
|
153
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
154
|
-
className: "ter-image-gallery__thumbnails ".concat(noButton ? "ter-image-gallery__thumbnails--no-button" : ''),
|
|
155
|
-
ref: thumbnailWrapper
|
|
156
|
-
}, renderThumbnails(content, updateCurrentImage, currentThumb, updateCurrentThumb, thumbnailWrapper)), !noButton && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_terraOne.Button, {
|
|
157
|
-
onClick: function onClick() {
|
|
158
|
-
return openLightBox(updateShowLightbox);
|
|
159
|
-
},
|
|
160
|
-
text: "View All (".concat(content === null || content === void 0 ? void 0 : (_content$images2 = content.images) === null || _content$images2 === void 0 ? void 0 : _content$images2.length, ")"),
|
|
161
|
-
className: "ter-button--primary--2"
|
|
162
|
-
}))), /*#__PURE__*/_react.default.createElement("div", {
|
|
163
|
-
className: "ter-image-gallery__images"
|
|
164
|
-
}, renderMainScrollImage(currentImage), renderMainImageBorders()));
|
|
151
|
+
return renderGalleryPanel(content, noButton, updateCurrentImage, currentThumb, updateCurrentThumb, thumbnailWrapper, updateShowLightbox, currentImage);
|
|
165
152
|
}
|
|
166
153
|
};
|
|
167
154
|
|
|
168
155
|
exports.renderGallery = renderGallery;
|
|
169
156
|
|
|
170
157
|
var renderThumbnails = function renderThumbnails(content, updateCurrentImage, currentThumb, updateCurrentThumb, thumbnailWrapper) {
|
|
171
|
-
var _content$
|
|
158
|
+
var _content$images2;
|
|
172
159
|
|
|
173
|
-
return content === null || content === void 0 ? void 0 : (_content$
|
|
160
|
+
return content === null || content === void 0 ? void 0 : (_content$images2 = content.images) === null || _content$images2 === void 0 ? void 0 : _content$images2.map(function (image, index) {
|
|
174
161
|
if (index < 5) {
|
|
175
162
|
if (image !== null && image !== void 0 && image.src && !(image !== null && image !== void 0 && image.url)) {
|
|
176
163
|
image.url = image.src;
|
|
@@ -205,9 +192,9 @@ var updateGalleryImage = function updateGalleryImage(content, updateCurrentImage
|
|
|
205
192
|
|
|
206
193
|
|
|
207
194
|
var renderLightboxNav = function renderLightboxNav(content) {
|
|
208
|
-
var _content$
|
|
195
|
+
var _content$images3;
|
|
209
196
|
|
|
210
|
-
return content === null || content === void 0 ? void 0 : (_content$
|
|
197
|
+
return content === null || content === void 0 ? void 0 : (_content$images3 = content.images) === null || _content$images3 === void 0 ? void 0 : _content$images3.map(function (image, index) {
|
|
211
198
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
212
199
|
key: index,
|
|
213
200
|
className: "carousel-cell ter-image-gallery__lightbox-nav-item"
|
|
@@ -222,9 +209,9 @@ var renderLightboxNav = function renderLightboxNav(content) {
|
|
|
222
209
|
exports.renderLightboxNav = renderLightboxNav;
|
|
223
210
|
|
|
224
211
|
var renderLightboxMain = function renderLightboxMain(content) {
|
|
225
|
-
var _content$
|
|
212
|
+
var _content$images4;
|
|
226
213
|
|
|
227
|
-
return content === null || content === void 0 ? void 0 : (_content$
|
|
214
|
+
return content === null || content === void 0 ? void 0 : (_content$images4 = content.images) === null || _content$images4 === void 0 ? void 0 : _content$images4.map(function (image, index) {
|
|
228
215
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
229
216
|
key: index,
|
|
230
217
|
className: "carousel-cell ter-image-gallery__lightbox-main-item"
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg width="771" height="26" viewBox="0 0 771 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M746 1H770V25" stroke="#0063A3" stroke-width="2" stroke-linecap="square"/>
|
|
3
|
+
<path d="M25 1H1V25.0001" stroke="#FBAD26" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"/>
|
|
4
|
+
</svg>
|