design-system/packages/drawer/src/styles.ts at eb64590344c4b6e114efd0b3ebacaf39cee81c1b · DesignSystemLab/design-system · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
import { css } from '@emotion/react';
import { SEMATIC_COLOR_HOVER, SHADOW_MODAL, Z_INDEX_MODAL } from '@jdesignlab/theme';
import { Placement } from './types';

export const portal = (width: number, height: number, placement: Placement, full: boolean) => {
  const padding = 12;
  const adjustedWidth = full ? window.innerWidth - padding * 2 : width;
  const adjustedHeight = full ? window.innerHeight - padding * 2 : height;

  const position = {
    right: {
      right: `-${padding}px`,
      transform: `translateX(${adjustedWidth + padding * 3}px)`,
      transition: 'transform .2s ease-in-out',
      top: 0,
      height: '100vh',
      width: adjustedHeight,
      '&.open': {
        transform: `translateX(-${padding}px)`
      }
    },
    left: {
      left: `-${adjustedWidth + padding * 3}px`,
      transition: 'transform .2s ease-in-out',
      top: 0,
      height: '100vh',
      width: adjustedWidth,
      '&.open': {
        transform: `translateX(${adjustedWidth + padding * 3}px)`
      }
    },
    top: {
      top: `-${adjustedHeight + padding * 4}px`,
      left: 0,
      width: `calc(100vw - ${padding * 2}px)`,
      boxShadow: 'none',
      height: adjustedHeight,
      '&.open': {
        transform: `translateY(${adjustedHeight + padding * 4}px)`
      }
    },
    bottom: {
      bottom: `-${adjustedHeight + padding * 2}px`,
      left: 0,
      width: `calc(100vw - ${padding * 2}px)`,
      height: adjustedHeight,
      '&.open': {
        transform: `translateY(-${adjustedHeight + padding * 2}px)`
      }
    }
  };
  return css({
    zIndex: Z_INDEX_MODAL,
    position: 'fixed',
    ...position[placement],
    background: 'white',
    padding: `${padding}px`,
    boxShadow: SHADOW_MODAL,
    transition: 'all .2s ease-in-out'
  });
};

export const closeIconWrapper = css({
  position: 'absolute',
  right: '6px',
  top: '6px',
  width: '24px',
  height: '24px',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  padding: '8px',
  borderRadius: '100%',
  cursor: 'pointer',
  '&:hover': {
    background: SEMATIC_COLOR_HOVER
  }
});

export const closeIcon = css({
  padding: 0
});