@unofficialmc2/arche-controls
Version:
We know that there are a ton of react UI library projects to choose from. Our hope with this one is to provide the next generation of react components that you can use to bootstrap your next project, or as a reference for building a UIKit. Read on to get
592 lines • 30.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var typestyle_1 = require("typestyle");
var theming_1 = require("../../../../../Common/theming");
var classnames = require("classnames");
var utils_1 = require("../../../../../Common/utils");
var utils_2 = require("../../../../../Common/theming/utils");
exports.HeightLarge = function (props) {
return {
height: '40px',
lineHeight: '40px',
fontSize: '16px',
padding: props.theme.inputBorderLess ? '6px 0' : '0 15px',
};
};
exports.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;
};
var sizeMap = {
xsmall: "40px",
small: "100px",
medium: "150px",
large: "250px",
xlarge: "350px",
xxlarge: "500px",
fill: "100%",
};
exports.statusStyles = function (props) {
if (!props.hasError && props.showSuccess && !utils_1.isEmpty(props.value) && props.type !== 'search') {
return 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 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.successStyles = function (props) {
};
exports.inputStyles = function (props) {
return {
marginTop: props.floatingLabel ? "14px" : "0px",
$nest: {
"& .up-input": tslib_1.__assign({}, 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: '#F3F3F3',
borderBottom: 'unset',
borderRadius: '25px',
height: '44px',
paddingRight: '45px !important',
paddingLeft: '45px !important',
fontWeight: 'bold',
color: props.theme.colorMap.primary
},
".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.focusStyles = function (props) {
var getFocusLabelStyle = function (props) {
var focusLabelStyle = {
transform: 'translate(0, 0)',
fontSize: 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 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': tslib_1.__assign({}, getFocusLabelStyle(props))
}
});
};
exports.getStyles = function (props) {
var heightStyle = props.height == "large" ? exports.HeightLarge : {};
var themeStyles = props.theme.styles.get('input') || {};
return classnames(typestyle_1.style(exports.inputStyles(props)), exports.statusStyles(props), exports.focusStyles(props), typestyle_1.style(themeStyles), typestyle_1.style({
$nest: {
'& .up-input': tslib_1.__assign({ width: sizeMap[props.width], color: props.theme.colorMap.grey1 }, heightStyle)
}
}));
};
//# sourceMappingURL=styles.js.map