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

React library of Procore Design Guidelines

import styled, { css } from 'styled-components';
import { colors } from '../_styles/colors';
import { getGapOutlineFocus } from '../_styles/mixins';
var activeOverlayOpacity = 0.3;
var containerSize = {
  xl: 96,
  lg: 40,
  md: 32,
  sm: 24
};
var fontSize = {
  xl: 40,
  lg: 14,
  md: 14,
  sm: 12
};
var fontWeights = {
  xl: 700,
  lg: 600,
  md: 600,
  sm: 600
};
var iconSize = {
  xl: 48,
  lg: 24,
  md: 16,
  sm: 16
};
export var StyledAvatarOverlay = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledAvatarOverlay",
  componentId: "core-12_44_0__sc-7q2ydl-0"
})(["width:100%;height:100%;position:absolute;top:0;left:0;border-radius:100%;opacity:0;"]);
export var StyledIconContainer = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledIconContainer",
  componentId: "core-12_44_0__sc-7q2ydl-1"
})(["display:inline-flex;"]);
export var StyledLabelContainer = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledLabelContainer",
  componentId: "core-12_44_0__sc-7q2ydl-2"
})(["text-transform:uppercase;"]);
export var StyledPortraitContainer = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledPortraitContainer",
  componentId: "core-12_44_0__sc-7q2ydl-3"
})(["background-color:", ";background-position:center;background-repeat:no-repeat;background-size:cover;height:100%;width:100%;", ""], colors.white, function (_ref) {
  var $imageUrl = _ref.$imageUrl;
  return css(["background-image:url(", ");"], $imageUrl);
});
export var StyledAvatarContainer = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledAvatarContainer",
  componentId: "core-12_44_0__sc-7q2ydl-4"
})(["display:inline-flex;justify-content:center;align-items:center;border-radius:100%;overflow:hidden;position:relative;cursor:default;color:", ";background-color:", ";text-decoration:none;a:has(> &){text-decoration:none;}&:focus{", "}a:focus:has(> &){", " border-radius:100%;}", " ", ";"], colors.white, colors.gray30, getGapOutlineFocus('outside'), getGapOutlineFocus('outside'), function (_ref2) {
  var _ref2$$size = _ref2.$size,
    $size = _ref2$$size === void 0 ? 'md' : _ref2$$size;
  return css(["font-size:", "px;font-weight:", ";height:", "px;width:", "px;min-height:", "px;min-width:", "px;", "{svg{height:", "px;width:", "px;}}"], fontSize[$size], fontWeights[$size], containerSize[$size], containerSize[$size], containerSize[$size], containerSize[$size], StyledIconContainer, iconSize[$size], iconSize[$size]);
}, function (_ref3) {
  var $disabled = _ref3.$disabled,
    $clickable = _ref3.$clickable;
  if (!$disabled && $clickable) {
    return css(["cursor:pointer;&:hover{", "{opacity:", ";}}", "{background-color:", ";}"], StyledAvatarOverlay, activeOverlayOpacity, StyledAvatarOverlay, colors.black);
  }
  if ($disabled && !$clickable) {
    return css(["background-color:", ";", "{background-color:", ";opacity:", ";}"], colors.gray85, StyledAvatarOverlay, colors.white, activeOverlayOpacity);
  }
  if ($disabled && $clickable) {
    return css(["cursor:pointer;background-color:", ";&:hover{", "{background-color:", ";opacity:", ";}}", "{background-color:", ";opacity:", ";}"], colors.gray85, StyledAvatarOverlay, colors.black, activeOverlayOpacity, StyledAvatarOverlay, colors.white, activeOverlayOpacity);
  }
});
//# sourceMappingURL=Avatar.styles.js.map