@emotion/core#css TypeScript Examples

The following examples show how to use @emotion/core#css. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Loader.tsx    From next-right-now-admin with MIT License 6 votes vote down vote up 
Loader: React.FunctionComponent<Prop> = (props: Prop): JSX.Element => {
  return (
    <div
      css={css`
        justify-content: center;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
      `}
    >
      <AnimatedLoader />
    </div>
  );
}
Example #2
Source File: Group.tsx    From connect with GNU Lesser General Public License v3.0 6 votes vote down vote up 
export default function Group({ children, loading, name }: GroupProps) {
  return (
    <div
      css={css`
        padding-top: 64px;
      `}
    >
      <div
        css={css`
          padding-bottom: 16px;
          font-size: 20px;
        `}
      >
        {name}:
        {loading && (
          <span
            css={css`
              font-size: 16px;
            `}
          >
            &nbsp;loading…
          </span>
        )}
      </div>
      {!loading && (
        <div
          css={css`
            background: #fff;
            border: 2px solid #fad4fa;
            border-radius: 6px;
          `}
        >
          {children}
        </div>
      )}
    </div>
  )
}
Example #3
Source File: App.tsx    From r3f-game-demo with MIT License 6 votes vote down vote up 
export default function App() {
    const [width, height] = useWindowSize();

    return (
        <>
            <Global styles={globalStyles} />
            <div css={styles.root(width, height)}>
                <Game cameraZoom={80}>
                    <AssetLoader urls={urls} placeholder="Loading assets ...">
                        <SceneManager defaultScene="office">
                            <Scene id="office">
                                <OfficeScene />
                            </Scene>
                            <Scene id="other">
                                <OtherScene />
                            </Scene>
                        </SceneManager>
                    </AssetLoader>
                </Game>
            </div>
        </>
    );
}
Example #4
Source File: App.tsx    From tsplay.dev with MIT License 6 votes vote down vote up 
styles = {
  container: css`
    min-height: 100vh;
    background: ${Palette.background};
    display: flex;
    flex-direction: column;
  `,
  content: css`
    flex: 1;
    max-width: ${MAX_WIDTH}px;
    margin: 20px auto 0;

    @media (max-width: 850px) {
      padding: 0 20px;
    }
  `,
}
Example #5
Source File: index.tsx    From doc-blocks with MIT License 6 votes vote down vote up 
Iframe = styled.iframe<IsLandscape & DeviceProp>`
  border: none;
  width: 100%;
  height: 100%;
  margin: auto;
  display: block;

  ${({ device, isLandscape }) => css`
    ${device === "iPhone" &&
    isLandscape &&
    css`
      padding-left: 30px;
      box-sizing: border-box;
    `}

    ${device === "mac" &&
    css`
      width: 1200px;
      height: 750px;
      transform: scale(0.8);
      transform-origin: 0 0;
    `}
  `}
`
Example #6
Source File: styles.ts    From insomnia-plugin-gist-sync with MIT License 6 votes vote down vote up 
buttonStyle = css`
  background-color: #f9f9f9;
  border: 1px solid #eee;
  padding: 7px;
  border-radius: 3px;
  margin: 5px 0;
  color: #333333;

  &:hover {
    background-color: #fff;
  }

  &:active {
    background-color: rgba(198, 198, 198, 0.5);
  }
`
Example #7
Source File: component.stories.tsx    From react-portal-overlay with MIT License 6 votes vote down vote up 
Default = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open Overlay</button>
      <Overlay
        css={css`
          background: white;
          padding: 3rem;
          width: 100%;
        `}
        open={isOpen}
      >
        <h1
          css={css`
            margin-bottom: 2rem;
          `}
        >
          Overlay
        </h1>
        <p>
          Nisi vitae commodo curae in amet nec tortor sodales varius iaculis nam
          duis cursus ullamcorper orci consequat maecenas a sagittis ultrices
          bibendum facilisis aliquet ad arcu laoreet natoque eget per mus aptent
          nisl posuere nibh dictum porta torquent molestie donec cras risus quis
          dui massa etiam turpis pharetra ultricies aliquam
        </p>
        <button onClick={() => setIsOpen(false)}>Close Overlay</button>
      </Overlay>
    </>
  );
}
Example #8
Source File: Layout.tsx    From hello-3d-world with MIT License 6 votes vote down vote up 
static Side: FunctionComponent = ({ children }) => (
        <div className="w-full md:w-1/2 lg:w-1/3">
            <div
                css={css`
                    border-width: 1px;
                    border-color: #673ab7;
                    margin: 10px;
                    background-color: #17212b;
                    padding: 10px;
                    border-radius: 20px;
                `}
            >
                {children}
            </div>
        </div>
    )
