Skip to content

Commit b80f294

Browse files
author
Vincenius
committed
finalize css generation
1 parent 10e5997 commit b80f294

File tree

4 files changed

+159
-129
lines changed

4 files changed

+159
-129
lines changed

‎components/Generator/codeGenerators.js‎

Lines changed: 137 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,35 @@
11
import { SEPARATORS } from './constants'
22
import { darkGrey } from '../../ui/constants'
33

4-
export const generateHtmlCode = active => [SEPARATORS.SKEWED, SEPARATORS.WAVE].includes(active)
4+
export const generateHtmlCode = active => active === SEPARATORS.SKEWED
55
? `<section>
66
<div class="${active}"></div>
77
</section>`
8+
: active === SEPARATORS.WAVE
9+
? `<section class="container">
10+
<div class="${active}"></div>
11+
</section>`
812
: `<section class="${active}"></section>`
913

1014
export const generateCssCode = ({ active, options }) => {
1115
// TODO check what to generate
12-
return `.${active} {
16+
return active === SEPARATORS.SKEWED ? `.${active} {
1317
${generateSkewCss(options)}
14-
}`
18+
}` : active === SEPARATORS.SEMI_CIRCLE ? generateSemiCircleCss({ ...options, cssClass: active})
19+
: active === SEPARATORS.WAVE ? generateWaveCss({ ...options, active })
20+
: active === SEPARATORS.SPIKES ? generateSpikesCss({ ...options, cssClass: active })
21+
: active === SEPARATORS.TRIANGLE ? generateTriangleCss({ ...options, cssClass: active })
22+
: active === SEPARATORS.CURVED ? generateCurvedCss({ ...options, cssClass: active })
23+
: ''
1524
}
1625

26+
const generateContainerStyle = (cssClass) =>
27+
`${cssClass ? `.${cssClass} {
28+
position: relative;
29+
background: ${darkGrey};
30+
height: 50vh;
31+
}` : `background: ${darkGrey};`}`
32+
1733
export const generateSkewCss = ({ angle, reversed }) =>
1834
`position: absolute;
1935
top: 0;
@@ -28,4 +44,121 @@ export const generateSkewCss = ({ angle, reversed }) =>
2844
? `transform: skewY(${angle.value}deg);
2945
transform-origin: top right;`
3046
: `transform: skewY(-${angle.value}deg);
31-
transform-origin: top left;`}`
47+
transform-origin: top left;`}`
48+
49+
export const generateSemiCircleCss = ({ cssClass, left, width, height, top, reversed }) =>
50+
`${generateContainerStyle(cssClass)}
51+
52+
${cssClass ? `.${cssClass}` : '&'}::before {
53+
position: absolute;
54+
content: '';
55+
left: ${left.value}%;
56+
z-index: 10;
57+
width: ${width.value}px;
58+
height: ${height.value}px;
59+
border-radius: 50%;
60+
background: ${reversed ? '#fff' : 'inherit'};
61+
transform: ${reversed
62+
? `translateX(-50%) translateY(${(top.value * -1) + 100}%);`
63+
: `translateX(-50%) translateY(${top.value}%);`
64+
}
65+
bottom: 0px;
66+
}`
67+
68+
export const generateWaveCss = ({ active, curve, reversed }) => {
69+
const cssClass = active ? `.${active}` : '&'
70+
71+
return `${active
72+
? `${generateContainerStyle('container')}
73+
74+
.${active} {
75+
position: absolute;
76+
height: ${curve.value}px;
77+
width: 100%;
78+
background: ${darkGrey};
79+
bottom: 0;
80+
}`
81+
: `position: absolute;
82+
height: ${curve.value}px;
83+
width: 101%;
84+
background: ${darkGrey};
85+
bottom: 0;`
86+
}
87+
88+
${cssClass}::before, ${cssClass}::after {
89+
content: "";
90+
display: block;
91+
position: absolute;
92+
border-radius: ${reversed ? '50% 100%' : '100% 50%'};
93+
}
94+
95+
${cssClass}::before {
96+
width: 53.5%;
97+
height: ${!reversed ? '110%' : '100%'};
98+
background-color: ${!reversed ? '#fff' : darkGrey};
99+
right: 0;
100+
top: ${!reversed ? '60%' : '40%'};
101+
}
102+
${cssClass}::after {
103+
width: 53.5%;
104+
height: ${!reversed ? '100%' : '110%'};
105+
background-color: ${!reversed ? darkGrey : '#fff'};
106+
left: 0;
107+
top: ${!reversed ? '40%' : '60%'};
108+
}`}
109+
110+
export const generateSpikesCss = ({ cssClass, size, left }) =>
111+
`${generateContainerStyle(cssClass)}
112+
113+
${cssClass ? `.${cssClass}` : '&'}::after {
114+
content: '';
115+
position: absolute;
116+
right: 0;
117+
left: 0;
118+
top: 100%;
119+
z-index: 10;
120+
display: block;
121+
height: ${size.value}px;
122+
background-size: ${size.value}px 100%;
123+
background-image: linear-gradient(135deg, ${darkGrey} 25%, transparent 25%), linear-gradient(225deg, ${darkGrey} 25%, transparent 25%);
124+
background-position: ${left.value}%;
125+
}`
126+
127+
export const generateTriangleCss = ({ reversed, size, left, cssClass }) =>
128+
`${generateContainerStyle(cssClass)}
129+
130+
${cssClass ? `.${cssClass}` : '&'}::before {
131+
content: '';
132+
position: absolute;
133+
bottom: 0;
134+
z-index: 10;
135+
background: ${reversed ? '#fff' : 'inherit' };
136+
left: ${left.value}%;
137+
width: ${size.value}px;
138+
height: ${size.value}px;
139+
transform: translateX(-50%) translateY(50%) rotate(45deg);
140+
}`
141+
142+
export const generateCurvedCss = ({ cssClass, reversed, curve }) =>
143+
!reversed ? `${cssClass ? `.${cssClass} {
144+
position: relative;
145+
background: ${darkGrey};
146+
height: 50vh;
147+
border-bottom-left-radius: 50% ${curve.value}%;
148+
border-bottom-right-radius: 50% ${curve.value}%;
149+
}` : `
150+
border-bottom-left-radius: 50% ${curve.value}%;
151+
border-bottom-right-radius: 50% ${curve.value}%;
152+
`}`
153+
: `${generateContainerStyle(cssClass)}
154+
155+
${cssClass ? `.${cssClass}` : '&'}::after {
156+
content: '';
157+
border-top-left-radius: 50% 100%;
158+
border-top-right-radius: 50% 100%;
159+
position: absolute;
160+
bottom: 0;
161+
width: 100%;
162+
background: #fff;
163+
height: ${curve.value}%;
164+
}`

