@procore/core-react
Version:
React library of Procore Design Guidelines
108 lines • 6.12 kB
JavaScript
import styled, { css } from 'styled-components';
import { StyledActions, StyledContent } from '../Content/Content.styles';
import { StyledForm as SForm, StyledFormRow as SFormRow } from '../Form/Form.styles';
import { borderRadius } from '../_styles/borderRadius';
import { colors } from '../_styles/colors';
import { mediaIE11Hack } from '../_styles/media';
import { getFocus } from '../_styles/mixins';
import { getShadow } from '../_styles/shadows';
import { spacing } from '../_styles/spacing';
import { isIE11 } from '../_utils/isIE11';
var getHover = function getHover() {
var $selected = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
return css(["cursor:pointer;&:hover,&.hover{background-color:", ";}"], $selected ? colors.blue94 : colors.gray96);
};
var getSelected = function getSelected() {
return css(["background-color:", ";"], colors.blue98);
};
var getDisabled = function getDisabled() {
return css(["cursor:not-allowed;"]);
};
var oneThirdTwoThirds = 'minmax(0, 1fr) minmax(0, 2fr)';
var getLandscapeTemplate = function getLandscapeTemplate() {
return css(["--core-tile-grid-template-columns:", ";grid-template-areas:'hero body' 'hero footer';grid-template-columns:var( --core-tile-grid-template-columns,", " );"], oneThirdTwoThirds, oneThirdTwoThirds);
};
var getPortraitTemplate = function getPortraitTemplate() {
return css(["grid-template-areas:'hero' 'body' 'footer';grid-template-columns:1fr;"]);
};
var getLayoutCSS = function getLayoutCSS(orientation) {
return css(["display:grid;", ";"], orientation === 'landscape' ? getLandscapeTemplate() : getPortraitTemplate());
};
var getTileStyles = function getTileStyles(_ref) {
var $orientation = _ref.$orientation,
_ref$$selected = _ref.$selected,
$selected = _ref$$selected === void 0 ? false : _ref$$selected,
_ref$$hoverable = _ref.$hoverable,
$hoverable = _ref$$hoverable === void 0 ? false : _ref$$hoverable,
_ref$$disabled = _ref.$disabled,
$disabled = _ref$$disabled === void 0 ? false : _ref$$disabled,
_ref$$focused = _ref.$focused,
$focused = _ref$$focused === void 0 ? false : _ref$$focused,
_ref$$layoutless = _ref.$layoutless,
$layoutless = _ref$$layoutless === void 0 ? false : _ref$$layoutless;
return css(["", " background-color:", ";border-radius:", "px;width:100%;", " &:focus,&.focus{", "}", " ", " ", " ", ""], !$layoutless && getLayoutCSS($orientation), colors.white, borderRadius.md, getShadow(1, 'bottom'), getFocus(), $focused ? getFocus() : '', $disabled ? getDisabled() : '', $selected ? getSelected() : '', $hoverable && !$disabled ? getHover($selected) : '');
};
export var StyledLinkTile = /*#__PURE__*/styled.a.withConfig({
displayName: "StyledLinkTile",
componentId: "core-12_44_0__sc-8q9p0n-0"
})(["", " text-decoration:none;color:inherit;"], function (_ref2) {
var $orientation = _ref2.$orientation;
return getTileStyles({
$orientation: $orientation,
$hoverable: true
});
});
export var StyledSelectableTile = /*#__PURE__*/styled.div.withConfig({
displayName: "StyledSelectableTile",
componentId: "core-12_44_0__sc-8q9p0n-1"
})(["", ""], function (_ref3) {
var $orientation = _ref3.$orientation,
$selected = _ref3.$selected,
$disabled = _ref3.$disabled,
$focused = _ref3.$focused,
$layoutless = _ref3.$layoutless;
return getTileStyles({
$orientation: $orientation,
$selected: $selected,
$disabled: $disabled,
$focused: $focused,
$hoverable: true,
$layoutless: $layoutless
});
});
export var StyledInteractableTile = /*#__PURE__*/styled.div.withConfig({
displayName: "StyledInteractableTile",
componentId: "core-12_44_0__sc-8q9p0n-2"
})(["", ""], function (_ref4) {
var $orientation = _ref4.$orientation;
return getTileStyles({
$orientation: $orientation
});
});
export var StyledFooter = /*#__PURE__*/styled.div.withConfig({
displayName: "StyledFooter",
componentId: "core-12_44_0__sc-8q9p0n-3"
})(["grid-area:footer;padding:", "px;> ", "{flex-wrap:wrap-reverse;}"], spacing.lg, StyledActions);
export var StyledTileContent = /*#__PURE__*/styled(StyledContent).withConfig({
displayName: "StyledTileContent",
componentId: "core-12_44_0__sc-8q9p0n-4"
})(["grid-column-start:hero-start;grid-column-end:body-end;padding:", "px;+ ", "{padding-top:0;}> ", ",> ", " > ", ",> ", "{grid-column-gap:", "px;}"], spacing.lg, StyledFooter, SFormRow, SForm, SFormRow, SFormRow, spacing.md);
export var StyledHeroMedia = /*#__PURE__*/styled.figure.withConfig({
displayName: "StyledHeroMedia",
componentId: "core-12_44_0__sc-8q9p0n-5"
})(["grid-area:hero;margin:0;position:relative;overflow:hidden;font-size:0;> *{font-size:initial;}+ ", "{grid-area:body;}> video{background-color:", ";}> img,> picture > img{object-fit:cover;}", ""], StyledTileContent, colors.black, function (_ref5) {
var $orientation = _ref5.$orientation;
return $orientation === 'landscape' && !isIE11() ? css(["border-top-left-radius:inherit;border-bottom-left-radius:inherit;> *,> picture > img{height:100%;width:100%;position:absolute;}@media ", "{> picture > img,> img{width:auto;left:50%;transform:translate(-50%,0);}}"], mediaIE11Hack) : css(["min-height:156px;max-height:567px;border-top-left-radius:inherit;border-top-right-radius:inherit;> *,> picture > img{min-height:inherit;max-height:inherit;height:auto;width:100%;}"]);
});
export var StyledHeroOverlay = /*#__PURE__*/styled.div.withConfig({
displayName: "StyledHeroOverlay",
componentId: "core-12_44_0__sc-8q9p0n-6"
})(["position:absolute;width:100%;height:100%;top:0;left:0;z-index:1;"]);
export var StyledHeroText = /*#__PURE__*/styled.div.withConfig({
displayName: "StyledHeroText",
componentId: "core-12_44_0__sc-8q9p0n-7"
})(["grid-area:hero;+ ", "{grid-area:body;}padding:", "px;border-radius:inherit;", ""], StyledTileContent, spacing.lg, function (_ref6) {
var $orientation = _ref6.$orientation;
return $orientation === 'landscape' ? css(["display:flex;flex-direction:column;justify-content:center;padding-right:0;"]) : css(["padding-bottom:0;"]);
});
//# sourceMappingURL=Tile.styles.js.map