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;
|
2020-03-05 14:34:05 +01:00
|
|
|
padding-top: ${({ small }) => (small ? 'calc(156 / 245 * 100%)' : 'calc(397 / 431 * 100%)')};
|
2020-02-13 10:41:47 +01:00
|
|
|
border-radius: 2px;
|
2020-03-02 00:21:43 +01:00
|
|
|
background-color: #f6f6f6;
|
2020-02-14 17:44:54 +01:00
|
|
|
overflow: hidden;
|
2020-02-19 11:21:25 +01:00
|
|
|
|
2020-03-02 14:33:16 +01:00
|
|
|
.card-control-wrapper {
|
|
|
|
display: none;
|
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
|
|
left: 0;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
padding: 10px;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
.card-control-wrapper {
|
|
|
|
display: flex;
|
|
|
|
z-index: 1050;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
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
|
|
|
|
2020-03-05 16:13:44 +01:00
|
|
|
${({ checked }) =>
|
|
|
|
checked &&
|
2020-03-02 10:00:51 +01:00
|
|
|
`
|
|
|
|
.card-control-wrapper {
|
|
|
|
display: flex;
|
|
|
|
z-index: 1050;
|
2020-03-02 14:33:16 +01:00
|
|
|
border: 2px solid #007EFF;
|
2020-03-02 10:00:51 +01:00
|
|
|
}
|
|
|
|
`}
|
2020-02-13 10:41:47 +01:00
|
|
|
`;
|
|
|
|
|
|
|
|
CardImgWrapper.defaultProps = {
|
2020-03-05 16:13:44 +01:00
|
|
|
checked: false,
|
2020-02-19 11:21:25 +01:00
|
|
|
hasError: false,
|
2020-03-05 14:34:05 +01:00
|
|
|
small: false,
|
2020-02-13 10:41:47 +01:00
|
|
|
};
|
|
|
|
|
|
|
|
CardImgWrapper.propTypes = {
|
2020-03-05 16:13:44 +01:00
|
|
|
checked: PropTypes.bool,
|
2020-02-19 11:21:25 +01:00
|
|
|
hasError: PropTypes.bool,
|
2020-03-05 14:34:05 +01:00
|
|
|
small: PropTypes.bool,
|
2020-02-13 10:41:47 +01:00
|
|
|
};
|
|
|
|
|
|
|
|
export default CardImgWrapper;
|