@procore/core-react
Version:
React library of Procore Design Guidelines
175 lines • 9.76 kB
JavaScript
import styled, { css } from 'styled-components';
import { getTypographyIntent, Typography, typographyWeights } from '../Typography';
import { borderRadius } from '../_styles/borderRadius';
import { colors } from '../_styles/colors';
import { getEllipsis, getFocus } from '../_styles/mixins';
import { spacing } from '../_styles/spacing';
import { DocumentIcon } from './ThumbnailDocumentIcon';
var thumbnailSizeSm = 40;
var thumbnailSizeLg = 104;
var labelHeight = 24;
var labelFontSize = 12;
var tickSize = 24;
var rowLayoutCaptionWidth = 288;
var multilineCaptionMaxHeight = spacing.lg * 2;
var captionBase = /*#__PURE__*/css(["color:", ";font-size:12px;line-height:16px;letter-spacing:0.4px;font-weight:500;", " ", " ", " ", ""], colors.gray15, function (_ref) {
var $layout = _ref.$layout;
return $layout === 'row' && css(["align-items:center;margin-left:", "px;width:", "px;"], spacing.sm, rowLayoutCaptionWidth);
}, function (_ref2) {
var $layout = _ref2.$layout;
return $layout === 'column' && css(["margin-top:", "px;width:", "px;"], spacing.xs / 2, thumbnailSizeLg);
}, function (_ref3) {
var $error = _ref3.$error;
return $error && css(["color:", ";"], colors.red50);
}, function (_ref4) {
var $disabled = _ref4.$disabled;
return $disabled && css(["color:", ";"], colors.gray70);
});
export var StyledMultilineCaption = /*#__PURE__*/styled.div.withConfig({
displayName: "StyledMultilineCaption",
componentId: "core-12_44_0__sc-195f70c-0"
})(["", ";display:flex;word-wrap:break-word;overflow-wrap:break-word;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:", "px;"], captionBase, multilineCaptionMaxHeight);
export var StyledCaptionText = /*#__PURE__*/styled.span.withConfig({
displayName: "StyledCaptionText",
componentId: "core-12_44_0__sc-195f70c-1"
})(["width:100%;"]);
export var StyledPlaceholderCaption = /*#__PURE__*/styled.div.withConfig({
displayName: "StyledPlaceholderCaption",
componentId: "core-12_44_0__sc-195f70c-2"
})(["", ""], captionBase);
export var StyledSingleLineCaption = /*#__PURE__*/styled.div.withConfig({
displayName: "StyledSingleLineCaption",
componentId: "core-12_44_0__sc-195f70c-3"
})(["display:flex;", ""], captionBase);
export var StyledSinglelineCaptionBody = /*#__PURE__*/styled.span.withConfig({
displayName: "StyledSinglelineCaptionBody",
componentId: "core-12_44_0__sc-195f70c-4"
})(["", ""], getEllipsis);
export var StyledSinglelineCaptionEnding = /*#__PURE__*/styled.span.withConfig({
displayName: "StyledSinglelineCaptionEnding",
componentId: "core-12_44_0__sc-195f70c-5"
})(["max-width:50%;white-space:nowrap;flex-shrink:0;"]);
export var StyledLabelText = /*#__PURE__*/styled(Typography).withConfig({
displayName: "StyledLabelText",
componentId: "core-12_44_0__sc-195f70c-6"
})(["", ""], getEllipsis());
export var StyledThumbnailFigCaption = /*#__PURE__*/styled.figcaption.withConfig({
displayName: "StyledThumbnailFigCaption",
componentId: "core-12_44_0__sc-195f70c-7"
})(["", " ", " color:", ";font-weight:", ";text-align:center;width:100%;position:absolute;bottom:0;right:0;left:0;opacity:0.85;height:", "px;padding:", "px ", "px;background-color:", ";"], getTypographyIntent('small'), getEllipsis(), function (_ref5) {
var _ref5$$color = _ref5.$color,
$color = _ref5$$color === void 0 ? 'gray15' : _ref5$$color;
return colors[$color];
}, typographyWeights.bold, labelHeight, spacing.sm / 2, spacing.sm, colors.white);
export var StyledLabel = /*#__PURE__*/styled.div.withConfig({
displayName: "StyledLabel",
componentId: "core-12_44_0__sc-195f70c-8"
})(["display:flex;justify-content:center;position:absolute;bottom:0;right:0;left:0;opacity:0.85;height:", "px;padding:", "px ", "px;font-size:", "px;background-color:", ";"], labelHeight, spacing.sm / 2, spacing.sm, labelFontSize, colors.white);
var thumbnailBase = /*#__PURE__*/css(["display:flex;justify-content:center;align-items:center;position:relative;overflow:hidden;border:1px solid ", ";border-radius:", "px;margin:0;", " ", " &:focus{", ";}", " ", " ", ""], colors.gray85, borderRadius.md, function (_ref6) {
var $clickable = _ref6.$clickable;
return $clickable && css(["cursor:pointer;"]);
}, function (_ref7) {
var $selected = _ref7.$selected;
return $selected && css(["", "{opacity:1;transform:scale(1);}"], StyledTickIcon);
}, getFocus(), function (_ref8) {
var $focused = _ref8.$focused;
return $focused && getFocus();
}, function (_ref9) {
var $disabled = _ref9.$disabled,
$clickable = _ref9.$clickable;
return $disabled && $clickable && css(["cursor:not-allowed;"]);
}, function (_ref0) {
var $size = _ref0.$size;
var sizeInPx = "".concat($size === 'lg' ? thumbnailSizeLg : thumbnailSizeSm, "px");
return css(["width:", ";height:", ";"], sizeInPx, sizeInPx);
});
export var StyledTickIcon = /*#__PURE__*/styled.svg.withConfig({
displayName: "StyledTickIcon",
componentId: "core-12_44_0__sc-195f70c-9"
})(["position:absolute;top:", "px;right:", "px;width:", "px;height:", "px;opacity:0;transform:scale(0.75);transition:transform 250ms ease-out,opacity 100ms ease-out;", " ", ""], spacing.sm, spacing.sm, tickSize, tickSize, function (_ref1) {
var $selected = _ref1.$selected;
return $selected && css(["opacity:1;transform:scale(1);"]);
}, function (_ref10) {
var $size = _ref10.$size;
return $size === 'sm' && css(["top:50%;left:50%;margin-top:", "px;margin-left:", "px;"], -tickSize / 2, -tickSize / 2);
});
export var StyledFileIcon = /*#__PURE__*/styled(DocumentIcon).withConfig({
displayName: "StyledFileIcon",
componentId: "core-12_44_0__sc-195f70c-10"
})(["width:36.5%;height:auto;"]);
export var StyledImageThumbnailPreview = /*#__PURE__*/styled.div.withConfig({
displayName: "StyledImageThumbnailPreview",
componentId: "core-12_44_0__sc-195f70c-11"
})(["width:100%;height:100%;background-size:cover;background-repeat:no-repeat;background-position:center;", ""], function (_ref11) {
var $bgImage = _ref11.$bgImage;
return css(["background-image:url(", ");"], $bgImage);
});
export var StyledImageThumbnailOverlay = /*#__PURE__*/styled.div.withConfig({
displayName: "StyledImageThumbnailOverlay",
componentId: "core-12_44_0__sc-195f70c-12"
})(["display:none;position:absolute;top:0;bottom:0;left:0;right:0;"]);
var blackOverlay = "\n background-color: ".concat(colors.black, ";\n opacity: 0.2;\n");
var whiteOverlay = "\n background-color: ".concat(colors.white, ";\n opacity: 0.5;\n");
export var StyledImageThumbnailImage = /*#__PURE__*/styled.img.withConfig({
displayName: "StyledImageThumbnailImage",
componentId: "core-12_44_0__sc-195f70c-13"
})([""]);
export var StyledImageThumbnail = /*#__PURE__*/styled.div.withConfig({
displayName: "StyledImageThumbnail",
componentId: "core-12_44_0__sc-195f70c-14"
})(["", ";flex-direction:column;", " ", " ", " ", " ", " ", ""], thumbnailBase, function (_ref12) {
var $disabled = _ref12.$disabled;
return $disabled && css(["&,&:hover{", "{display:block;", "}}", ",", ",", "{filter:saturate(0);}", "{filter:saturate(0);z-index:-1;}"], StyledImageThumbnailOverlay, whiteOverlay, StyledImageThumbnailPreview, StyledTickIcon, StyledImageThumbnailImage, StyledFileIcon);
}, function (_ref13) {
var $selected = _ref13.$selected,
$focused = _ref13.$focused,
$disabled = _ref13.$disabled;
return $focused && $disabled && css(["", "{z-index:", ";}"], StyledTickIcon, $selected ? 0 : 1);
}, function (_ref14) {
var $selected = _ref14.$selected,
$focused = _ref14.$focused;
return $selected && $focused && css(["", "{z-index:1;}"], StyledTickIcon);
}, function (_ref15) {
var $selected = _ref15.$selected,
$focused = _ref15.$focused,
$disabled = _ref15.$disabled;
return $selected && $focused && $disabled && css(["", "{z-index:0;}"], StyledTickIcon);
}, function (_ref16) {
var $focused = _ref16.$focused,
$disabled = _ref16.$disabled;
return $focused && !$disabled && css(["", "{display:block;}"], StyledImageThumbnailOverlay);
}, function (_ref17) {
var $clickable = _ref17.$clickable,
$disabled = _ref17.$disabled;
return $clickable && !$disabled && css(["&:hover{", "{display:block;", "}}"], StyledImageThumbnailOverlay, blackOverlay);
});
export var StyledThumbnailWrapper = /*#__PURE__*/styled.div.withConfig({
displayName: "StyledThumbnailWrapper",
componentId: "core-12_44_0__sc-195f70c-15"
})(["display:flex;", " ", ""], function (_ref18) {
var $size = _ref18.$size;
return $size === 'lg' ? "\n width: ".concat(thumbnailSizeLg, "px;\n ") : '';
}, function (_ref19) {
var $layout = _ref19.$layout;
var isRowLayout = $layout === 'row';
return isRowLayout ? css(["flex-direction:row;align-items:center;"]) : css(["flex-direction:column;align-items:flex-start;"]);
});
export var StyledPlaceholderThumbnail = /*#__PURE__*/styled.div.withConfig({
displayName: "StyledPlaceholderThumbnail",
componentId: "core-12_44_0__sc-195f70c-16"
})(["", " ", " ", " ", " ", ""], thumbnailBase, function (_ref20) {
var $clickable = _ref20.$clickable;
return $clickable && css(["&:hover{background-color:", ";}"], colors.gray96);
}, function (_ref21) {
var $selected = _ref21.$selected,
$size = _ref21.$size;
return $selected && $size === 'sm' && css(["", "{display:none;}"], StyledFileIcon);
}, function (_ref22) {
var $disabled = _ref22.$disabled;
return $disabled && css(["", ",", "{filter:saturate(0);opacity:0.5;}&:hover{background-color:inherit;}"], StyledFileIcon, StyledTickIcon);
}, function (_ref23) {
var $disabled = _ref23.$disabled,
$selected = _ref23.$selected;
return $disabled && !$selected && css(["", "{opacity:0;transform:scale(0.75);}"], StyledTickIcon);
});
//# sourceMappingURL=Thumbnail.styles.js.map