@chayns-components/core/lib/esm/components/context-menu/context-menu-content/ContextMenuContent.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 { ContextMenuAlignment } from '../../../types/contextMenu';
export const StyledMotionContextMenuContent = styled(motion.div)`
    background-color: ${_ref => {
  let {
    theme
  } = _ref;
  return theme['001'];
}};
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: ${_ref2 => {
  let {
    $shouldHidePopupArrow
  } = _ref2;
  return $shouldHidePopupArrow ? '6px' : '3px';
}};
    box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);
    color: ${_ref3 => {
  let {
    theme
  } = _ref3;
  return theme.text;
}};
    pointer-events: all;
    position: absolute;
    z-index: ${_ref4 => {
  let {
    $zIndex
  } = _ref4;
  return $zIndex;
}};

    &::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;

        ${_ref5 => {
  let {
    $shouldHidePopupArrow
  } = _ref5;
  return $shouldHidePopupArrow && css`
                display: none;
            `;
}}

        ${_ref6 => {
  let {
    $position
  } = _ref6;
  switch ($position) {
    case ContextMenuAlignment.TopLeft:
      return css`
                        bottom: -7px;
                        right: 7px;
                        transform: rotate(45deg);
                    `;
    case ContextMenuAlignment.BottomLeft:
      return css`
                        top: -7px;
                        right: 7px;
                        transform: rotate(225deg);
                    `;
    case ContextMenuAlignment.TopRight:
      return css`
                        transform: rotate(45deg);
                        bottom: -7px;
                        left: 7px;
                    `;
    case ContextMenuAlignment.BottomRight:
      return css`
                        transform: rotate(225deg);
                        top: -7px;
                        left: 7px;
                    `;
    case ContextMenuAlignment.TopCenter:
      return css`
                        bottom: -7px;
                        right: 45%;
                        transform: rotate(45deg);
                    `;
    case ContextMenuAlignment.BottomCenter:
      return css`
                        transform: rotate(225deg);
                        top: -7px;
                        left: 45%;
                    `;
    default:
      return undefined;
  }
}}
    }

    &::before {
        background-color: inherit;
        bottom: 0;
        content: '';
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        border-radius: ${_ref7 => {
  let {
    $shouldHidePopupArrow
  } = _ref7;
  return $shouldHidePopupArrow ? '6px' : '3px';
}};
        z-index: -1;
    }
`;
export const StyledContextMenuContentItem = styled.div`
    cursor: pointer;
    display: flex;
    padding: 5px 8px 5px 5px;
    transition: background-color 0.3s ease;
    border-radius: ${_ref8 => {
  let {
    $shouldHidePopupArrow
  } = _ref8;
  return $shouldHidePopupArrow ? '3px' : 0;
}};
    margin: ${_ref9 => {
  let {
    $shouldHidePopupArrow
  } = _ref9;
  return $shouldHidePopupArrow ? '3px' : 0;
}};

    &:hover {
        background-color: ${_ref0 => {
  let {
    theme
  } = _ref0;
  return theme['secondary-103'];
}};
    }
`;
export const StyledContextMenuContentItemIconWrapper = styled.div`
    flex: 0 0 auto;
    margin: 0 8px 0 3px;
    width: 20px;
`;
export const StyledContextMenuContentItemBorder = styled.div`
    width: 100%;
    border-top: ${_ref1 => {
  let {
    theme
  } = _ref1;
  return `1px solid rgba(${theme['text-rgb'] ?? '34, 34, 34'}, 0.2)`;
}};
`;
export const StyledContextMenuContentHeadline = styled.div`
    width: 100%;
    margin: 3px 6px;
    opacity: 50%;
    font-weight: bold;
`;
export const StyledContextMenuContentItemText = styled.div`
    flex: 0 0 auto;
    white-space: nowrap;
`;
//# sourceMappingURL=ContextMenuContent.styles.js.map