StockProject-Frontend/src/components/Loading/Loading.Style.ts at 6013d45c1ae4f826c05c71e0cf208a6ac424b998 · FunD-StockProject/StockProject-Frontend · 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
import styled from '@emotion/styled';
import { theme } from '@styles/themes';

const LoadingContainer = styled.div(
  ({ top, bottom }: { top?: string; bottom?: string }) => ({
    top: top ?? 0,
    bottom: bottom ?? 0,
  }),
  {
    position: 'fixed',
    bottom: '96px',
    left: 0,
    right: 0,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    background: 'linear-gradient(180deg, rgba(16, 16, 16, 0.4) 0%, #101010DD 81.02%)',
    backdropFilter: 'blur(2.5px)', // Note: backdrop-filter has minimal browser support
    zIndex: 9999,

    ['>svg']: {
      position: 'absolute',
      width: '110%',
      height: 'auto',
      right: '0',
      top: '0',
    },
  },
);

const LoadingContent = styled.div({
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  justifyContent: 'center',
  gap: '16px',

  ['>img']: {
    width: '80px',
    height: 'auto',
    aspectRatio: '1 / 1',
  },

  ['>div']: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    gap: '8px',

    ['>p']: {
      margin: '0',

      ['&.title']: {
        ...theme.font.title20Semibold,
        color: theme.colors.sub_gray4,
      },

      ['&.desc']: {
        ...theme.font.body16Regular,
        color: theme.colors.sub_gray6,
      },
    },
  },
});

export { LoadingContainer, LoadingContent };