All files / src/AppBar styles.js

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import styled, { css } from 'styled-components';
import defaultTheme from '../theme';
 
const StyledHeader = styled.header`
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    box-shadow: 0 2px 0 0 rgba(5, 45, 73, 0.06999999999999995);
    height: 60px;
    z-index: 9999;
    white-space: nowrap;
    padding: 0 10px;
    background: ${props => props.theme.lightColor};
 
    .header-link {
        align-items: center;
        display: inline-flex;
        justify-content: center;
    }
 
    ${props =>
        props.primary &&
        css`
            background: ${props => props.theme.primaryColor};
            color: ${props => props.theme.lightColor};
        `} ${props =>
            props.secondary &&
            css`
                background: ${props => props.theme.secondaryColor};
                color: ${props => props.theme.lightColor};
            `};
`;
 
const StyledLogo = styled.img`
    display: inline-flex;
    padding: 0 5px;
`;
 
const StyledSection = styled.section`
    align-items: center;
    display: flex;
    flex: 1 0 0;
 
    &:last-child {
        justify-content: flex-end;
    }
`;
 
StyledHeader.defaultProps = {
    theme: defaultTheme,
};
 
export { StyledHeader, StyledSection, StyledLogo };