@procore/core-react/dist/BadgePill/BadgePill.styles.js

React library of Procore Design Guidelines

import styled from 'styled-components';
import { getTypographyIntent } from '../Typography';
import { colors } from '../_styles/colors';
export var StyledBadgeContainer = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledBadgeContainer",
  componentId: "core-12_44_0__sc-s2n9gd-0"
})(["display:inline-flex;position:relative;"]);
export var StyledBadgeContent = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledBadgeContent",
  componentId: "core-12_44_0__sc-s2n9gd-1"
})(["position:relative;", " ", " pointer-events:none;user-select:none;"], function (_ref) {
  var $overlapping = _ref.$overlapping,
    _ref$$xOffset = _ref.$xOffset,
    $xOffset = _ref$$xOffset === void 0 ? 0 : _ref$$xOffset,
    _ref$$yOffset = _ref.$yOffset,
    $yOffset = _ref$$yOffset === void 0 ? 0 : _ref$$yOffset;
  return $overlapping && "\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 1;\n    transform: translate(\n      calc(50% + ".concat($xOffset, "px),\n      calc(-50% + ").concat($yOffset * -1, "px)\n    );\n  ");
}, function (props) {
  return props.$hidden ? 'visibility: hidden;' : '';
});
export var StyledBadgeDotIndicator = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledBadgeDotIndicator",
  componentId: "core-12_44_0__sc-s2n9gd-2"
})(["width:6px;height:6px;border-radius:50%;background-color:", ";"], colors.orange50);
var oneDigitStyles = "\n  border-radius: 50%;\n  padding: 2px;\n  min-width: 21.5px;\n  min-height: 21.5px;\n";
var multiDigitStyles = "\n  border-radius: 10px;\n  padding: 2px 8px;\n";
export var StyledBadgeCounter = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledBadgeCounter",
  componentId: "core-12_44_0__sc-s2n9gd-3"
})(["display:inline-flex;justify-content:center;align-items:center;color:", ";background-color:", ";", " ", ""], colors.white, colors.orange50, getTypographyIntent('small'), function (props) {
  return props.$oneDigit ? oneDigitStyles : multiDigitStyles;
});
//# sourceMappingURL=BadgePill.styles.js.map