Example #9
Source File: CellItems.tsx    From react-js-tutorial with MIT License 6 votes vote down vote up 
BaseCell = css`
  width: 25px;
  height: 25px;
  border: 1px solid;
  display: inline-block;
  border-radius: 10px;
  line-height: 25px;
  text-align: center;
  margin: 5px;
  vertical-align: bottom;
`
Example #10
Source File: ActionBar.tsx    From condo with MIT License 6 votes vote down vote up 
actionBar = css`
    position: relative;
    padding: 24px;
    box-sizing: border-box;
    left: -24px;
    transition: box-shadow 0.6s ease-out;

    .ant-affix & {
        background: rgba(255,255,255,0.9);
        box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05), 0px 6px 16px rgba(0, 0, 0, 0.08), 0px 3px 6px -4px rgba(0, 0, 0, 0.12);
        border-radius: 8px;
    }
`
Example #11
Source File: AvatarIcon.tsx    From WEB_CodeSquare_AmongUs with MIT License 6 votes vote down vote up 
AvatarIcon: React.FC<AvatarIconProps> = ({
  width = 32,
  height = 32,
  src,
  alt,
  ...props
}) => (
  <div
    css={css`
      width: ${width}px;
      height: ${height}px;
      overflow: hidden;
      border-radius: 50%;
      background-color: #c4c4c4;
      background-image: url(${src});
      background-size: ${width}px ${height}px;
      background-repeat: no-repeat;
      background-origin: 50% 50%;
      background-position: center;
    `}
    {...props}
  />
)
Example #12
Source File: AdminAppBar.tsx    From next-right-now-admin with MIT License 5 votes vote down vote up 
AdminAppBar = (props): JSX.Element => {
  console.debug('AdminAppBar.props', props);

  const classes = useStyles();
  return (
    <AppBar {...props}>
      <Typography
        variant="h6"
        color="inherit"
        className={classes.title}
        id="react-admin-title"
      />
      <span className={classes.spacer} />
      <span
        css={css`
          a {
            color: white !important;
          }
        `}
      >
        <a
          href={'https://nrn-v1-ssr-mst-aptd-gcms-lcz-sty-c1.now.sh/'}
          target={'_blank'}
        >
          Customer 1 site
        </a>
        {' '}-{' '}
        <a
          href={'https://nrn-v1-ssr-mst-aptd-gcms-lcz-sty-c2.now.sh/'}
          target={'_blank'}
        >
          Customer 2 site
        </a>
        {' '}-{' '}
        <a
          href={'https://github.com/UnlyEd/next-right-now-admin'}
          target={'_blank'}
        >
          Github
        </a>
      </span>
    </AppBar>
  );
}
Example #13
Source File: Main.tsx    From connect with GNU Lesser General Public License v3.0 5 votes vote down vote up 
export default function Main({ children }: MainProps) {
  return (
    <div>
      <div
        css={css`
          max-width: 800px;
          margin: 0 auto;
          padding: 60px 0;
        `}
      >
        <h1
          css={css`
            font-size: 40px;
            margin: 0;
            padding: 0 0 60px;
          `}
        >
          Org Viewer
        </h1>
        <div>{children}</div>
      </div>
      <Global
        styles={css`
          @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400&display=swap');
          *,
          *:before,
          *:after {
            box-sizing: border-box;
          }
          body {
            margin: 0;
            background: #faf1fa;
          }
          body,
          h1,
          input,
          button {
            font: 300 24px/1.5 'Fira Code';
            color: #222;
          }
          input[type='text'] {
            background: #fff;
            &::placeholder {
              color: #222;
            }
          }
        `}
      />
    </div>
  )
}
Example #14
Source File: Game.tsx    From r3f-game-demo with MIT License 5 votes vote down vote up 
styles = {
    root: css`
        position: relative;
        user-select: none;
        width: 100%;
        height: 100%;
    `,
}
Example #15
Source File: styles.ts    From screenshot.rocks with MIT License 5 votes vote down vote up 
styles = () => {
    return css`
      body {
        background: #524573 url("/images/bg.png");
        background-size: 100px;
      }
`;
}
Example #16
Source File: App.tsx    From tsplay.dev with MIT License 5 votes vote down vote up 
App: React.FC = () => {
  const [shortened, setShortened] = React.useState<number | null>(null)
  const [visits, setVisits] = React.useState<number | null>(null)
  const [shortenedCreated, setShortenedCreated] = React.useState('')
  const [links, setLinks] = React.useState<string[]>([])

  const showToast = useCopyClipboardToast()

  const setShortenedCreatedArray = React.useMemo(() => [shortenedCreated], [shortenedCreated])

  // useMemo runs before useEffect (like the class constructor)
  React.useMemo(async () => {
    const links: string[] = getLinksFromLocalStorage()
    if (links.length) setLinks(links)

    const stats = await fetchStats()
    if (stats) {
      setShortened(stats.totalShortened)
      setVisits(stats.totalVisits)
    }
  }, [])

  const onLinkDelete = React.useCallback((url: string, links: string[]) => {
    const linksFiltered = links.filter(link => !link.includes(url))
    localStorage.set(linksLocalStorageKey, linksFiltered)
    setLinks(linksFiltered)
  }, [])

  const linksFilteringCreated = React.useMemo(() => links.filter(link => link !== shortenedCreated), [
    links,
    shortenedCreated,
  ])

  return (
    <div css={styles.container}>
      <Header />
      <div css={styles.content}>
        <TitleAndDescription />
        <Stats shortened={shortened} visits={visits} />
        <LinkCreator
          setShortened={setShortened}
          setShortenedCreated={setShortenedCreated}
          showToast={showToast}
          setLinks={setLinks}
        />
        {shortenedCreated && <Links links={setShortenedCreatedArray} canDeleteItem={false} showToast={showToast} />}
        {linksFilteringCreated.length > 0 && (
          <Links links={linksFilteringCreated} canDeleteItem={true} showToast={showToast} onLinkDelete={onLinkDelete} />
        )}
      </div>
      <Footer />
    </div>
  )
}
Example #17
Source File: styles.ts    From insomnia-plugin-gist-sync with MIT License 5 votes vote down vote up 
containerStyle = css`
  margin: 10px;
`