@chayns-components/core/lib/cjs/components/content-card/ContentCard.styles.js

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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledContentCard = void 0;
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _contentCard = require("../../types/contentCard");
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 StyledContentCard = exports.StyledContentCard = _styledComponents.default.div`
    border-radius: ${({
  theme
}) => theme.cardBorderRadius}px;

    ${({
  theme,
  $shouldChangeColor
}) => !$shouldChangeColor && (0, _styledComponents.css)`
            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, ${theme.cardShadow});
        `};

    padding: 8px 12px;

    color: ${({
  theme
}) => theme.text};

    &:not(:last-child) {
        margin-bottom: 8px;
    }

    ${({
  $type,
  theme,
  $shouldChangeColor
}) => {
  if ($type === _contentCard.ContentCardType.Default && $shouldChangeColor) {
    return (0, _styledComponents.css)`
                background-color: rgba(${theme['000-rgb']}, ${theme.cardBackgroundOpacity});
            `;
  }
  switch ($type) {
    case _contentCard.ContentCardType.Error:
      return (0, _styledComponents.css)`
                    background-color: ${theme['red-4']};
                    border: 1px solid ${theme['red-1']};
                    color: #222;

                    --chayns-color--text: #222;
                    --chayns-color-rgb--text: rgb(34, 34, 34);

                    label {
                        color: #222 !important;
                    }
                `;
    case _contentCard.ContentCardType.Success:
      return (0, _styledComponents.css)`
                    background-color: ${theme['green-4']};
                    border: 1px solid ${theme['green-1']};
                    color: #222;

                    --chayns-color--text: #222;
                    --chayns-color-rgb--text: rgb(34, 34, 34);

                    label {
                        color: #222 !important;
                    }
                `;
    case _contentCard.ContentCardType.Warning:
      return (0, _styledComponents.css)`
                    background-color: ${theme['yellow-4']};
                    border: 1px solid ${theme['yellow-1']};
                    color: #222;

                    --chayns-color--text: #222;
                    --chayns-color-rgb--text: rgb(34, 34, 34);

                    label {
                        color: #222 !important;
                    }
                `;
    case _contentCard.ContentCardType.SiteColor:
      return (0, _styledComponents.css)`
                    background-color: ${theme['103']};
                    border: 1px solid ${theme['104']};
                    color: ${theme['text-rgb']};

                    --chayns-color--text: ${theme['text-rgb']};
                    --chayns-color-rgb--text: ${theme['text-rgb']};

                    label {
                        color: ${theme['text-rgb']} !important;
                    }
                `;
    default:
      return (0, _styledComponents.css)`
                    background-color: rgba(
                        ${theme['secondary-100-rgb']},
                        ${theme.cardBackgroundOpacity}
                    );
                `;
  }
}}
`;
//# sourceMappingURL=ContentCard.styles.js.map