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

import styled, { css } from 'styled-components';

const MarkupStyle: Record<string, any> = {
  Highlight: css<{isCovered: boolean; bdcolor: string}>`
    background-color: ${props => (props.isCovered ? '#297fb8' : props.bdcolor)};
  `,
  Underline: css<{isCovered: boolean; bdcolor: string}>`
    border-bottom: 2px solid ${props => (props.isCovered ? '#297fb8' : props.bdcolor)};
  `,
  Squiggly: css<{isCovered: boolean; bdcolor: string}>`
    overflow: hidden;
    
    &:before {
      content: '';
      position: absolute;
      background: radial-gradient(ellipse, transparent, transparent 8px, ${props => (props.isCovered ? '#297fb8' : props.bdcolor)} 9px, ${props => (props.isCovered ? '#297fb8' : props.bdcolor)} 10px, transparent 11px);
      background-size: 22px 26px;
      width: 100%;
      height: 5px;
      left: 0;
      bottom: 3px;
    }
    &:after {
      content: '';
      position: absolute;
      background: radial-gradient(ellipse, transparent, transparent 8px, ${props => (props.isCovered ? '#297fb8' : props.bdcolor)} 9px, ${props => (props.isCovered ? '#297fb8' : props.bdcolor)} 10px, transparent 11px);
      background-size: 22px 26px;
      width: 100%;
      height: 5px;
      bottom: -1px;
      left: 11px;
      background-position: 0px -22px;
    }
  `,
  StrikeOut: css<{isCovered: boolean; bdcolor: string}>`
    &:after {
      content: '';
      position: absolute;
      height: 2px;
      width: 100%;
      left: 0;
      top: 40%;
      background-color: ${props => (props.isCovered ? '#297fb8' : props.bdcolor)};
    };
  `,
};

export const Markup = styled('div')<{position: Record<string, any>; bdcolor: string; markupType: string; opacity: number; isCovered: boolean; scale: number}>`
  position: absolute;
  cursor: pointer;
  opacity: ${props => props.opacity};

  ${props => css`
    top: ${props.position.top * props.scale}px;
    left: ${props.position.left * props.scale}px;
    width: ${(props.position.right * props.scale) - (props.position.left * props.scale)}px;
    height: ${(props.position.bottom * props.scale) - (props.position.top * props.scale) + 2}px;
  `}
  ${props => MarkupStyle[props.markupType]}
`;

export const Popper = styled('div')<{position: Record<string, any>}>`
  position: absolute;
  top: ${props => props.position.y}px;
  left: ${props => props.position.x}px;
  transform: translate(-50%, -80px);
`;