@chayns-components/core/lib/esm/components/popup/popup-content-wrapper/PopupContentWrapper.styles.js

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

import { motion } from 'motion/react';
import styled, { css } from 'styled-components';
import { PopupAlignment } from '../../../types/popup';
export const StyledMotionPopupContentWrapper = styled(motion.div)`
    background-color: ${({
  theme
}) => theme['000']};
    border-radius: 3px;
    box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);
    color: ${({
  theme
}) => theme.text};
    z-index: 100;
    position: ${({
  $shouldScrollWithContent
}) => $shouldScrollWithContent ? 'absolute' : 'fixed'};
    pointer-events: all;

    &::after {
        background-color: inherit;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        border-right: 1px solid rgba(0, 0, 0, 0.1);
        box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);
        content: '';
        height: 14px;
        position: absolute;
        width: 14px;
        z-index: -2;

        ${({
  $position,
  $offset
}) => {
  switch ($position) {
    case PopupAlignment.TopLeft:
      return css`
                        bottom: -7px;
                        right: ${5 + $offset}px;
                        transform: rotate(45deg);
                    `;
    case PopupAlignment.BottomLeft:
      return css`
                        top: -7px;
                        right: ${5 + $offset}px;
                        transform: rotate(225deg);
                    `;
    case PopupAlignment.TopCenter:
      return css`
                        bottom: -7px;
                        left: calc(50% - 7px);
                        transform: rotate(45deg);
                    `;
    case PopupAlignment.BottomCenter:
      return css`
                        top: -7px;
                        left: calc(50% - 7px);
                        transform: rotate(225deg);
                    `;
    case PopupAlignment.TopRight:
      return css`
                        transform: rotate(45deg);
                        bottom: -7px;
                        left: ${5 + $offset}px;
                    `;
    case PopupAlignment.BottomRight:
      return css`
                        transform: rotate(225deg);
                        top: -7px;
                        left: ${5 + $offset}px;
                    `;
    default:
      return undefined;
  }
}}
    }

    &::before {
        background-color: inherit;
        border-radius: 3px;
        bottom: 0;
        content: '';
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        z-index: -1;
    }
`;
export const StyledPopupContentWrapperContent = styled.div`
    height: 100%;
    width: 100%;

    ${({
  $maxHeight
}) => $maxHeight && css`
            max-height: ${$maxHeight}px;
            overflow-y: auto;
            overflow-x: hidden;
        `}
`;
//# sourceMappingURL=PopupContentWrapper.styles.js.map