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

React library of Procore Design Guidelines

import styled, { css } from 'styled-components';
import { Input } from '../Input/Input';
import { getTypographyIntent } from '../Typography/Typography.styles';
import { colors } from '../_styles/colors';
import { spacing } from '../_styles/spacing';
export var addonRootFontSize = '14px';
export var addonRootFontFamily = 'inherit';
export var addonRootPadding = spacing.sm;
export var inputDefaultXPadding = spacing.md;
var incrementerWidth = 24;
var inputBgColor = colors.white;
var inputBorder = "".concat(colors.gray50, " solid 1px");
var StyledRootAddon = /*#__PURE__*/styled.span.withConfig({
  displayName: "StyledRootAddon",
  componentId: "core-12_44_0__sc-1782nvg-0"
})(["display:inline-flex;align-items:center;height:100%;position:absolute;top:0;color:", ";", ";"], function (_ref) {
  var disabled = _ref.disabled;
  return disabled ? colors.gray70 : colors.gray45;
}, getTypographyIntent('body'));
export var StyledPrefix = /*#__PURE__*/styled(StyledRootAddon).withConfig({
  displayName: "StyledPrefix",
  componentId: "core-12_44_0__sc-1782nvg-1"
})(["left:", "px;"], spacing.md);
export var StyledSuffix = /*#__PURE__*/styled(StyledRootAddon).withConfig({
  displayName: "StyledSuffix",
  componentId: "core-12_44_0__sc-1782nvg-2"
})(["right:", "px;"], function (_ref2) {
  var $withIncrementer = _ref2.$withIncrementer;
  return $withIncrementer ? spacing.md + incrementerWidth : spacing.md;
});
export var StyledIncrementerWrapper = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledIncrementerWrapper",
  componentId: "core-12_44_0__sc-1782nvg-3"
})(["display:flex;flex-direction:column;position:absolute;top:1px;right:1px;height:100%;"]);
export var StyledIncrementerButton = /*#__PURE__*/styled.button.withConfig({
  displayName: "StyledIncrementerButton",
  componentId: "core-12_44_0__sc-1782nvg-4"
})(["display:inline-flex;justify-content:center;align-items:center;width:", "px;height:calc(50% - 1px);border:none;border-radius:0px;outline:none;background-color:", ";padding:0;cursor:pointer;&:first-child,&:last-child{border-left:", ";&:disabled{border-color:", ";background-color:", ";}}&:first-child{border-top-right-radius:2px;}&:last-child{border-top:", ";border-bottom-right-radius:2px;}svg{fill:", ";}&:hover{svg{fill:", ";}}&:disabled{cursor:default;svg{fill:", ";}}"], incrementerWidth, inputBgColor, inputBorder, colors.gray50, colors.gray94, inputBorder, colors.gray45, colors.gray10, colors.gray70);
export var StyledInput = /*#__PURE__*/styled(Input).withConfig({
  displayName: "StyledInput",
  componentId: "core-12_44_0__sc-1782nvg-5"
})([""]);
export var StyledWrapper = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledWrapper",
  componentId: "core-12_44_0__sc-1782nvg-6"
})(["position:relative;", ""], function (_ref3) {
  var $hasIncrementer = _ref3.$hasIncrementer;
  return $hasIncrementer && css(["", "{padding-right:", "px;}"], StyledInput, spacing.md + incrementerWidth);
});
//# sourceMappingURL=NumberInput.styles.js.map