@comicrelief/component-library 7.35.2 → 7.35.3
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 +4 -2
- package/dist/components/Organisms/WYMDCarousel/WYMDCarousel.style.js +7 -3
- package/dist/components/Organisms/WYMDCarousel/WYMDCarousel.test.js +1 -1
- package/package.json +1 -1
- package/src/components/Organisms/WYMDCarousel/WYMDCarousel.js +14 -11
- package/src/components/Organisms/WYMDCarousel/WYMDCarousel.style.js +22 -2
- package/src/components/Organisms/WYMDCarousel/WYMDCarousel.test.js +38 -15
|
@@ -102,7 +102,9 @@ const WYMDCarousel = _ref => {
|
|
|
102
102
|
}, /*#__PURE__*/_react.default.createElement("img", {
|
|
103
103
|
src: theseItems[key].image.file.url,
|
|
104
104
|
alt: theseItems[key].copy
|
|
105
|
-
})), /*#__PURE__*/_react.default.createElement(
|
|
105
|
+
})), /*#__PURE__*/_react.default.createElement("div", {
|
|
106
|
+
className: "all-text-wrapper"
|
|
107
|
+
}, /*#__PURE__*/_react.default.createElement(_WYMDCarousel.AmountWrapper, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
|
|
106
108
|
tag: "h1",
|
|
107
109
|
family: "Anton",
|
|
108
110
|
uppercase: true,
|
|
@@ -111,7 +113,7 @@ const WYMDCarousel = _ref => {
|
|
|
111
113
|
}, theseItems[key].amount)), /*#__PURE__*/_react.default.createElement(_WYMDCarousel.CopyWrapper, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
|
|
112
114
|
tag: "p",
|
|
113
115
|
size: "l"
|
|
114
|
-
}, theseItems[key].copy)))
|
|
116
|
+
}, theseItems[key].copy))))
|
|
115
117
|
);
|
|
116
118
|
}), isMobileOrTablet === false && /*#__PURE__*/_react.default.createElement(_pureReactCarousel.Slide, {
|
|
117
119
|
index: theseItems.length + 1,
|
|
@@ -9,7 +9,11 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
|
9
9
|
var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
|
|
10
10
|
var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
|
|
11
11
|
// Duration in seconds
|
|
12
|
-
const animationSpeed = 0.
|
|
12
|
+
const animationSpeed = 0.75;
|
|
13
|
+
|
|
14
|
+
// Use to calc positions when scaling copy
|
|
15
|
+
const textScaleOffsetA = 50;
|
|
16
|
+
const textScaleOffsetB = 5;
|
|
13
17
|
const ImageWrapper = exports.ImageWrapper = _styledComponents.default.div.withConfig({
|
|
14
18
|
displayName: "WYMDCarouselstyle__ImageWrapper",
|
|
15
19
|
componentId: "sc-115z54p-0"
|
|
@@ -64,7 +68,7 @@ const Including = exports.Including = (0, _styledComponents.default)(_Text.defau
|
|
|
64
68
|
const CarouselWrapper = exports.CarouselWrapper = _styledComponents.default.div.withConfig({
|
|
65
69
|
displayName: "WYMDCarouselstyle__CarouselWrapper",
|
|
66
70
|
componentId: "sc-115z54p-6"
|
|
67
|
-
})(["height:100%;
|
|
71
|
+
})(["height:100%;background-color:", ";.carousel{position:relative;margin:0 auto;padding-top:", ";@media ", "{padding-top:", ";}button.carousel__back-button,button.carousel__next-button{position:absolute;left:0;top:0;width:33% !important;height:100%;padding:0 !important;box-shadow:none;text-indent:-9999px;background-color:transparent;border:none;&:before{content:'';position:absolute;width:30px;height:30px;top:50%;left:0;transform:translate(0,-50%) rotate(90deg);}&:after{content:\"\";position:absolute;top:0;left:0;width:50%;height:100%;transition:opacity 0.2s linear;background:linear-gradient(90deg,rgba(255,255,255,0.95),rgba(255,255,255,0.5),rgba(255,255,255,0));}&:hover{&:after{opacity:0.5;}}@media ", "{width:33.3% !important;&:after{width:100%;}}}button.carousel__next-button{left:auto;right:0;&:before{transform:translate(0,-50%) rotate(-90deg);}&:after{left:auto;right:0;background:linear-gradient(270deg,rgba(255,255,255,0.95),rgba(255,255,255,0.75),rgba(255,255,255,0));}}.wymd-carousel{transition:-webkit-transform ", "s;-o-transition:transform ", "s;transition:transform ", "s;-webkit-transform:", "s;will-change:transform;.last-slide{.image-wrapper:after{content:none;}}.carousel__slide{padding-bottom:", "px !important;@media ", "{padding-bottom:", "px !important;.carousel__inner-slide{> div:first-child{transition:transform ", "s ease;transform:scale(0.5);&:after{transition:transform ", "s ease,width ", "s ease,right ", "s ease;right:calc(-300% - 6px);transform:scale(1);width:300%;}}.all-text-wrapper{transition:transform ", "s ease;transform-origin:top;transform:translateY(calc(-", "px + ", "%)) scale(0.5)}}&.carousel__slide--visible{.carousel__inner-slide{> div:first-child{&:after{right:calc(-250% - 6px);transform:scale(1);width:250%;}}}+ .carousel__slide--visible{.carousel__inner-slide{> div:first-child{transform:scale(1);&:after{right:calc(-187% - 6px);transform:scale(0.5);width:250%;}}}.all-text-wrapper{transform:translateY(0) scale(1);}+ .carousel__slide--visible{> div > div:first-child{transform:scale(0.5);&:after{right:calc(-250% - 6px);transform:scale(1);width:250%;}}.all-text-wrapper{transform:translateY(calc(-", "px + ", "%)) scale(0.5)}}}}}.carousel__inner-slide{text-align:center;display:inline-flex;align-items:center;justify-content:flex-start;flex-direction:column;}}}}"], _ref6 => {
|
|
68
72
|
let {
|
|
69
73
|
theme
|
|
70
74
|
} = _ref6;
|
|
@@ -84,4 +88,4 @@ const CarouselWrapper = exports.CarouselWrapper = _styledComponents.default.div.
|
|
|
84
88
|
theme
|
|
85
89
|
} = _ref9;
|
|
86
90
|
return theme.breakpoint('medium');
|
|
87
|
-
}, props => props.desktopHeight, animationSpeed, animationSpeed, animationSpeed, animationSpeed);
|
|
91
|
+
}, props => props.desktopHeight, animationSpeed, animationSpeed, animationSpeed, animationSpeed, animationSpeed, textScaleOffsetA, textScaleOffsetB, textScaleOffsetA, textScaleOffsetB);
|
|
@@ -12,5 +12,5 @@ it("renders correctly", () => {
|
|
|
12
12
|
const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_WYMDCarousel.default, {
|
|
13
13
|
data: carouselItemsComplete
|
|
14
14
|
})).toJSON();
|
|
15
|
-
expect(tree).toMatchInlineSnapshot("\n .c1 {\n font-size: 1rem;\n line-height: 1rem;\n text-transform: inherit;\n font-weight: bold;\n line-height: normal;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c3 {\n color: #E52630;\n font-size: 1rem;\n line-height: 1rem;\n text-transform: uppercase;\n font-weight: normal;\n font-family: 'Anton',Impact,sans-serif;\n -webkit-letter-spacing: 0.03rem;\n -moz-letter-spacing: 0.03rem;\n -ms-letter-spacing: 0.03rem;\n letter-spacing: 0.03rem;\n }\n\n .c5 {\n font-size: 1rem;\n line-height: 1rem;\n text-transform: inherit;\n line-height: normal;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c2 {\n width: 75%;\n margin: 0 auto;\n }\n\n .c2:first-child {\n margin-bottom: 2rem;\n text-align: center;\n font-size: 20px;\n line-height: 23px;\n }\n\n .c4 {\n margin-bottom: 2rem;\n text-align: center;\n font-size: 40px;\n line-height: 40px;\n }\n\n .c6 {\n margin-bottom: 0;\n text-align: center;\n font-size: 14px;\n line-height: 17px;\n }\n\n .c0 {\n height: 100%;\n
|
|
15
|
+
expect(tree).toMatchInlineSnapshot("\n .c1 {\n font-size: 1rem;\n line-height: 1rem;\n text-transform: inherit;\n font-weight: bold;\n line-height: normal;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c3 {\n color: #E52630;\n font-size: 1rem;\n line-height: 1rem;\n text-transform: uppercase;\n font-weight: normal;\n font-family: 'Anton',Impact,sans-serif;\n -webkit-letter-spacing: 0.03rem;\n -moz-letter-spacing: 0.03rem;\n -ms-letter-spacing: 0.03rem;\n letter-spacing: 0.03rem;\n }\n\n .c5 {\n font-size: 1rem;\n line-height: 1rem;\n text-transform: inherit;\n line-height: normal;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c2 {\n width: 75%;\n margin: 0 auto;\n }\n\n .c2:first-child {\n margin-bottom: 2rem;\n text-align: center;\n font-size: 20px;\n line-height: 23px;\n }\n\n .c4 {\n margin-bottom: 2rem;\n text-align: center;\n font-size: 40px;\n line-height: 40px;\n }\n\n .c6 {\n margin-bottom: 0;\n text-align: center;\n font-size: 14px;\n line-height: 17px;\n }\n\n .c0 {\n height: 100%;\n background-color: #FFFFFF;\n }\n\n .c0 .carousel {\n position: relative;\n margin: 0 auto;\n padding-top: 2rem;\n }\n\n .c0 .carousel button.carousel__back-button,\n .c0 .carousel button.carousel__next-button {\n position: absolute;\n left: 0;\n top: 0;\n width: 33% !important;\n height: 100%;\n padding: 0 !important;\n box-shadow: none;\n text-indent: -9999px;\n background-color: transparent;\n border: none;\n }\n\n .c0 .carousel button.carousel__back-button:before,\n .c0 .carousel button.carousel__next-button:before {\n content: '';\n position: absolute;\n width: 30px;\n height: 30px;\n top: 50%;\n left: 0;\n -webkit-transform: translate(0,-50%) rotate(90deg);\n -ms-transform: translate(0,-50%) rotate(90deg);\n transform: translate(0,-50%) rotate(90deg);\n }\n\n .c0 .carousel button.carousel__back-button:after,\n .c0 .carousel button.carousel__next-button:after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 50%;\n height: 100%;\n -webkit-transition: opacity 0.2s linear;\n transition: opacity 0.2s linear;\n background: linear-gradient(90deg,rgba(255,255,255,0.95),rgba(255,255,255,0.5),rgba(255,255,255,0));\n }\n\n .c0 .carousel button.carousel__back-button:hover:after,\n .c0 .carousel button.carousel__next-button:hover:after {\n opacity: 0.5;\n }\n\n .c0 .carousel button.carousel__next-button {\n left: auto;\n right: 0;\n }\n\n .c0 .carousel button.carousel__next-button:before {\n -webkit-transform: translate(0,-50%) rotate(-90deg);\n -ms-transform: translate(0,-50%) rotate(-90deg);\n transform: translate(0,-50%) rotate(-90deg);\n }\n\n .c0 .carousel button.carousel__next-button:after {\n left: auto;\n right: 0;\n background: linear-gradient(270deg,rgba(255,255,255,0.95),rgba(255,255,255,0.75),rgba(255,255,255,0));\n }\n\n .c0 .carousel .wymd-carousel {\n -webkit-transition: -webkit-transform 0.75s;\n -webkit-transition: -webkit-transform 0.75s;\n transition: -webkit-transform 0.75s;\n -o-transition: transform 0.75s;\n -webkit-transition: -webkit-transform 0.75s;\n -webkit-transition: transform 0.75s;\n transition: transform 0.75s;\n -webkit-transform: 0.75s;\n will-change: transform;\n }\n\n .c0 .carousel .wymd-carousel .last-slide .image-wrapper:after {\n content: none;\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide {\n padding-bottom: 500px !important;\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide {\n text-align: center;\n display: -webkit-inline-box;\n display: -webkit-inline-flex;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-align-items: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: start;\n -webkit-justify-content: flex-start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n -webkit-flex-direction: column;\n -ms-flex-direction: column;\n flex-direction: column;\n }\n\n @media (min-width:1024px) {\n .c2:first-child {\n font-size: 21px;\n line-height: 23px;\n }\n }\n\n @media (min-width:740px) {\n .c4 {\n font-size: 60px;\n line-height: 60px;\n }\n }\n\n @media (min-width:1024px) {\n .c4 {\n font-size: 75px;\n line-height: 78px;\n }\n }\n\n @media (min-width:740px) {\n .c6 {\n font-size: 17px;\n line-height: 19px;\n }\n }\n\n @media (min-width:1024px) {\n .c0 .carousel {\n padding-top: 3rem;\n }\n }\n\n @media (min-width:1024px) {\n .c0 .carousel button.carousel__back-button,\n .c0 .carousel button.carousel__next-button {\n width: 33.3% !important;\n }\n\n .c0 .carousel button.carousel__back-button:after,\n .c0 .carousel button.carousel__next-button:after {\n width: 100%;\n }\n }\n\n @media (min-width:1024px) {\n .c0 .carousel .wymd-carousel .carousel__slide {\n padding-bottom: 550px !important;\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide > div:first-child {\n -webkit-transition: -webkit-transform 0.75s ease;\n -webkit-transition: transform 0.75s ease;\n transition: transform 0.75s ease;\n -webkit-transform: scale(0.5);\n -ms-transform: scale(0.5);\n transform: scale(0.5);\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide > div:first-child:after {\n -webkit-transition: -webkit-transform 0.75s ease,width 0.75s ease,right 0.75s ease;\n -webkit-transition: transform 0.75s ease,width 0.75s ease,right 0.75s ease;\n transition: transform 0.75s ease,width 0.75s ease,right 0.75s ease;\n right: calc(-300% - 6px);\n -webkit-transform: scale(1);\n -ms-transform: scale(1);\n transform: scale(1);\n width: 300%;\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide .all-text-wrapper {\n -webkit-transition: -webkit-transform 0.75s ease;\n -webkit-transition: transform 0.75s ease;\n transition: transform 0.75s ease;\n -webkit-transform-origin: top;\n -ms-transform-origin: top;\n transform-origin: top;\n -webkit-transform: translateY(calc(-50px + 5%)) scale(0.5);\n -ms-transform: translateY(calc(-50px + 5%)) scale(0.5);\n transform: translateY(calc(-50px + 5%)) scale(0.5);\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible .carousel__inner-slide > div:first-child:after {\n right: calc(-250% - 6px);\n -webkit-transform: scale(1);\n -ms-transform: scale(1);\n transform: scale(1);\n width: 250%;\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child {\n -webkit-transform: scale(1);\n -ms-transform: scale(1);\n transform: scale(1);\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child:after {\n right: calc(-187% - 6px);\n -webkit-transform: scale(0.5);\n -ms-transform: scale(0.5);\n transform: scale(0.5);\n width: 250%;\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .all-text-wrapper {\n -webkit-transform: translateY(0) scale(1);\n -ms-transform: translateY(0) scale(1);\n transform: translateY(0) scale(1);\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible > div > div:first-child {\n -webkit-transform: scale(0.5);\n -ms-transform: scale(0.5);\n transform: scale(0.5);\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible > div > div:first-child:after {\n right: calc(-250% - 6px);\n -webkit-transform: scale(1);\n -ms-transform: scale(1);\n transform: scale(1);\n width: 250%;\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible .all-text-wrapper {\n -webkit-transform: translateY(calc(-50px + 5%)) scale(0.5);\n -ms-transform: translateY(calc(-50px + 5%)) scale(0.5);\n transform: translateY(calc(-50px + 5%)) scale(0.5);\n }\n }\n\n <div\n className=\"c0 CarouselWrapper\"\n id=\"7zdR84QkZwrTh9NWx2H926\"\n >\n <p\n className=\"c1 c2\"\n color=\"inherit\"\n size=\"s\"\n >\n Over the past two years, we\u2019ve supported\n </p>\n <h1\n className=\"c3 c4\"\n color=\"red\"\n size=\"s\"\n >\n 11.7 million people\n </h1>\n <p\n className=\"c5 c6\"\n color=\"inherit\"\n size=\"s\"\n >\n including...\n </p>\n </div>\n ");
|
|
16
16
|
});
|
package/package.json
CHANGED
|
@@ -108,17 +108,20 @@ const WYMDCarousel = ({ data, data: { autoPlay, contentful_id: thisID } }) => {
|
|
|
108
108
|
<img src={theseItems[key].image.file.url} alt={theseItems[key].copy} />
|
|
109
109
|
</ImageWrapper>
|
|
110
110
|
|
|
111
|
-
<
|
|
112
|
-
<
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
<
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
111
|
+
<div className="all-text-wrapper">
|
|
112
|
+
<AmountWrapper>
|
|
113
|
+
<Text tag="h1" family="Anton" uppercase weight="normal" size="super">
|
|
114
|
+
{theseItems[key].amount}
|
|
115
|
+
</Text>
|
|
116
|
+
</AmountWrapper>
|
|
117
|
+
|
|
118
|
+
<CopyWrapper>
|
|
119
|
+
<Text tag="p" size="l">
|
|
120
|
+
{theseItems[key].copy}
|
|
121
|
+
</Text>
|
|
122
|
+
</CopyWrapper>
|
|
123
|
+
</div>
|
|
124
|
+
|
|
122
125
|
</Slide>
|
|
123
126
|
);
|
|
124
127
|
})}
|
|
@@ -3,7 +3,11 @@ import spacing from '../../../theme/shared/spacing';
|
|
|
3
3
|
import Text from '../../Atoms/Text/Text';
|
|
4
4
|
|
|
5
5
|
// Duration in seconds
|
|
6
|
-
const animationSpeed = 0.
|
|
6
|
+
const animationSpeed = 0.75;
|
|
7
|
+
|
|
8
|
+
// Use to calc positions when scaling copy
|
|
9
|
+
const textScaleOffsetA = 50;
|
|
10
|
+
const textScaleOffsetB = 5;
|
|
7
11
|
|
|
8
12
|
const ImageWrapper = styled.div`
|
|
9
13
|
width: 33%;
|
|
@@ -101,7 +105,6 @@ const Including = styled(Text)`
|
|
|
101
105
|
// Unfortunately having to target plugin-created markup ye olde fashioned way:
|
|
102
106
|
const CarouselWrapper = styled.div`
|
|
103
107
|
height: 100%;
|
|
104
|
-
padding: ${spacing('m')};
|
|
105
108
|
background-color: ${({ theme }) => theme.color('white')};
|
|
106
109
|
|
|
107
110
|
.carousel {
|
|
@@ -205,6 +208,7 @@ const CarouselWrapper = styled.div`
|
|
|
205
208
|
|
|
206
209
|
// All slides:
|
|
207
210
|
.carousel__inner-slide {
|
|
211
|
+
|
|
208
212
|
// All 'ImageWrappers':
|
|
209
213
|
> div:first-child {
|
|
210
214
|
transition: transform ${animationSpeed}s ease;
|
|
@@ -219,6 +223,14 @@ const CarouselWrapper = styled.div`
|
|
|
219
223
|
width: 300%;
|
|
220
224
|
}
|
|
221
225
|
}
|
|
226
|
+
|
|
227
|
+
// Scale down ALL copy
|
|
228
|
+
.all-text-wrapper {
|
|
229
|
+
transition: transform ${animationSpeed}s ease;
|
|
230
|
+
// HERE
|
|
231
|
+
transform-origin: top;
|
|
232
|
+
transform: translateY(calc(-${textScaleOffsetA}px + ${textScaleOffsetB}%)) scale(0.5)
|
|
233
|
+
}
|
|
222
234
|
}
|
|
223
235
|
|
|
224
236
|
// Our 'first' slide of the three:
|
|
@@ -247,6 +259,10 @@ const CarouselWrapper = styled.div`
|
|
|
247
259
|
}
|
|
248
260
|
}
|
|
249
261
|
|
|
262
|
+
.all-text-wrapper {
|
|
263
|
+
transform: translateY(0) scale(1);
|
|
264
|
+
}
|
|
265
|
+
|
|
250
266
|
// Resets the 3rd slide:
|
|
251
267
|
+ .carousel__slide--visible {
|
|
252
268
|
> div > div:first-child {
|
|
@@ -257,6 +273,10 @@ const CarouselWrapper = styled.div`
|
|
|
257
273
|
width: 250%;
|
|
258
274
|
}
|
|
259
275
|
}
|
|
276
|
+
.all-text-wrapper {
|
|
277
|
+
// HERE
|
|
278
|
+
transform: translateY(calc(-${textScaleOffsetA}px + ${textScaleOffsetB}%)) scale(0.5)
|
|
279
|
+
}
|
|
260
280
|
}
|
|
261
281
|
}
|
|
262
282
|
}
|
|
@@ -69,7 +69,6 @@ it("renders correctly", () => {
|
|
|
69
69
|
|
|
70
70
|
.c0 {
|
|
71
71
|
height: 100%;
|
|
72
|
-
padding: 1.5rem;
|
|
73
72
|
background-color: #FFFFFF;
|
|
74
73
|
}
|
|
75
74
|
|
|
@@ -142,14 +141,14 @@ it("renders correctly", () => {
|
|
|
142
141
|
}
|
|
143
142
|
|
|
144
143
|
.c0 .carousel .wymd-carousel {
|
|
145
|
-
-webkit-transition: -webkit-transform 0.
|
|
146
|
-
-webkit-transition: -webkit-transform 0.
|
|
147
|
-
transition: -webkit-transform 0.
|
|
148
|
-
-o-transition: transform 0.
|
|
149
|
-
-webkit-transition: -webkit-transform 0.
|
|
150
|
-
-webkit-transition: transform 0.
|
|
151
|
-
transition: transform 0.
|
|
152
|
-
-webkit-transform: 0.
|
|
144
|
+
-webkit-transition: -webkit-transform 0.75s;
|
|
145
|
+
-webkit-transition: -webkit-transform 0.75s;
|
|
146
|
+
transition: -webkit-transform 0.75s;
|
|
147
|
+
-o-transition: transform 0.75s;
|
|
148
|
+
-webkit-transition: -webkit-transform 0.75s;
|
|
149
|
+
-webkit-transition: transform 0.75s;
|
|
150
|
+
transition: transform 0.75s;
|
|
151
|
+
-webkit-transform: 0.75s;
|
|
153
152
|
will-change: transform;
|
|
154
153
|
}
|
|
155
154
|
|
|
@@ -232,18 +231,18 @@ it("renders correctly", () => {
|
|
|
232
231
|
}
|
|
233
232
|
|
|
234
233
|
.c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide > div:first-child {
|
|
235
|
-
-webkit-transition: -webkit-transform 0.
|
|
236
|
-
-webkit-transition: transform 0.
|
|
237
|
-
transition: transform 0.
|
|
234
|
+
-webkit-transition: -webkit-transform 0.75s ease;
|
|
235
|
+
-webkit-transition: transform 0.75s ease;
|
|
236
|
+
transition: transform 0.75s ease;
|
|
238
237
|
-webkit-transform: scale(0.5);
|
|
239
238
|
-ms-transform: scale(0.5);
|
|
240
239
|
transform: scale(0.5);
|
|
241
240
|
}
|
|
242
241
|
|
|
243
242
|
.c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide > div:first-child:after {
|
|
244
|
-
-webkit-transition: -webkit-transform 0.
|
|
245
|
-
-webkit-transition: transform 0.
|
|
246
|
-
transition: transform 0.
|
|
243
|
+
-webkit-transition: -webkit-transform 0.75s ease,width 0.75s ease,right 0.75s ease;
|
|
244
|
+
-webkit-transition: transform 0.75s ease,width 0.75s ease,right 0.75s ease;
|
|
245
|
+
transition: transform 0.75s ease,width 0.75s ease,right 0.75s ease;
|
|
247
246
|
right: calc(-300% - 6px);
|
|
248
247
|
-webkit-transform: scale(1);
|
|
249
248
|
-ms-transform: scale(1);
|
|
@@ -251,6 +250,18 @@ it("renders correctly", () => {
|
|
|
251
250
|
width: 300%;
|
|
252
251
|
}
|
|
253
252
|
|
|
253
|
+
.c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide .all-text-wrapper {
|
|
254
|
+
-webkit-transition: -webkit-transform 0.75s ease;
|
|
255
|
+
-webkit-transition: transform 0.75s ease;
|
|
256
|
+
transition: transform 0.75s ease;
|
|
257
|
+
-webkit-transform-origin: top;
|
|
258
|
+
-ms-transform-origin: top;
|
|
259
|
+
transform-origin: top;
|
|
260
|
+
-webkit-transform: translateY(calc(-50px + 5%)) scale(0.5);
|
|
261
|
+
-ms-transform: translateY(calc(-50px + 5%)) scale(0.5);
|
|
262
|
+
transform: translateY(calc(-50px + 5%)) scale(0.5);
|
|
263
|
+
}
|
|
264
|
+
|
|
254
265
|
.c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible .carousel__inner-slide > div:first-child:after {
|
|
255
266
|
right: calc(-250% - 6px);
|
|
256
267
|
-webkit-transform: scale(1);
|
|
@@ -273,6 +284,12 @@ it("renders correctly", () => {
|
|
|
273
284
|
width: 250%;
|
|
274
285
|
}
|
|
275
286
|
|
|
287
|
+
.c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .all-text-wrapper {
|
|
288
|
+
-webkit-transform: translateY(0) scale(1);
|
|
289
|
+
-ms-transform: translateY(0) scale(1);
|
|
290
|
+
transform: translateY(0) scale(1);
|
|
291
|
+
}
|
|
292
|
+
|
|
276
293
|
.c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible > div > div:first-child {
|
|
277
294
|
-webkit-transform: scale(0.5);
|
|
278
295
|
-ms-transform: scale(0.5);
|
|
@@ -286,6 +303,12 @@ it("renders correctly", () => {
|
|
|
286
303
|
transform: scale(1);
|
|
287
304
|
width: 250%;
|
|
288
305
|
}
|
|
306
|
+
|
|
307
|
+
.c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible .all-text-wrapper {
|
|
308
|
+
-webkit-transform: translateY(calc(-50px + 5%)) scale(0.5);
|
|
309
|
+
-ms-transform: translateY(calc(-50px + 5%)) scale(0.5);
|
|
310
|
+
transform: translateY(calc(-50px + 5%)) scale(0.5);
|
|
311
|
+
}
|
|
289
312
|
}
|
|
290
313
|
|
|
291
314
|
<div
|