@emotion/react#css TypeScript Examples

The following examples show how to use @emotion/react#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: ActionBar.styles.ts    From atlas with GNU General Public License v3.0 6 votes vote down vote up 
getGridTemplate = ({ variant }: ActionBarContainerProps) => {
  switch (variant) {
    case 'new':
      return css`
        grid-template: 'primary-text badge' auto 'primary-button primary-button' auto / 1fr;
        ${media.sm} {
          grid-template-areas: 'primary-text badge primary-button';
        }
        ${media.lg} {
          grid-template-columns: max-content 1fr max-content max-content;
          grid-template-areas: 'primary-text secondary-text badge primary-button';
        }
      `
    case 'edit':
      return css`
        grid-template: 'primary-text secondary-button' auto 'primary-button primary-button' auto / 1fr;
        ${media.sm} {
          grid-template-areas: 'primary-text secondary-button primary-button';
        }
        ${media.lg} {
          grid-template-columns: max-content 1fr max-content max-content;
          grid-template-areas: 'primary-text secondary-text secondary-button primary-button';
        }
      `
    case 'nft':
      return css`
        display: block;
        ${media.sm} {
          display: grid;
          grid-template-areas: 'primary-text badge secondary-button primary-button';
          grid-template-columns: 1fr max-content max-content max-content;
        }
        ${media.lg} {
          grid-template-columns: max-content 1fr max-content max-content max-content;
          grid-template-areas: 'primary-text secondary-text badge secondary-button primary-button';
        }
      `
  }
}
Example #2
Source File: app.tsx    From master-frontend-lemoncode with MIT License 6 votes vote down vote up 
h1Class = css`
  font-size: 180%;
  ${mq[bp.lg]} {
    font-size: 100%;
  }
  ${mq[bp.md]} {
    font-size: 100%;
  }
  ${mq[bp.sm]} {
    font-size: 80%;
  }
  ${mq[bp.xs]} {
    font-size: 60%;
  }
`
Example #3
Source File: App.tsx    From yet-another-generic-startpage with MIT License 6 votes vote down vote up 
Link = styled.a`
  ${({ theme: { space, color } }) => css`
    color: ${color.fg.base};
    position: fixed;
    bottom: ${space.small};
    right: ${space.small};
    :hover {
      color: ${color.primary.fg};
    }
  `}
`
Example #4
Source File: GlobalStyles.tsx    From frontend-v1 with GNU Affero General Public License v3.0 6 votes vote down vote up 
typography = css`
  /* only take latin chars to reduce bundle size */
  @font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 400;
    font-display: fallback;
    src: url("/fonts/Barlow-Regular.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
      U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 600;
    font-display: fallback;
    src: url("/fonts/Barlow-SemiBold.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
      U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 700;
    font-display: fallback;
    src: url("/fonts/Barlow-Bold.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
      U+2215, U+FEFF, U+FFFD;
  }
`
Example #5
Source File: LoadingIndicator.tsx    From celo-web-wallet with MIT License 6 votes vote down vote up 
function _LoadingIndicator() {
  return (
    <Box styles={style.container}>
      <img src={elipse} css={style.elipse} />
      <img src={echo1} css={[style.echo, echoStyle(1)]} />
      <img src={echo2} css={[style.echo, echoStyle(2)]} />
      <img src={echo3} css={[style.echo, echoStyle(3)]} />
    </Box>
  )
}
Example #6
Source File: mode-toggle-button.tsx    From utopia with MIT License 6 votes vote down vote up 
Button: React.FunctionComponent<React.PropsWithChildren<ButtonProps>> = (props) => (
  <span
    css={{
      fontSize: 9,
      fontWeight: 700,
      borderRadius: 2,
      paddingLeft: 4,
      paddingRight: 4,
      width: props.selected ? props.width : 6,
      flexShrink: 0,
      flexGrow: 1,
      display: 'block',
      cursor: 'pointer',
      transition: 'width .2s linear',
      color: props.selected ? 'black' : 'transparent',
      transitionDelay: '.1s',
      overflow: 'hidden',
      '&:hover': {
        color: 'black',
        width: props.width,
        transition: 'all .1s linear',
        transitionDelay: '.1s',
      },
      ...(props.style as any), // TODO Emotion and React 18 types don't like each other
    }}
    onClick={props.onClick}
  >
    {props.children}
  </span>
)