@age/quantum/shared/inputStyle.js

Catho react components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.AUTO_FILL_STYLE = exports.ERROR_MESSAGE_STYLE = exports.REQUIRED_MARK_STYLE = exports.HELPER_TEXT_STYLE = exports.LABEL_STYLE = exports.DISABLED_STYLE = exports.ERROR_HOVER_STYLE = exports.ERROR_STYLE = exports.HOVER_STYLE = exports.DEFAULT_STYLE = void 0;

var _styledComponents = require("styled-components");

var _theme = require("./theme");

var DEFAULT_STYLE = (0, _styledComponents.css)(["background-color:", ";border-radius:4px;border:1.5px solid ", ";box-sizing:border-box;color:", ";font-size:initial;height:44px;min-height:44px;letter-spacing:0.2px;outline:none;padding:10px 12px;transition:all 0.2s ease-in-out;width:100%;"], _theme.colors.neutral[0], _theme.colors.neutral['500'], _theme.colors.neutral['700']);
exports.DEFAULT_STYLE = DEFAULT_STYLE;
var HOVER_STYLE = (0, _styledComponents.css)(["border-color:", ";box-shadow:0 2px 6px 0 ", ";"], _theme.colors.primary['700'], _theme.colors.primary['700']);
exports.HOVER_STYLE = HOVER_STYLE;
var ERROR_STYLE = (0, _styledComponents.css)(["border-color:", ";"], _theme.colors.error['700']);
exports.ERROR_STYLE = ERROR_STYLE;
var ERROR_HOVER_STYLE = (0, _styledComponents.css)(["border-color:", ";box-shadow:0 2px 6px 0 ", ";"], _theme.colors.error['700'], _theme.colors.error['700']);
exports.ERROR_HOVER_STYLE = ERROR_HOVER_STYLE;
var DISABLED_STYLE = (0, _styledComponents.css)(["background-color:", ";border-color:", ";box-shadow:none;color:", ";cursor:not-allowed;"], _theme.colors.neutral['100'], _theme.colors.neutral['500'], _theme.colors.neutral['500']);
exports.DISABLED_STYLE = DISABLED_STYLE;
var LABEL_STYLE = (0, _styledComponents.css)(["margin-bottom:0;padding:8px 12px 0px;font-weight:bold;"]);
exports.LABEL_STYLE = LABEL_STYLE;
var HELPER_TEXT_STYLE = (0, _styledComponents.css)(["cursor:text;display:block;font-size:14px;font-style:italic;font-weight:600;padding:8px 12px 0px;"]);
exports.HELPER_TEXT_STYLE = HELPER_TEXT_STYLE;
var REQUIRED_MARK_STYLE = (0, _styledComponents.css)(["color:", ";"], _theme.colors.error['700']);
exports.REQUIRED_MARK_STYLE = REQUIRED_MARK_STYLE;
var ERROR_MESSAGE_STYLE = (0, _styledComponents.css)(["padding:8px 12px 0px;"]);
exports.ERROR_MESSAGE_STYLE = ERROR_MESSAGE_STYLE;
var AUTO_FILL_STYLE = (0, _styledComponents.css)(["box-shadow:0 0 0px 1000px ", " inset;"], _theme.colors.primary['100']);
exports.AUTO_FILL_STYLE = AUTO_FILL_STYLE;
var INPUT_STYLE = (0, _styledComponents.css)(["", ":hover,:focus{", "}", ";&[disabled]{", "}", ""], DEFAULT_STYLE, HOVER_STYLE, function (_ref) {
  var error = _ref.error;
  return error && (0, _styledComponents.css)(["", ":hover,:focus{", "}"], ERROR_STYLE, ERROR_HOVER_STYLE);
}, DISABLED_STYLE, function (_ref2) {
  var placeholder = _ref2.placeholder,
      defaultValue = _ref2.defaultValue,
      value = _ref2.value;
  return placeholder && !defaultValue && !value && "\n    color: ".concat(_theme.colors.neutral['500'], ";\n  ");
});
exports.default = INPUT_STYLE;