styled-components#css JavaScript Examples

The following examples show how to use styled-components#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: button.js    From about-1hive with GNU General Public License v3.0 6 votes vote down vote up 
ButtonStyles = css`
  padding: 0.25rem 0.75rem;
  text-decoration: none;
  border-radius: 12px;
  margin-right: 0.75rem;
  display: inline-block;
  transform: scale(0.98);
  transition: transform 0.25s ease;
  box-sizing: border-box;
  font-weight: 400;
  font-size: 1.125rem;
  cursor: pointer;
  @media (max-width: 960px) {
    margin-right: 0.5rem;
    text-align: center;
    text-decoration: none;
    padding: 0.25rem 1rem;
  }
  :hover {
    transform: scale(1);
  }
  background-color: ${({ outlined, theme }) => (outlined ? 'none' : theme.colors.link)};
  color: ${({ outlined, theme }) => (outlined ? theme.colors.link : theme.invertedTextColor)};
  border: ${({ outlined, theme }) => (outlined ? `1px solid ${theme.colors.link}` : 'initial')};
`
Example #2
Source File: components.js    From payroll-app with GNU Affero General Public License v3.0 6 votes vote down vote up 
HoverIndicator = styled.span`
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 50%;
  ${({ theme, selected }) => css`
    background: ${selected ? theme.selected : theme.surface};
    border: 2px solid ${theme.accent};
  `}
`
Example #3
Source File: index.js    From uniswap-v1-frontend with GNU General Public License v3.0 6 votes vote down vote up 
ErrorSpan = styled.span`
  margin-right: 12px;
  font-size: 0.75rem;
  line-height: 0.75rem;

  color: ${({ isError, theme }) => isError && theme.salmonRed};
  ${({ slippageWarning, highSlippageWarning, theme }) =>
    highSlippageWarning
      ? css`
          color: ${theme.salmonRed};
          font-weight: 600;
        `
      : slippageWarning &&
        css`
          background-color: ${transparentize(0.6, theme.warningYellow)};
          font-weight: 600;
          padding: 0.25rem;
        `}
`
Example #4
Source File: styledComponents.js    From viade_es2a with BSD 2-Clause "Simplified" License 6 votes vote down vote up 
media = Object.keys(sizes).reduce((acc, label) => {
  acc[label] = (...args) => css`
    @media (min-width: ${sizes[label] / 16}em) {
      ${css(...args)}
    }
  `;

  return acc;
}, {})
Example #5
Source File: styles.js    From covidzero-frontend with Apache License 2.0 6 votes vote down vote up 
SmallFilledButton = styled.button`
    text-transform: uppercase;
    border: 0px;
    padding: 8px 16px;
    border-radius: 4px;
    letter-spacing: 1px;
    font-size: 14px;
    font-weight: 500;
    ${props =>
        props.disabled
        ? css`background: rgba(238, 119, 100, .50);`
        : css`background: #EE7764;`
    };
    ${props => 
        props.disabled
        ? css`color: rgba(245, 245, 245, .50);`
        : css`color: #FCFCFC;`
    };
    height: 32px;
    ${props =>
        props.disabled
        ? css`cursor: not-allowed;`
        : css`cursor: pointer;`
    };
    outline: none;
    margin: 10px;

    &:active{
        background: #E06653;
    }
`
Example #6
Source File: Amenities.js    From airdnd-frontend with MIT License 6 votes vote down vote up 
StAmenity = styled.li`
  display: inline-flex;
  align-items: center;
  width: calc(50% - 2rem);
  margin-right: 2rem;
  padding-bottom: 16px;

  @media ${({ theme }) => theme.size.medium} {
    width: 100%;
    margin-right: 0;
  }

  svg {
    display: block;
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    margin-right: 16px;
    fill: currentcolor;
  }

  ${({ noIcon }) =>
    noIcon &&
    css`
      svg {
        fill: ${({ theme }) => theme.color.gray};
      }
      span {
        text-decoration: line-through;
      }
    `}
`