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

React library of Procore Design Guidelines

import styled, { css } from 'styled-components';
import { getTypographyIntent } from '../Typography';
import { borderRadius } from '../_styles/borderRadius';
import { colors } from '../_styles/colors';
import { getFocus } from '../_styles/mixins';
import { spacing } from '../_styles/spacing';
export var dataQa = {
  focused: 'core-input-focused',
  hovered: 'core-input-hovered'
};
var inputHeight = 36;
export function getInputStyles(_ref) {
  var $error = _ref.$error,
    $variant = _ref.$variant;
  return css(["", " background-color:", ";border-color:", ";border-radius:", "px;border-style:solid;border-width:1px;color:", ";display:block;font-family:inherit;height:", "px;width:100%;&::placeholder{color:", ";}&::-moz-placeholder{color:", ";opacity:1;}", " &:focus,&[data-qa=", "]{", "}&:disabled{background-color:", ";border-color:", ";color:", ";-webkit-text-fill-color:", ";opacity:1;}", ""], getTypographyIntent('body'), colors.white, colors.gray50, borderRadius.md, colors.gray15, inputHeight, colors.gray45, colors.gray45, !$error && css(["&:hover,&[data-qa=", "]{border-color:", ";}"], dataQa.hovered, colors.gray20), dataQa.focused, getFocus(), colors.gray94, colors.gray50, colors.gray45, colors.gray45, ($error || $variant === 'error') && css(["border-color:", ";background-color:", ";border-color:var(--core-input-error-border-color,", ");background-color:var( --core-input-error-background-color,", " );"], colors.red50, colors.white, colors.red50, colors.white));
}
export var StyledInput = /*#__PURE__*/styled.input.withConfig({
  displayName: "StyledInput",
  componentId: "core-12_44_0__sc-12sjkxg-0"
})(["", " padding:0 ", "px;&::-ms-clear{display:none;}&[type='number']{-moz-appearance:textfield;&::-webkit-inner-spin-button,&::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}}"], getInputStyles, spacing.md);
//# sourceMappingURL=Input.styles.js.map