@procore/core-react/dist/FileSelect/SourceItem/SourceItem.styles.js

React library of Procore Design Guidelines

import styled, { css } from 'styled-components';
import { getTypographyIntent } from '../../Typography/Typography.styles';
import { colors } from '../../_styles/colors';
import { getEllipsis, getFocus } from '../../_styles/mixins';
import { spacing } from '../../_styles/spacing';
var sourceItemHeight = 48;
var sourceItemPadding = spacing.xl;
var focused = /*#__PURE__*/css(["", " padding:0 ", "px 0 ", "px;"], getFocus(), sourceItemPadding - 1, sourceItemPadding - 1);
export var StyledSourceItem = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledSourceItem",
  componentId: "core-12_44_0__sc-plcozv-0"
})(["position:relative;display:flex;align-items:center;padding:0 ", "px 0 ", "px;color:", ";", " cursor:pointer;height:", "px;&:before{content:'';position:absolute;top:0;left:0;display:block;width:4px;height:100%;background-color:", ";transform:scaleX(0);transform-origin:center left;transition:transform 200ms ease-out;z-index:1;}", " ", " ", " ", " ", " &:focus{", "}"], sourceItemPadding, sourceItemPadding, colors.gray45, getTypographyIntent('body'), sourceItemHeight, colors.blue45, function (_ref) {
  var selected = _ref.selected;
  return selected && "\n    font-weight: 700;\n    background-color: ".concat(colors.blue96, ";\n    color: ").concat(colors.blue45, ";\n\n    ").concat(StyledIcon, " {\n      color: ").concat(colors.blue50, ";\n    }\n\n    &:before {\n      transform: scaleX(1);\n    }\n  ");
}, function (_ref2) {
  var error = _ref2.error;
  return error && css(["color:", ";", "{color:", ";}"], colors.red50, StyledIcon, colors.red50);
}, function (_ref3) {
  var disabled = _ref3.disabled;
  return disabled && "\n    cursor: not-allowed;\n    color: ".concat(colors.gray70, ";\n    ").concat(StyledIcon, " {\n      color: ").concat(colors.gray85, ";\n    }\n  ");
}, function (_ref4) {
  var selected = _ref4.selected,
    disabled = _ref4.disabled,
    error = _ref4.error;
  return !selected && css(["&:hover{transition:background-color 150ms ease-out 150ms,color 150ms ease-out;", " ", "}"], !disabled && css(["background-color:", ";"], colors.gray96), !disabled && !error && css(["color:", ";"], colors.gray15));
}, function (props) {
  return props.focused && focused;
}, focused);
export var StyledIcon = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledIcon",
  componentId: "core-12_44_0__sc-plcozv-1"
})(["display:flex;align-items:center;justify-content:center;flex-shrink:0;width:48px;height:48px;"]);
export var StyledLabel = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledLabel",
  componentId: "core-12_44_0__sc-plcozv-2"
})(["", ""], getEllipsis());
//# sourceMappingURL=SourceItem.styles.js.map