@emotion/core#css JavaScript 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: Spinner.jsx    From developerIdentity with MIT License 6 votes vote down vote up 
render() {
    return (
      <React.Fragment>
      <div className="sweet-loading">
        <CircleLoader


          css={override}
          size={120}
          color={"Orange"}
         
          loading={this.state.loading}
          
        />
        
      </div>
      <div className=" cofee"  >
           <span  >Making Coffee......</span>
           </div>
      </React.Fragment>
    );
  }
Example #2
Source File: OverridenSpinnerStyles.js    From inky-doodle with MIT License 6 votes vote down vote up 
override = css`
  position: absolute;
  top: 15%;
  bottom: 15%;
  left: 0;
  right: 0;
  margin: 0 auto;

  @media (min-width: 768px) {
    top: 25%;
    bottom: 25%;
  }

  @media (min-width: 1200px) {
    top: 50%;
    bottom: 50%;
  }

  @media (min-width: 1400px) {
    top: 45%;
    bottom: 45%;
  }

  @media (min-width: 2000px) {
    top: 15%;
    bottom: 15%;
  }
`
Example #3
Source File: blockquote.js    From stoic-quotes with MIT License 6 votes vote down vote up 
Quote = styled.blockquote`
  max-width: 620px;
  margin: 0;
  animation: ${fadeIn} 0.8s ease-in forwards;
  cursor: default;

  ${({ animate }) =>
    animate &&
    css`
      animation: ${fadeOut} 0.4s ease-in forwards;
    `}
`
Example #4
Source File: index.js    From Agaave-frontend with MIT License 6 votes vote down vote up 
function Loader({ size = 60 }) {
    return (
        <MoonLoader
            css={override}
            size={size}
            color={"#0075FF"}
            loading={true}
        />
    );
}
Example #5
Source File: mediaQuery.js    From ensdomains-v2 with MIT License 6 votes vote down vote up 
mq = Object.keys(breakpoints).reduce((accumulator, label) => {
  let prefix = typeof breakpoints[label] === "string" ? "" : "min-width:"
  let suffix = typeof breakpoints[label] === "string" ? "" : "px"
  accumulator[label] = cls =>
    css`
      @media (${prefix + breakpoints[label] + suffix}) {
        ${css`
          ${cls};
        `};
      }
    `
  return accumulator
}, {})
Example #6
Source File: LogoLong.js    From mailmask with GNU Affero General Public License v3.0 6 votes vote down vote up 
LogoLong = ({ className }) => {
  return (
    <LogoLongSvg className={className} css={css`
      transition: none;
      width: 192px;
      height: auto;

      & path:first-of-type {
        display: none;
      }

      & * {
        transition: none;
      }
    `}/>
  )
}
Example #7
Source File: styles.js    From thekusuma with MIT License 6 votes vote down vote up 
styWrapper = css`
  background-image: url(${Background});
  background-size: cover;
  background-position: center;

  p {
    color: rgba(255, 255, 255, 0.8) !important;
  }
`
Example #8
Source File: input.js    From cardano-documentation with MIT License 6 votes vote down vote up 
focus = (props) => css`
  background: white;
  color: ${(props) => props.theme.darkBlue};
  cursor: text;
  width: 5em;
  + ${SearchIcon} {
    color: ${(props) => props.theme.darkBlue};
    margin: 0.3em;
  }
`
Example #9
Source File: input.js    From learningHub with MIT License 6 votes vote down vote up 
focus = props => css`
  background: white;
  color: ${props => props.theme.darkBlue};
  cursor: text;
  width: 5em;
  + ${SearchIcon} {
    color: ${props => props.theme.darkBlue};
    margin: 0.3em;
  }
`
Example #10
Source File: ContentCard.js    From devrel-kpis with MIT License 6 votes vote down vote up 
Tag = ({ tag, onClick }) => {
  if (!tag) return null;

  const thisTag = tags[tag];

  return (
    <span
      onClick={onClick}
      css={css`
        display: inline-block;
        background: ${thisTag.color}22;
        padding: 1px 6px;
        border-radius: 5px;
        cursor: pointer;
        p {
          text-transform: uppercase;
          font-size: 13px;
          font-weight: 500;
        }
      `}
    >
      <P2 color={thisTag.color}>{thisTag.name}</P2>
    </span>
  );
}
Example #11
Source File: styles.js    From r3f-website with MIT License 6 votes vote down vote up 
column = css`
  flex-basis: 50%;
  width: 50%;
  max-width: 50%;

  @media (max-width: 600px) {
    flex-basis: auto;
    width: 100%;
    max-width: 100%;
  }
`
Example #12
Source File: index.js    From rgm with MIT License 6 votes vote down vote up 
CircleMarker = () => (
  <div
    css={css`
      place-self: center center;
      width: 50px;
      height: 50px;
      border-radius: 100%;
      background-color: white;
      border: 3px solid red;
      display: flex;
      align-items: center;
      justify-content: center;
    `}
  >
    RGM
  </div>
)
Example #13
Source File: ContentCard.js    From inboxzero-web with MIT License 6 votes vote down vote up 
Tag = ({ tag, onClick }) => {
  if (!tag) return null;

  const thisTag = tags[tag];

  return (
    <span
      onClick={onClick}
      css={css`
        display: inline-block;
        background: ${thisTag.color}22;
        padding: 1px 6px;
        border-radius: 5px;
        cursor: pointer;
        p {
          text-transform: uppercase;
          font-size: 13px;
          font-weight: 500;
        }
      `}
    >
      <P2 color={thisTag.color}>{thisTag.name}</P2>
    </span>
  );
}
Example #14
Source File: Spinner.jsx    From breviews with MIT License 6 votes vote down vote up 
export default function Spinner() {
  return (
    <div>
      {/* <h1 style={{ margin: "50px auto", fontSize: "60%" }}>fetching...</h1> */}
      <div className="sweet-loading">
        <RotateLoader css={override} size={100} color={"#123abc"} />
      </div>
    </div>
  );
}
Example #15
Source File: FormBody.js    From react-emotion-multi-step-form with MIT License 6 votes vote down vote up 
FormBodyWrapper = styled.div`
  margin-bottom: ${props => props.heightIncrease ? 5 + props.heightIncrease : 5}px;
  filter: blur(0);
  ${props => props.isError ? css`
    animation: ${headShake} .5s  ease-in-out infinite;
  ` : `
    animation: none;
  `}
  &.active {
    transform: translateY(2px);
  }
  &.active > div:last-child {
    box-shadow: 0 2px 2px hsl(120, 60%, 40%);
  }
  * {
    box-sizing: border-box;
  }
`
Example #16
Source File: edicionClases.js    From website with BSD Zero Clause License 5 votes vote down vote up 
override = css`
  display: block;
  margin: 50px auto;
  background-color: 'green';
`
Example #17
Source File: header.js    From Corona-Freebies-List with MIT License 5 votes vote down vote up 
Header = () => {
  const data = useStaticQuery(graphql`
    query {
      file(sourceInstanceName: { eq: "images" }, name: { eq: "icon" }) {
        childImageSharp {
          fluid {
            ...GatsbyImageSharpFluid_tracedSVG
          }
        }
      }
    }
  `)
  return (
    <header
      css={css`
        background: #fff;
        border-bottom: 1px solid #ddd;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 0.5rem calc((100vw - 1000px) / 2); /* for header both side equal margin,this will be of equal width of main */

        @media (max-width: 1000px) {
          padding: 10px 10px 0 10px;
        }
      `}
    >
      <div style={{ display: "flex" }}>
        <Img
          fluid={data.file.childImageSharp.fluid}
          alt=""
          style={{ padding: "0px", width: "70px" }}
        />
        <NavLink to="/" style={{ alignSelf: "center", padding: "0px" }}>
          Corona Freebies
        </NavLink>
      </div>
      <nav
        css={css`
          margin-top: 0;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
        `}
      >
        <NavLink to="/" activeClassName="current-page">
          Home
        </NavLink>
        <NavLink to="/about" activeClassName="current-page">
          About
        </NavLink>
      </nav>
    </header>
  )
}
Example #18
Source File: search.js    From guitar-book with MIT License 5 votes vote down vote up 
verticalAlign = css({
  position: 'absolute',
  top: '50%',
  transform: 'translateY(-50%)'
})
Example #19
Source File: Spinner.jsx    From developerIdentity with MIT License 5 votes vote down vote up 
override = css`
margin: 0;
position: absolute;
top: 48%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
`
Example #20
Source File: AlgoliaEmailsItem.jsx    From emprezzo with MIT License 5 votes vote down vote up 
AlgoliaEmailsItem = (props) => {
  const [showDialog, setShowDialog] = React.useState(false);
  const openDialog = () => setShowDialog(true);
  const closeDialog = () => setShowDialog(false);

  //console.log("**** props=AlgoliaEmailsItem=", props)
  return (
    <Wrapper>
      <Global
        styles={css`
        .ais-Hits-item {
          width: calc(33% - 1rem) !important;
          @media (max-width: 600px) {
            width: calc(100% - 1rem) !important;
          }
        }
        `}
      />
      {props && props.hit &&
        <>
          <Image>
            <a href={`/shops/${props.hit.emprezzoID}/`} title={props.hit.subject && props.hit.subject.toLowerCase()} target="_blank">
              {props.hit.screenshot && props.hit.screenshot != "-" &&
                <img src={props.hit.screenshot} />
              }
            </a>
          </Image>

          <StyledLink href="javascript:void(0)" onClick={() => openDialog()} title={props.hit.shopName}>
            <Information>
              <ShopName>{(props.hit.shopName || "").substring(0, 22)}
                {` `}{props.hit.date}</ShopName>
              <Title>{props.hit.subject && props.hit.subject.toLowerCase().substring(0, 24)}</Title>
            </Information>
          </StyledLink>



          <StyledDialog isOpen={showDialog} onDismiss={closeDialog}>
            <button className="close-button" onClick={closeDialog} style={{ float: "right", cursor: "pointer" }}>
              <span aria-hidden>X</span>
            </button>
            <div>
              {props.hit.screenshot && props.hit.screenshot != "-" &&
                <img src={props.hit.screenshot} />
              }
              <h3 style={{ 'font-size': '1.1rem', 'margin-bottom': '9px' }}>{props.hit.subject}</h3>
              <span style={{ 'margin-bottom': '12px', 'font-style': 'italic' }}> {props.hit.date}</span>
              <div className="dialogDescription">{props.hit.description && props.hit.description}</div>
            </div>
          </StyledDialog>
        </>
      }
    </Wrapper>
  );
}
Example #21
Source File: activeAuction.js    From ErgoAuctionHouse with MIT License 5 votes vote down vote up 
override = css`
  display: block;
  margin: 0 auto;
`
Example #22
Source File: index.js    From Agaave-frontend with MIT License 5 votes vote down vote up 
override = css`
  position: absolute;
  display: block;
  z-index: 1;
  margin: 15% 30% 15% 33%;
`
Example #23
Source File: Layout.js    From ensdomains-v2 with MIT License 5 votes vote down vote up 
export default function Layout({ children, data, location }) {
  return (
    <>
      <Helmet
        meta={[
          {
            name: "description",
            content:
              "Your web3 username, a name for all your cryptocurrency addresses, and decentralised websites.",
          },
          {
            name: "keywords",
            content:
              "ENS, Ethereum, Ethereum Name Service, .eth domains, blockchain domains",
          },
          {
            name: "twitter:card",
            content: "summary",
          },
          {
            name: "twitter:title",
            content: "Ethereum Name Service",
          },
          {
            property: "og:image",
            content: `https://ens.domains${twitter}`,
          },
        ]}
        title={getTitle(location.pathname)}
        link={[
          { rel: "shortcut icon", type: "image/x-icon", href: `${favicon}` },
        ]}
      />
      <Global
        styles={css`
          html, body, #___gatsby, #gatsby-focus-wrapper {
            height: ${location?.pathname === '/governance' ? '100%' : 'initial'};
          }
          body {
            font-family: Overpass;
          }
          #gatsby-focus-wrapper {
            height: 100vh;
          }
        `}
      />
      {children}
    </>
  )
}
Example #24
Source File: App.js    From iiitt with MIT License 5 votes vote down vote up 
override = css`
  display: inline;
  margin-top: 0 auto;
  border-color: red;
`
Example #25
Source File: GlobalStyles.js    From mailmask with GNU Affero General Public License v3.0 5 votes vote down vote up 
GlobalStyles = () => {
  const theme = useTheme()

  return (
    <Fragment>
      {/* <link rel='stylesheet' href='https://unpkg.com/@fortawesome/[email protected]/styles.css' integrity='sha384-bM49M0p1PhqzW3LfkRUPZncLHInFknBRbB7S0jPGePYM+u7mLTBbwL0Pj/dQ7WqR' crossOrigin='anonymous' /> */}
      <Global styles={css(resetStyles)} />
      <Global styles={css`
        * {
          box-sizing: border-box;
          ${smoothTransitions({ duration: '0.1s' })};
        }

        html {
          ${theme.font('body')};
          font-size: 16px;

          ${theme.media.when({ minW: 'desktop' })} {
            font-size: 18px;
          }
        }

        a {
          cursor: pointer;
          text-decoration: none;
          border-bottom: 1px solid transparent;
        }

        h1, h2, h3 {
          ${theme.font('header')};
          margin: 1em 0;
          font-weight: bolder;
          line-height: 1em;
        }

        h1 {
          font-size: 2.1rem;
          margin: 1rem 0;
        }

        h2 {
          font-size: 1.5rem;
        }

        h3 {
          font-size: 1.2rem;
        }
      `} />
    </Fragment>
  )
}
Example #26
Source File: styles.js    From thekusuma with MIT License 5 votes vote down vote up 
styFlex = css`
  display: flex;
  justify-content: center;
`
Example #27
Source File: input.js    From cardano-documentation with MIT License 5 votes vote down vote up 
collapseExpand = (props) => css`
  ${(props) => (props.collapse ? collapse() : expand())}
`
Example #28
Source File: _app.js    From developer-portal with Apache License 2.0 5 votes vote down vote up 
render() {
    const { Component, pageProps } = this.props;
    return (
      <ThemeProvider theme={theme}>
        <Global
          styles={css`
            @import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;500;700&display=swap');

            @font-face {
              font-family: 'FT Base';
              src: url('/fonts/FTBase-Bold.woff2') format('woff2'),
                url('/fonts/FTBase-Bold.woff') format('woff');
              font-weight: bold;
              font-style: normal;
            }

            @font-face {
              font-family: 'FT Base';
              src: url('/fonts/FTBase-Regular.woff2') format('woff2'),
                url('/fonts/FTBase-Regular.woff') format('woff');
              font-weight: normal;
              font-style: normal;
            }

            @font-face {
              font-family: 'FT Base';
              src: url('/fonts/FTBase-Medium.woff2') format('woff2'),
                url('/fonts/FTBase-Medium.woff') format('woff');
              font-weight: 500;
              font-style: normal;
            }

            html,
            body {
              background: 'red';
            }
          `}
        />
        <TinaProvider cms={this.cms}>
          <TinacmsGithubProvider
            onLogin={enterEditMode}
            onLogout={exitEditMode}
            error={pageProps.error}
          >
            <TinaStyles />
            <Component {...pageProps} />
          </TinacmsGithubProvider>
        </TinaProvider>
      </ThemeProvider>
    );
  }
Example #29
Source File: input.js    From learningHub with MIT License 5 votes vote down vote up 
collapseExpand = props => css`
  ${props => (props.collapse ? collapse() : expand())}
`