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

React library of Procore Design Guidelines

import { ChevronRight } from '@procore/core-icons';
import styled from 'styled-components';
import { Box } from '../Box/Box';
import { Typography } from '../Typography/Typography';
import { colors } from '../_styles/colors';
export var StyledFilenameCaption = /*#__PURE__*/styled(Typography).withConfig({
  displayName: "StyledFilenameCaption",
  componentId: "core-12_44_0__sc-2d45b5-0"
})(["display:flex;width:100%;"]);
export var StyledTree = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledTree",
  componentId: "core-12_44_0__sc-2d45b5-1"
})(["width:100%;height:100%;min-height:36px;outline:none;overflow:auto;"]);
export var StyledTreeRowContainer = /*#__PURE__*/styled(Typography).withConfig({
  shouldForwardProp: function shouldForwardProp(prop) {
    return !['isHighlighted', 'isSelectable', 'isSelected'].includes(prop);
  }
}).withConfig({
  displayName: "StyledTreeRowContainer",
  componentId: "core-12_44_0__sc-2d45b5-2"
})(["display:flex;align-items:center;height:36px;background:transparent;box-shadow:inset 4px 0px 0px transparent;cursor:default;outline:none;", " &:hover{background:", ";}", " ", ""], function (_ref) {
  var isSelectable = _ref.isSelectable,
    $isSelectable = _ref.$isSelectable;
  return isSelectable || $isSelectable ? 'cursor: pointer;' : "\n      ".concat(StyledFilenameCaption, ",\n      ").concat(StyledChevron, ",\n      ").concat(StyledIconContainer, " {\n        color: ").concat(colors.gray70, ";\n      }\n  ");
}, colors.gray98, function (_ref2) {
  var isHighlighted = _ref2.isHighlighted,
    $isHighlighted = _ref2.$isHighlighted;
  return isHighlighted || $isHighlighted ? "background: ".concat(colors.gray98, ";") : '';
}, function (_ref3) {
  var isSelected = _ref3.isSelected,
    $isSelected = _ref3.$isSelected,
    isHighlighted = _ref3.isHighlighted,
    $isHighlighted = _ref3.$isHighlighted;
  return (isSelected || $isSelected) && "\n      background: ".concat(colors.blue96, ";\n      box-shadow: inset 4px 0px 0px ").concat(colors.blue50, ";\n\n      ").concat(StyledFilenameCaption, " {\n        color: ").concat(colors.blue40, ";\n        font-weight: 600;\n      }\n\n      &:hover {\n        background-color: ").concat(colors.blue94, ";\n        ").concat(StyledFilenameCaption, " {\n          color: ").concat(colors.blue45, ";\n        }\n      }\n\n      ").concat((isHighlighted || $isHighlighted) && "\n          background-color: ".concat(colors.blue94, ";\n          ").concat(StyledFilenameCaption, " {\n            color: ").concat(colors.blue45, ";\n          }\n        "), "\n    ");
});
export var StyledTreeRowContent = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledTreeRowContent",
  componentId: "core-12_44_0__sc-2d45b5-3"
})(["display:flex;align-items:center;"]);
export var StyledTreeRowWrapper = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledTreeRowWrapper",
  componentId: "core-12_44_0__sc-2d45b5-4"
})(["outline:none;"]);
var StyledIconBase = /*#__PURE__*/styled(Box).withConfig({
  displayName: "StyledIconBase",
  componentId: "core-12_44_0__sc-2d45b5-5"
})(["display:flex;justify-content:center;align-items:center;width:24px;height:24px;min-width:24px;min-height:24px;"]);

/** @deprecated Use StyledChevronPlaceholder instead */
export var StyledChevronContainer = /*#__PURE__*/styled(StyledIconBase).withConfig({
  displayName: "StyledChevronContainer",
  componentId: "core-12_44_0__sc-2d45b5-6"
})([""]);
export var StyledChevronPlaceholder = /*#__PURE__*/styled(StyledIconBase).withConfig({
  displayName: "StyledChevronPlaceholder",
  componentId: "core-12_44_0__sc-2d45b5-7"
})([""]);
export var StyledIconContainer = /*#__PURE__*/styled(StyledIconBase).withConfig({
  displayName: "StyledIconContainer",
  componentId: "core-12_44_0__sc-2d45b5-8"
})(["color:", ";"], function (_ref4) {
  var $isSelected = _ref4.$isSelected;
  return $isSelected ? colors.blue45 : colors.gray40;
});

/** @deprecated TreeRowChevron now uses Button with inline styled icon */
export var StyledChevron = /*#__PURE__*/styled(ChevronRight).withConfig({
  displayName: "StyledChevron",
  componentId: "core-12_44_0__sc-2d45b5-9"
})(["transform:rotate(", "deg);transition:transform 150ms ease-out;"], function (_ref5) {
  var $isExpanded = _ref5.$isExpanded;
  return $isExpanded ? 90 : 0;
});
//# sourceMappingURL=Tree.styles.js.map