@chayns-components/core/lib/esm/components/grid-image/GridImage.styles.js

A set of beautiful React components for developing your own applications with chayns.

import styled, { css } from 'styled-components';
import { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';
export const StyledGridImage = styled.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;

    ${({
  $shouldShowKeyboardHighlighting
}) => $shouldShowKeyboardHighlighting && css`
            &:focus-visible {
                ${keyboardFocusHighlightingRingCss}
            }
        `}
`;
export const StyledGridLeftImage = styled.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%;
`;
export const StyledGridTopRightImage = styled.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%;
`;
export const StyledGridBottomRightImage = styled.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