@sinchsmb/ui-kit/src/components/Tooltip/styled.ts

UI kit for SinchSMB frontend

import styled from 'styled-components/macro';

import { ZIndex } from '../../constans/zIndex';
import { color, shadow } from '../../theme';

import bottomArrow from './assets/bottom_arrow.svg';
import rightArrow from './assets/right_arrow.svg';

export const StyledArrow = styled.div`
  background-color: inherit;
  height: 12px;
  pointer-events: none;
  visibility: hidden;
  width: 12px;

  &:before {
    background-color: inherit;
    box-sizing: content-box;
    content: '';
    height: 6px;
    mask-image: url(${bottomArrow});
    mask-position: center;
    mask-repeat: no-repeat;
    position: absolute;
    visibility: visible;
    width: 12px;
  }
`;

export const transitionDuration = 100;

export const StyledTooltip = styled.div`
  background-color: ${color('ref/palette/gray/700')};
  border-radius: 6px;
  box-shadow: ${shadow('sys/shadow/elevation/8')};
  box-sizing: content-box;
  color: ${color('sys/color/white')};
  display: none;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  max-width: 200px;
  padding: 2px 6px;
  word-break: break-word;
  z-index: ${ZIndex.Tooltip};

  &.enter {
    display: block;
    opacity: 0;
  }
  &.enter-active {
    opacity: 1;
    transition: opacity ${transitionDuration}ms linear;
  }
  &.enter-done {
    display: block;
  }
  &.exit {
    display: block;
    opacity: 1;
  }
  &.exit-active {
    opacity: 0;
    transition: opacity ${transitionDuration}ms linear;
  }

  &[data-popper-placement^='top'] > ${StyledArrow} {
    bottom: -12px;
  }

  &[data-popper-placement^='bottom'] > ${StyledArrow} {
    top: -6px;
    &:before {
      transform: rotate(180deg);
    }
  }

  &[data-popper-placement^='left'] > ${StyledArrow} {
    height: 12px;
    right: -6px;
    width: 6px;
    &:before {
      height: 12px;
      mask-image: url(${rightArrow});
      width: 6px;
    }
  }

  &[data-popper-placement^='right'] > ${StyledArrow} {
    height: 12px;
    left: -6px;
    width: 6px;
    &:before {
      height: 12px;
      mask-image: url(${rightArrow});
      transform: rotate(180deg);
      width: 6px;
    }
  }
`;