@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
73 lines (72 loc) • 2.01 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.StyledGridTopRightImage = exports.StyledGridLeftImage = exports.StyledGridImage = exports.StyledGridBottomRightImage = void 0;
var _styledComponents = _interopRequireDefault(require("styled-components"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const StyledGridImage = exports.StyledGridImage = _styledComponents.default.div`
background: ${({
$background,
theme
}) => $background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};
border-radius: ${({
$shouldShowRoundImage
}) => $shouldShowRoundImage ? '50%' : undefined};
box-shadow: 0 0 0 1px rgba(${({
theme
}) => theme['009-rgb']}, 0.08) inset;
height: ${({
$size
}) => $size}px;
overflow: hidden;
position: relative;
transition: border-radius 0.3s ease;
width: ${({
$size
}) => $size}px;
flex: 0 0 auto;
`;
const StyledGridLeftImage = exports.StyledGridLeftImage = _styledComponents.default.img`
border-right: ${({
$size
}) => $size / 40}px solid white;
height: 100%;
left: 0;
object-fit: cover;
opacity: ${({
$isHidden
}) => $isHidden ? 0 : 1};
position: absolute;
top: 0;
transition: opacity 0.4s ease;
width: 60%;
`;
const StyledGridTopRightImage = exports.StyledGridTopRightImage = _styledComponents.default.img`
border-bottom: ${({
$size
}) => $size / 40}px solid white;
height: 50%;
object-fit: cover;
opacity: ${({
$isHidden
}) => $isHidden ? 0 : 1};
position: absolute;
right: 0;
top: 0;
transition: opacity 0.3s ease;
width: 40%;
`;
const StyledGridBottomRightImage = exports.StyledGridBottomRightImage = _styledComponents.default.img`
bottom: 0;
height: 50%;
object-fit: cover;
opacity: ${({
$isHidden
}) => $isHidden ? 0 : 1};
position: absolute;
right: 0;
transition: opacity 0.3s ease;
width: 40%;
`;
//# sourceMappingURL=GridImage.styles.js.map