Some checks failed
Test examples / Test Examples (20) (push) Has been cancelled
Test examples / Test Examples (22) (push) Has been cancelled
Lock Threads / action (push) Has been cancelled
Trigger Release / start (push) Has been cancelled
Stale issue handler / stale (push) Has been cancelled
Update Font Data / create-pull-request (push) Has been cancelled
build-and-deploy / deploy-target (push) Has been cancelled
build-and-deploy / build (push) Has been cancelled
build-and-deploy / stable - aarch64-unknown-linux-musl - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-unknown-linux-musl - node@16 (push) Has been cancelled
build-and-deploy / stable - aarch64-unknown-linux-gnu - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-unknown-linux-gnu - node@16 (push) Has been cancelled
build-and-deploy / stable - aarch64-pc-windows-msvc - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-pc-windows-msvc - node@16 (push) Has been cancelled
build-and-deploy / stable - aarch64-apple-darwin - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-apple-darwin - node@16 (push) Has been cancelled
build-and-deploy / build-wasm (nodejs) (push) Has been cancelled
build-and-deploy / build-wasm (web) (push) Has been cancelled
build-and-deploy / Deploy preview tarball (push) Has been cancelled
build-and-deploy / Potentially publish release (push) Has been cancelled
build-and-deploy / publish-turbopack-npm-packages (push) Has been cancelled
build-and-deploy / Deploy examples (push) Has been cancelled
build-and-deploy / thank you, build (push) Has been cancelled
build-and-deploy / Upload Turbopack Bytesize metrics to Datadog (push) Has been cancelled
Rspack Next.js development integration tests / Rspack integration tests (push) Has been cancelled
Rspack Next.js production integration tests / Rspack integration tests (push) Has been cancelled
Turbopack Next.js development integration tests / Next.js integration tests (push) Has been cancelled
Turbopack Next.js production integration tests / Next.js integration tests (push) Has been cancelled
Update Rspack test manifest / Update and upload Rspack development test manifest (push) Has been cancelled
Update Rspack test manifest / Update and upload Rspack production test manifest (push) Has been cancelled
Upload bundler test manifests to areweturboyet.com / Upload test results (push) Has been cancelled
Update React / create-pull-request (push) Has been cancelled
test-e2e-project-reset-cron / reset-test-project (push) Has been cancelled
Notify about the top 15 issues/PRs/feature requests (most reacted) in the last 90 days / run (push) Has been cancelled
84 lines
1.6 KiB
JavaScript
84 lines
1.6 KiB
JavaScript
import { css, Global, keyframes } from '@emotion/react'
|
|
import styled from '@emotion/styled'
|
|
|
|
export const globalStyles = (
|
|
<Global
|
|
styles={css`
|
|
html,
|
|
body {
|
|
padding: 3rem 1rem;
|
|
margin: 0;
|
|
background: papayawhip;
|
|
min-height: 100%;
|
|
font-family: Helvetica, Arial, sans-serif;
|
|
font-size: 24px;
|
|
}
|
|
`}
|
|
/>
|
|
)
|
|
|
|
export const basicStyles = css({
|
|
backgroundColor: 'white',
|
|
color: 'cornflowerblue',
|
|
border: '1px solid lightgreen',
|
|
borderRight: 'none',
|
|
borderBottom: 'none',
|
|
boxShadow: '5px 5px 0 0 lightgreen, 10px 10px 0 0 lightyellow',
|
|
transition: 'all 0.1s linear',
|
|
margin: '3rem 0',
|
|
padding: '1rem 0.5rem',
|
|
})
|
|
|
|
export const hoverStyles = css`
|
|
&:hover {
|
|
color: white;
|
|
background-color: lightgray;
|
|
border-color: aqua;
|
|
box-shadow:
|
|
-15px -15px 0 0 aqua,
|
|
-30px -30px 0 0 cornflowerblue;
|
|
}
|
|
`
|
|
export const bounce = keyframes`
|
|
from {
|
|
transform: scale(1.01);
|
|
}
|
|
to {
|
|
transform: scale(0.99);
|
|
}
|
|
`
|
|
|
|
export const Basic = styled.div`
|
|
${basicStyles};
|
|
`
|
|
|
|
export const Combined = styled.div`
|
|
${basicStyles};
|
|
${hoverStyles};
|
|
& code {
|
|
background-color: linen;
|
|
}
|
|
`
|
|
|
|
export const Pink = styled(Basic)({
|
|
color: 'hotpink',
|
|
})
|
|
|
|
export const BasicExtended = styled(Basic)``
|
|
|
|
export const ComponentSelectorsExtended = styled.div`
|
|
${BasicExtended} {
|
|
color: green;
|
|
}
|
|
box-shadow: -5px -5px 0 0 green;
|
|
`
|
|
|
|
export const Animated = styled.div`
|
|
${basicStyles};
|
|
${hoverStyles};
|
|
& code {
|
|
background-color: linen;
|
|
}
|
|
animation: ${({ animation }) => animation} 0.2s infinite ease-in-out alternate;
|
|
`
|