ui/src/components/Footer/styles.ts at 10a1954d58f8def54f67137b8dad3393e4251de2 · verdaccio/ui · 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
83
84
85
86
87
import styled from '@emotion/styled';

import Icon from '../Icon/Icon';
import { Theme } from '../../design-tokens/theme';

export const Wrapper = styled('div')<{ theme?: Theme }>(({ theme }) => ({
  background: theme?.palette.type === 'light' ? theme?.palette.snow : theme?.palette.cyanBlue,
  borderTop: `1px solid ${theme?.palette.greyGainsboro}`,
  color: theme?.palette.type === 'dark' ? theme?.palette.white : theme?.palette.nobel01,
  fontSize: '14px',
  padding: '20px',
}));

export const Inner = styled('div')<{ theme?: Theme }>(({ theme }) => ({
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'flex-end',
  width: '100%',
  [`@media (min-width: ${theme?.breakPoints.medium}px)`]: {
    minWidth: 400,
    maxWidth: 800,
    margin: 'auto',
    justifyContent: 'space-between',
  },
  [`@media (min-width: ${theme?.breakPoints.large}px)`]: {
    maxWidth: 1240,
  },
}));

export const Left = styled('div')<{ theme?: Theme }>(({ theme }) => ({
  alignItems: 'center',
  display: 'none',
  [`@media (min-width: ${theme?.breakPoints.medium}px)`]: {
    display: 'flex',
  },
}));

export const Right = styled(Left)({
  display: 'flex',
});

export const Earth = styled(Icon)({
  padding: '0 10px',
});

export const Flags = styled('span')<{ theme?: Theme }>(({ theme }) => ({
  position: 'absolute',
  background: theme?.palette.greyAthens,
  padding: '1px 4px',
  borderRadius: 3,
  height: 20,
  display: 'inline-flex',
  alignItems: 'center',
  visibility: 'hidden',
  top: -2,
  ':before': {
    content: "''",
    position: 'absolute',
    top: '29%',
    left: -4,
    marginLeft: -5,
    border: '5px solid',
    borderColor: `${theme?.palette.greyAthens} transparent transparent transparent`,
    transform: 'rotate(90deg)',
  },
}));

export const ToolTip = styled('span')({
  position: 'relative',
  height: '18px',
  ':hover': {
    [`${Flags}`]: {
      visibility: 'visible',
    },
  },
});

export const Love = styled('span')<{ theme?: Theme }>(({ theme }) => ({
  color: theme?.palette.love,
  padding: '0 5px',
}));

export const Flag = styled(Icon)({
  padding: '0 5px',
});

export const Logo = Flag;