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

React library of Procore Design Guidelines

import styled, { css } from 'styled-components';
import { Avatar } from '../Avatar/Avatar';
import { Typography } from '../Typography/Typography';
import { typographyWeights } from '../Typography/Typography.styles';
import { colors } from '../_styles/colors';
import { getLineClamp } from '../_styles/mixins';
import { spacing } from '../_styles/spacing';
export var ContactItemAvatarWrapper = /*#__PURE__*/styled.div.withConfig({
  displayName: "ContactItemAvatarWrapper",
  componentId: "core-12_44_0__sc-1c4z9pn-0"
})(["display:inline-flex;align-self:flex-start;"]);
export var ContactItemAvatar = /*#__PURE__*/styled(Avatar).withConfig({
  displayName: "ContactItemAvatar",
  componentId: "core-12_44_0__sc-1c4z9pn-1"
})(["cursor:inherit;font-weight:", ";"], typographyWeights.bold);
export var ContactItemTextWrapper = /*#__PURE__*/styled.div.withConfig({
  displayName: "ContactItemTextWrapper",
  componentId: "core-12_44_0__sc-1c4z9pn-2"
})(["overflow:hidden;margin-left:", "px;"], spacing.sm);
export var ContactItemText = /*#__PURE__*/styled(Typography).withConfig({
  displayName: "ContactItemText",
  componentId: "core-12_44_0__sc-1c4z9pn-3"
})(["display:flex;", ""], getLineClamp());
export var ContactItemWrapper = /*#__PURE__*/styled.div.withConfig({
  displayName: "ContactItemWrapper",
  componentId: "core-12_44_0__sc-1c4z9pn-4"
})(["display:flex;flex-direction:row;align-items:center;padding:", "px ", "px ", "px ", "px;", " ", " ", ""], spacing.sm, spacing.lg, spacing.sm, spacing.sm, function (_ref) {
  var $disabled = _ref.$disabled,
    $clickable = _ref.$clickable;
  if ($clickable) {
    return $disabled ? css(["cursor:not-allowed;"]) : css(["cursor:pointer;&:hover,&.hovered{background-color:", ";}"], colors.gray96);
  }
}, function (_ref2) {
  var $selected = _ref2.$selected;
  return $selected && css(["", "{color:", ";}"], ContactItemText, colors.blue40);
}, function (_ref3) {
  var $disabled = _ref3.$disabled;
  return $disabled && css(["", "{color:", ";}"], ContactItemText, colors.gray70);
});
//# sourceMappingURL=ContactItem.styles.js.map