@activecollab/components/dist/esm/components/Badge/Styles.js

ActiveCollab Components

import styled, { css } from "styled-components";
import { FontStyle } from "../FontStyle";
const DEFAULT_DIMENSION = 8;
const LARGE_FONT_FROM_DIMENSION = 18;
const CIRCLE_PADDING_INLINE = 5;
const PILL_PADDING_INLINE = 10;
const DIGIT_INLINE_SIZE = 7;
const SMALL_CIRCLE_BELOW_DIMENSION = 16;
const dimensionOf = props => {
  var _props$dimension;
  return (_props$dimension = props.dimension) != null ? _props$dimension : DEFAULT_DIMENSION;
};
const paddingInlineOf = props => {
  if (!props.hasLabel) {
    return 0;
  }
  if (props.shape === "pill") {
    return PILL_PADDING_INLINE;
  }
  const dimension = dimensionOf(props);
  if (dimension >= SMALL_CIRCLE_BELOW_DIMENSION) {
    return CIRCLE_PADDING_INLINE;
  }

  // A small circle keeps a single digit inside its box only with less padding.
  return Math.max(0, Math.floor((dimension - DIGIT_INLINE_SIZE) / 2));
};
export const StyledBadge = styled.div.withConfig({
  displayName: "Styles__StyledBadge",
  componentId: "sc-6o8do5-0"
})(["", " align-items:center;background-color:", ";block-size:", ";border-radius:999px;box-sizing:border-box;color:", ";display:flex;font-size:", ";font-variant-numeric:tabular-nums;font-weight:700;inline-size:auto;justify-content:center;min-inline-size:", ";padding-inline:", ";pointer-events:none;position:absolute;z-index:1;", " ", " ", " ", " ", " ", ""], FontStyle, props => !props.backgroundColor ? "var(--color-primary)" : props.backgroundColor, props => dimensionOf(props) + "px", props => !props.textColor ? "var(--color-theme-100)" : props.textColor, props => dimensionOf(props) >= LARGE_FONT_FROM_DIMENSION ? "12px" : "10px", props => dimensionOf(props) + "px", props => paddingInlineOf(props) + "px", _ref => {
  let shadows = _ref.shadows;
  return shadows && css(["box-shadow:var(--shadow-tertiary);text-shadow:0 1px 2px rgba(0,0,0,0.25);"]);
}, _ref2 => {
  let isStandalone = _ref2.isStandalone;
  return isStandalone && css(["position:static;z-index:0;"]);
}, _ref3 => {
  let position = _ref3.position;
  return position === "top-left" && css(["inset-block-start:0;inset-inline-start:0;"]);
}, _ref4 => {
  let position = _ref4.position;
  return position === "top-right" && css(["inset-block-start:0;inset-inline-end:0;"]);
}, _ref5 => {
  let position = _ref5.position;
  return position === "bottom-right" && css(["inset-block-end:0;inset-inline-end:0;"]);
}, _ref6 => {
  let position = _ref6.position;
  return position === "bottom-left" && css(["inset-block-end:0;inset-inline-start:0;"]);
});
//# sourceMappingURL=Styles.js.map