window.onload = () => {
const { render } = ReactDOM
const { Component } = React
const { css, injectGlobal, default: styled } = styled
const { min, max, rem, em } = styleUtils
const styleUtils = (function () {
const css = styled.css
const rem = px => `${ px / 16 }rem`
const em = (px, em = 16) => `${ px / em }em`
const sizes = {
mobileS: 1,
mobileM: 375,
mobileL: 425,
tabletS: 600,
tabletM: 768,
tabletL: 900,
laptopS: 1024,
laptopM: 1366,
laptopL: 1440
}
const spacing = {
xxs: rem(2),
xs: rem(4),
sm: rem(8),
md: rem(16),
lg: rem(32),
xl: rem(64),
xxl: rem(128)
}
let min = (pxWidth, conditions = '') => (...args) => css`
@media (min-width: ${ em(pxWidth) }) ${ conditions } {
${ css(...args) }
}
`
min = Object.keys(sizes).reduce((min, sizeLabel) => {
min[sizeLabel] = (...args) => min(sizes[sizeLabel])(...args)
return min
}, min)
let max = (pxWidth, conditions = '') => (...args) => css`
@media (max-width: ${ em(pxWidth) }) ${ conditions } {
${ css(...args) }
}
`
max = Object.keys(sizes).reduce((max, sizeLabel) => {
max[sizeLabel] = (...args) => max(sizes[sizeLabel])(...args)
return max
}, max)
const addPropSetter = (prop, rules, values = {}) => {
const getSetRule = val => (rules.set instanceof Function)
? rules.set(values[val] || val)
: rules.set
if (!prop) return
if (typeof prop !== 'object') return getSetRule(prop)
const sizeVal = key => sizes[key] || key
const sizeLabels = Object.keys(prop)
.sort((a, b) => sizeVal(a) > sizeVal(b))
const getRule = val => val === false
? rules.unset
: getSetRule(val)
return sizeLabels.map(sizeLabel => {
return min(sizeVal(sizeLabel))([getRule(prop[sizeLabel])])
})
}
const universalProps = css`
box-sizing: ${ p => p.contentBox ? 'content-box' : 'border-box' };
${ p => p.inline && 'display: inline-block;' }
${ p => p.relative && 'position: relative;' }
`
const marginProps = p => [
...addPropSetter(p.m, {
set: val => `margin: ${ val } !important;`,
unset: `margin: initial !important;`
}, spacing),
...addPropSetter(p.mx, {
set: val => `
margin-right: ${ val } !important;
margin-left: ${ val } !important;
`,
unset: `
margin-right: initial !important;
margin-left: initial !important;
`
}, spacing),
...addPropSetter(p.my, {
set: val => `
margin-top: ${ val } !important;
margin-bottom: ${ val } !important;
`,
unset: `
margin-top: initial !important;
margin-bottom: initial !important;
`
}, spacing),
...addPropSetter(p.mt, {
set: val => `margin-top: ${ val } !important;`,
unset: `margin-top: initial !important;`
}, spacing),
...addPropSetter(p.mr, {
set: val => `margin-right: ${ val } !important;`,
unset: `margin-right: initial !important;`
}, spacing),
...addPropSetter(p.mb, {
set: val => `margin-bottom: ${ val } !important;`,
unset: `margin-bottom: initial !important;`
}, spacing),
...addPropSetter(p.ml, {
set: val => `margin-left: ${ val } !important;`,
unset: `margin-left: initial !important;`
}, spacing)
]
const paddingProps = p => [
...addPropSetter(p.p, {
set: val => `padding: ${ val } !important;`,
unset: `padding: initial !important;`
}, spacing),
...addPropSetter(p.px, {
set: val => `
padding-right: ${ val } !important;
padding-left: ${ val } !important;
`,
unset: `
padding-right: initial !important;
padding-left: initial !important;
`
}, spacing),
...addPropSetter(p.py, {
set: val => `
padding-top: ${ val } !important;
padding-bottom: ${ val } !important;
`,
unset: `
padding-top: initial !important;
padding-bottom: initial !important;
`
}, spacing),
...addPropSetter(p.pt, {
set: val => `padding-top: ${ val } !important;`,
unset: `padding-top: initial !important;`
}, spacing),
...addPropSetter(p.pr, {
set: val => `padding-right: ${ val } !important;`,
unset: `padding-right: initial !important;`
}, spacing),
...addPropSetter(p.pb, {
set: val => `padding-bottom: ${ val } !important;`,
unset: `padding-bottom: initial !important;`
}, spacing),
...addPropSetter(p.pl, {
set: val => `padding-left: ${ val } !important;`,
unset: `padding-left: initial !important;`
}, spacing)
]
const flexContainerProps = p => [
...addPropSetter(p.row, {
set: `display: flex !important;`,
unset: `display: initial !important;`
}),
...addPropSetter(p.column, {
set: `
display: flex !important;
flex-direction: column !important;
`,
unset: `
display: initial !important;
flex-direction: initial !important;
`
}),
...addPropSetter(p.wrap, {
set: `flex-wrap: wrap !important;`,
unset: `flex-wrap: initial !important;`
}),
...addPropSetter(p.wrapReverse, {
set: `flex-wrap: wrap-reverse !important;`,
unset: `flex-wrap: initial !important;`
}),
...addPropSetter(p.left, {
set: `justify-content: flex-start !important;`,
unset: `justify-content: initial !important;`
}),
...addPropSetter(p.right, {
set: `justify-content: flex-end !important;`,
unset: `justify-content: initial !important;`
}),
...addPropSetter(p.center, {
set: `justify-content: center !important;`,
unset: `justify-content: initial !important;`
}),
...addPropSetter(p.spaceAround, {
set: `justify-content: space-around !important;`,
unset: `justify-content: initial !important;`
}),
...addPropSetter(p.spaceBetween, {
set: `justify-content: space-between !important;`,
unset: `justify-content: initial !important;`
}),
...addPropSetter(p.top, {
set: `align-items: flex-start !important;`,
unset: `align-items: initial !important;`
}),
...addPropSetter(p.middle, {
set: `align-items: center !important;`,
unset: `align-items: initial !important;`
}),
...addPropSetter(p.bottom, {
set: `align-items: flex-end !important;`,
unset: `align-items: initial !important;`
}),
...addPropSetter(p.baseline, {
set: `align-items: baseline !important;`,
unset: `align-items: initial !important;`
}),
...addPropSetter(p.stretch, {
set: `align-items: stretch !important;`,
unset: `align-items: initial !important;`
}),
...addPropSetter(p.contentTop, {
set: `align-content: flex-start !important;`,
unset: `align-content: initial !important;`
}),
...addPropSetter(p.contentMiddle, {
set: `align-content: center !important;`,
unset: `align-content: initial !important;`
}),
...addPropSetter(p.contentBottom, {
set: `align-content: flex-end !important;`,
unset: `align-content: initial !important;`
}),
...addPropSetter(p.contentStretch, {
set: `align-content: stretch !important;`,
unset: `align-content: initial !important;`
}),
...addPropSetter(p.contentSpaceAround, {
set: `align-content: space-around !important;`,
unset: `align-content: initial !important;`
}),
...addPropSetter(p.contentSpaceBetween, {
set: `align-content: space-between !important;`,
unset: `align-content: initial !important;`
})
]
const flexItemProps = p => [
...addPropSetter(p.order, {
set: val => `order: ${ val } !important;`,
unset: `order: initial !important;`
}),
...addPropSetter(p.flex, {
set: val => `flex: ${ val } !important;`,
unset: `flex: initial !important;`
}),
...addPropSetter(p.flexGrow, {
set: val => `flex-grow: ${ val } !important;`,
unset: `flex-grow: initial !important;`
}),
...addPropSetter(p.flexShrink, {
set: val => `flex-shrink: ${ val } !important;`,
unset: `flex-shrink: initial !important;`
}),
...addPropSetter(p.flexBasis, {
set: val => `flex-basis: ${ val } !important;`,
unset: `flex-basis: initial !important;`
}),
...addPropSetter(p.selfLeft, {
set: `margin-right: auto !important;`,
unset: `margin-right: initial !important;`
}),
...addPropSetter(p.selfCenter, {
set: `
margin-left: auto !important;
margin-right: auto !important;
`,
unset: `
margin-left: initial !important;
margin-right: initial !important;
`
}),
...addPropSetter(p.selfRight, {
set: `margin-left: auto !important;`,
unset: `margin-left: initial !important;`
}),
...addPropSetter(p.selfTop, {
set: `align-self: flex-start !important;`,
unset: `align-self: initial !important;`
}),
...addPropSetter(p.selfMiddle, {
set: `align-self: center !important;`,
unset: `align-self: initial !important;`
}),
...addPropSetter(p.selfBottom, {
set: `align-self: flex-end !important;`,
unset: `align-self: initial !important;`
}),
...addPropSetter(p.selfBaseline, {
set: `align-self: baseline !important;`,
unset: `align-self: initial !important;`
}),
...addPropSetter(p.selfStretch, {
set: `align-self: stretch !important;`,
unset: `align-self: initial !important;`
})
]
const computeSpacingRules = (props, getRule) => {
const spacingLabel = Object.keys(props).filter(label => spacing[label])[0]
const hasSpacingProp = spacing[spacingLabel] || props.value
const spacingValue = spacing[spacingLabel] || rem(props.value)
const spacingRule = getRule(spacingValue)
const getSizeVal = label => sizes[label] || label
const getSpacingVal = label => spacing[label] || rem(label)
const sizesLabelsFromProps =
Object.keys(props)
.filter(label => sizes[label])
.sort((a, b) => getSizeVal(a) > getSizeVal(b))
const spacingRulesForSizes = sizesLabelsFromProps.map(sizeLabel => {
const spacingLabel = props[sizeLabel]
const spacingValue = getSpacingVal(spacingLabel)
return min(getSizeVal(sizeLabel))`${ getRule(spacingValue) }`
})
return css`
${ spacingRule }
${ spacingRulesForSizes }
`
}
return {
sizes,
spacing,
rem,
em,
min,
max,
addPropSetter,
computeSpacingRules,
universalProps,
flexContainerProps,
flexItemProps,
marginProps,
paddingProps
}
})()
injectGlobal`
body {
margin: 0;
}
`
const Wrapper = styled.div`
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 100vh;
padding: 0 ${rem(50)};
background-color: dodgerblue;
`
const Link = styled.a`
-webkit-tap-highlight-color: transparent;
`
const blurShape = "M110,60c0,27.6-22.4,50-50,50c-27.6,0-50-22.4-50-50c0-27.6,22.4-50,50-50C87.6,10,110,32.4,110,60z";
const activeShape = "M96,60c0,27.6-8.4,53-36,53c-27.6,0-36-25.4-36-53c0-27.6,8.4-53,36-53C87.6,7,96,32.4,96,60z";
class Arrow extends Component {
onActive = () => TweenMax.to(this.circle, .5, {
attr: { d: activeShape },
transformOrigin: 'center',
ease: Elastic.easeOut
});
onBlur = () => TweenMax.to(this.circle, 1, {
attr: { d: blurShape },
ease: Elastic.easeOut
});
render() {
const { className } = this.props
const arrowID = Math.random()
return (
<div
className={className}
onMouseDown={this.onActive}
onTouchStart={this.onActive}
onMouseLeave={this.onBlur}
onMouseUp={this.onBlur}
>
<svg
viewBox="0 0 120 120"
preserveAspectRatio="none"
width="100%" height="100%"
>
<mask id={`${arrowID}`}>
<rect fill="#fff" width="100%" height="100%"/>
<path fill="#000" className="arrow" d="M48.5,61.5v-2.9h17.4l-8-8l2.1-2.1L71.5,60L60,71.5l-2.1-2.1l8-8H48.5z" />
</mask>
<path ref={el => this.circle = el} mask={`url(#${arrowID})`} d={blurShape} />
</svg>
</div>
)
}
}
Arrow = styled(Arrow)`
width: ${rem(60)};
height: ${rem(60)};
fill: #fff;
cursor: inherit;
${min(500)`
width: ${rem(120)};
height: ${rem(120)};
`}
${({left}) => left && `transform: rotate(180deg);`}
.arrow {
${max(500)`
transform-origin: center;
transform: scale(1.6);
`}
}
`
render(
<Wrapper>
<Link href="#"><Arrow left /></Link>
<Link href="#"><Arrow /></Link>
</Wrapper>,
document.getElementById('root')
)
}
!
