compolicious/demo/components/button/button.css.js

React component demo utility

export default {
  '.base': {
    background: '#009696',
    boxShadow: '0px 1px 1px 0px #000000',
    color: 'white',
    textAlign: 'center',
    borderRadius: '999px',
    cursor: 'pointer',
    userSelect: 'none',
    width: 'auto'
  },

  '.base:hover': {
    background: '#3fabab'
  },

  '.base:active': {
    transform: 'translateY(1px)',
    boxShadow: '0px 1px 1px 0px #565656 inset'
  },

  '.label': {
    display: 'inline-block',
    margin: '12px 22px',
    fontSize: '14px',
    minHeight: '18px',
    lineHeight: '18px'
  },

  '.inverted': {
    background: 'white',
    color: '#009696',
    border: '1px solid #009696',
    boxShadow: '0px 1px 1px 0px #969696'
  },

  '.inverted:hover': {
    background: '#fafafa'
  },

  '.inverted:active': {
    boxShadow: '0px 1px 1px 0px #aaaaaa inset'
  },

  '.mini .label': {
    margin: '6px 16px',
    fontSize: '12px',
    minHeight: '14px',
    lineHeight: '14px'
  }
};