pwa-kit/packages/template-retail-react-app/app/theme/components/project/header.js at b87bd19aba37c6514fc153168bde64d153c07dd0 · SalesforceCommerceCloud/pwa-kit · 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
88
89
90
91
92
93
94
95
96
97
/*
 * Copyright (c) 2021, salesforce.com, inc.
 * All rights reserved.
 * SPDX-License-Identifier: BSD-3-Clause
 * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
 */
export default {
    baseStyle: {
        container: {
            minWidth: 'xs',
            width: 'full',
            boxShadow: 'base',
            backgroundColor: 'white'
        },
        content: {
            maxWidth: 'container.xxxl',
            marginLeft: 'auto',
            marginRight: 'auto',
            paddingLeft: [4, 4, 6, 8],
            paddingRight: [4, 4, 6, 8],
            paddingTop: [1, 1, 2, 4],
            paddingBottom: [3, 3, 2, 4]
        },
        headerFlex: {
            gap: 3
        },
        searchContainer: {
            order: [2, 2, 2, 'inherit'],
            width: ['full', 'full', 'full', 60],
            marginBottom: [1, 1, 2, 0]
        },
        bodyContainer: {
            flex: '1'
        },
        logo: {
            width: [8, 8, 8, 12],
            height: [6, 6, 6, 8]
        },
        icons: {
            height: 11,
            minWidth: 'auto',
            marginBottom: [1, 1, 2, 0],
            _focus: {
                boxShadow: 'outline'
            },
            _focusVisible: {
                outline: 0
            }
        },
        agentIcon: {
            alignSelf: ['self-start', 'self-start', 'self-start', 'auto']
        },
        accountIcon: {
            cursor: 'pointer',
            alignSelf: ['self-start', 'self-start', 'self-start', 'auto']
        },
        arrowDown: {
            marginRight: 0,
            alignSelf: ['self-start', 'self-start', 'self-start', 'auto'],
            cursor: 'pointer',
            display: ['none', 'none', 'none', 'block']
        },
        wishlistIcon: {
            alignSelf: ['self-start', 'self-start', 'self-start', 'auto']
        },
        signout: {
            width: '100%',
            borderRadius: '4px',
            height: 11,
            padding: 4,
            py: 3,
            marginTop: 1,
            _hover: {
                background: 'gray.50'
            }
        },
        signoutText: {
            fontSize: 'sm',
            fontWeight: 'normal'
        },
        signoutIcon: {
            marginRight: 2
        }
    },
    parts: [
        'container',
        'content',
        'headerFlex',
        'searchContainer',
        'bodyContainer',
        'logo',
        'icons',
        'agentIcon',
        'wishlistIcon',
        'signout'
    ]
}