@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
87 lines (84 loc) • 2.02 kB
JavaScript
import styled, { css } from 'styled-components';
export const StyledGroupedImage = styled.div`
flex: 0 0 auto;
height: ${_ref => {
let {
$height
} = _ref;
return $height;
}};
position: relative;
width: ${_ref2 => {
let {
$height
} = _ref2;
return $height;
}};
`;
export let ImageSize = /*#__PURE__*/function (ImageSize) {
ImageSize["Full"] = "100%";
ImageSize["Small"] = "75%";
ImageSize["Grouped"] = "80%";
ImageSize["GroupedSmall"] = "65%";
return ImageSize;
}({});
export const StyledGroupImageElement = styled.img`
aspect-ratio: 1;
border-radius: ${_ref3 => {
let {
$shouldShowRoundImage
} = _ref3;
return $shouldShowRoundImage ? '50%' : '0';
}};
height: ${_ref4 => {
let {
$imageSize
} = _ref4;
return $imageSize;
}};
object-fit: cover;
position: absolute;
${_ref5 => {
let {
$imageSize,
$isSecondImage
} = _ref5;
return $isSecondImage ? css`
bottom: ${$imageSize === ImageSize.GroupedSmall ? '15%' : 0};
right: ${$imageSize === ImageSize.GroupedSmall ? '15%' : 0};
` : css`
top: 0;
left: 0;
`;
}}
${_ref6 => {
let {
$background,
$shouldPreventBackground,
theme
} = _ref6;
return !$shouldPreventBackground && css`
background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};
box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;
`;
}}
`;
export const StyledCornerImage = styled.img`
aspect-ratio: 1;
bottom: 0;
height: 50%;
position: absolute;
right: 0;
${_ref7 => {
let {
$background,
$shouldPreventBackground,
theme
} = _ref7;
return !$shouldPreventBackground && css`
background: ${$background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};
box-shadow: 0 0 0 1px rgba(${theme['009-rgb']}, 0.08) inset;
`;
}}
`;
//# sourceMappingURL=GroupedImage.styles.js.map