‎components/Generator/constants.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export const SEPARATOR_OPTIONS = {
4444
curve: {
4545
value: 70,
4646
min: 0,
47-
max: 150,
47+
max: 250,
4848
},
4949
},
5050
[SEPARATORS.SPIKES]: {

‎components/Generator/index.js‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -52,10 +52,7 @@ const Generator = props => {
5252
<S.SkewBg options={options}></S.SkewBg>
5353
}
5454
{ active === SEPARATORS.WAVE &&
55-
<S.Wave
56-
className={reversedClass}
57-
curve={options.curve.value}>
58-
</S.Wave>
55+
<S.Wave options={options}></S.Wave>
5956
}
6057
</TopElement>
6158
<S.Bottom>

‎components/Generator/styled.js‎

Lines changed: 20 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,14 @@ import {
66
FormControlLabel as MuiFormControlLabel
77
} from '@material-ui/core'
88
import { darkGrey } from '../../ui/constants'
9-
import { generateSkewCss } from './codeGenerators'
9+
import {
10+
generateSkewCss,
11+
generateSemiCircleCss,
12+
generateWaveCss,
13+
generateSpikesCss,
14+
generateTriangleCss,
15+
generateCurvedCss,
16+
} from './codeGenerators'
1017

1118
export const Container = styled.main`
1219
height: 100vh;
@@ -54,135 +61,28 @@ export const Top = styled(Section)`
5461
}
5562
`
5663

57-
export const Curved = styled(Top)`
58-
border-bottom-left-radius: 50% ${props => _get(props, 'options.curve.value')}%;
59-
border-bottom-right-radius: 50% ${props => _get(props, 'options.curve.value')}%;
60-
61-
&.reverse {
62-
border-bottom-left-radius: 0;
63-
border-bottom-right-radius: 0;
64-
65-
&::after {
66-
content: '';
67-
border-top-left-radius: 50% ${props => 100 - _get(props, 'options.curve.value') || 0}%; /* TODO fix */
68-
border-top-right-radius: 50% ${props => 100 - _get(props, 'options.curve.value') || 0}%;
69-
position: absolute;
70-
bottom: 0;
71-
width: 100%;
72-
background: #fff;
73-
height: 50px;
74-
}
75-
}
64+
export const SkewBg = styled.div`
65+
${props => generateSkewCss(props.options)}
7666
`
7767

