@up-group-ui/react-controls
Version:
Up shared react controls
565 lines • 29.5 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.getStyles = exports.focusStyles = exports.inputStyles = exports.successStyles = exports.statusStyles = exports.defaultStyles = exports.HeightLarge = void 0;
var tslib_1 = require("tslib");
var typestyle_1 = require("typestyle");
var theming_1 = (0, tslib_1.__importDefault)(require("../../../../../Common/theming"));
var classnames_1 = (0, tslib_1.__importDefault)(require("classnames"));
var utils_1 = require("../../../../../Common/utils");
var utils_2 = require("../../../../../Common/theming/utils");
var HeightLarge = function (props) {
return {
height: '40px',
lineHeight: '40px',
fontSize: '16px',
padding: props.theme.inputBorderLess ? '6px 0' : '0 15px',
};
};
exports.HeightLarge = HeightLarge;
var defaultStyles = function (props) {
var styles = {
outline: 'none',
position: 'relative',
borderWidth: props.theme.inputBorderLess ? '0 0 1px 0' : '1px',
borderRadius: props.theme.inputBorderLess ? 0 : props.theme.borderRadius,
borderStyle: 'solid',
boxShadow: props.theme.inputBorderLess
? 'inherit'
: '0 0 0 0 rgba(19, 124, 189, 0), 0 0 0 0 rgba(19, 124, 189, 0), inset 0 0 0 1px rgba(16, 22, 26, 0.15), inset 0 1px 1px rgba(16, 22, 26, 0.2)',
background: 'transparent',
padding: props.theme.inputBorderLess ? '6px 0px' : '0px 10px',
height: props.theme.inputBorderLess ? 'inherit' : '36px',
lineHeight: props.theme.inputBorderLess ? 'inherit' : '30px',
verticalAlign: 'middle',
fontSize: '14px',
fontWeight: 400,
transition: props.theme.inputBorderLess ? 'none' : 'box-shadow 100ms cubic-bezier(0.4, 1, 0.75, 0.9)',
'-webkit-appearance': 'none',
'-moz-appearance': 'none',
appearance: 'none',
};
return styles;
};
exports.defaultStyles = defaultStyles;
var sizeMap = {
xsmall: '40px',
small: '100px',
medium: '150px',
large: '250px',
xlarge: '350px',
xxlarge: '500px',
fill: '100%',
};
var statusStyles = function (props) {
if (!props.hasError && props.showSuccess && !(0, utils_1.isEmpty)(props.value) && props.type !== 'search') {
return (0, typestyle_1.style)({
$nest: {
'& .up-input-group .up-input': {
borderColor: props.theme ? props.theme.colorMap.success : theming_1.default.colorMap.success,
},
'& .up-input-group .up-icon-wrapper.colored svg, & .up-input-group .up-icon-wrapper.colored svg path, & .up-input-group .up-icon-wrapper.colored svg polygon, & .up-input-group .up-icon-wrapper.colored svg polyline': {
fill: props.theme ? props.theme.colorMap.success : theming_1.default.colorMap.success,
},
},
});
}
if (props.hasError && props.showError) {
return (0, typestyle_1.style)({
$nest: {
'& .up-input-group .up-input': {
color: props.theme ? props.theme.colorMap.danger : theming_1.default.colorMap.danger,
borderColor: props.theme ? props.theme.colorMap.danger : theming_1.default.colorMap.danger,
},
'& .up-input-group .up-icon-wrapper.colored svg, & .up-input-group .up-icon-wrapper.colored svg path, & .up-input-group .up-icon-wrapper.colored svg polygon, & .up-input-group .up-icon-wrapper .colored svg polyline': {
fill: props.theme ? props.theme.colorMap.danger : theming_1.default.colorMap.danger,
},
},
});
}
return null;
};
exports.statusStyles = statusStyles;
var successStyles = function (props) { };
exports.successStyles = successStyles;
var inputStyles = function (props) {
return {
marginTop: props.floatingLabel ? '14px' : '0px',
$nest: {
'& .up-input': (0, tslib_1.__assign)({}, (0, exports.defaultStyles)(props)),
'& .up-input-group label': {
fontSize: '14px',
position: 'absolute',
top: '-10px',
left: '0px',
color: props.theme.colorMap.gray6,
transformOrigin: 'top left',
transform: 'translate(0, 16px) scale(1)',
transition: 'all .1s ease-in-out',
cursor: 'text',
},
'& .up-input::-moz-placeholder,& .up-input:-ms-input-placeholder,& .up-input::placeholder,& .up-input::-webkit-input-placeholder': {
opacity: 0.5,
color: '#4e5b59',
},
'& .up-input:focus,& .up-input:hover': {
borderColor: props.theme.colorMap.primary,
boxShadow: props.theme.inputBorderLess
? 'inherit'
: '0 0 0 1px #137cbd, 0 0 0 3px rgba(19, 124, 189, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.2)',
},
'& .up-input-group:hover svg, & .up-input-group:hover svg path,& .up-input-group:hover svg polygon,& .up-input-group:hover svg polyline': {
fill: props.theme.colorMap.primary,
},
'.up-input.up-round': {
borderRadius: '30px',
'-moz-box-sizing': 'border-box',
boxSizing: 'border-box',
paddingLeft: '10px',
},
'.up-input[readonly] ': {
border: 'unset',
},
'.up-input[type="search"]': {
backgroundColor: '#F2F2F2',
borderBottom: 'unset',
borderRadius: '25px',
height: '44px',
paddingRight: '45px !important',
paddingLeft: '45px !important',
fontWeight: 'bold',
color: props.theme.colorMap.grey1,
},
'.up-input:disabled, .up-input.up-disabled': {
boxShadow: 'none',
background: 'rgba(206, 217, 224, 0.5)',
cursor: 'not-allowed',
color: 'rgba(92, 112, 128, 0.5)',
resize: 'none',
},
'.up-dark .up-input': {
boxShadow: '0 0 0 0 rgba(19, 124, 189, 0), 0 0 0 0 rgba(19, 124, 189, 0), 0 0 0 0 rgba(19, 124, 189, 0), inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4)',
background: 'rgba(16, 22, 26, 0.3)',
color: '#f5f8fa',
},
'.up-dark .up-input::-webkit-input-placeholder': {
color: 'rgba(191, 204, 214, 0.5)',
},
'.up-dark .up-input::-moz-placeholder': {
color: 'rgba(191, 204, 214, 0.5)',
},
'.up-dark .up-input:-ms-input-placeholder': {
color: 'rgba(191, 204, 214, 0.5)',
},
'.up-dark .up-input::placeholder': {
color: 'rgba(191, 204, 214, 0.5)',
},
'& .up-dark .up-input:focus': {
boxShadow: props.theme.inputBorderLess
? 'inherit'
: '0 0 0 1px #137cbd, 0 0 0 1px #137cbd, 0 0 0 3px rgba(19, 124, 189, 0.3), inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4)',
},
'& .up-dark .up-input[readonly]': {
boxShadow: props.theme.inputBorderLess ? 'inherit' : 'inset 0 0 0 1px rgba(16, 22, 26, 0.4)',
},
'.up-dark .up-input:disabled, .up-dark .up-input.up-disabled': {
boxShadow: 'none',
background: 'rgba(57, 75, 89, 0.5)',
color: 'rgba(191, 204, 214, 0.5)',
},
'& .up-input.up-intent-primary': {
boxShadow: props.theme.inputBorderLess
? 'inherit'
: '0 0 0 0 rgba(19, 124, 189, 0), 0 0 0 0 rgba(19, 124, 189, 0), inset 0 0 0 1px #137cbd, inset 0 0 0 1px rgba(16, 22, 26, 0.15), inset 0 1px 1px rgba(16, 22, 26, 0.2)',
},
'& .up-input.up-intent-primary:focus': {
boxShadow: props.theme.inputBorderLess
? 'inherit'
: '0 0 0 1px #137cbd, 0 0 0 3px rgba(19, 124, 189, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.2)',
},
'& .up-input.up-intent-primary[readonly]': {
boxShadow: props.theme.inputBorderLess ? 'inherit' : 'inset 0 0 0 1px #137cbd',
},
'.up-input.up-intent-primary:disabled, .up-input.up-intent-primary.up-disabled': {
boxShadow: 'none',
},
'& .up-dark .up-input.up-intent-primary': {
boxShadow: props.theme.inputBorderLess
? 'inherit'
: '0 0 0 0 rgba(19, 124, 189, 0), 0 0 0 0 rgba(19, 124, 189, 0), 0 0 0 0 rgba(19, 124, 189, 0), inset 0 0 0 1px #137cbd, inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4)',
},
'& .up-dark .up-input.up-intent-primary:focus': {
boxShadow: props.theme.inputBorderLess
? 'inherit'
: '0 0 0 1px #137cbd, 0 0 0 1px #137cbd, 0 0 0 3px rgba(19, 124, 189, 0.3), inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4)',
},
'& .up-dark .up-input.up-intent-primary[readonly]': {
boxShadow: props.theme.inputBorderLess ? 'inherit' : 'inset 0 0 0 1px #137cbd',
},
'.up-dark .up-input.up-intent-primary:disabled, .up-dark .up-input.up-intent-primary.up-disabled': {
boxShadow: 'none',
},
'& .up-input.up-intent-success': {
boxShadow: props.theme.inputBorderLess
? 'inherit'
: '0 0 0 0 rgba(15, 153, 96, 0), 0 0 0 0 rgba(15, 153, 96, 0), inset 0 0 0 1px #0f9960, inset 0 0 0 1px rgba(16, 22, 26, 0.15), inset 0 1px 1px rgba(16, 22, 26, 0.2)',
},
'& .up-input.up-intent-success:focus': {
boxShadow: props.theme.inputBorderLess
? 'inherit'
: '0 0 0 1px #0f9960, 0 0 0 3px rgba(15, 153, 96, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.2)',
},
'& .up-input.up-intent-success[readonly]': {
boxShadow: props.theme.inputBorderLess ? 'inherit' : 'inset 0 0 0 1px #0f9960',
},
'.up-input.up-intent-success:disabled, .up-input.up-intent-success.up-disabled': {
boxShadow: 'none',
},
'& .up-dark .up-input.up-intent-success': {
boxShadow: props.theme.inputBorderLess
? 'inherit'
: '0 0 0 0 rgba(15, 153, 96, 0), 0 0 0 0 rgba(15, 153, 96, 0), 0 0 0 0 rgba(15, 153, 96, 0), inset 0 0 0 1px #0f9960, inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4)',
},
'& .up-dark .up-input.up-intent-success:focus': {
boxShadow: props.theme.inputBorderLess
? 'inherit'
: '0 0 0 1px #0f9960, 0 0 0 1px #0f9960, 0 0 0 3px rgba(15, 153, 96, 0.3), inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4)',
},
'& .up-dark .up-input.up-intent-success[readonly]': {
boxShadow: props.theme.inputBorderLess ? 'inherit' : 'inset 0 0 0 1px #0f9960',
},
'.up-dark .up-input.up-intent-success:disabled, .up-dark .up-input.up-intent-success.up-disabled': {
boxShadow: 'none',
},
'& .up-input.up-intent-warning': {
boxShadow: props.theme.inputBorderLess
? 'inherit'
: '0 0 0 0 rgba(217, 130, 43, 0), 0 0 0 0 rgba(217, 130, 43, 0), inset 0 0 0 1px #d9822b, inset 0 0 0 1px rgba(16, 22, 26, 0.15), inset 0 1px 1px rgba(16, 22, 26, 0.2)',
},
'& .up-input.up-intent-warning:focus': {
boxShadow: props.theme.inputBorderLess
? 'inherit'
: '0 0 0 1px #d9822b, 0 0 0 3px rgba(217, 130, 43, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.2)',
},
'& .up-input.up-intent-warning[readonly]': {
boxShadow: props.theme.inputBorderLess ? 'inherit' : 'inset 0 0 0 1px #d9822b',
},
'.up-input.up-intent-warning:disabled, .up-input.up-intent-warning.up-disabled': {
boxShadow: 'none',
},
'& .up-dark .up-input.up-intent-warning': {
boxShadow: props.theme.inputBorderLess
? 'inherit'
: '0 0 0 0 rgba(217, 130, 43, 0), 0 0 0 0 rgba(217, 130, 43, 0), 0 0 0 0 rgba(217, 130, 43, 0), inset 0 0 0 1px #d9822b, inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4)',
},
'& .up-dark .up-input.up-intent-warning:focus': {
boxShadow: props.theme.inputBorderLess
? 'inherit'
: '0 0 0 1px #d9822b, 0 0 0 1px #d9822b, 0 0 0 3px rgba(217, 130, 43, 0.3), inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4)',
},
'& .up-dark .up-input.up-intent-warning[readonly]': {
boxShadow: props.theme.inputBorderLess ? 'inherit' : 'inset 0 0 0 1px #d9822b',
},
'.up-dark .up-input.up-intent-warning:disabled, .up-dark .up-input.up-intent-warning.up-disabled': {
boxShadow: 'none',
},
'& .up-input.up-intent-danger': {
boxShadow: props.theme.inputBorderLess
? 'inherit'
: '0 0 0 0 rgba(219, 55, 55, 0), 0 0 0 0 rgba(219, 55, 55, 0), inset 0 0 0 1px #db3737, inset 0 0 0 1px rgba(16, 22, 26, 0.15), inset 0 1px 1px rgba(16, 22, 26, 0.2)',
},
'& .up-input.up-intent-danger:focus': {
boxShadow: props.theme.inputBorderLess
? 'inherit'
: '0 0 0 1px #db3737, 0 0 0 3px rgba(219, 55, 55, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.2)',
},
'& .up-input.up-intent-danger[readonly]': {
boxShadow: props.theme.inputBorderLess ? 'inherit' : 'inset 0 0 0 1px #db3737',
},
'.up-input.up-intent-danger:disabled, .up-input.up-intent-danger.up-disabled': {
boxShadow: 'none',
},
'& .up-dark .up-input.up-intent-danger': {
boxShadow: props.theme.inputBorderLess
? 'inherit'
: '0 0 0 0 rgba(219, 55, 55, 0), 0 0 0 0 rgba(219, 55, 55, 0), 0 0 0 0 rgba(219, 55, 55, 0), inset 0 0 0 1px #db3737, inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4)',
},
'& .up-dark .up-input.up-intent-danger:focus': {
boxShadow: props.theme.inputBorderLess
? 'inherit'
: '0 0 0 1px #db3737, 0 0 0 1px #db3737, 0 0 0 3px rgba(219, 55, 55, 0.3), inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4)',
},
'& .up-dark .up-input.up-intent-danger[readonly]': {
boxShadow: props.theme.inputBorderLess ? 'inherit' : 'inset 0 0 0 1px #db3737',
},
'.up-dark .up-input.up-intent-danger:disabled, .up-dark .up-input.up-intent-danger.up-disabled': {
boxShadow: 'none',
},
'.up-input::-ms-clear': {
display: 'none',
},
'.up-input-group': {
display: 'block',
position: 'relative',
},
'.up-input-group .up-input': {
position: 'relative',
},
'.up-input-group .up-input:not(:first-child)': {
paddingLeft: '34px',
},
'.up-input-group .up-input:not(:last-child)': {
paddingRight: '15px',
},
'.up-input-group .up-input-action, .up-input-group > .up-button, .up-input-group > .up-icon-wrapper': {
position: 'absolute',
top: 0,
},
'.up-input-group .up-input-action:first-child, .up-input-group > .up-button:first-child, .up-input-group > .up-icon-wrapper:first-child': {
left: 0,
},
'.up-input-group .up-input-action:last-child, .up-input-group > .up-button:last-child, .up-input-group > .up-icon-wrapper:last-child': {
right: 0,
},
'.up-input-group .up-button': {
minWidth: '24px',
minHeight: '24px',
lineHeight: '24px',
margin: '3px',
paddingTop: 0,
paddingBottom: 0,
},
'& .up-input-group .up-icon-wrapper': {
lineHeight: 1,
fontFamily: '"Icons16", sans-serif',
fontSize: '16px',
fontWeight: 400,
fontStyle: 'normal',
margin: props.theme.inputBorderLess ? '6px 0px' : '6px',
color: '#5c7080',
},
'& .up-input-group.up-input-search .up-icon-wrapper': {
left: '15px',
top: '16px',
color: '#5c7080',
margin: 'unset',
width: '15px',
},
'& .up-input-group.up-input-search .up-icon-wrapper.clear-icon': {
right: '10px',
left: 'unset',
cursor: 'pointer',
top: '16px',
},
'& .up-input-group.up-input-focused .up-icon-wrapper.clear-icon': {
cursor: 'pointer',
},
'& .up-input-group.up-input-search .up-loading-indicator': {
position: 'absolute',
right: '10px',
left: 'unset',
top: '8px',
cursor: 'unset',
},
'.up-input-group .up-spinner': {
margin: '3px',
},
'.up-input-group .up-tag': {
margin: '5px',
},
'.up-input-group .up-input:not(:focus) + .up-button.up-minimal:not(:hover):not(:focus), .up-input-group .up-input:not(:focus) + .up-input-action .up-button.up-minimal:not(:hover):not(:focus)': {
color: '#5c7080',
},
'.up-dark .up-input-group .up-input:not(:focus) + .up-button.up-minimal:not(:hover):not(:focus), .up-dark .up-input-group .up-input:not(:focus) + .up-input-action .up-button.up-minimal:not(:hover):not(:focus)': {
color: ' #bfccd6',
},
'.up-input-group .up-input:not(:focus) + .up-button.up-minimal:not(:hover):not(:focus) .up-icon-wrapper, .up-input-group .up-input:not(:focus) + .up-button.up-minimal:not(:hover):not(:focus) .up-icon-standard, .up-input-group .up-input:not(:focus) + .up-button.up-minimal:not(:hover):not(:focus) .up-icon-large,.up-input-group .up-input:not(:focus) + .up-input-action .up-button.up-minimal:not(:hover):not(:focus) .up-icon-wrapper,.up-input-group .up-input:not(:focus) + .up-input-action .up-button.up-minimal:not(:hover):not(:focus) .up-icon-standard,.up-input-group .up-input:not(:focus) + .up-input-action .up-button.up-minimal:not(:hover):not(:focus) .up-icon-large': {
color: '#5c7080',
},
'.up-input-group .up-input:not(:focus) + .up-button.up-minimal:disabled, .up-input-group .up-input:not(:focus) + .up-input-action .up-button.up-minimal:disabled': {
color: 'rgba(92, 112, 128, 0.5) !important',
},
'.up-input-group .up-input:not(:focus) + .up-button.up-minimal:disabled .up-icon-wrapper, .up-input-group .up-input:not(:focus) + .up-button.up-minimal:disabled .up-icon-standard, .up-input-group .up-input:not(:focus) + .up-button.up-minimal:disabled .up-icon-large': {
color: 'rgba(92, 112, 128, 0.5) !important',
},
'.up-input-group .up-input:not(:focus) + .up-input-action .up-button.up-minimal:disabled .up-icon-wrapper': {
color: 'rgba(92, 112, 128, 0.5) !important',
},
'.up-input-group .up-input:not(:focus) + .up-input-action .up-button.up-minimal:disabled .up-icon-standard': {
color: 'rgba(92, 112, 128, 0.5) !important',
},
'.up-input-group .up-input:not(:focus) + .up-input-action .up-button.up-minimal:disabled .up-icon-large': {
color: 'rgba(92, 112, 128, 0.5) !important',
},
'.up-input-group.up-disabled': {
cursor: 'not-allowed',
},
'.up-input-group.up-disabled .up-icon-wrapper': {
color: 'rgba(92, 112, 128, 0.5)',
},
'.up-input-group.up-large .up-button': {
minWidth: '30px',
minHeight: '30px',
lineHeight: '30px',
margin: '5px',
},
'.up-input-group.up-large .up-icon-wrapper': {
margin: '0 12px',
lineHeight: '40px',
},
'.up-input-group.up-large .up-input': {
height: '40px',
lineHeight: '40px',
fontSize: '16px',
},
'.up-input-group.up-large .up-input[type="search"], .up-input-group.up-large .up-input.up-round': {
padding: '0 15px',
},
'.up-input-group.up-large .up-input:not(:first-child)': {
paddingLeft: '40px',
},
'.up-input-group.up-large .up-input:not(:last-child)': {
paddingRight: '40px',
},
'.up-input-group.up-large .up-spinner': {
margin: '8px',
},
'.up-input-group.up-round .up-button, .up-input-group.up-round .up-input, .up-input-group.up-round .up-tag': {
borderRadius: '30px',
},
'.up-dark .up-input-group .up-icon-wrapper': {
color: '#bfccd6',
},
'.up-dark .up-input-group.up-disabled .up-icon-wrapper': {
color: 'rgba(191, 204, 214, 0.5)',
},
'& .up-input-group.up-intent-primary .up-input': {
boxShadow: props.theme.inputBorderLess
? 'inherit'
: '0 0 0 0 rgba(19, 124, 189, 0), 0 0 0 0 rgba(19, 124, 189, 0), inset 0 0 0 1px #137cbd, inset 0 0 0 1px rgba(16, 22, 26, 0.15), inset 0 1px 1px rgba(16, 22, 26, 0.2)',
},
'& .up-input-group.up-intent-primary .up-input:focus': {
boxShadow: props.theme.inputBorderLess
? 'inherit'
: '0 0 0 1px #137cbd, 0 0 0 3px rgba(19, 124, 189, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.2)',
},
'& .up-input-group.up-intent-primary .up-input[readonly]': {
boxShadow: props.theme.inputBorderLess ? 'inherit' : 'inset 0 0 0 1px #137cbd',
},
'.up-input-group.up-intent-primary .up-input:disabled, .up-input-group.up-intent-primary .up-input.up-disabled': {
boxShadow: 'none',
},
'.up-input-group.up-intent-primary .up-icon-wrapper': {
color: '#106ba3',
},
'.up-dark .up-input-group.up-intent-primary .up-icon-wrapper': {
color: '#48aff0',
},
'& .up-input-group.up-intent-success .up-input': {
boxShadow: props.theme.inputBorderLess
? 'inherit'
: '0 0 0 0 rgba(15, 153, 96, 0), 0 0 0 0 rgba(15, 153, 96, 0), inset 0 0 0 1px #0f9960, inset 0 0 0 1px rgba(16, 22, 26, 0.15), inset 0 1px 1px rgba(16, 22, 26, 0.2)',
},
'& .up-input-group.up-intent-success .up-input:focus': {
boxShadow: props.theme.inputBorderLess
? 'inherit'
: '0 0 0 1px #0f9960, 0 0 0 3px rgba(15, 153, 96, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.2)',
},
'& .up-input-group.up-intent-success .up-input[readonly]': {
boxShadow: props.theme.inputBorderLess ? 'inherit' : 'inset 0 0 0 1px #0f9960',
},
'.up-input-group.up-intent-success .up-input:disabled, .up-input-group.up-intent-success .up-input.up-disabled': {
boxShadow: 'none',
},
'.up-input-group.up-intent-success .up-icon-wrapper': {
color: '#0d8050',
},
'.up-dark .up-input-group.up-intent-success .up-icon-wrapper': {
color: '#3dcc91',
},
'& .up-input-group.up-intent-warning .up-input': {
boxShadow: props.theme.inputBorderLess
? 'inherit'
: '0 0 0 0 rgba(217, 130, 43, 0), 0 0 0 0 rgba(217, 130, 43, 0), inset 0 0 0 1px #d9822b, inset 0 0 0 1px rgba(16, 22, 26, 0.15), inset 0 1px 1px rgba(16, 22, 26, 0.2)',
},
'& .up-input-group.up-intent-warning .up-input:focus': {
boxShadow: props.theme.inputBorderLess
? 'inherit'
: '0 0 0 1px #d9822b, 0 0 0 3px rgba(217, 130, 43, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.2)',
},
'& .up-input-group.up-intent-warning .up-input[readonly]': {
boxShadow: props.theme.inputBorderLess ? 'inherit' : 'inset 0 0 0 1px #d9822b',
},
'.up-input-group.up-intent-warning .up-input:disabled, .up-input-group.up-intent-warning .up-input.up-disabled': {
boxShadow: 'none',
},
'.up-input-group.up-intent-warning .up-icon-wrapper': {
color: '#bf7326',
},
'.up-dark .up-input-group.up-intent-warning .up-icon-wrapper': {
color: '#ffb366',
},
'& .up-input-group.up-intent-danger .up-input': {
boxShadow: props.theme.inputBorderLess
? 'inherit'
: '0 0 0 0 rgba(219, 55, 55, 0), 0 0 0 0 rgba(219, 55, 55, 0), inset 0 0 0 1px #db3737, inset 0 0 0 1px rgba(16, 22, 26, 0.15), inset 0 1px 1px rgba(16, 22, 26, 0.2)',
},
'& .up-input-group.up-intent-danger .up-input:focus': {
boxShadow: props.theme.inputBorderLess
? 'inherit'
: '0 0 0 1px #db3737, 0 0 0 3px rgba(219, 55, 55, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.2)',
},
'& .up-input-group.up-intent-danger .up-input[readonly]': {
boxShadow: props.theme.inputBorderLess ? 'inherit' : 'inset 0 0 0 1px #db3737',
},
'.up-input-group.up-intent-danger .up-input:disabled, .up-input-group.up-intent-danger .up-input.up-disabled': {
boxShadow: 'none',
},
'.up-input-group.up-intent-danger .up-icon-wrapper': {
color: '#c23030',
},
'.up-dark .up-input-group.up-intent-danger .up-icon-wrapper': {
color: '#ff7373',
},
'& .up-input-group.up-input-search .up-icon-wrapper.clear-icon svg path, & .up-input-group.up-input-focused .up-icon-wrapper.clear-icon svg path': {
fill: 'transparent',
},
},
};
};
exports.inputStyles = inputStyles;
var focusStyles = function (props) {
var getFocusLabelStyle = function (props) {
var focusLabelStyle = {
transform: 'translate(0, 0)',
fontSize: (0, utils_2.toRem)(12),
color: props.theme.colorMap.gray1,
};
var value = props.value, readonly = props.readonly;
if (value || (!value && !readonly)) {
return focusLabelStyle;
}
else {
return {};
}
};
return (0, typestyle_1.style)({
$nest: {
'& .up-input-group.up-input-focused .up-icon-wrapper svg, & .up-input-group.up-input-focused .up-icon-wrapper svg path, & .up-input-group.up-input-focused .up-icon-wrapper svg polygon, & .up-input-group.up-input-focused .up-icon-wrapper svg polyline': {
fill: props.theme.colorMap.primary,
},
'& .up-input-group.up-input-focused label, & .up-input-group.up-input-valued label': (0, tslib_1.__assign)({}, getFocusLabelStyle(props)),
},
});
};
exports.focusStyles = focusStyles;
var getStyles = function (props) {
var heightStyle = props.height == 'large' ? exports.HeightLarge : {};
var themeStyles = props.theme.styles.get('input') || {};
return (0, classnames_1.default)((0, typestyle_1.style)((0, exports.inputStyles)(props)), (0, exports.statusStyles)(props), (0, exports.focusStyles)(props), (0, typestyle_1.style)(themeStyles), (0, typestyle_1.style)({
$nest: {
'& .up-input': (0, tslib_1.__assign)({ width: sizeMap[props.width], color: props.theme.colorMap.grey1 }, heightStyle),
},
}));
};
exports.getStyles = getStyles;
//# sourceMappingURL=styles.js.map