2r-stepper/2r-stepper.style.js

2R library stepper component implemented in React

/**
 * Basic layout, structure & visual styles for components inside `2r-stepper`
 * Inspired by the way styles are written in React Native
 */
let stepperStyle = {

  // styles for the wrapper (class of `2r-stepper`)
  wrapper: {
    display: 'inline-block',
    height: '32px',

    // reset space between inner components
    fontSize: 0
  },

  // styles for the buttons (class of `2r-stepper__button`)
  button: {
    display: 'inline-block',
    verticalAlign: 'middle',
    width: '32px',
    height: '32px',

    // basic visuals
    border: 'none',
    fontSize: '16px',
    padding: '0'
  },

  // styles for the value (class of `2r-stepper__value`)
  value: {
    display: 'inline-block',
    verticalAlign: 'middle',
    height: '32px',
    lineHeight: '32px',

    // basic visuals
    padding: '0 16px',
    fontSize: '16px'
  }

}


export default stepperStyle;