@catho/quantum
Version:
Catho react components
28 lines (27 loc) • 2.93 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = exports.REQUIRED_MARK_STYLE = exports.LABEL_STYLE = exports.INPUT_STYLE = exports.HOVER_STYLE = exports.HELPER_TEXT_STYLE = exports.ERROR_STYLE = exports.ERROR_MESSAGE_STYLE = exports.ERROR_HOVER_STYLE = exports.DISABLED_STYLE = exports.DEFAULT_STYLE = exports.AUTO_FILL_STYLE = void 0;
var _styledComponents = require("styled-components");
var _theme = require("./theme");
var DEFAULT_STYLE = exports.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']);
var HOVER_STYLE = exports.HOVER_STYLE = (0, _styledComponents.css)(["border-color:", ";box-shadow:0 2px 6px 0 ", ";"], _theme.colors.primary['700'], _theme.colors.primary['700']);
var ERROR_STYLE = exports.ERROR_STYLE = (0, _styledComponents.css)(["border-color:", ";"], _theme.colors.error['700']);
var ERROR_HOVER_STYLE = exports.ERROR_HOVER_STYLE = (0, _styledComponents.css)(["border-color:", ";box-shadow:0 2px 6px 0 ", ";"], _theme.colors.error['700'], _theme.colors.error['700']);
var DISABLED_STYLE = exports.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']);
var LABEL_STYLE = exports.LABEL_STYLE = (0, _styledComponents.css)(["margin-bottom:0;padding:8px 12px 0px;font-weight:bold;"]);
var HELPER_TEXT_STYLE = exports.HELPER_TEXT_STYLE = (0, _styledComponents.css)(["cursor:text;display:block;font-size:14px;font-style:italic;font-weight:600;padding:8px 12px 0px;"]);
var REQUIRED_MARK_STYLE = exports.REQUIRED_MARK_STYLE = (0, _styledComponents.css)(["color:", ";"], _theme.colors.error['700']);
var ERROR_MESSAGE_STYLE = exports.ERROR_MESSAGE_STYLE = (0, _styledComponents.css)(["padding:8px 12px 0px;"]);
var AUTO_FILL_STYLE = exports.AUTO_FILL_STYLE = (0, _styledComponents.css)(["box-shadow:0 0 0px 1000px ", " inset;"], _theme.colors.primary['100']);
var INPUT_STYLE = exports.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 ");
});
var _default = exports["default"] = INPUT_STYLE;