@sinchsmb/ui-kit/src/layout/ModalDialog/styled.ts

UI kit for SinchSMB frontend

import styled from 'styled-components/macro';

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

import { ModalDialogSize } from './constants';

export const StyledModalDialog = styled.div<{ $size: ModalDialogSize }>`
  background-color: ${color('sys/color/white')};
  border-radius: 12px;
  box-shadow: ${shadow('sys/shadow/elevation/16')};
  display: flex;
  flex-direction: column;
  position: relative;
  width: ${(props) => {
    switch (props.$size) {
      case ModalDialogSize.Default:
        return '560px';
      case ModalDialogSize.Large:
        return '900px';
      /* istanbul ignore next */
      default:
        assertUnreachable(props.$size);
    }
  }};
`;

export const showAnimationDuration = 400;
export const hideAnimationDuration = 100;

export const StyledModalBackdrop = styled.div`
  align-items: center;
  backdrop-filter: blur(2px);
  background: linear-gradient(180deg, rgba(19, 45, 83, 0.4) 0%, rgba(19, 45, 83, 0.6) 100%);
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  opacity: 1;
  position: fixed;
  right: 0;
  top: 0;
  transform: scale(1);
  z-index: ${ZIndex.ModalDialog};

  &.enter {
    opacity: 0;

    ${StyledModalDialog} {
      transform: scale(0.7);
    }
  }

  &.enter-active {
    opacity: 1;
    transition: opacity ${showAnimationDuration}ms ${other('sys/timing-function/smooth')};

    ${StyledModalDialog} {
      transform: scale(1);
      transition: transform ${showAnimationDuration}ms ${other('sys/timing-function/smooth')};
    }
  }

  &.exit {
    opacity: 1;

    ${StyledModalDialog} {
      transform: scale(1);
    }
  }

  &.exit-active {
    opacity: 0;
    transition: opacity ${hideAnimationDuration}ms ${other('sys/timing-function/smooth')};

    ${StyledModalDialog} {
      transform: scale(0.7);
      transition: transform ${hideAnimationDuration}ms ${other('sys/timing-function/smooth')};
    }
  }
`;