@chayns-components/core/lib/cjs/components/list/list-item/ListItem.styles.js

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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledListItemTooltip = exports.StyledListItem = 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 StyledListItem = exports.StyledListItem = _styledComponents.default.div`
    overflow: hidden;
    transition: background-color 0.3s ease;

    ${({
  $isInAccordion,
  $shouldHideIndicator
}) => $isInAccordion && (0, _styledComponents.css)`
            padding-left: ${$shouldHideIndicator ? '16px' : '8px'};
        `}

    ${({
  $isInAccordion,
  $isOpen,
  $shouldChangeColor,
  $shouldForceBackground,
  theme,
  $isInDialog,
  $isSelected
}) => (!$isInAccordion && $isOpen || $shouldForceBackground || $isSelected) && (0, _styledComponents.css)`
            background-color: rgba(
                ${$shouldChangeColor || $isInDialog ? theme['102-rgb'] : theme['100-rgb']},
                ${theme.cardBackgroundOpacity}
            );
        `}

    ${({
  $backgroundColor,
  $isInAccordion,
  $isOpen,
  $shouldForceBackground
}) => $backgroundColor && (!$isInAccordion && $isOpen || $shouldForceBackground) && (0, _styledComponents.css)`
            background-color: ${$backgroundColor} !important;
        `}

    ${({
  $isClickable,
  $isInAccordion,
  $shouldChangeColor,
  $isInDialog,
  theme
}) => $isClickable && !$isInAccordion && (0, _styledComponents.css)`
            &&:hover {
                background-color: rgba(
                    ${$shouldChangeColor || $isInDialog ? theme['102-rgb'] : theme['100-rgb']},
                    ${theme.cardBackgroundOpacity}
                );
            }
        `}

    ${({
  $isInAccordion,
  $isOpen,
  $isWrapped,
  $shouldHideBottomLine,
  $shouldForceBottomLine,
  $shouldShowSeparatorBelow,
  theme
}) => {
  if ($shouldShowSeparatorBelow || (!$isOpen || $isWrapped || $isInAccordion) && theme.accordionLines && !$shouldHideBottomLine) {
    if ($shouldForceBottomLine) {
      return (0, _styledComponents.css)`
                    border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid
                        rgba(${theme['headline-rgb']}, 1);
                `;
    }
    return (0, _styledComponents.css)`
                &&:not(:last-child) {
                    border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid
                        rgba(${theme['headline-rgb']}, 1);
                }
            `;
  }
  return undefined;
}}

    ${({
  $isWrapped
}) => $isWrapped && (0, _styledComponents.css)`
            padding-left: 26px;
        `}
    
        &[data-should-show-keyboard-highlighting='true']:focus-visible {
        transition: none;
        ${_keyboardFocusHighlighting.keyboardFocusHighlightingRingCss};
        overflow: visible;
    }
`;
const StyledListItemTooltip = exports.StyledListItemTooltip = _styledComponents.default.div`
    padding: 6px;
`;
//# sourceMappingURL=ListItem.styles.js.map