@up-group-ui/react-controls
Version:
Up shared react controls
116 lines • 6.09 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.getInlineStyle = exports.customStyles = exports.getLabelStyle = exports.groupBadgeStyles = exports.groupStyles = void 0;
var tslib_1 = require("tslib");
var typestyle_1 = require("typestyle");
var utils_1 = require("../../../Common/theming/utils");
exports.groupStyles = {
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
};
exports.groupBadgeStyles = {
borderRadius: '2em',
display: 'inline-block',
fontSize: (0, utils_1.toRem)(12),
fontWeight: 500,
lineHeight: 1,
minWidth: 1,
padding: '0.16666666666667em 0.5em',
textAlign: 'center',
};
var getLabelStyle = function (props) {
var floatLabel = {
transform: 'translate(0, 0) !important',
fontSize: (0, utils_1.toRem)(12) + " !important",
};
return (0, typestyle_1.style)({
marginTop: props.floatingLabel ? (0, utils_1.toRem)(14) : 0,
minHeight: (0, utils_1.toRem)(29),
position: 'relative',
$nest: {
'&.up-select-wrapper .up-select-label': {
position: 'absolute',
left: 0,
top: (0, utils_1.toRem)(-10),
zIndex: 1,
fontSize: (0, utils_1.toRem)(14),
color: props.theme.colorMap.gray6,
transformOrigin: 'top left',
transform: "translate(0, " + (0, utils_1.toRem)(16) + ") scale(1)",
transition: 'all .1s ease-in-out',
},
'&.up-select-wrapper label.up-select-label + div > div': {
backgroundColor: 'transparent',
},
'&.up-select-wrapper label.up-select-label + div > div + div:last-of-type': {
backgroundColor: '#FFF',
},
'&.up-select-wrapper .up-select-label-star': {
position: 'absolute',
top: (0, utils_1.toRem)(4),
right: (0, utils_1.toRem)(-10),
},
'& .up-select-label-focused': (0, tslib_1.__assign)({}, floatLabel),
'& .up-select-label-valued': (0, tslib_1.__assign)({}, floatLabel),
},
});
};
exports.getLabelStyle = getLabelStyle;
var customStyles = function (theme, value) { return ({
option: function (provided, state) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, provided), { fontWeight: state.isSelected ? 400 : provided.fontWeight || 'inherit', backgroundColor: 'white', padding: (0, utils_1.toRem)(10), fontSize: (0, utils_1.toRem)(14), cursor: 'pointer', color: state.isSelected ? theme.colorMap.primary : theme.colorMap.grey1, ':active': {
color: theme.colorMap.primary,
fontWeight: 400,
backgroundColor: state.isSelected ? 'transparent' : theme.colorMap.lightGrey1 + " !important",
}, ':hover': {
fontWeight: 400,
backgroundColor: state.isSelected ? 'transparent' : theme.colorMap.lightGrey1 + " !important",
} })); },
control: function (provided, state) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, provided), { outline: 'none', borderRadius: 0, color: provided.color, fontSize: (0, utils_1.toRem)(14), border: state.isFocused ? 0 : 0, boxShadow: state.isFocused ? 0 : 0, '&:hover': {
border: state.isFocused ? 0 : 0,
borderBottom: "1px solid " + (state.isFocused ? theme.colorMap.primary : theme.colorMap.gray6),
}, minHeight: "1.8rem !important", borderBottom: "1px solid " + (state.isFocused ? theme.colorMap.primary : theme.colorMap.gray6) })); },
dropdownIndicator: function (provided, state) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, provided), { color: theme.colorMap.grey1, 'svg, svg path': {
fill: theme.colorMap.grey1,
}, '&:hover': {
cursor: 'pointer',
}, padding: 0 })); },
indicatorSeparator: function () { return null; },
valueContainer: function (provided, state) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, provided), { padding: 0, paddingBottom: (0, utils_1.toRem)(2), '&:hover': {
cursor: 'pointer',
} })); },
multiValueLabel: function (provided, state) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, provided), { backgroundColor: theme.colorMap.primary, color: 'white' })); },
multiValueRemove: function (provided, state) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, provided), { backgroundColor: theme.colorMap.primary, color: 'white' })); },
menu: function (provided, state) {
return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, provided), { marginTop: 0, borderRadius: 0, border: "1px solid " + theme.colorMap.lightGrey1, zIndex: 10000 });
},
clearIndicator: function (provided, state) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, provided), { color: theme.colorMap.primary, 'svg, svg path': {
fill: theme.colorMap.primary,
}, '&:hover': {
cursor: 'pointer',
}, padding: 0 })); },
container: function (provided, state) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, provided), { border: 0, outline: 'none' })); },
singleValue: function (provided, state) {
var opacity = state.isDisabled ? 0.5 : 1;
var transition = 'opacity 300ms';
return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, provided), { opacity: opacity, transition: transition, color: theme.colorMap.grey1 });
},
}); };
exports.customStyles = customStyles;
var getInlineStyle = function (theme, isSelected) {
return (0, typestyle_1.style)({
borderRadius: '25px',
border: '1px solid #555',
padding: '8px 16px',
marginRight: '8px',
backgroundColor: isSelected ? theme.colorMap.primary : 'white',
color: isSelected ? 'white' : '#555',
$nest: {
'&:hover': {
cursor: 'pointer',
},
},
});
};
exports.getInlineStyle = getInlineStyle;
//# sourceMappingURL=styles.js.map