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

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

import styled, { css } from 'styled-components';
import { ContentCardType } from '../../types/contentCard';
export const StyledContentCard = styled.div`
    border-radius: ${_ref => {
  let {
    theme
  } = _ref;
  return theme.cardBorderRadius;
}}px;

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

    padding: 8px 12px;

    color: ${_ref3 => {
  let {
    theme
  } = _ref3;
  return theme.text;
}};

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

    ${_ref4 => {
  let {
    $type,
    theme,
    $shouldChangeColor
  } = _ref4;
  if ($type === ContentCardType.Default && $shouldChangeColor) {
    return css`
                background-color: rgba(${theme['000-rgb']}, ${theme.cardBackgroundOpacity});
            `;
  }
  switch ($type) {
    case ContentCardType.Error:
      return 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 ContentCardType.Success:
      return 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 ContentCardType.Warning:
      return 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 ContentCardType.SiteColor:
      return 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 css`
                    background-color: rgba(
                        ${theme['secondary-100-rgb']},
                        ${theme.cardBackgroundOpacity}
                    );
                `;
  }
}}
`;
//# sourceMappingURL=ContentCard.styles.js.map