How to use the @tds/shared-styles.borders.none function in @tds/shared-styles

To help you get started, we’ve selected a few @tds/shared-styles examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github telus / tds-core / packages / Card / Card.jsx View on Github external
return { backgroundColor: colorGreyAthens }
}

const deprecationWarning = deprecatedVariant => {
  const variants = {
    white: 'default',
    lavendar: 'branded',
    grey: 'alternative',
  }
  return `The ${deprecatedVariant} variant has been deprecated. Please use the '${
    variants[deprecatedVariant]
  }' variant.`
}

export const StyledCard = styled(({ fullHeight, ...props }) => )(
  borders.none,
  borders.rounded,
  getVariant,
  ({ fullHeight }) => {
    if (fullHeight) {
      return { height: '100%' }
    }
    return {}
  }
)

/**
 * A content container.
 *
 * @version ./package.json
 */
const Card = ({ variant, children, fullHeight, ...rest }) => {
github telus / tds-core / packages / Button / Button.jsx View on Github external
background: 'none',
  transition: 'background 0.2s',
  display: 'flex',
  width: '100%',
  alignItems: 'center',
  justifyContent: 'center',

  ...media.from('md').css({
    display: 'inline-flex',
    width: 'auto',
    minWidth: '180px',
  }),
}

export const StyledButton = styled.button(
  borders.none,
  borders.rounded,
  medium,
  boldFont,
  forms.buttonHeight,
  forms.font,
  baseButton,
  ({ variant }) => {
    let backgroundColor
    let color
    const hover = {
      boxShadow: '0 0 0 1px',
    }

    if (variant === 'primary') {
      backgroundColor = colorPrimary
      color = colorWhite
github telus / tds-core / packages / ButtonGroup / ButtonGroupItem / ButtonGroupItem.jsx View on Github external
margin: '0.5rem 0',
})
const StyledInput = styled.input({
  position: 'fixed',
  opacity: '0',
  '&:checked ~ label': {
    backgroundColor: colorTelusPurple,
    boxShadow: `0px 0px 0px 0px ${colorTelusPurple}`,
    color: colorWhite,
  },
  '&:focus ~ label': {
    boxShadow: `0px 0px 0px 2px ${colorTelusPurple}, 0px 0px 8px 1px ${colorTelusPurple}`,
  },
})
const StyledLabel = styled.label(
  borders.none,
  borders.rounded,
  medium,
  boldFont,
  forms.buttonHeight,
  forms.font,
  baseButton,
  {
    transition: 'background 0.2s, color 0.2s, box-shadow 0.2s',
    backgroundColor: colorWhite,
    boxShadow: `0px 0px 0px 1px ${colorTelusPurple}`,
    color: colorTelusPurple,
    whiteSpace: 'nowrap',
    minWidth: '136px',
    '&:hover': {
      backgroundColor: colorWhite,
      color: colorTelusPurple,