@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
96 lines • 1.86 kB
JavaScript
import styled from 'styled-components';
export const StyledGridImage = styled.div`
background: ${_ref => {
let {
$background,
theme
} = _ref;
return $background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`;
}};
border-radius: ${_ref2 => {
let {
$shouldShowRoundImage
} = _ref2;
return $shouldShowRoundImage ? '50%' : undefined;
}};
box-shadow: 0 0 0 1px rgba(${_ref3 => {
let {
theme
} = _ref3;
return theme['009-rgb'];
}}, 0.08) inset;
height: ${_ref4 => {
let {
$size
} = _ref4;
return $size;
}}px;
overflow: hidden;
position: relative;
transition: border-radius 0.3s ease;
width: ${_ref5 => {
let {
$size
} = _ref5;
return $size;
}}px;
flex: 0 0 auto;
`;
export const StyledGridLeftImage = styled.img`
border-right: ${_ref6 => {
let {
$size
} = _ref6;
return $size / 40;
}}px solid white;
height: 100%;
left: 0;
object-fit: cover;
opacity: ${_ref7 => {
let {
$isHidden
} = _ref7;
return $isHidden ? 0 : 1;
}};
position: absolute;
top: 0;
transition: opacity 0.4s ease;
width: 60%;
`;
export const StyledGridTopRightImage = styled.img`
border-bottom: ${_ref8 => {
let {
$size
} = _ref8;
return $size / 40;
}}px solid white;
height: 50%;
object-fit: cover;
opacity: ${_ref9 => {
let {
$isHidden
} = _ref9;
return $isHidden ? 0 : 1;
}};
position: absolute;
right: 0;
top: 0;
transition: opacity 0.3s ease;
width: 40%;
`;
export const StyledGridBottomRightImage = styled.img`
bottom: 0;
height: 50%;
object-fit: cover;
opacity: ${_ref0 => {
let {
$isHidden
} = _ref0;
return $isHidden ? 0 : 1;
}};
position: absolute;
right: 0;
transition: opacity 0.3s ease;
width: 40%;
`;
//# sourceMappingURL=GridImage.styles.js.map