@chayns-components/core/lib/esm/components/badge/Badge.styles.js

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

import styled, { css } from 'styled-components';
import { BadgeDesign } from './Badge.types';
export const StyledBadge = styled.div`
    ${({
  $backgroundColor,
  theme,
  $fontColor,
  $design,
  $cursor,
  $borderRadius,
  $size,
  $minWidth
}) => {
  switch ($design) {
    case BadgeDesign.BORDER:
      return css`
                    border-radius: 50px;
                    border: 1px solid ${theme.primary};
                    color: ${theme.primary};
                    font-size: ${$size?.font};
                    padding: ${$size?.padding};
                    user-select: none;
                    width: fit-content;
                `;
    case BadgeDesign.DEFAULT:
    default:
      return css`
                    background-color: ${$backgroundColor ?? theme['secondary-202']};
                    border-radius: ${$borderRadius};
                    color: ${$fontColor ?? theme.text};
                    display: inline-block;
                    font-size: 0.8rem;
                    min-width: ${$minWidth};
                    padding: 2px 6px;
                    line-height: 20px;
                    text-align: center;
                    cursor: ${$cursor};
                `;
  }
}}
`;
//# sourceMappingURL=Badge.styles.js.map