apphouse/dist/styles/defaults/hint.styles.ts

Component library for React that uses observable state management and theme-able components.

const HINT_STYLES_INDEX = 200;

export const hint = {
  display: 'inline-block',
  position: 'relative',
  outline: 'none',
  // ARROW
  ':before': {
    background: 'transparent',
    border: '6px solid transparent',
    borderTopColor: '#383838',
    content: "''",
    opacity: '0',
    pointerEvents: 'none',
    position: 'absolute',
    transform: 'translate3d(0, 0, 0)',
    transition: '0.3s ease',
    transitionDelay: '0ms',
    visibility: 'hidden',
    zIndex: HINT_STYLES_INDEX,
    outline: 'none'
  },
  // BODY
  ':after': {
    background: '#383838',
    borderRadius: '4px',
    color: 'white',
    fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif',
    fontSize: '12px',
    lineHeight: '12px',
    opacity: '0',
    padding: '8px 10px',
    pointerEvents: 'none',
    position: 'absolute',
    transform: 'translate3d(0, 0, 0)',
    transition: '0.3s ease',
    transitionDelay: '0ms',
    visibility: 'hidden',
    whiteSpace: 'nowrap',
    zIndex: HINT_STYLES_INDEX,
    outline: 'none'
  },
  ':hover': {
    ':before': {
      opacity: '1',
      visibility: 'visible',
      outline: 'none'
    },
    ':after': {
      opacity: '1',
      visibility: 'visible',
      outline: 'none'
    }
  },

  '[aria-label]:after': {
    outline: 'none',
    content: 'attr(aria-label)'
  }
};

export const hintTop = {
  ':before': {
    bottom: '100%',
    left: 'calc(50% - 6px)',
    marginBottom: '-11px'
  },
  ':after': {
    bottom: '100%',
    left: '50%',
    transform: 'translateX(-50%)'
  },
  ':hover': {
    ':before': {
      transform: 'translateY(-8px)'
    },
    ':after': {
      transform: 'translateX(-50%) translateY(-8px)'
    }
  }
};
export const hintLeft = {
  ':before': {
    bottom: '50%',
    marginBottom: '-6px',
    marginRight: '-11px',
    right: '100%'
  },
  ':after': {
    bottom: '50%',
    marginBottom: '-14px',
    right: '100%'
  },
  ':hover:before': {
    transform: 'translateX(-8px) rotate(-90deg)'
  },
  ':hover:after': {
    transform: 'translateX(-8px)'
  }
};

export const hintBottom = {
  ':before': {
    left: 'calc(50% - 6px)',
    marginTop: '-11px',
    top: '100%',
    transform: 'translateX(-50%)'
  },
  ':after': {
    left: '50%',
    top: '100%',
    transform: 'translateX(-50%)'
  },
  ':hover:before': {
    transform: 'translateY(8px) rotate(180deg)'
  },
  ':hover:after': {
    transform: 'translateX(-50%) translateY(8px)'
  }
};

export const hintRight = {
  ':before': {
    bottom: '50%',
    left: '100%',
    marginBottom: '-6px',
    marginLeft: '-11px'
  },
  ':after': {
    marginBottom: '-14px',
    left: '100%',
    bottom: '50%'
  },
  ':hover:before': {
    transform: 'translateX(8px) rotate(90deg)'
  },
  ':hover:after': {
    transform: 'translateX(8px)'
  }
};

export const hintTopLeft = {
  ':before': {
    bottom: '100%',
    left: 'calc(50% - 6px)',
    marginBottom: '-11px'
  },
  ':after': {
    bottom: '100%',
    left: '50%',
    marginLeft: '12px',
    transform: 'translateX(-100%)'
  },
  ':hover:before': {
    transform: 'translateY(-8px)'
  },
  ':hover:after': {
    transform: 'translateX(-100%) translateY(-8px)'
  }
};

export const hintTopRight = {
  ':before': {
    marginBottom: '-11px',
    bottom: '100%',
    left: 'calc(10% - 6px)'
  },
  ':after': {
    bottom: '100%',
    left: '10%',
    transform: 'translateX(0)',
    marginLeft: '-12px'
  },
  ':hover:before': {
    transform: 'translateY(-8px)'
  },
  ':hover:after': {
    transform: 'translateY(-8px)'
  }
};

export const hintBottomLeft = {
  ':before': {
    marginTop: '-11px',
    top: '100%',
    left: 'calc(50% - 6px)'
  },
  ':after': {
    top: '100%',
    left: '50%',
    transform: 'translateX(-100%)',
    marginLeft: '12px'
  },
  ':hover:before': {
    transform: 'translateY(8px) rotate(180deg)'
  },
  ':hover:after': {
    transform: 'translateX(-100%) translateY(8px)'
  }
};

export const hintBottomRight = {
  ':before': {
    marginTop: '-11px',
    top: '100%',
    left: 'calc(50% - 6px)'
  },
  ':after': {
    top: '100%',
    left: '50%',
    transform: 'translateX(0)',
    marginLeft: '-12px'
  },
  ':hover:before': {
    transform: 'translateY(8px) rotate(180deg)'
  },
  ':hover:after': {
    transform: 'translateY(8px)'
  }
};

const hintSize = {
  '[aria-label]:after': {
    whiteSpace: 'pre-wrap',
    width: 'max-content'
  },
  ':after': {
    backgroundColor: 'transparent',
    whiteSpace: 'normal',
    lineHeight: '1.4em',
    wordWrap: 'break-word' // Ensure long words do not overflow.
  }
};

export const hintSmall = {
  ...hintSize,
  ':after': {
    maxWidth: '170px'
  }
};

export const hintMedium = {
  ...hintSize,
  ':after': {
    fontSize: '14px',
    width: '300px'
  }
};

export const hintLarge = {
  ...hintSize,
  ':after': {
    fontSize: '18px',
    width: '700px'
  }
};

export const hintSizeOptions = {
  small: hintSmall,
  medium: hintMedium,
  large: hintLarge
};