Stefan Hacker
166 lines
6.2 KiB
JavaScript
166 lines
6.2 KiB
JavaScript
"use strict";
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.getStyles = getStyles;
|
|
var Styling_1 = require("../../Styling");
|
|
var GlobalClassNames = {
|
|
root: 'ms-BasePicker',
|
|
label: 'ms-BasePicker-label',
|
|
text: 'ms-BasePicker-text',
|
|
itemsWrapper: 'ms-BasePicker-itemsWrapper',
|
|
input: 'ms-BasePicker-input',
|
|
error: 'ms-BasePicker-error',
|
|
};
|
|
function getStyles(props) {
|
|
var _a, _b, _c;
|
|
var className = props.className, theme = props.theme, isFocused = props.isFocused, inputClassName = props.inputClassName, disabled = props.disabled, hasErrorMessage = props.hasErrorMessage;
|
|
if (!theme) {
|
|
throw new Error('theme is undefined or null in base BasePicker getStyles function.');
|
|
}
|
|
var semanticColors = theme.semanticColors, effects = theme.effects, fonts = theme.fonts;
|
|
var inputBorder = semanticColors.inputBorder, inputBorderHovered = semanticColors.inputBorderHovered, inputFocusBorderAlt = semanticColors.inputFocusBorderAlt;
|
|
var classNames = (0, Styling_1.getGlobalClassNames)(GlobalClassNames, theme);
|
|
// placeholder style constants
|
|
var placeholderStyles = [
|
|
fonts.medium,
|
|
{
|
|
color: semanticColors.inputPlaceholderText,
|
|
opacity: 1,
|
|
selectors: (_a = {},
|
|
_a[Styling_1.HighContrastSelector] = {
|
|
color: 'GrayText',
|
|
},
|
|
_a),
|
|
},
|
|
];
|
|
var disabledPlaceholderStyles = {
|
|
color: semanticColors.disabledText,
|
|
selectors: (_b = {},
|
|
_b[Styling_1.HighContrastSelector] = {
|
|
color: 'GrayText',
|
|
},
|
|
_b),
|
|
};
|
|
// The following lines are to create a semi-transparent color overlay for the disabled state with designer's approval.
|
|
// @todo: investigate the performance cost of the calculation below and apply if negligible.
|
|
// Replacing with a static color for now.
|
|
// const rgbColor: IRGB | undefined = cssColor(palette.neutralQuaternaryAlt);
|
|
// const disabledOverlayColor = rgbColor ? `rgba(${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}, 0.29)` : 'transparent';
|
|
var disabledOverlayColor = 'rgba(218, 218, 218, 0.29)';
|
|
var focusColor = isFocused && !disabled && (hasErrorMessage ? semanticColors.errorText : inputFocusBorderAlt);
|
|
return {
|
|
root: [classNames.root, className, { position: 'relative' }],
|
|
error: [
|
|
classNames.error,
|
|
{
|
|
fontSize: 12,
|
|
fontWeight: 400,
|
|
color: semanticColors.errorText,
|
|
margin: 0,
|
|
paddingTop: 5,
|
|
display: hasErrorMessage ? 'flex' : 'none',
|
|
alignItems: 'center',
|
|
},
|
|
],
|
|
text: [
|
|
classNames.text,
|
|
{
|
|
display: 'flex',
|
|
position: 'relative',
|
|
flexWrap: 'wrap',
|
|
alignItems: 'center',
|
|
boxSizing: 'border-box',
|
|
minWidth: 180,
|
|
minHeight: 30,
|
|
border: "1px solid ".concat(inputBorder),
|
|
borderRadius: effects.roundedCorner2,
|
|
},
|
|
!isFocused &&
|
|
!disabled && {
|
|
selectors: {
|
|
':hover': {
|
|
borderColor: inputBorderHovered,
|
|
},
|
|
},
|
|
},
|
|
focusColor && (0, Styling_1.getInputFocusStyle)(focusColor, effects.roundedCorner2),
|
|
disabled && {
|
|
borderColor: disabledOverlayColor,
|
|
selectors: (_c = {
|
|
':after': {
|
|
content: '""',
|
|
position: 'absolute',
|
|
top: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
left: 0,
|
|
background: disabledOverlayColor,
|
|
}
|
|
},
|
|
_c[Styling_1.HighContrastSelector] = {
|
|
borderColor: 'GrayText',
|
|
selectors: {
|
|
':after': {
|
|
background: 'none',
|
|
},
|
|
},
|
|
},
|
|
_c),
|
|
},
|
|
hasErrorMessage && {
|
|
borderColor: semanticColors.errorText,
|
|
selectors: {
|
|
':hover': {
|
|
borderColor: semanticColors.errorText,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
itemsWrapper: [
|
|
classNames.itemsWrapper,
|
|
{
|
|
display: 'flex',
|
|
flexWrap: 'wrap',
|
|
maxWidth: '100%',
|
|
},
|
|
],
|
|
input: [
|
|
classNames.input,
|
|
fonts.medium,
|
|
{
|
|
height: 30,
|
|
border: 'none',
|
|
flexGrow: 1,
|
|
outline: 'none',
|
|
padding: '0 6px 0',
|
|
alignSelf: 'flex-end',
|
|
borderRadius: effects.roundedCorner2,
|
|
backgroundColor: 'transparent',
|
|
color: semanticColors.inputText,
|
|
selectors: {
|
|
'::-ms-clear': {
|
|
display: 'none',
|
|
},
|
|
'&:placeholder-shown': {
|
|
textOverflow: 'ellipsis',
|
|
},
|
|
},
|
|
},
|
|
(0, Styling_1.getPlaceholderStyles)(placeholderStyles),
|
|
disabled && (0, Styling_1.getPlaceholderStyles)(disabledPlaceholderStyles),
|
|
inputClassName,
|
|
],
|
|
screenReaderText: Styling_1.hiddenContentStyle,
|
|
subComponentStyles: {
|
|
label: {},
|
|
callout: {
|
|
// Picker suggestions already manage overflow and scrolling items into view
|
|
// for this to work at all screen sizes, we need Callout to not also have overflow
|
|
calloutMain: {
|
|
overflow: 'unset',
|
|
maxHeight: '100%',
|
|
},
|
|
},
|
|
},
|
|
};
|
|
}
|
|
//# sourceMappingURL=BasePicker.styles.js.map
|