2020-02-13 10:41:47 +01:00
|
|
|
import styled from 'styled-components';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
|
|
|
|
const CardImgWrapper = styled.div`
|
2020-02-19 08:10:40 +01:00
|
|
|
position: relative;
|
2020-02-14 17:44:54 +01:00
|
|
|
width: 100%;
|
|
|
|
height: 0;
|
|
|
|
padding-top: ${({ isSmall }) =>
|
|
|
|
isSmall ? 'calc(156 / 245 * 100%)' : 'calc(397 / 431 * 100%)'};
|
2020-02-13 10:41:47 +01:00
|
|
|
border-radius: 2px;
|
2020-02-13 12:48:13 +01:00
|
|
|
background: ${({ withOverlay }) => (withOverlay ? '#F6F6F6' : '#333740')};
|
2020-02-14 17:44:54 +01:00
|
|
|
overflow: hidden;
|
2020-02-19 11:21:25 +01:00
|
|
|
|
|
|
|
${({ hasError }) => {
|
|
|
|
if (hasError) {
|
|
|
|
return `
|
|
|
|
background: #F2F3F4;
|
|
|
|
border: 1px solid #FF5D00;
|
|
|
|
`;
|
|
|
|
}
|
|
|
|
|
|
|
|
return '';
|
|
|
|
}}
|
2020-02-20 16:16:01 +01:00
|
|
|
|
|
|
|
.card-control-wrapper {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
.card-control-wrapper {
|
2020-02-21 07:58:14 +01:00
|
|
|
display: flex;
|
2020-02-21 08:55:25 +01:00
|
|
|
z-index: 1050;
|
2020-02-20 16:16:01 +01:00
|
|
|
}
|
|
|
|
}
|
2020-02-13 10:41:47 +01:00
|
|
|
`;
|
|
|
|
|
|
|
|
CardImgWrapper.defaultProps = {
|
2020-02-19 11:21:25 +01:00
|
|
|
hasError: false,
|
2020-02-13 10:41:47 +01:00
|
|
|
isSmall: false,
|
2020-02-14 17:44:54 +01:00
|
|
|
withOverlay: false,
|
2020-02-13 10:41:47 +01:00
|
|
|
};
|
|
|
|
|
|
|
|
CardImgWrapper.propTypes = {
|
2020-02-19 11:21:25 +01:00
|
|
|
hasError: PropTypes.bool,
|
2020-02-13 10:41:47 +01:00
|
|
|
isSmall: PropTypes.bool,
|
2020-02-14 17:44:54 +01:00
|
|
|
withOverlay: PropTypes.bool,
|
2020-02-13 10:41:47 +01:00
|
|
|
};
|
|
|
|
|
|
|
|
export default CardImgWrapper;
|