terribleplan/next.js
1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
Code Issues Releases Wiki Activity

Update emotion example to use css instead of fragment (#2497)

Browse source
This commit is contained in:
Josh Hawkins 2017-07-07 10:25:26 -05:00 committed by Tim Neutkens
parent df1cd7ebf3
commit 5bd3a5f1d1
2 changed files with 12 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
examples/with-emotion/package.json
View file

@ -7,7 +7,7 @@
"start": "next start"
},
"dependencies": {
"emotion": "^5.0.0",
"emotion": "^5.1.4",
"next": "^2.4.6",
"react": "^15.6.1",
"react-dom": "^15.6.1"

26
examples/with-emotion/pages/index.js
View file

@ -1,5 +1,5 @@
import React from 'react'
import { hydrate, keyframes, fragment, injectGlobal } from 'emotion'
import { hydrate, keyframes, css, injectGlobal } from 'emotion'
import styled from 'emotion/react'
// Adds server generated styles to emotion cache.
@ -20,7 +20,7 @@ export default () => {
}
`
const basicStyles = fragment`
const basicStyles = css`
background-color: white;
color: cornflowerblue;
border: 1px solid lightgreen;
@ -31,11 +31,13 @@ export default () => {
margin: 3rem 0;
padding: 1rem 0.5rem;
`
const hoverStyles = fragment`
color: white;
background-color: lightgray;
border-color: aqua;
box-shadow: -15px -15px 0 0 aqua, -30px -30px 0 0 cornflowerblue;
const hoverStyles = css`
&:hover {
color: white;
background-color: lightgray;
border-color: aqua;
box-shadow: -15px -15px 0 0 aqua, -30px -30px 0 0 cornflowerblue;
}
`
const bounce = keyframes`
from {
@ -48,19 +50,13 @@ export default () => {
const Basic = styled.div`@apply ${basicStyles};`
const Combined = styled.div`
@apply ${basicStyles};
&:hover {
@apply ${hoverStyles};
}
composes: ${basicStyles} ${hoverStyles};
& code {
background-color: linen;
}
`
const Animated = styled.div`
@apply ${basicStyles};
&:hover {
@apply ${hoverStyles};
}
composes: ${basicStyles} ${hoverStyles};
& code {
background-color: linen;
}