Fix styles
This commit is contained in:
parent
806f64abae
commit
5af854226a
@ -3,6 +3,7 @@ import styled from "styled-components";
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const HeaderLogoContainer = styled.div`
|
||||
|
||||
.header-logo-wrapper {
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
@ -12,8 +13,9 @@ const HeaderLogoContainer = styled.div`
|
||||
cursor: pointer;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
||||
@media (max-width: 620px) {
|
||||
padding: 0 12px 0 0;
|
||||
margin: 0 12px 0 0;
|
||||
display: ${props => props.module && "block"};
|
||||
}
|
||||
}
|
||||
@ -22,41 +24,44 @@ const HeaderLogoContainer = styled.div`
|
||||
width: 146px;
|
||||
height: 24px;
|
||||
position: relative;
|
||||
padding: 4px 20px 0 ${props => (props.logged ? "6px" : "240px")};
|
||||
margin: 4px 20px 0 ${props => (props.logged ? "6px" : "240px")};
|
||||
cursor: pointer;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 4px 20px 0 ${props => (props.logged ? "6px" : "144px")};
|
||||
margin: 4px 20px 0 ${props => (props.logged ? "6px" : "144px")};
|
||||
}
|
||||
|
||||
@media (max-width: 620px) {
|
||||
display: ${props => (props.module ? "none" : "block")};
|
||||
padding: 0px 20px 0 6px;
|
||||
margin: 0px 20px 0 ${props => (props.logged ? "6px" : "144px")};
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
padding: 4px 20px 0 ${props => (props.logged ? "6px" : "32px")};
|
||||
margin: 4px 20px 0 ${props => (props.logged ? "6px" : "32px")};
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const HeaderLogo = ({ logged }) => {
|
||||
|
||||
return (
|
||||
<HeaderLogoContainer logged={logged}>
|
||||
<a className="header-logo-wrapper" href="/">
|
||||
<img className="header-logo-min_icon" src="images/nav.logo.react.svg" />
|
||||
<img
|
||||
className="header-logo-icon"
|
||||
src="images/nav.logo.opened.react.svg"
|
||||
/>
|
||||
</a>
|
||||
</HeaderLogoContainer>
|
||||
)
|
||||
return (
|
||||
<HeaderLogoContainer logged={logged}>
|
||||
<a className="header-logo-wrapper" href="/">
|
||||
<img
|
||||
className="header-logo-min_icon"
|
||||
src="images/nav.logo.react.svg"
|
||||
/>
|
||||
<img
|
||||
className="header-logo-icon"
|
||||
src="images/nav.logo.opened.react.svg"
|
||||
/>
|
||||
</a>
|
||||
</HeaderLogoContainer>
|
||||
)
|
||||
}
|
||||
|
||||
HeaderLogo.propTypes = {
|
||||
logged: PropTypes.bool.isRequired
|
||||
logged: PropTypes.bool.isRequired
|
||||
};
|
||||
|
||||
export default HeaderLogo;
|
||||
|
Loading…
Reference in New Issue
Block a user