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

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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledContextMenu = void 0;
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _keyboardFocusHighlighting = require("../../utils/keyboardFocusHighlighting.styles");
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 StyledContextMenu = exports.StyledContextMenu = _styledComponents.default.span`
    align-items: center;
    cursor: pointer;
    display: flex;
    position: relative;

    ${({
  $isActive,
  $shouldUseDefaultTriggerStyles,
  theme
}) => $shouldUseDefaultTriggerStyles ? (0, _styledComponents.css)`
                  background-color: ${$isActive ? theme['201'] : 'transparent'};
                  border-radius: 3px;
                  padding: 6px;
                  transition: background-color 0.3s ease;
              ` : (0, _styledComponents.css)`
                  background-color: transparent;
                  border-radius: inherit;
                  padding: 0;

                  > * {
                      width: 100%;
                  }
              `}

    ${({
  $shouldAddHoverEffect,
  theme
}) => $shouldAddHoverEffect && (0, _styledComponents.css)`
            &:hover {
                background-color: ${theme['201']};
            }
        `}

    ${({
  $shouldShowWrapperKeyboardHighlighting,
  $shouldUseDefaultTriggerStyles
}) => $shouldShowWrapperKeyboardHighlighting && ($shouldUseDefaultTriggerStyles ? (0, _styledComponents.css)`
                  &:focus-visible {
                      outline: none;
                      box-shadow: none;
                  }

                  &:focus-visible > .beta-chayns-icon {
                      position: relative;
                      color: inherit;
                  }

                  &:focus-visible > .beta-chayns-icon::after {
                      ${_keyboardFocusHighlighting.keyboardFocusHighlightingCircleRingCss};
                      content: '';
                      position: absolute;
                      top: 50%;
                      left: 50%;
                      width: calc(100% + 8px);
                      height: calc(100% + 8px);
                      transform: translate(-50%, -50%);
                      pointer-events: none;
                  }
              ` : (0, _styledComponents.css)`
                  &:focus-visible {
                      outline: none;
                      box-shadow: none;
                  }

                  &:focus-visible > * {
                      ${_keyboardFocusHighlighting.keyboardFocusHighlightingRingCss}
                  }
              `)}
`;
//# sourceMappingURL=ContextMenu.styles.js.map