pdf-reader-web/components/Button/styled.ts

import styled, { css } from 'styled-components';
import { color } from '../../constants/style';

const align: {[index: string]: string} = {
  left: 'flex-start',
  center: 'center',
  right: 'flex-end',
};

const staticStyles = css`
  border-width: 0;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 16px;
  font-style: normal;
  transition: all .3s linear;
  cursor: pointer;
  outline: none;
  padding: 5px 20px;
`;

const theme: {[index: string]: any} = {
  default: css`
    color: black;
    background-color: transparent;
    border: 1.5px solid transparent;

    &:hover {
      background-color: ${color['soft-blue']};
    }
    &:focus, &:active {
      background-color: ${color['soft-blue']};
    }
  `,
  primary: css`
    color: white;
    background-color: ${color.primary};
    border: 1.5px solid ${color.primary};

    &:hover {
      background-color: ${color['french-blue']};
      border: 1.5px solid ${color['french-blue']};
    }
    &:focus, &:active {
      background-color: ${color['french-blue']};
      border: 1.5px solid ${color['french-blue']};
    }
  `,
  'primary-hollow': css`
    color: black;
    background-color: white;
    border: 1.5px solid ${color.primary};

    &:hover {
      background-color: ${color['primary-light']};
    }
    &:focus, &:active {
      background-color: ${color['primary-light']};
    }
  `,
  'default-hollow': css`
    color: black;
    background-color: white;
    border: 1.5px solid ${color.black56};

    &:hover {
      background-color: ${color.black38};
    }
    &:focus, &:active {
      background-color: ${color.black38};
    }
  `,
  link: css`
    color: ${color.primary};
    background-color: transparent;
    border: none;
    text-decoration: underline;
    padding: 5px 0;

    &:hover {
    }
    &:focus, &:active {
    }
  `,
  'danger-link': css`
    color: ${color.error};
    background-color: transparent;
    border: none;
    text-decoration: underline;
    padding: 5px 0;

    &:hover {
    }
    &:focus, &:active {
    }
  `,
};

export const NormalButton = styled('button')<{appearance?: string; shouldFitContainer?: boolean; align?: string}>`
  ${staticStyles}
  ${props => theme[props.appearance || 'default']};
  ${props => (props.shouldFitContainer ? css`
    width: 100%;
  ` : null)}

  display: inline-flex;
  justify-content: ${props => align[props.align || 'center']};
  align-items: center;
`;

export const DisableButton = styled.button`
  ${staticStyles}
  color: ${color.black38};
  background-color: #eeeff3;
  cursor: not-allowed;
`;