78-
export const Spikes = styled(Top)`
79-
&::after {
80-
content: '';
81-
position: absolute;
82-
right: 0;
83-
left: 0;
84-
top: 100%;
85-
z-index: 10;
86-
display: block;
87-
height: ${props => _get(props, 'options.size.value')}px;
88-
background-size: ${props => _get(props, 'options.size.value')}px 100%;
89-
background-image: linear-gradient(135deg, ${darkGrey} 25%, transparent 25%), linear-gradient(225deg, ${darkGrey} 25%, transparent 25%);
90-
background-position: ${props => _get(props, 'options.left.value')}%;
91-
}
68+
export const SemiCircle = styled(Top)`
69+
${props => generateSemiCircleCss(props.options)}
9270
`
9371

94-
export const Triangle = styled(Top)`
95-
&::before {
96-
content: '';
97-
position: absolute;
98-
bottom: 0;
99-
z-index: 10;
100-
background: inherit;
101-
left: ${props => _get(props, 'options.left.value')}%;
102-
width: ${props => _get(props, 'options.size.value')}px;
103-
height: ${props => _get(props, 'options.size.value')}px;
104-
transform:
105-
translateX(-50%)
106-
translateY(50%)
107-
rotate(45deg);
108-
}
109-
110-
&.reverse::before {
111-
background: #fff;
112-
}
72+
export const Wave = styled.div`
73+
${props => generateWaveCss(props.options)}
11374
`
11475

115-
export const SemiCircle = styled(Top)`
116-
&::before {
117-
position: absolute;
118-
content: '';
119-
left: ${props => _get(props, 'options.left.value')}%;
120-
z-index: 10;
121-
width: ${props => _get(props, 'options.width.value')}px;
122-
height: ${props => _get(props, 'options.height.value')}px;
123-
border-radius: 50%;
124-
background: inherit;
125-
transform: translateX(-50%) translateY(${props => _get(props, 'options.top.value')}%);
126-
bottom: 0px;
127-
}
128-
129-
&.reverse::before {
130-
background: #fff;
131-
transform:
132-
translateX(-50%)
133-
translateY(${props => (_get(props, 'options.top.value') || 0) * -1 + 100}%);
134-
}
76+
export const Spikes = styled(Top)`
77+
${props => generateSpikesCss(props.options)}
13578
`
13679

137-
export const SkewBg = styled.div`
138-
${props => generateSkewCss(props.options)}
80+
export const Triangle = styled(Top)`
81+
${props => generateTriangleCss(props.options)}
13982
`
14083

141-
export const Wave = styled.div`
142-
position: absolute;
143-
height: ${props => props.curve}px;
144-
width: 100%;
145-
background: ${darkGrey};
146-
bottom: 0;
147-
148-
&::before, &::after {
149-
content: "";
150-
display: block;
151-
position: absolute;
152-
border-radius: 100% 50%;
153-
}
154-
155-
&::before {
156-
width: 53.5%;
157-
height: 110%;
158-
background-color: #fff;
159-
right: 0;
160-
top: 60%;
161-
}
162-
&::after {
163-
width: 53.5%;
164-
height: 100%;
165-
background-color: ${darkGrey};
166-
left: 0;
167-
top: 40%;
168-
}
169-
170-
&.reverse::before,
171-
&.reverse::after {
172-
border-radius: 50% 100%;
173-
}
174-
175-
&.reverse::before {
176-
height: 100%;
177-
top: 40%;
178-
background-color: ${darkGrey};
179-
}
180-
181-
&.reverse::after {
182-
height: 110%;
183-
top: 60%;
184-
background-color: #fff;
185-
}
84+
export const Curved = styled(Top)`
85+
${props => generateCurvedCss(props.options)}
18686
`
18787

18888
export const Bottom = styled(Section)`

0 commit comments

Comments
 (0)