@comicrelief/component-library 7.35.4 → 7.35.6
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/components/Organisms/WYMDCarousel/WYMDCarousel.js +14 -15
- package/dist/components/Organisms/WYMDCarousel/WYMDCarousel.style.js +51 -21
- package/dist/components/Organisms/WYMDCarousel/WYMDCarousel.test.js +1 -1
- package/dist/styleguide/data/data.js +39 -36
- package/package.json +1 -1
- package/src/components/Organisms/WYMDCarousel/WYMDCarousel.js +15 -13
- package/src/components/Organisms/WYMDCarousel/WYMDCarousel.style.js +107 -48
- package/src/components/Organisms/WYMDCarousel/WYMDCarousel.test.js +62 -41
- package/src/styleguide/data/data.js +39 -36
|
@@ -6,13 +6,13 @@ import Text from '../../Atoms/Text/Text';
|
|
|
6
6
|
const animationSpeed = 0.75;
|
|
7
7
|
|
|
8
8
|
// Use to calc positions when scaling copy
|
|
9
|
-
const textScaleOffsetA =
|
|
9
|
+
const textScaleOffsetA = 45;
|
|
10
10
|
const textScaleOffsetB = 5;
|
|
11
11
|
|
|
12
12
|
const ImageWrapper = styled.div`
|
|
13
|
-
width:
|
|
13
|
+
width: 45%;
|
|
14
14
|
display: block;
|
|
15
|
-
padding:
|
|
15
|
+
padding: 9%;
|
|
16
16
|
border: 2px dashed #89888b;
|
|
17
17
|
border-radius: 50%;
|
|
18
18
|
position: relative;
|
|
@@ -21,14 +21,15 @@ const ImageWrapper = styled.div`
|
|
|
21
21
|
img {
|
|
22
22
|
width: 100%;
|
|
23
23
|
height: auto;
|
|
24
|
+
display: block;
|
|
24
25
|
}
|
|
25
26
|
|
|
26
27
|
&:after {
|
|
27
28
|
position: absolute;
|
|
28
29
|
content: '';
|
|
29
30
|
top: 50%;
|
|
30
|
-
width:
|
|
31
|
-
right: calc(-
|
|
31
|
+
width: 125%;
|
|
32
|
+
right: calc(-125% - 2px);
|
|
32
33
|
height: 2px;
|
|
33
34
|
border-bottom: 2px dashed #89888b;
|
|
34
35
|
}
|
|
@@ -44,15 +45,28 @@ const ImageWrapper = styled.div`
|
|
|
44
45
|
`;
|
|
45
46
|
|
|
46
47
|
const AmountWrapper = styled.div`
|
|
47
|
-
padding: ${spacing('m')} 0;
|
|
48
|
-
|
|
49
|
-
|
|
48
|
+
padding: ${spacing('m')} 0 0.75rem;
|
|
49
|
+
|
|
50
|
+
h1 {
|
|
51
|
+
font-size: 34px;
|
|
52
|
+
line-height: 37px;
|
|
53
|
+
|
|
54
|
+
@media ${({ theme }) => theme.breakpoint('small')} {
|
|
55
|
+
font-size: 40px;
|
|
56
|
+
line-height: 40px;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
50
59
|
`;
|
|
51
60
|
|
|
52
61
|
const CopyWrapper = styled.div`
|
|
53
|
-
padding:
|
|
62
|
+
padding: 0;
|
|
54
63
|
width: 75%;
|
|
55
64
|
margin: 0 auto;
|
|
65
|
+
|
|
66
|
+
p {
|
|
67
|
+
font-size: ${({ theme }) => theme.fontSize('s')};
|
|
68
|
+
line-height: ${({ theme }) => theme.fontSize('l')};
|
|
69
|
+
}
|
|
56
70
|
`;
|
|
57
71
|
|
|
58
72
|
const Heading = styled(Text)`
|
|
@@ -63,12 +77,12 @@ const Heading = styled(Text)`
|
|
|
63
77
|
&:first-child {
|
|
64
78
|
margin-bottom: ${spacing('l')};
|
|
65
79
|
text-align: center;
|
|
66
|
-
font-size:
|
|
67
|
-
line-height:
|
|
80
|
+
font-size: 16px;
|
|
81
|
+
line-height: 19.5px;
|
|
68
82
|
|
|
69
83
|
@media ${({ theme }) => theme.breakpoint('medium')} {
|
|
70
|
-
font-size:
|
|
71
|
-
line-height:
|
|
84
|
+
font-size: 20px;
|
|
85
|
+
line-height: 24.38px;
|
|
72
86
|
}
|
|
73
87
|
}
|
|
74
88
|
`;
|
|
@@ -76,8 +90,8 @@ const Heading = styled(Text)`
|
|
|
76
90
|
const PeopleHelpedText = styled(Text)`
|
|
77
91
|
margin-bottom: ${spacing('l')};
|
|
78
92
|
text-align: center;
|
|
79
|
-
font-size:
|
|
80
|
-
line-height:
|
|
93
|
+
font-size: 34px;
|
|
94
|
+
line-height: 37px;
|
|
81
95
|
|
|
82
96
|
@media ${({ theme }) => theme.breakpoint('small')} {
|
|
83
97
|
font-size: 60px;
|
|
@@ -85,16 +99,16 @@ const PeopleHelpedText = styled(Text)`
|
|
|
85
99
|
}
|
|
86
100
|
|
|
87
101
|
@media ${({ theme }) => theme.breakpoint('medium')} {
|
|
88
|
-
font-size:
|
|
89
|
-
line-height:
|
|
102
|
+
font-size: 64px;
|
|
103
|
+
line-height: 68px;
|
|
90
104
|
}
|
|
91
105
|
`;
|
|
92
106
|
|
|
93
107
|
const Including = styled(Text)`
|
|
94
108
|
margin-bottom: 0;
|
|
95
109
|
text-align: center;
|
|
96
|
-
font-size:
|
|
97
|
-
line-height:
|
|
110
|
+
font-size: 12px;
|
|
111
|
+
line-height: 14.63px;
|
|
98
112
|
|
|
99
113
|
@media ${({ theme }) => theme.breakpoint('small')} {
|
|
100
114
|
font-size: 17px;
|
|
@@ -106,6 +120,12 @@ const Including = styled(Text)`
|
|
|
106
120
|
const CarouselWrapper = styled.div`
|
|
107
121
|
height: 100%;
|
|
108
122
|
background-color: ${({ theme }) => theme.color('white')};
|
|
123
|
+
max-width: 760px;
|
|
124
|
+
padding: ${spacing('l')};
|
|
125
|
+
margin: 0 auto;
|
|
126
|
+
|
|
127
|
+
border-radius: 20px;
|
|
128
|
+
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15);
|
|
109
129
|
|
|
110
130
|
.carousel {
|
|
111
131
|
position: relative;
|
|
@@ -113,7 +133,7 @@ const CarouselWrapper = styled.div`
|
|
|
113
133
|
padding-top: ${spacing('l')};
|
|
114
134
|
|
|
115
135
|
@media ${({ theme }) => theme.breakpoint('medium')} {
|
|
116
|
-
padding-top: ${spacing('
|
|
136
|
+
padding-top: ${spacing('l')};
|
|
117
137
|
}
|
|
118
138
|
|
|
119
139
|
button.carousel__back-button,
|
|
@@ -128,19 +148,7 @@ const CarouselWrapper = styled.div`
|
|
|
128
148
|
text-indent: -9999px;
|
|
129
149
|
background-color: transparent;
|
|
130
150
|
border: none;
|
|
131
|
-
|
|
132
|
-
&:before {
|
|
133
|
-
content: '';
|
|
134
|
-
// Do we need some sort of icon here to show it's a button?
|
|
135
|
-
// background: transparent url(/images/payin/CR__Chevron_D--white.svg) no-repeat;
|
|
136
|
-
position: absolute;
|
|
137
|
-
width: 30px;
|
|
138
|
-
height: 30px;
|
|
139
|
-
top: 50%;
|
|
140
|
-
left: 0;
|
|
141
|
-
transform: translate(0, -50%) rotate(90deg);
|
|
142
|
-
}
|
|
143
|
-
|
|
151
|
+
|
|
144
152
|
&:after {
|
|
145
153
|
content: "";
|
|
146
154
|
position: absolute;
|
|
@@ -149,20 +157,18 @@ const CarouselWrapper = styled.div`
|
|
|
149
157
|
width: 50%;
|
|
150
158
|
height: 100%;
|
|
151
159
|
transition: opacity 0.2s linear;
|
|
152
|
-
background: linear-gradient(90deg, rgba(255, 255, 255,
|
|
160
|
+
background: linear-gradient(90deg, rgba(255, 255, 255, 1),
|
|
153
161
|
rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
|
|
154
162
|
}
|
|
155
163
|
|
|
156
164
|
|
|
157
165
|
&:hover {
|
|
158
|
-
// TO-DO: accessibiity?
|
|
159
|
-
// border: 1px solid black;
|
|
160
166
|
&:after {
|
|
161
167
|
opacity: 0.5;
|
|
162
168
|
}
|
|
163
169
|
}
|
|
164
170
|
|
|
165
|
-
@media ${({ theme }) => theme.breakpoint('
|
|
171
|
+
@media ${({ theme }) => theme.breakpoint('small')} {
|
|
166
172
|
width: 33.3% !important;
|
|
167
173
|
&:after {
|
|
168
174
|
width: 100%;
|
|
@@ -181,8 +187,8 @@ const CarouselWrapper = styled.div`
|
|
|
181
187
|
&:after {
|
|
182
188
|
left: auto;
|
|
183
189
|
right: 0;
|
|
184
|
-
background: linear-gradient(270deg, rgba(255, 255, 255,
|
|
185
|
-
rgba(255, 255, 255, 0.
|
|
190
|
+
background: linear-gradient(270deg, rgba(255, 255, 255, 1),
|
|
191
|
+
rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
|
|
186
192
|
}
|
|
187
193
|
}
|
|
188
194
|
|
|
@@ -203,7 +209,15 @@ const CarouselWrapper = styled.div`
|
|
|
203
209
|
.carousel__slide {
|
|
204
210
|
padding-bottom: ${props => props.mobileHeight}px !important;
|
|
205
211
|
|
|
212
|
+
@media ${({ theme }) => theme.breakpoint('small')} {
|
|
213
|
+
padding-bottom: ${props => props.tabletHeight}px !important;
|
|
214
|
+
}
|
|
215
|
+
|
|
206
216
|
@media ${({ theme }) => theme.breakpoint('medium')} {
|
|
217
|
+
padding-bottom: ${props => props.tabletHeight}px !important;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
@media ${({ theme }) => theme.breakpoint('small')} {
|
|
207
221
|
padding-bottom: ${props => props.desktopHeight}px !important;
|
|
208
222
|
|
|
209
223
|
// All slides:
|
|
@@ -227,7 +241,6 @@ const CarouselWrapper = styled.div`
|
|
|
227
241
|
// Scale down ALL copy
|
|
228
242
|
.all-text-wrapper {
|
|
229
243
|
transition: transform ${animationSpeed}s ease;
|
|
230
|
-
// HERE
|
|
231
244
|
transform-origin: top;
|
|
232
245
|
transform: translateY(calc(-${textScaleOffsetA}px + ${textScaleOffsetB}%)) scale(0.5)
|
|
233
246
|
}
|
|
@@ -238,9 +251,9 @@ const CarouselWrapper = styled.div`
|
|
|
238
251
|
.carousel__inner-slide {
|
|
239
252
|
> div:first-child {
|
|
240
253
|
&:after {
|
|
241
|
-
right: calc(-
|
|
254
|
+
right: calc(-300% - 6px);
|
|
242
255
|
transform: scale(1);
|
|
243
|
-
width:
|
|
256
|
+
width: 300%;
|
|
244
257
|
}
|
|
245
258
|
}
|
|
246
259
|
}
|
|
@@ -252,9 +265,9 @@ const CarouselWrapper = styled.div`
|
|
|
252
265
|
> div:first-child {
|
|
253
266
|
transform: scale(1);
|
|
254
267
|
&:after {
|
|
255
|
-
right: calc(-
|
|
268
|
+
right: calc(-222% - 6px);
|
|
256
269
|
transform: scale(0.5);
|
|
257
|
-
width:
|
|
270
|
+
width: 300%;
|
|
258
271
|
}
|
|
259
272
|
}
|
|
260
273
|
}
|
|
@@ -268,20 +281,66 @@ const CarouselWrapper = styled.div`
|
|
|
268
281
|
> div > div:first-child {
|
|
269
282
|
transform: scale(0.5);
|
|
270
283
|
&:after {
|
|
271
|
-
right: calc(-
|
|
284
|
+
right: calc(-300% - 6px);
|
|
272
285
|
transform: scale(1);
|
|
273
|
-
width:
|
|
286
|
+
width: 300%;
|
|
274
287
|
}
|
|
275
288
|
}
|
|
276
289
|
.all-text-wrapper {
|
|
277
|
-
// HERE
|
|
278
290
|
transform: translateY(calc(-${textScaleOffsetA}px + ${textScaleOffsetB}%)) scale(0.5)
|
|
279
291
|
}
|
|
280
292
|
}
|
|
281
293
|
}
|
|
282
294
|
}
|
|
283
295
|
}
|
|
284
|
-
|
|
296
|
+
|
|
297
|
+
// HERE WE GO
|
|
298
|
+
// START OF DESKTOP
|
|
299
|
+
@media ${({ theme }) => theme.breakpoint('medium')} {
|
|
300
|
+
|
|
301
|
+
// First
|
|
302
|
+
&.carousel__slide--visible {
|
|
303
|
+
.carousel__inner-slide {
|
|
304
|
+
> div:first-child {
|
|
305
|
+
&:after {
|
|
306
|
+
right: calc(-250% - 6px);
|
|
307
|
+
width: 250%;
|
|
308
|
+
}
|
|
309
|
+
}
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
// 2nd and 3rd
|
|
313
|
+
+ .carousel__slide--visible {
|
|
314
|
+
.carousel__inner-slide {
|
|
315
|
+
> div:first-child {
|
|
316
|
+
&:after {
|
|
317
|
+
right: calc(-187% - 6px);
|
|
318
|
+
width: 250%;
|
|
319
|
+
}
|
|
320
|
+
}
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
|
|
324
|
+
// 3rd only
|
|
325
|
+
+ .carousel__slide--visible {
|
|
326
|
+
.carousel__inner-slide {
|
|
327
|
+
> div:first-child {
|
|
328
|
+
&:after {
|
|
329
|
+
right: calc(-250% - 6px);
|
|
330
|
+
width: 250%;
|
|
331
|
+
}
|
|
332
|
+
}
|
|
333
|
+
}
|
|
334
|
+
}
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
}
|
|
341
|
+
// END OF DESKTOP
|
|
342
|
+
|
|
343
|
+
|
|
285
344
|
.carousel__inner-slide {
|
|
286
345
|
text-align: center;
|
|
287
346
|
display: inline-flex;
|
|
@@ -49,27 +49,32 @@ it("renders correctly", () => {
|
|
|
49
49
|
.c2:first-child {
|
|
50
50
|
margin-bottom: 2rem;
|
|
51
51
|
text-align: center;
|
|
52
|
-
font-size:
|
|
53
|
-
line-height:
|
|
52
|
+
font-size: 16px;
|
|
53
|
+
line-height: 19.5px;
|
|
54
54
|
}
|
|
55
55
|
|
|
56
56
|
.c4 {
|
|
57
57
|
margin-bottom: 2rem;
|
|
58
58
|
text-align: center;
|
|
59
|
-
font-size:
|
|
60
|
-
line-height:
|
|
59
|
+
font-size: 34px;
|
|
60
|
+
line-height: 37px;
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
.c6 {
|
|
64
64
|
margin-bottom: 0;
|
|
65
65
|
text-align: center;
|
|
66
|
-
font-size:
|
|
67
|
-
line-height:
|
|
66
|
+
font-size: 12px;
|
|
67
|
+
line-height: 14.63px;
|
|
68
68
|
}
|
|
69
69
|
|
|
70
70
|
.c0 {
|
|
71
71
|
height: 100%;
|
|
72
72
|
background-color: #FFFFFF;
|
|
73
|
+
max-width: 760px;
|
|
74
|
+
padding: 2rem;
|
|
75
|
+
margin: 0 auto;
|
|
76
|
+
border-radius: 20px;
|
|
77
|
+
box-shadow: 0px 0px 20px rgba(0,0,0,0.15);
|
|
73
78
|
}
|
|
74
79
|
|
|
75
80
|
.c0 .carousel {
|
|
@@ -92,19 +97,6 @@ it("renders correctly", () => {
|
|
|
92
97
|
border: none;
|
|
93
98
|
}
|
|
94
99
|
|
|
95
|
-
.c0 .carousel button.carousel__back-button:before,
|
|
96
|
-
.c0 .carousel button.carousel__next-button:before {
|
|
97
|
-
content: '';
|
|
98
|
-
position: absolute;
|
|
99
|
-
width: 30px;
|
|
100
|
-
height: 30px;
|
|
101
|
-
top: 50%;
|
|
102
|
-
left: 0;
|
|
103
|
-
-webkit-transform: translate(0,-50%) rotate(90deg);
|
|
104
|
-
-ms-transform: translate(0,-50%) rotate(90deg);
|
|
105
|
-
transform: translate(0,-50%) rotate(90deg);
|
|
106
|
-
}
|
|
107
|
-
|
|
108
100
|
.c0 .carousel button.carousel__back-button:after,
|
|
109
101
|
.c0 .carousel button.carousel__next-button:after {
|
|
110
102
|
content: "";
|
|
@@ -115,7 +107,7 @@ it("renders correctly", () => {
|
|
|
115
107
|
height: 100%;
|
|
116
108
|
-webkit-transition: opacity 0.2s linear;
|
|
117
109
|
transition: opacity 0.2s linear;
|
|
118
|
-
background: linear-gradient(90deg,rgba(255,255,255,
|
|
110
|
+
background: linear-gradient(90deg,rgba(255,255,255,1),rgba(255,255,255,0.5),rgba(255,255,255,0));
|
|
119
111
|
}
|
|
120
112
|
|
|
121
113
|
.c0 .carousel button.carousel__back-button:hover:after,
|
|
@@ -137,7 +129,7 @@ it("renders correctly", () => {
|
|
|
137
129
|
.c0 .carousel button.carousel__next-button:after {
|
|
138
130
|
left: auto;
|
|
139
131
|
right: 0;
|
|
140
|
-
background: linear-gradient(270deg,rgba(255,255,255,
|
|
132
|
+
background: linear-gradient(270deg,rgba(255,255,255,1),rgba(255,255,255,0.5),rgba(255,255,255,0));
|
|
141
133
|
}
|
|
142
134
|
|
|
143
135
|
.c0 .carousel .wymd-carousel {
|
|
@@ -157,7 +149,7 @@ it("renders correctly", () => {
|
|
|
157
149
|
}
|
|
158
150
|
|
|
159
151
|
.c0 .carousel .wymd-carousel .carousel__slide {
|
|
160
|
-
padding-bottom:
|
|
152
|
+
padding-bottom: 450px !important;
|
|
161
153
|
}
|
|
162
154
|
|
|
163
155
|
.c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide {
|
|
@@ -181,8 +173,8 @@ it("renders correctly", () => {
|
|
|
181
173
|
|
|
182
174
|
@media (min-width:1024px) {
|
|
183
175
|
.c2:first-child {
|
|
184
|
-
font-size:
|
|
185
|
-
line-height:
|
|
176
|
+
font-size: 20px;
|
|
177
|
+
line-height: 24.38px;
|
|
186
178
|
}
|
|
187
179
|
}
|
|
188
180
|
|
|
@@ -195,8 +187,8 @@ it("renders correctly", () => {
|
|
|
195
187
|
|
|
196
188
|
@media (min-width:1024px) {
|
|
197
189
|
.c4 {
|
|
198
|
-
font-size:
|
|
199
|
-
line-height:
|
|
190
|
+
font-size: 64px;
|
|
191
|
+
line-height: 68px;
|
|
200
192
|
}
|
|
201
193
|
}
|
|
202
194
|
|
|
@@ -209,11 +201,11 @@ it("renders correctly", () => {
|
|
|
209
201
|
|
|
210
202
|
@media (min-width:1024px) {
|
|
211
203
|
.c0 .carousel {
|
|
212
|
-
padding-top:
|
|
204
|
+
padding-top: 2rem;
|
|
213
205
|
}
|
|
214
206
|
}
|
|
215
207
|
|
|
216
|
-
@media (min-width:
|
|
208
|
+
@media (min-width:740px) {
|
|
217
209
|
.c0 .carousel button.carousel__back-button,
|
|
218
210
|
.c0 .carousel button.carousel__next-button {
|
|
219
211
|
width: 33.3% !important;
|
|
@@ -225,9 +217,21 @@ it("renders correctly", () => {
|
|
|
225
217
|
}
|
|
226
218
|
}
|
|
227
219
|
|
|
220
|
+
@media (min-width:740px) {
|
|
221
|
+
.c0 .carousel .wymd-carousel .carousel__slide {
|
|
222
|
+
padding-bottom: 500px !important;
|
|
223
|
+
}
|
|
224
|
+
}
|
|
225
|
+
|
|
228
226
|
@media (min-width:1024px) {
|
|
229
227
|
.c0 .carousel .wymd-carousel .carousel__slide {
|
|
230
|
-
padding-bottom:
|
|
228
|
+
padding-bottom: 500px !important;
|
|
229
|
+
}
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
@media (min-width:740px) {
|
|
233
|
+
.c0 .carousel .wymd-carousel .carousel__slide {
|
|
234
|
+
padding-bottom: 475px !important;
|
|
231
235
|
}
|
|
232
236
|
|
|
233
237
|
.c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide > div:first-child {
|
|
@@ -257,17 +261,17 @@ it("renders correctly", () => {
|
|
|
257
261
|
-webkit-transform-origin: top;
|
|
258
262
|
-ms-transform-origin: top;
|
|
259
263
|
transform-origin: top;
|
|
260
|
-
-webkit-transform: translateY(calc(-
|
|
261
|
-
-ms-transform: translateY(calc(-
|
|
262
|
-
transform: translateY(calc(-
|
|
264
|
+
-webkit-transform: translateY(calc(-45px + 5%)) scale(0.5);
|
|
265
|
+
-ms-transform: translateY(calc(-45px + 5%)) scale(0.5);
|
|
266
|
+
transform: translateY(calc(-45px + 5%)) scale(0.5);
|
|
263
267
|
}
|
|
264
268
|
|
|
265
269
|
.c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible .carousel__inner-slide > div:first-child:after {
|
|
266
|
-
right: calc(-
|
|
270
|
+
right: calc(-300% - 6px);
|
|
267
271
|
-webkit-transform: scale(1);
|
|
268
272
|
-ms-transform: scale(1);
|
|
269
273
|
transform: scale(1);
|
|
270
|
-
width:
|
|
274
|
+
width: 300%;
|
|
271
275
|
}
|
|
272
276
|
|
|
273
277
|
.c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child {
|
|
@@ -277,11 +281,11 @@ it("renders correctly", () => {
|
|
|
277
281
|
}
|
|
278
282
|
|
|
279
283
|
.c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child:after {
|
|
280
|
-
right: calc(-
|
|
284
|
+
right: calc(-222% - 6px);
|
|
281
285
|
-webkit-transform: scale(0.5);
|
|
282
286
|
-ms-transform: scale(0.5);
|
|
283
287
|
transform: scale(0.5);
|
|
284
|
-
width:
|
|
288
|
+
width: 300%;
|
|
285
289
|
}
|
|
286
290
|
|
|
287
291
|
.c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .all-text-wrapper {
|
|
@@ -297,17 +301,34 @@ it("renders correctly", () => {
|
|
|
297
301
|
}
|
|
298
302
|
|
|
299
303
|
.c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible > div > div:first-child:after {
|
|
300
|
-
right: calc(-
|
|
304
|
+
right: calc(-300% - 6px);
|
|
301
305
|
-webkit-transform: scale(1);
|
|
302
306
|
-ms-transform: scale(1);
|
|
303
307
|
transform: scale(1);
|
|
304
|
-
width:
|
|
308
|
+
width: 300%;
|
|
305
309
|
}
|
|
306
310
|
|
|
307
311
|
.c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible .all-text-wrapper {
|
|
308
|
-
-webkit-transform: translateY(calc(-
|
|
309
|
-
-ms-transform: translateY(calc(-
|
|
310
|
-
transform: translateY(calc(-
|
|
312
|
+
-webkit-transform: translateY(calc(-45px + 5%)) scale(0.5);
|
|
313
|
+
-ms-transform: translateY(calc(-45px + 5%)) scale(0.5);
|
|
314
|
+
transform: translateY(calc(-45px + 5%)) scale(0.5);
|
|
315
|
+
}
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
@media (min-width:1024px) {
|
|
319
|
+
.c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible .carousel__inner-slide > div:first-child:after {
|
|
320
|
+
right: calc(-250% - 6px);
|
|
321
|
+
width: 250%;
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
.c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child:after {
|
|
325
|
+
right: calc(-187% - 6px);
|
|
326
|
+
width: 250%;
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
.c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child:after {
|
|
330
|
+
right: calc(-250% - 6px);
|
|
331
|
+
width: 250%;
|
|
311
332
|
}
|
|
312
333
|
}
|
|
313
334
|
|