📦 payloadcms / custom-website-series

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
73import { createUseStyles } from 'react-jss';
import { base } from '../base';
import colors from '../colors';
import { headerHeight, strokeWidth } from '../sizes';
import { label } from '../type';

export default createUseStyles({
  contact: {
    height: '100%',
    background: colors.red,
    paddingTop: headerHeight,
    overflow: 'hidden',
  },
  title: {
    ...label,
    color: colors.antique,
  },
  wrap: {
    position: 'relative',
  },
  message: {
    position: 'relative',
    padding: `${base(3)} ${base(3)} ${base(3)} 0`,
    '&:before': {
      content: '""',
      position: 'absolute',
      top: 0,
      bottom: '-100vh',
      right: 0,
      left: '-100vw',
      background: colors.antique,
    },
  },
  form: {
    position: 'relative',
    zIndex: 2,
  },
  success: {
    position: 'relative',
    zIndex: 2,
  },
  contactInfo: {
    '@global': {
      '*': {
        color: colors.antique,
      },
    },
  },
  instructions: {
    marginTop: 0,
  },
  hr: {
    height: strokeWidth,
    background: colors.gray,
    border: 0,
    width: base(2),
    margin: `${base(2)} 0`,
  },
  section: {
    marginBottom: base(2),
  },
  link: {
    color: colors.antique,
    textDecoration: 'none',
    display: 'inline-flex',

    '&::selection': {
      backgroundColor: colors.antique,
      color: colors.red,
    },
  },
});