@chayns-components/core/lib/cjs/components/context-menu/context-menu-content/ContextMenuContent.styles.js

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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledMotionContextMenuContent = exports.StyledContextMenuContentItemWrapper = exports.StyledContextMenuContentItemText = exports.StyledContextMenuContentItemSpacer = exports.StyledContextMenuContentItemIconWrapper = exports.StyledContextMenuContentItem = exports.StyledContextMenuContentHeadline = void 0;
var _react = require("motion/react");
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _ContextMenu = require("../ContextMenu.types");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const StyledMotionContextMenuContent = exports.StyledMotionContextMenuContent = (0, _styledComponents.default)(_react.motion.div)`
    background-color: ${({
  theme
}) => theme['001']};
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: ${({
  $shouldHidePopupArrow
}) => $shouldHidePopupArrow ? '6px' : '3px'};
    box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);
    color: ${({
  theme
}) => theme.text};
    max-width: 500px;
    pointer-events: all;
    position: absolute;
    z-index: ${({
  $zIndex
}) => $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;

        ${({
  $shouldHidePopupArrow
}) => $shouldHidePopupArrow && (0, _styledComponents.css)`
                display: none;
            `}

        ${({
  $position
}) => {
  switch ($position) {
    case _ContextMenu.ContextMenuAlignment.TopLeft:
      return (0, _styledComponents.css)`
                        bottom: -7px;
                        right: 7px;
                        transform: rotate(45deg);
                    `;
    case _ContextMenu.ContextMenuAlignment.BottomLeft:
      return (0, _styledComponents.css)`
                        top: -7px;
                        right: 7px;
                        transform: rotate(225deg);
                    `;
    case _ContextMenu.ContextMenuAlignment.TopRight:
      return (0, _styledComponents.css)`
                        transform: rotate(45deg);
                        bottom: -7px;
                        left: 7px;
                    `;
    case _ContextMenu.ContextMenuAlignment.BottomRight:
      return (0, _styledComponents.css)`
                        transform: rotate(225deg);
                        top: -7px;
                        left: 7px;
                    `;
    case _ContextMenu.ContextMenuAlignment.TopCenter:
      return (0, _styledComponents.css)`
                        bottom: -7px;
                        right: 45%;
                        transform: rotate(45deg);
                    `;
    case _ContextMenu.ContextMenuAlignment.BottomCenter:
      return (0, _styledComponents.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: ${({
  $shouldHidePopupArrow
}) => $shouldHidePopupArrow ? '6px' : '3px'};
        z-index: -1;
    }
`;
const StyledContextMenuContentItem = exports.StyledContextMenuContentItem = _styledComponents.default.div``;
const StyledContextMenuContentItemSpacer = exports.StyledContextMenuContentItemSpacer = _styledComponents.default.div`
    background-color: ${({
  theme
}) => theme['003']};
    height: 1px;
    width: 100%;
`;
const StyledContextMenuContentItemWrapper = exports.StyledContextMenuContentItemWrapper = _styledComponents.default.div`
    align-items: center;
    border-radius: ${({
  $shouldHidePopupArrow
}) => $shouldHidePopupArrow ? '3px' : 0};
    cursor: pointer;
    display: flex;
    gap: 6px;
    margin: ${({
  $shouldHidePopupArrow
}) => $shouldHidePopupArrow ? '3px' : 0};
    overflow: hidden;
    padding: 5px 8px;
    transition: background-color 0.3s ease;

    ${({
  $isFocused,
  theme
}) => $isFocused && (0, _styledComponents.css)`
            background-color: ${theme['secondary-103']};
        `}

    &:hover {
        background-color: ${({
  theme
}) => theme['secondary-103']};
    }
`;
const StyledContextMenuContentItemIconWrapper = exports.StyledContextMenuContentItemIconWrapper = _styledComponents.default.div`
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
    width: 20px;
`;
const StyledContextMenuContentHeadline = exports.StyledContextMenuContentHeadline = _styledComponents.default.div`
    width: 100%;
    margin: 3px 6px;
    opacity: 50%;
    font-weight: bold;
`;
const StyledContextMenuContentItemText = exports.StyledContextMenuContentItemText = _styledComponents.default.div`
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
`;
//# sourceMappingURL=ContextMenuContent.styles.js.map