@fluentui/react-northstar
Version:
A themable React component library.
115 lines (113 loc) • 3.07 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.inputStyles = void 0;
var _utils = require("../../../../utils");
var inputStyles = {
root: function root(_ref) {
var p = _ref.props,
v = _ref.variables;
return Object.assign({
flexDirection: 'column',
justifyContent: 'center',
display: 'inline-flex',
position: 'relative',
outline: 0,
verticalAlign: 'middle'
}, p.fluid && {
width: '100%'
}, p.labelPosition === 'inline' && {
flexDirection: 'row',
alignItems: 'center'
});
},
input: function input(_ref2) {
var p = _ref2.props,
v = _ref2.variables;
return Object.assign({
backgroundColor: v.backgroundColor
}, p.inverted && {
backgroundColor: v.backgroundColorInverted
}, {
lineHeight: 'unset',
color: v.fontColor,
borderColor: v.borderColor,
borderRadius: v.borderRadius,
borderStyle: 'solid',
borderWidth: v.borderWidth,
outline: 'none',
padding: v.inputPadding,
position: 'relative'
}, p.fluid && {
width: '100%'
}, p.inline && {
float: 'left'
}, p.disabled && {
color: v.colorDisabled,
boxShadow: 'none'
}, {
'::placeholder': Object.assign({
color: v.placeholderColor,
opacity: 1
}, p.disabled && {
color: v.colorDisabled
}),
':focus': Object.assign({}, !p.error && {
borderColor: v.inputFocusBorderColor,
borderRadius: v.inputFocusBorderRadius
})
}, !p.hasValue && {
':-webkit-autofill:focus': {
'-webkit-text-fill-color': 'transparent'
}
}, p.clearable && {
padding: v.inputPaddingWithIconAtEnd
}, p.hasIcon && {
padding: p.iconPosition === 'start' ? v.inputPaddingWithIconAtStart : v.inputPaddingWithIconAtEnd
}, p.labelPosition === 'inside' && {
paddingTop: v.inputInsideLabelPaddingTop
}, p.error && {
border: (0, _utils.pxToRem)(1) + " solid " + v.borderColorError
}, {
'::-ms-clear': {
display: 'none'
}
});
},
icon: function icon(_ref3) {
var p = _ref3.props,
v = _ref3.variables;
return Object.assign({
color: v.iconColor,
outline: 0,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
position: v.iconPosition,
top: 0,
bottom: 0
}, p.error && {
color: v.colorError
}, p.requiredAndSuccessful && {
color: v.successfulColor
}, p.disabled && {
color: v.colorDisabled
}, p.iconPosition === 'start' && {
left: v.iconLeft
}, p.iconPosition === 'end' && {
right: v.iconRight
}, p.clearable && p.hasValue && Object.assign({
height: '100%',
width: (0, _utils.pxToRem)(16),
color: v.iconColor
}, p.disabled && {
color: v.colorDisabled
}));
},
inputContainer: function inputContainer() {
return {
position: 'relative'
};
}
};
exports.inputStyles = inputStyles;
//# sourceMappingURL=inputStyles.js.map