styled.div.attrs(props => ({ className: classNames({ [font('hnm', 5)]: true, }), }))
styled.div( props => css` width: 100%; display: flex; padding-top: 8px; align-items: ${props.align}; justify-content: ${props.justify}; ` )
render() { const TopLevel = styled.div`margin: 20px;`; return ( <TopLevel> What you're probably looking for is the list of examples. For now, you should instead start the storybook so you can navigate through them per-example. I'll put them in a single page slightly later, but for now, just run <code>yarn run storybook</code> since you have the code sitting there... </TopLevel> ); }
styled.div.attrs(({ position: { x, y }}) => { return { style: { transform: `translate(${x}px, ${y}px)` } } })
styled.div.attrs(props => ({ className: classNames({ [`bg-${props.background}`]: true, 'is-hidden-s is-hidden-m': true, [grid({ s: 12, m: 11, l: 5, xl: 5 })]: true, }), }))
styled.div.attrs(props => ({ className: classNames({ [font(props.isPrimary ? 'hnm' : 'hnl', props.small ? 6 : 5)]: true, }), }))
styled.div.attrs(props => ({ className: classNames({ 'flex flex--wrap': true, }), }))
styled.div.attrs(props => ({ className: classNames({ [font('hnl', 5)]: true, }), }))
styled.div.attrs(props => ({ className: classNames({ 'flex flex--v-center': true, [font('hnl', 5)]: true, }), }))
styled.div.attrs(props => ({ className: classNames({ [font('hnl', 5)]: true, 'flex flex--v-center': true, }), }))
styled.div.attrs(props => ({ className: classNames({ 'flex flex--v-center flex--h-center': true, }), }))
styled.div.attrs(props => ({ className: classNames({ [font('hnm', 4)]: true, }), }))
styled.div.attrs(props => ({ className: classNames({ 'bg-viewerBlack flex relative': true, }), }))
styled.div.attrs(props => ({ className: classNames({ [font('hnl', 5)]: true, }), }))
styled.div.attrs({ style: ({left, background, transform}) => ({ left, background, transform, }), })