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

React library of Procore Design Guidelines

import { Calendar } from '@procore/core-icons/dist';
import styled, { css } from 'styled-components';
import { dataQa } from '../Input/Input.styles';
import { getTypographyIntent } from '../Typography';
import { colors } from '../_styles/colors';
import { getFocus } from '../_styles/mixins';
import { spacing } from '../_styles/spacing';
var inputHeight = 36; // TODO one-off

var disabledCss = /*#__PURE__*/css(["background-color:", ";color:", ";border-width:1px;border-style:solid;border-color:", ";pointer-events:none;svg{color:", ";}"], colors.gray94, colors.gray45, colors.gray50, colors.gray45);
export var StyledCalendar = /*#__PURE__*/styled(Calendar).withConfig({
  displayName: "StyledCalendar",
  componentId: "core-12_44_0__sc-w10btf-0"
})(["color:", ";"], colors.gray45);
export var StyledDateSegmentsContainer = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledDateSegmentsContainer",
  componentId: "core-12_44_0__sc-w10btf-1"
})(["min-width:104px;display:flex;gap:", "px;"], spacing.xs);
export var StyledDateInputSegment = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledDateInputSegment",
  componentId: "core-12_44_0__sc-w10btf-2"
})(["", " outline:none;text-align:center;&:focus{background-color:", ";}&::selection{background-color:transparent;}&[data-placeholder='true']{color:", ";}"], getTypographyIntent('body'), colors.blue96, function (_ref) {
  var $disabled = _ref.$disabled;
  return $disabled ? colors.gray70 : colors.gray45;
});
export var StyledDateInputDelimiter = /*#__PURE__*/styled.span.attrs(function (props) {
  return {
    'data-qa-table-visible': props.$visible
  };
}).withConfig({
  displayName: "StyledDateInputDelimiter",
  componentId: "core-12_44_0__sc-w10btf-3"
})(["", " user-select:none;"], getTypographyIntent('body'));
export var StyledDateInputIconContainer = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledDateInputIconContainer",
  componentId: "core-12_44_0__sc-w10btf-4"
})(["display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;margin:0 0 0 ", "px;height:24px;width:24px;"], spacing.xs);
export var StyledDateInput = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledDateInput",
  componentId: "core-12_44_0__sc-w10btf-5"
})(["align-items:center;border-color:", ";border-radius:4px;border-style:solid;border-width:1px;display:inline-flex;flex-direction:row;height:", "px;justify-content:center;padding:0 ", "px 0 ", "px;&::placeholder{color:", ";}", " &:focus-within,&[data-qa=", "]{", ";}&:disabled{", "}", " ", ""], colors.gray50, inputHeight, spacing.xs, spacing.sm, colors.gray45, function (_ref2) {
  var $error = _ref2.$error;
  return !$error && css(["&:hover,&[data-qa=", "]{border-color:", ";}"], dataQa.hovered, colors.gray20);
}, dataQa.focused, getFocus(), disabledCss, function (_ref3) {
  var $disabled = _ref3.$disabled;
  return $disabled && disabledCss;
}, function (_ref4) {
  var $error = _ref4.$error;
  return $error && css(["border-color:", ";"], colors.red50);
});
//# sourceMappingURL=DateInput.styles.js.map