src/styles.js
function index(options) {
  return {
    kronos: {
      position: 'relative',
      display: 'flex',
      color: 'hsl(0, 0%, 50%)',
      '& *': {
        fontFamily: options.font,
        boxSizing: 'border-box',
        userSelect: 'none',
      },
    },
    input: {
      border: '1px solid transparent',
      borderRadius: options.corners,
      borderColor: color(options.color)
        .alpha(0.2)
        .rgbString(),
      fontSize: 16,
      padding: '3px 6px',
      background: 'white',
      '&.outside-range': {
        color: 'white',
        background: '#d0021b',
      },
      '&:hover': {
        cursor: options.inputDisabled ? 'not-allowed' : 'default',
      },
      '&:focus': {
        outline: 'none',
        borderColor: color(options.color)
          .alpha(0.5)
          .rgbString(),
      },
    },
  }
}
function index(options) {
  return {
    kronos: {
      position: 'relative',
      display: 'flex',
      color: 'hsl(0, 0%, 50%)',
      '& *': {
        fontFamily: options.font,
        boxSizing: 'border-box',
        userSelect: 'none',
      },
    },
    input: {
      border: '1px solid transparent',
      borderRadius: options.corners,
      borderColor: color(options.color)
        .alpha(0.2)
        .rgbString(),
      fontSize: 16,
      padding: '3px 6px',
      background: 'white',
      '&.outside-range': {
        color: 'white',
        background: '#d0021b',
      },
      '&:hover': {
        cursor: options.inputDisabled ? 'not-allowed' : 'default',
      },
      '&:focus': {
        outline: 'none',
        borderColor: color(options.color)
          .alpha(0.5)
          .rgbString(),
      },
    },
  }
}
function index ( options ) { return { kronos : { position : 'relative' , display : 'flex' , color : 'hsl(0, 0%, 50%)' , '& *' : { fontFamily : options . font , boxSizing : 'border-box' , userSelect : 'none' , } , } , input : { border : '1px solid transparent' , borderRadius : options . corners , borderColor : color ( options . color ) . alpha ( 0.2 ) . rgbString ( ) , fontSize : 16 , padding : '3px 6px' , background : 'white' , '&.outside-range' : { color : 'white' , background : '#d0021b' , } , '&:hover' : { cursor : options . inputDisabled ? 'not-allowed' : 'default' , } , '&:focus' : { outline : 'none' , borderColor : color ( options . color ) . alpha ( 0.5 ) . rgbString ( ) , } , } , } }
Styles for each page
Styles for each page