apphouse/dist/styles/getAnimatedDownloadButtonStyles.ts

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

interface AnimatedDownloadButtonStylesProps {
  width?: string | number;
  buttonStyles: any;
  variant: string;
}
export const getAnimatedDownloadButtonStyles = (
  props: AnimatedDownloadButtonStylesProps
) => {
  const { width = 'auto', buttonStyles, variant } = props;

  const height = '40px';
  const gapBetweenTooltipToButton = '10px';
  const buttonVariantStyles = buttonStyles[variant];
  const buttonColor = buttonVariantStyles.background;
  const buttonHoverBackground = buttonStyles.brand.backgroundColor;
  const buttonHoverColor = buttonStyles.brand.color;

  const styles = {
    button: {
      width,
      background: buttonColor,
      color: buttonVariantStyles.color,
      position: 'relative',
      textAlign: 'center',
      border: 0,
      borderRadius: buttonVariantStyles.borderRadius,
      transition: 'background 0.3s',
      ':hover': {
        background: buttonHoverBackground,
        color: buttonHoverColor
      },
      ':hover .ah-text': {
        top: '-100%'
      },
      ':hover .ah-icon': {
        top: '0'
      },
      ':hover:before, :hover:after': {
        opacity: '1',
        visibility: 'visible'
      },
      '&:hover:after': {
        bottom: `calc(${height} + ${gapBetweenTooltipToButton} - 20px)`
      },
      '&:hover:before': {
        bottom: `calc(${height} + ${gapBetweenTooltipToButton})`
      }
    },
    text: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      top: '0',
      transition: 'top 0.5s',
      overflow: 'hidden',
      position: 'absolute',
      width: '100%',
      height: '100%',
      left: '0',
      color: 'inherit'
    },
    icon: {
      color: 'inherit',
      top: '100%',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      overflow: 'hidden',
      position: 'absolute',
      width: '100%',
      height: '100%',
      left: '0'
    },
    buttonWrapper: {
      overflow: 'hidden',
      position: 'absolute',
      width: '100%',
      height: '100%',
      left: '0'
    }
  };
  return styles;
};