@comicrelief/component-library 7.35.1 → 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 +15 -6
- 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 +23 -2
- package/src/components/Organisms/WYMDCarousel/WYMDCarousel.test.js +39 -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,19 +68,24 @@ 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;
|
|
71
|
-
return theme.
|
|
72
|
-
}, (0, _spacing.default)('
|
|
75
|
+
return theme.color('white');
|
|
76
|
+
}, (0, _spacing.default)('l'), _ref7 => {
|
|
73
77
|
let {
|
|
74
78
|
theme
|
|
75
79
|
} = _ref7;
|
|
76
80
|
return theme.breakpoint('medium');
|
|
77
|
-
},
|
|
81
|
+
}, (0, _spacing.default)('lg'), _ref8 => {
|
|
78
82
|
let {
|
|
79
83
|
theme
|
|
80
84
|
} = _ref8;
|
|
81
85
|
return theme.breakpoint('medium');
|
|
82
|
-
},
|
|
86
|
+
}, animationSpeed, animationSpeed, animationSpeed, animationSpeed, props => props.mobileHeight, _ref9 => {
|
|
87
|
+
let {
|
|
88
|
+
theme
|
|
89
|
+
} = _ref9;
|
|
90
|
+
return theme.breakpoint('medium');
|
|
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,7 @@ 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
|
-
|
|
108
|
+
background-color: ${({ theme }) => theme.color('white')};
|
|
105
109
|
|
|
106
110
|
.carousel {
|
|
107
111
|
position: relative;
|
|
@@ -204,6 +208,7 @@ const CarouselWrapper = styled.div`
|
|
|
204
208
|
|
|
205
209
|
// All slides:
|
|
206
210
|
.carousel__inner-slide {
|
|
211
|
+
|
|
207
212
|
// All 'ImageWrappers':
|
|
208
213
|
> div:first-child {
|
|
209
214
|
transition: transform ${animationSpeed}s ease;
|
|
@@ -218,6 +223,14 @@ const CarouselWrapper = styled.div`
|
|
|
218
223
|
width: 300%;
|
|
219
224
|
}
|
|
220
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
|
+
}
|
|
221
234
|
}
|
|
222
235
|
|
|
223
236
|
// Our 'first' slide of the three:
|
|
@@ -246,6 +259,10 @@ const CarouselWrapper = styled.div`
|
|
|
246
259
|
}
|
|
247
260
|
}
|
|
248
261
|
|
|
262
|
+
.all-text-wrapper {
|
|
263
|
+
transform: translateY(0) scale(1);
|
|
264
|
+
}
|
|
265
|
+
|
|
249
266
|
// Resets the 3rd slide:
|
|
250
267
|
+ .carousel__slide--visible {
|
|
251
268
|
> div > div:first-child {
|
|
@@ -256,6 +273,10 @@ const CarouselWrapper = styled.div`
|
|
|
256
273
|
width: 250%;
|
|
257
274
|
}
|
|
258
275
|
}
|
|
276
|
+
.all-text-wrapper {
|
|
277
|
+
// HERE
|
|
278
|
+
transform: translateY(calc(-${textScaleOffsetA}px + ${textScaleOffsetB}%)) scale(0.5)
|
|
279
|
+
}
|
|
259
280
|
}
|
|
260
281
|
}
|
|
261
282
|
}
|
|
@@ -69,7 +69,7 @@ it("renders correctly", () => {
|
|
|
69
69
|
|
|
70
70
|
.c0 {
|
|
71
71
|
height: 100%;
|
|
72
|
-
|
|
72
|
+
background-color: #FFFFFF;
|
|
73
73
|
}
|
|
74
74
|
|
|
75
75
|
.c0 .carousel {
|
|
@@ -141,14 +141,14 @@ it("renders correctly", () => {
|
|
|
141
141
|
}
|
|
142
142
|
|
|
143
143
|
.c0 .carousel .wymd-carousel {
|
|
144
|
-
-webkit-transition: -webkit-transform 0.
|
|
145
|
-
-webkit-transition: -webkit-transform 0.
|
|
146
|
-
transition: -webkit-transform 0.
|
|
147
|
-
-o-transition: transform 0.
|
|
148
|
-
-webkit-transition: -webkit-transform 0.
|
|
149
|
-
-webkit-transition: transform 0.
|
|
150
|
-
transition: transform 0.
|
|
151
|
-
-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;
|
|
152
152
|
will-change: transform;
|
|
153
153
|
}
|
|
154
154
|
|
|
@@ -231,18 +231,18 @@ it("renders correctly", () => {
|
|
|
231
231
|
}
|
|
232
232
|
|
|
233
233
|
.c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide > div:first-child {
|
|
234
|
-
-webkit-transition: -webkit-transform 0.
|
|
235
|
-
-webkit-transition: transform 0.
|
|
236
|
-
transition: transform 0.
|
|
234
|
+
-webkit-transition: -webkit-transform 0.75s ease;
|
|
235
|
+
-webkit-transition: transform 0.75s ease;
|
|
236
|
+
transition: transform 0.75s ease;
|
|
237
237
|
-webkit-transform: scale(0.5);
|
|
238
238
|
-ms-transform: scale(0.5);
|
|
239
239
|
transform: scale(0.5);
|
|
240
240
|
}
|
|
241
241
|
|
|
242
242
|
.c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide > div:first-child:after {
|
|
243
|
-
-webkit-transition: -webkit-transform 0.
|
|
244
|
-
-webkit-transition: transform 0.
|
|
245
|
-
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;
|
|
246
246
|
right: calc(-300% - 6px);
|
|
247
247
|
-webkit-transform: scale(1);
|
|
248
248
|
-ms-transform: scale(1);
|
|
@@ -250,6 +250,18 @@ it("renders correctly", () => {
|
|
|
250
250
|
width: 300%;
|
|
251
251
|
}
|
|
252
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
|
+
|
|
253
265
|
.c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible .carousel__inner-slide > div:first-child:after {
|
|
254
266
|
right: calc(-250% - 6px);
|
|
255
267
|
-webkit-transform: scale(1);
|
|
@@ -272,6 +284,12 @@ it("renders correctly", () => {
|
|
|
272
284
|
width: 250%;
|
|
273
285
|
}
|
|
274
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
|
+
|
|
275
293
|
.c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible > div > div:first-child {
|
|
276
294
|
-webkit-transform: scale(0.5);
|
|
277
295
|
-ms-transform: scale(0.5);
|
|
@@ -285,6 +303,12 @@ it("renders correctly", () => {
|
|
|
285
303
|
transform: scale(1);
|
|
286
304
|
width: 250%;
|
|
287
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
|
+
}
|
|
288
312
|
}
|
|
289
313
|
|
|
290
314
|
<div
|