@@ -5,12 +5,7 @@ import { sizes } from '../styles/variables'
5
5
import Pattern from '../resources/pattern-2.jpg'
6
6
import IconTick from '../resources/icon-tick-2.svg'
7
7
8
- const Styled = styled . div < {
9
- direction ?: string
10
- flexDirectionColumnForImgContainer ?: boolean
11
- opposite ?: boolean
12
- hasFigFootnote ?: boolean
13
- } > `
8
+ const Styled = styled . div < any > `
14
9
display: flex;
15
10
justify-content: space-between;
16
11
position: relative;
@@ -43,7 +38,7 @@ const Styled = styled.div<{
43
38
44
39
&:nth-of-type(2n) {
45
40
@media (min-width: 1141px) {
46
- flex-direction: ${ ( { opposite } ) => ( opposite ? 'reverse ' : 'row-reverse' ) } ;
41
+ flex-direction: ${ ( { opposite } ) => ( opposite ? 'row ' : 'row-reverse' ) } ;
47
42
}
48
43
49
44
@media (min-width: 1141px) {
@@ -130,15 +125,15 @@ const Styled = styled.div<{
130
125
}
131
126
132
127
@media (min-width: 1141px) {
133
- padding-right: ${ ( { direction } ) => ( direction === 'right' ? '8rem' : '' ) } ;
134
- padding-left: ${ ( { direction } ) => ( ! ( direction === 'right' ) ? '8rem' : '' ) } ;
128
+ padding-right: ${ ( props ) => ( props [ "data- direction" ] === 'right' ? '8rem' : '' ) } ;
129
+ padding-left: ${ ( props ) => ( ! ( props [ "data- direction" ] === 'right' ) ? '8rem' : '' ) } ;
135
130
min-height: 520px;
136
131
max-height: 500px;
137
132
flex: 0 0 52%;
138
133
139
134
&::before {
140
- left: ${ ( { direction } ) => ( direction === 'right' ? '' : 0 ) } ;
141
- right: ${ ( { direction } ) => ( ! ( direction === 'right' ) ? '' : 0 ) } ;
135
+ left: ${ ( props ) => ( props [ "data- direction" ] === 'right' ? '' : 0 ) } ;
136
+ right: ${ ( props ) => ( ! ( props [ "data- direction" ] === 'right' ) ? '' : 0 ) } ;
142
137
width: 60vw;
143
138
}
144
139
}
@@ -181,7 +176,7 @@ const Styled = styled.div<{
181
176
182
177
.in-view::before {
183
178
@media (min-width: 1141px) {
184
- animation: ${ ( { direction } ) => ( direction === 'right' ? 'slideInLeft' : 'slideInRight' ) } 0.6s cubic-bezier(0.16, 1, 0.3, 1) 1 normal
179
+ animation: ${ ( props ) => ( props [ "data- direction" ] === 'right' ? 'slideInLeft' : 'slideInRight' ) } 0.6s cubic-bezier(0.16, 1, 0.3, 1) 1 normal
185
180
forwards;
186
181
}
187
182
}
@@ -303,7 +298,7 @@ const FeatureCard = ({
303
298
return (
304
299
< Styled
305
300
className = "row"
306
- direction = { direction }
301
+ data- direction= { direction }
307
302
flexDirectionColumnForImgContainer = { featuresList && featuresList . length ? true : false }
308
303
opposite = { opposite }
309
304
hasFigFootnote = { hasFigFootnote }
0 commit comments