luna-one 3.1.298 → 3.1.302
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.
- package/dist/luna/components/CtaWithHeader/CtaWithHeader.scss +15 -9
- package/dist/luna/components/ScrollInPlace/ScrollInPlace.js +170 -140
- package/dist/luna/components/ScrollInPlace/ScrollInPlace.scss +4 -0
- package/dist/luna/heroes/FullBackgroundHero/FullBackgroundHero.js +13 -8
- package/dist/luna/heroes/FullBackgroundHero/FullBackgroundHero.scss +24 -4
- package/package.json +1 -1
|
@@ -104,10 +104,6 @@
|
|
|
104
104
|
font-size: $body-font-size;
|
|
105
105
|
line-height: 22px;
|
|
106
106
|
|
|
107
|
-
&:not(:last-child) {
|
|
108
|
-
margin-bottom: 40px;
|
|
109
|
-
}
|
|
110
|
-
|
|
111
107
|
@media only screen and (max-width: $breakpoint-xs) {
|
|
112
108
|
font-size: $body-font-size-mobile;
|
|
113
109
|
line-height: 23px;
|
|
@@ -174,7 +170,9 @@
|
|
|
174
170
|
flex-wrap: wrap;
|
|
175
171
|
|
|
176
172
|
a {
|
|
177
|
-
margin: 0
|
|
173
|
+
margin: 40px 20px 0 40px;
|
|
174
|
+
height: unset !important;
|
|
175
|
+
white-space: pre-wrap;
|
|
178
176
|
}
|
|
179
177
|
|
|
180
178
|
&.text-links {
|
|
@@ -213,6 +211,14 @@
|
|
|
213
211
|
}
|
|
214
212
|
|
|
215
213
|
.text-link-container {
|
|
214
|
+
&:first-child {
|
|
215
|
+
margin-top: 40px;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
|
|
219
|
+
a {
|
|
220
|
+
margin: 0;
|
|
221
|
+
}
|
|
216
222
|
|
|
217
223
|
.text-link {
|
|
218
224
|
position: relative;
|
|
@@ -222,8 +228,8 @@
|
|
|
222
228
|
|
|
223
229
|
&:after {
|
|
224
230
|
position: absolute;
|
|
225
|
-
|
|
226
|
-
|
|
231
|
+
bottom: -5px;
|
|
232
|
+
right: -29px;
|
|
227
233
|
display: block;
|
|
228
234
|
content: "";
|
|
229
235
|
width: 24px;
|
|
@@ -246,8 +252,8 @@
|
|
|
246
252
|
|
|
247
253
|
&:after {
|
|
248
254
|
position: absolute;
|
|
249
|
-
|
|
250
|
-
|
|
255
|
+
bottom: -5px;
|
|
256
|
+
right: -29px;
|
|
251
257
|
display: block;
|
|
252
258
|
content: "";
|
|
253
259
|
width: 24px;
|
|
@@ -24,25 +24,40 @@ var ScrollInPlace = function ScrollInPlace(_ref) {
|
|
|
24
24
|
titleBackground = _ref.titleBackground,
|
|
25
25
|
slides = _ref.slides;
|
|
26
26
|
var hasScript = false;
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
if (document
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
27
|
+
var sets = null;
|
|
28
|
+
(0, _react.useEffect)(function () {
|
|
29
|
+
if (document !== undefined) {
|
|
30
|
+
if (document.body.classList.contains("has-scroll-in-place")) {
|
|
31
|
+
hasScript = true;
|
|
32
|
+
} else {
|
|
33
|
+
document.body.classList.add("has-scroll-in-place");
|
|
34
|
+
}
|
|
33
35
|
}
|
|
34
|
-
}
|
|
35
36
|
|
|
36
|
-
|
|
37
|
+
sets = document.getElementsByClassName("scroll-in-place-container");
|
|
38
|
+
}, []);
|
|
37
39
|
var currentHooked = null;
|
|
38
40
|
var currentSlide = null;
|
|
39
41
|
var currentOffset = 0;
|
|
40
42
|
var touchPause = false;
|
|
41
43
|
var lastTouchPos = null;
|
|
44
|
+
var pauseSlideToggle = false;
|
|
45
|
+
var lastWheel = Date.now();
|
|
46
|
+
var holdWheelAction = false;
|
|
42
47
|
var desktopSlideScrollBuffer = 8;
|
|
43
|
-
var mobileSlideScrollBuffer =
|
|
48
|
+
var mobileSlideScrollBuffer = 20;
|
|
44
49
|
var slideScrollBuffer = desktopSlideScrollBuffer;
|
|
45
|
-
|
|
50
|
+
|
|
51
|
+
function pauseSlides() {
|
|
52
|
+
pauseSlideToggle = true;
|
|
53
|
+
holdWheelAction = true;
|
|
54
|
+
setTimeout(function () {
|
|
55
|
+
pauseSlideToggle = false;
|
|
56
|
+
}, 500);
|
|
57
|
+
setTimeout(function () {
|
|
58
|
+
holdWheelAction = false;
|
|
59
|
+
}, 2000);
|
|
60
|
+
}
|
|
46
61
|
|
|
47
62
|
function updateNavButtons(buttonClicked) {
|
|
48
63
|
var _currentHooked, _currentHooked$elemen, _currentHooked$elemen2, _currentHooked$elemen3, _currentHooked$elemen4, _currentHooked$elemen5, _currentHooked$elemen6, _currentHooked2, _currentHooked2$eleme, _currentHooked2$eleme2, _currentHooked2$eleme3, _currentHooked2$eleme4, _currentHooked2$eleme5, _currentHooked2$eleme6, _buttonClicked$classL, _buttonClicked$datase, _buttonClicked$datase2, _buttonClicked$datase3;
|
|
@@ -85,164 +100,179 @@ var ScrollInPlace = function ScrollInPlace(_ref) {
|
|
|
85
100
|
}
|
|
86
101
|
}
|
|
87
102
|
}, [TitleContent, titleBackground, slides]);
|
|
103
|
+
(0, _react.useEffect)(function () {
|
|
104
|
+
if (document !== undefined && window !== undefined && !hasScript) {
|
|
105
|
+
var getCorrespondingNavButton = function getCorrespondingNavButton(slideIndex) {
|
|
106
|
+
var _currentHooked6, _currentHooked6$eleme, _currentHooked6$eleme2, _currentHooked6$eleme3;
|
|
88
107
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
var _currentHooked6, _currentHooked6$eleme, _currentHooked6$eleme2, _currentHooked6$eleme3;
|
|
92
|
-
|
|
93
|
-
return (_currentHooked6 = currentHooked) === null || _currentHooked6 === void 0 ? void 0 : (_currentHooked6$eleme = _currentHooked6.element) === null || _currentHooked6$eleme === void 0 ? void 0 : (_currentHooked6$eleme2 = _currentHooked6$eleme.getElementsByClassName("progress-nav")) === null || _currentHooked6$eleme2 === void 0 ? void 0 : (_currentHooked6$eleme3 = _currentHooked6$eleme2[0]) === null || _currentHooked6$eleme3 === void 0 ? void 0 : _currentHooked6$eleme3.querySelector("[data-slide-index=\"".concat(slideIndex, "\"]"));
|
|
94
|
-
}; // listen to hook a slide set into full screen
|
|
108
|
+
return (_currentHooked6 = currentHooked) === null || _currentHooked6 === void 0 ? void 0 : (_currentHooked6$eleme = _currentHooked6.element) === null || _currentHooked6$eleme === void 0 ? void 0 : (_currentHooked6$eleme2 = _currentHooked6$eleme.getElementsByClassName("progress-nav")) === null || _currentHooked6$eleme2 === void 0 ? void 0 : (_currentHooked6$eleme3 = _currentHooked6$eleme2[0]) === null || _currentHooked6$eleme3 === void 0 ? void 0 : _currentHooked6$eleme3.querySelector("[data-slide-index=\"".concat(slideIndex, "\"]"));
|
|
109
|
+
}; // listen to hook a slide set into full screen
|
|
95
110
|
|
|
96
111
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
112
|
+
// listen to scroll through a hooked slide set
|
|
113
|
+
var changeScrollCalibrations = function changeScrollCalibrations(sb) {
|
|
114
|
+
slideScrollBuffer = sb;
|
|
115
|
+
};
|
|
101
116
|
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
117
|
+
window.addEventListener('scroll', function () {
|
|
118
|
+
if (!currentHooked) {
|
|
119
|
+
var slideSetPositions = []; // loop through all slide sets on a page and build array of their dom elements and positions
|
|
105
120
|
|
|
106
|
-
|
|
107
|
-
|
|
121
|
+
for (var i = 0; i < sets.length; i++) {
|
|
122
|
+
var _sets, _sets$i, _sets$i$classList, _sets2, _sets2$i, _sets2$i$classList;
|
|
108
123
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
124
|
+
var setRect = sets[i].getBoundingClientRect();
|
|
125
|
+
slideSetPositions.push({
|
|
126
|
+
element: sets[i],
|
|
127
|
+
position: setRect.top,
|
|
128
|
+
finished: ((_sets = sets) === null || _sets === void 0 ? void 0 : (_sets$i = _sets[i]) === null || _sets$i === void 0 ? void 0 : (_sets$i$classList = _sets$i.classList) === null || _sets$i$classList === void 0 ? void 0 : _sets$i$classList.contains("activated")) && !((_sets2 = sets) === null || _sets2 === void 0 ? void 0 : (_sets2$i = _sets2[i]) === null || _sets2$i === void 0 ? void 0 : (_sets2$i$classList = _sets2$i.classList) === null || _sets2$i$classList === void 0 ? void 0 : _sets2$i$classList.contains("active")) ? true : false
|
|
129
|
+
});
|
|
130
|
+
} // get the current hooked scroll element
|
|
116
131
|
|
|
117
132
|
|
|
118
|
-
|
|
119
|
-
|
|
133
|
+
for (var _i = 0; _i < slideSetPositions.length; _i++) {
|
|
134
|
+
var _currentHooked7;
|
|
120
135
|
|
|
121
|
-
|
|
136
|
+
var current = slideSetPositions[_i];
|
|
122
137
|
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
current.element.classList.
|
|
132
|
-
|
|
138
|
+
if ((current === null || current === void 0 ? void 0 : current.position) <= 0 && !(current === null || current === void 0 ? void 0 : current.finished) && (current === null || current === void 0 ? void 0 : current.element) !== ((_currentHooked7 = currentHooked) === null || _currentHooked7 === void 0 ? void 0 : _currentHooked7.element)) {
|
|
139
|
+
currentSlide = null;
|
|
140
|
+
currentOffset = 0;
|
|
141
|
+
currentHooked = current;
|
|
142
|
+
document.body.style.overflow = "hidden";
|
|
143
|
+
currentHooked.element.classList.add("active");
|
|
144
|
+
currentHooked.element.classList.add("activated");
|
|
145
|
+
pauseSlides();
|
|
146
|
+
} else if (current.element.classList.contains("activated") && current.element.getBoundingClientRect().top > 5) {
|
|
147
|
+
current.element.classList.remove("activated");
|
|
148
|
+
current.finished = false;
|
|
149
|
+
}
|
|
133
150
|
}
|
|
134
151
|
}
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
152
|
+
});
|
|
153
|
+
document.addEventListener('touchstart', function () {
|
|
154
|
+
changeScrollCalibrations(mobileSlideScrollBuffer);
|
|
155
|
+
});
|
|
156
|
+
document.addEventListener('touchend', function () {
|
|
157
|
+
changeScrollCalibrations(desktopSlideScrollBuffer);
|
|
158
|
+
});
|
|
159
|
+
document.addEventListener('touchcancel', function () {
|
|
160
|
+
changeScrollCalibrations(desktopSlideScrollBuffer);
|
|
161
|
+
});
|
|
162
|
+
document.addEventListener('touchmove', function (e) {
|
|
163
|
+
if (!touchPause) {
|
|
164
|
+
var _e$touches, _e$touches$;
|
|
165
|
+
|
|
166
|
+
touchPause = true;
|
|
167
|
+
pauseSlideToggle = false;
|
|
168
|
+
holdWheelAction = false;
|
|
169
|
+
var currentTouchPos = e === null || e === void 0 ? void 0 : (_e$touches = e.touches) === null || _e$touches === void 0 ? void 0 : (_e$touches$ = _e$touches[0]) === null || _e$touches$ === void 0 ? void 0 : _e$touches$.clientY;
|
|
170
|
+
var wheelEvt = document.createEvent('MouseEvents');
|
|
171
|
+
wheelEvt.initEvent('wheel', true, true);
|
|
172
|
+
|
|
173
|
+
if (currentTouchPos > lastTouchPos) {
|
|
174
|
+
wheelEvt.deltaY = -120;
|
|
175
|
+
} else if (currentTouchPos < lastTouchPos) {
|
|
176
|
+
wheelEvt.deltaY = +120;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
window.dispatchEvent(wheelEvt);
|
|
180
|
+
lastTouchPos = currentTouchPos;
|
|
181
|
+
setTimeout(touchPause = false, 300);
|
|
159
182
|
}
|
|
183
|
+
});
|
|
184
|
+
window.addEventListener('wheel', function (e) {
|
|
185
|
+
var currentWheel = Date.now();
|
|
160
186
|
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
}
|
|
165
|
-
});
|
|
166
|
-
window.addEventListener('wheel', function (e) {
|
|
167
|
-
if (currentHooked) {
|
|
168
|
-
// get the scroll delta (val > 0 -> scroll down || val < 0 -> || scroll up)
|
|
169
|
-
var scrollDelta = e.deltaY; // determine the current slide if unset, otherwise, determine the current slide offset
|
|
170
|
-
|
|
171
|
-
if (!currentSlide) {
|
|
172
|
-
currentSlide = currentHooked.element.getElementsByClassName("active")[0];
|
|
173
|
-
} else {
|
|
174
|
-
var currentSlideContent = currentSlide.getElementsByClassName("content-container")[0];
|
|
175
|
-
var switchSlides = false; // adjust the slide offset
|
|
176
|
-
|
|
177
|
-
if (scrollDelta > 0) {
|
|
178
|
-
if (currentSlideContent.offsetHeight + currentSlideContent.scrollTop >= currentSlideContent.scrollHeight) {
|
|
179
|
-
switchSlides = true;
|
|
180
|
-
}
|
|
187
|
+
if (currentWheel - lastWheel > 200) {
|
|
188
|
+
holdWheelAction = false;
|
|
189
|
+
}
|
|
181
190
|
|
|
182
|
-
|
|
191
|
+
if (currentHooked && !pauseSlideToggle && !holdWheelAction) {
|
|
192
|
+
// get the scroll delta (val > 0 -> scroll down || val < 0 -> || scroll up)
|
|
193
|
+
var scrollDelta = e.deltaY; // determine the current slide if unset, otherwise, determine the current slide offset
|
|
194
|
+
|
|
195
|
+
if (!currentSlide) {
|
|
196
|
+
currentSlide = currentHooked.element.getElementsByClassName("active")[0];
|
|
183
197
|
} else {
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
}
|
|
198
|
+
var currentSlideContent = currentSlide.getElementsByClassName("content-container")[0];
|
|
199
|
+
var switchSlides = false; // adjust the slide offset
|
|
187
200
|
|
|
188
|
-
|
|
189
|
-
|
|
201
|
+
if (scrollDelta > 0) {
|
|
202
|
+
if (currentSlideContent.offsetHeight + currentSlideContent.scrollTop >= currentSlideContent.scrollHeight) {
|
|
203
|
+
switchSlides = true;
|
|
204
|
+
}
|
|
190
205
|
|
|
206
|
+
currentOffset += 1;
|
|
207
|
+
} else {
|
|
208
|
+
if (currentSlideContent.scrollTop <= 0) {
|
|
209
|
+
switchSlides = true;
|
|
210
|
+
}
|
|
191
211
|
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
var activeIndex = null;
|
|
195
|
-
currentSlideContent.scrollTop = 0;
|
|
212
|
+
currentOffset -= 1;
|
|
213
|
+
} // if the current slide offset is at max either activate the next slide, or deactivate the current slide set if at the end
|
|
196
214
|
|
|
197
|
-
for (var i = 0; i < allCurrentSlides.length; i++) {
|
|
198
|
-
if (allCurrentSlides[i].classList.contains("active")) {
|
|
199
|
-
activeIndex = i;
|
|
200
|
-
i = allCurrentSlides.length;
|
|
201
|
-
}
|
|
202
|
-
}
|
|
203
215
|
|
|
204
|
-
if (currentOffset >= slideScrollBuffer) {
|
|
205
|
-
|
|
216
|
+
if ((currentOffset >= slideScrollBuffer || currentOffset <= 0) && switchSlides === true) {
|
|
217
|
+
var allCurrentSlides = currentHooked.element.getElementsByClassName("slide");
|
|
218
|
+
var activeIndex = null;
|
|
219
|
+
currentSlideContent.scrollTop = 0;
|
|
206
220
|
|
|
207
|
-
|
|
208
|
-
allCurrentSlides[
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
} else {
|
|
213
|
-
allCurrentSlides[activeIndex].classList.remove("active");
|
|
214
|
-
allCurrentSlides[0].classList.add("active");
|
|
215
|
-
currentSlide = allCurrentSlides[0];
|
|
216
|
-
updateNavButtons(getCorrespondingNavButton(0));
|
|
217
|
-
currentHooked.element.classList.remove("active");
|
|
218
|
-
document.body.style.overflow = "visible";
|
|
219
|
-
currentHooked.element.scrollIntoView(true);
|
|
220
|
-
currentHooked = null;
|
|
221
|
+
for (var i = 0; i < allCurrentSlides.length; i++) {
|
|
222
|
+
if (allCurrentSlides[i].classList.contains("active")) {
|
|
223
|
+
activeIndex = i;
|
|
224
|
+
i = allCurrentSlides.length;
|
|
225
|
+
}
|
|
221
226
|
}
|
|
222
|
-
|
|
223
|
-
currentOffset
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
allCurrentSlides
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
227
|
+
|
|
228
|
+
if (currentOffset >= slideScrollBuffer) {
|
|
229
|
+
currentOffset = 0;
|
|
230
|
+
|
|
231
|
+
if (activeIndex + 1 < allCurrentSlides.length) {
|
|
232
|
+
allCurrentSlides[activeIndex].classList.remove("active");
|
|
233
|
+
allCurrentSlides[activeIndex + 1].classList.add("active");
|
|
234
|
+
currentSlide = allCurrentSlides[activeIndex + 1];
|
|
235
|
+
updateNavButtons(getCorrespondingNavButton(activeIndex + 1));
|
|
236
|
+
pauseSlides();
|
|
237
|
+
} else {
|
|
238
|
+
allCurrentSlides[activeIndex].classList.remove("active");
|
|
239
|
+
allCurrentSlides[0].classList.add("active");
|
|
240
|
+
currentSlide = allCurrentSlides[0];
|
|
241
|
+
updateNavButtons(getCorrespondingNavButton(0));
|
|
242
|
+
pauseSlides();
|
|
243
|
+
currentHooked.element.classList.remove("active");
|
|
244
|
+
document.body.style.overflow = "visible";
|
|
245
|
+
currentHooked.element.scrollIntoView(true);
|
|
246
|
+
currentHooked = null;
|
|
247
|
+
}
|
|
248
|
+
} else if (currentOffset <= 0) {
|
|
249
|
+
currentOffset = slideScrollBuffer;
|
|
250
|
+
|
|
251
|
+
if (activeIndex > 0) {
|
|
252
|
+
allCurrentSlides[activeIndex].classList.remove("active");
|
|
253
|
+
allCurrentSlides[activeIndex - 1].classList.add("active");
|
|
254
|
+
currentSlide = allCurrentSlides[activeIndex - 1];
|
|
255
|
+
updateNavButtons(getCorrespondingNavButton(activeIndex - 1));
|
|
256
|
+
pauseSlides();
|
|
257
|
+
} else {
|
|
258
|
+
allCurrentSlides[0].classList.add("active");
|
|
259
|
+
currentSlide = allCurrentSlides[0];
|
|
260
|
+
updateNavButtons(getCorrespondingNavButton(0));
|
|
261
|
+
pauseSlides();
|
|
262
|
+
currentHooked.element.classList.remove("active");
|
|
263
|
+
document.body.style.overflow = "visible";
|
|
264
|
+
currentHooked.element.scrollIntoView(true);
|
|
265
|
+
currentHooked = null;
|
|
266
|
+
}
|
|
238
267
|
}
|
|
239
268
|
}
|
|
240
269
|
}
|
|
241
270
|
}
|
|
242
|
-
}
|
|
243
|
-
});
|
|
244
|
-
}
|
|
245
271
|
|
|
272
|
+
lastWheel = currentWheel;
|
|
273
|
+
});
|
|
274
|
+
}
|
|
275
|
+
}, []);
|
|
246
276
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
247
277
|
className: "scroll-in-place-container ".concat((titleBackground === null || titleBackground === void 0 ? void 0 : titleBackground.video) ? "has-bg-video" : "")
|
|
248
278
|
}, (titleBackground === null || titleBackground === void 0 ? void 0 : titleBackground.video) && /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -27,16 +27,16 @@ var FullBackgroundHero = function FullBackgroundHero(_ref) {
|
|
|
27
27
|
motion = _ref.motion,
|
|
28
28
|
paddingClass = _ref.paddingClass;
|
|
29
29
|
var _content$variant = content.variant,
|
|
30
|
-
variant = _content$variant === void 0 ?
|
|
30
|
+
variant = _content$variant === void 0 ? "variant-1" : _content$variant,
|
|
31
31
|
backgroundImage = content.backgroundImage,
|
|
32
32
|
bottomBackgroundImage = content.bottomBackgroundImage,
|
|
33
33
|
leftContent = content.leftContent,
|
|
34
34
|
rightContent = content.rightContent,
|
|
35
35
|
rightImage = content.rightImage,
|
|
36
36
|
_content$shapeType = content.shapeType,
|
|
37
|
-
shapeType = _content$shapeType === void 0 ?
|
|
37
|
+
shapeType = _content$shapeType === void 0 ? "square" : _content$shapeType,
|
|
38
38
|
_content$shapeBorderC = content.shapeBorderColor,
|
|
39
|
-
shapeBorderColor = _content$shapeBorderC === void 0 ?
|
|
39
|
+
shapeBorderColor = _content$shapeBorderC === void 0 ? "#F1F1F6" : _content$shapeBorderC,
|
|
40
40
|
rightContentType = content.rightContentType;
|
|
41
41
|
|
|
42
42
|
var _useWindowSize = (0, _useWindowSize2.default)(),
|
|
@@ -50,7 +50,7 @@ var FullBackgroundHero = function FullBackgroundHero(_ref) {
|
|
|
50
50
|
var twoByTwoModifier = "";
|
|
51
51
|
|
|
52
52
|
if (rightContentType) {
|
|
53
|
-
twoByTwoModifier = rightContentType ===
|
|
53
|
+
twoByTwoModifier = rightContentType === "Contentful2X2" ? "luna-full-background-hero--2x2" : "";
|
|
54
54
|
}
|
|
55
55
|
|
|
56
56
|
return /*#__PURE__*/_react.default.createElement("section", {
|
|
@@ -68,17 +68,22 @@ var FullBackgroundHero = function FullBackgroundHero(_ref) {
|
|
|
68
68
|
}, (0, _FullBackgroundHeroMethods.renderBackgroundImage)(backgroundImage, size, variant)), /*#__PURE__*/_react.default.createElement("div", {
|
|
69
69
|
className: "luna-full-background-hero__image-wrapper-content-".concat(variant)
|
|
70
70
|
}, bottomBackgroundImage && (0, _FullBackgroundHeroMethods.renderBackgroundImage)(bottomBackgroundImage, size, variant))), /*#__PURE__*/_react.default.createElement(_reactAwesomeReveal.Fade, {
|
|
71
|
-
direction: motion ?
|
|
71
|
+
direction: motion ? "up" : "",
|
|
72
72
|
delay: motion ? 100 : 0,
|
|
73
73
|
triggerOnce: true,
|
|
74
74
|
className: "\n luna-full-background-hero__content-wrapper \n luna-full-background-hero__content-wrapper-".concat(variant)
|
|
75
75
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
76
|
-
className: "\n luna-full-background-hero__content-wrapper-grid \n luna-full-background-hero__content-wrapper-grid-".concat(variant)
|
|
76
|
+
className: "\n luna-full-background-hero__content-wrapper-grid \n luna-full-background-hero__content-wrapper-grid-".concat(variant),
|
|
77
|
+
style: variant === "variant-2" ? {
|
|
78
|
+
gridTemplateRows: "5px 1fr"
|
|
79
|
+
} : {
|
|
80
|
+
gridTemplateRows: "1fr"
|
|
81
|
+
}
|
|
77
82
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
78
|
-
className: "\n luna-full-background-hero__content-wrapper-left \n luna-full-background-hero__content-wrapper-left-".concat(variant, " \n ").concat(!rightContent ? "luna-full-background-hero__content-wrapper-left-".concat(variant, "--full") :
|
|
83
|
+
className: "\n luna-full-background-hero__content-wrapper-left \n luna-full-background-hero__content-wrapper-left-".concat(variant, " \n ").concat(!rightContent ? "luna-full-background-hero__content-wrapper-left-".concat(variant, "--full") : "", "\n ").concat(rightImage ? "luna-full-background-hero__content-wrapper-left-".concat(variant, "--image") : "")
|
|
79
84
|
}, leftContent), /*#__PURE__*/_react.default.createElement("div", {
|
|
80
85
|
className: "\n luna-full-background-hero__content-wrapper-right \n luna-full-background-hero__content-wrapper-right-".concat(variant)
|
|
81
|
-
}, (variant ===
|
|
86
|
+
}, (variant === "variant-1" || variant === "variant-2-inset") && rightContent, variant === "variant-2" && rightImage && (0, _FullBackgroundHeroMethods.renderShape)(shapeBorderColor, rightImage, shapeType), variant === "variant-3" && rightImage && (0, _FullBackgroundHeroMethods.renderContentImage)(rightImage)))));
|
|
82
87
|
};
|
|
83
88
|
|
|
84
89
|
var _default = FullBackgroundHero;
|
|
@@ -166,11 +166,30 @@
|
|
|
166
166
|
}
|
|
167
167
|
}
|
|
168
168
|
|
|
169
|
+
@-moz-document url-prefix() {
|
|
170
|
+
&-variant-2 {
|
|
171
|
+
@media screen and (min-width: 1650px) {
|
|
172
|
+
height: auto !important;
|
|
173
|
+
|
|
174
|
+
picture {
|
|
175
|
+
padding-bottom: 0 !important;
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
|
|
169
182
|
&-variant-2 {
|
|
170
183
|
height: 100%;
|
|
171
184
|
grid-row: 1 / span 5;
|
|
172
185
|
grid-column: 1 / span 1;
|
|
173
186
|
|
|
187
|
+
picture {
|
|
188
|
+
@media screen and (min-width: $breakpoint-lg) {
|
|
189
|
+
padding-bottom: 0 !important;
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
|
+
|
|
174
193
|
@media screen and (max-width: 700px) {
|
|
175
194
|
height: 280px;
|
|
176
195
|
}
|
|
@@ -270,7 +289,7 @@
|
|
|
270
289
|
|
|
271
290
|
&-grid {
|
|
272
291
|
@include grid-container;
|
|
273
|
-
grid-template-rows: 1fr;
|
|
292
|
+
grid-template-rows: 5px 1fr;
|
|
274
293
|
height: 100%;
|
|
275
294
|
align-items: center;
|
|
276
295
|
|
|
@@ -417,6 +436,7 @@
|
|
|
417
436
|
|
|
418
437
|
@media screen and (max-width: 700px) {
|
|
419
438
|
grid-column: 2 / span 14;
|
|
439
|
+
grid-row: 1 / span 1;
|
|
420
440
|
}
|
|
421
441
|
}
|
|
422
442
|
|
|
@@ -477,8 +497,8 @@
|
|
|
477
497
|
@media screen and (max-width: 700px) {
|
|
478
498
|
width: 280px;
|
|
479
499
|
height: 280px;
|
|
480
|
-
position:
|
|
481
|
-
|
|
500
|
+
position: relative !important;
|
|
501
|
+
bottom: 170px !important;
|
|
482
502
|
left: calc((100% - 280px) / 2);
|
|
483
503
|
}
|
|
484
504
|
|
|
@@ -552,4 +572,4 @@
|
|
|
552
572
|
}
|
|
553
573
|
}
|
|
554
574
|
}
|
|
555
|
-
}
|
|
575
|
+
}
|