How to use the @xstyled/styled-components.buttonBox function in @xstyled/styled-components

To help you get started, we’ve selected a few @xstyled/styled-components 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 argos-ci / argos / src / review / components / Menu.js View on Github external
{ children, ...props },
  ref,
) {
  return (
    
      {menuProps => {children}}
    
  )
})

const InnerMenuItem = styled.buttonBox`
  appearance: none;
  background-color: transparent;
  padding: 2;
  border: 0;
  border-radius: base;
  color: light300;
  font-size: 14;
  display: block;
  width: 100%;
  text-align: left;
  transition: base;
  transition-property: background-color;
  cursor: pointer;
  /* For links */
  text-decoration: none;
github smooth-code / bundle-analyzer / apps / client / src / components / Menu.js View on Github external
{ children, ...props },
  ref,
) {
  return (
    
      {menuProps => {children}}
    
  )
})

const InnerMenuItem = styled.buttonBox`
  appearance: none;
  background-color: transparent;
  padding: 2;
  border: 0;
  border-radius: base;
  color: gray700;
  font-size: 14;
  display: block;
  width: 100%;
  text-align: left;
  transition: base;
  transition-property: background-color;
  cursor: pointer;
  /* For links */
  text-decoration: none;
github gregberge / svgr / website / src / components / playground / SettingsGroup.js View on Github external
const Marker = styled(ChevronLeft)`
  width: 18;
  height: 18;
  transition: base;
  transform: rotate(90deg);

  ${up(
    'md',
    css`
      transform: rotate(0);
    `,
  )}
`

const Button = styled.buttonBox`
  font-size: 15;
  font-weight: bold;
  padding: 8 16;
  background-color: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  transition: base;
  border: 0;
  border-bottom: 1px solid;
  border-color: light400;
  appearance: none;
  margin: 0;
  width: 100%;
  text-align: left;