@chayns-components/core/lib/cjs/components/accordion/Accordion.styles.js

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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledMotionAccordion = void 0;
var _react = require("motion/react");
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 StyledMotionAccordion = exports.StyledMotionAccordion = (0, _styledComponents.default)(_react.motion.div)`
    ${({
  $isOpen,
  $isWrapped,
  $shouldForceBackground,
  $shouldHideBackground,
  theme
}) => ($isOpen || $shouldForceBackground) && !$isWrapped && !$shouldHideBackground && (0, _styledComponents.css)`
            background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});
            border-radius: ${theme.cardBorderRadius}px;
            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, ${theme.cardShadow});
        `}

    ${({
  theme
}) => theme.accordionLines && (0, _styledComponents.css)`
            border-bottom: 1px solid transparent;
        `}

    margin-bottom: ${({
  $isOpen,
  $isWrapped
}) => $isOpen && !$isWrapped ? '30px' : '0px'};
    transition:
        background-color 0.3s ease,
        border-bottom-color 0.3s ease,
        border-radius 0.3s ease,
        box-shadow 0.3s ease,
        margin-bottom 0.3s ease;
    will-change: unset !important;

    margin-top: 10px;

    ${({
  $isOpen,
  $isWrapped,
  $shouldForceBackground,
  $shouldForceBottomLine,
  $shouldShowLines,
  $shouldHideBottomLine,
  theme,
  $bottomBorderColor
}) => {
  if ($bottomBorderColor && $shouldForceBottomLine) {
    return (0, _styledComponents.css)`
                border-bottom-color: ${$bottomBorderColor};
            `;
  }
  if ($shouldForceBackground || $shouldHideBottomLine) return undefined;
  const shouldShowBottomBorder = theme.accordionLines && $shouldShowLines && ($isWrapped || !$isOpen);
  if ($bottomBorderColor && shouldShowBottomBorder) return (0, _styledComponents.css)`
                border-bottom-color: ${$bottomBorderColor};
            `;
  if (shouldShowBottomBorder) {
    return (0, _styledComponents.css)`
                border-bottom-color: rgba(${theme['headline-rgb']}, 1);
            `;
  }
  return undefined;
}}
    ${({
  $isParentWrapped
}) => $isParentWrapped && (0, _styledComponents.css)`
            padding-left: 17px;
        `}
    ${({
  $isWrapped
}) => !$isWrapped ? (0, _styledComponents.css)`
                  margin-top: 5px;
              ` : (0, _styledComponents.css)`
                  margin: 0;
              `}
    ${({
  $isWrapped,
  $shouldHideBackground,
  theme,
  $shouldEnableKeyboardHighlighting
}) => !$isWrapped && !$shouldHideBackground && (0, _styledComponents.css)`
            &:hover {
                background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});
            }
            ${!$shouldEnableKeyboardHighlighting ? (0, _styledComponents.css)`
                      &:focus-visible {
                          background-color: rgba(
                              ${theme['100-rgb']},
                              ${theme.cardBackgroundOpacity}
                          );
                      }
                  ` : null}
        `};

    ${({
  $shouldEnableKeyboardHighlighting,
  $shouldShowKeyboardHighlighting,
  $shouldHideBackground
}) => $shouldEnableKeyboardHighlighting && $shouldShowKeyboardHighlighting && !$shouldHideBackground && (0, _styledComponents.css)`
            &:focus-visible {
                transition: none;
                ${_keyboardFocusHighlighting.keyboardFocusHighlightingRingCss};
            }
        `};
`;
//# sourceMappingURL=Accordion.styles.js.map