1 | "use strict";
|
2 | Object.defineProperty(exports, "__esModule", { value: true });
|
3 | exports.getStyles = void 0;
|
4 | var Styling_1 = require("../../Styling");
|
5 | var GlobalClassNames = {
|
6 | root: 'ms-BasePicker',
|
7 | text: 'ms-BasePicker-text',
|
8 | itemsWrapper: 'ms-BasePicker-itemsWrapper',
|
9 | input: 'ms-BasePicker-input',
|
10 | };
|
11 | function getStyles(props) {
|
12 | var _a, _b, _c;
|
13 | var className = props.className, theme = props.theme, isFocused = props.isFocused, inputClassName = props.inputClassName, disabled = props.disabled;
|
14 | if (!theme) {
|
15 | throw new Error('theme is undefined or null in base BasePicker getStyles function.');
|
16 | }
|
17 | var semanticColors = theme.semanticColors, effects = theme.effects, fonts = theme.fonts;
|
18 | var inputBorder = semanticColors.inputBorder, inputBorderHovered = semanticColors.inputBorderHovered, inputFocusBorderAlt = semanticColors.inputFocusBorderAlt;
|
19 | var classNames = Styling_1.getGlobalClassNames(GlobalClassNames, theme);
|
20 |
|
21 | var placeholderStyles = [
|
22 | fonts.medium,
|
23 | {
|
24 | color: semanticColors.inputPlaceholderText,
|
25 | opacity: 1,
|
26 | selectors: (_a = {},
|
27 | _a[Styling_1.HighContrastSelector] = {
|
28 | color: 'GrayText',
|
29 | },
|
30 | _a),
|
31 | },
|
32 | ];
|
33 | var disabledPlaceholderStyles = {
|
34 | color: semanticColors.disabledText,
|
35 | selectors: (_b = {},
|
36 | _b[Styling_1.HighContrastSelector] = {
|
37 | color: 'GrayText',
|
38 | },
|
39 | _b),
|
40 | };
|
41 |
|
42 |
|
43 |
|
44 |
|
45 |
|
46 | var disabledOverlayColor = 'rgba(218, 218, 218, 0.29)';
|
47 | return {
|
48 | root: [classNames.root, className],
|
49 | text: [
|
50 | classNames.text,
|
51 | {
|
52 | display: 'flex',
|
53 | position: 'relative',
|
54 | flexWrap: 'wrap',
|
55 | alignItems: 'center',
|
56 | boxSizing: 'border-box',
|
57 | minWidth: 180,
|
58 | minHeight: 30,
|
59 | border: "1px solid " + inputBorder,
|
60 | borderRadius: effects.roundedCorner2,
|
61 | },
|
62 | !isFocused &&
|
63 | !disabled && {
|
64 | selectors: {
|
65 | ':hover': {
|
66 | borderColor: inputBorderHovered,
|
67 | },
|
68 | },
|
69 | },
|
70 | isFocused && !disabled && Styling_1.getInputFocusStyle(inputFocusBorderAlt, effects.roundedCorner2),
|
71 | disabled && {
|
72 | borderColor: disabledOverlayColor,
|
73 | selectors: (_c = {
|
74 | ':after': {
|
75 | content: '""',
|
76 | position: 'absolute',
|
77 | top: 0,
|
78 | right: 0,
|
79 | bottom: 0,
|
80 | left: 0,
|
81 | background: disabledOverlayColor,
|
82 | }
|
83 | },
|
84 | _c[Styling_1.HighContrastSelector] = {
|
85 | borderColor: 'GrayText',
|
86 | selectors: {
|
87 | ':after': {
|
88 | background: 'none',
|
89 | },
|
90 | },
|
91 | },
|
92 | _c),
|
93 | },
|
94 | ],
|
95 | itemsWrapper: [
|
96 | classNames.itemsWrapper,
|
97 | {
|
98 | display: 'flex',
|
99 | flexWrap: 'wrap',
|
100 | maxWidth: '100%',
|
101 | },
|
102 | ],
|
103 | input: [
|
104 | classNames.input,
|
105 | fonts.medium,
|
106 | {
|
107 | height: 30,
|
108 | border: 'none',
|
109 | flexGrow: 1,
|
110 | outline: 'none',
|
111 | padding: '0 6px 0',
|
112 | alignSelf: 'flex-end',
|
113 | borderRadius: effects.roundedCorner2,
|
114 | backgroundColor: 'transparent',
|
115 | color: semanticColors.inputText,
|
116 | selectors: {
|
117 | '::-ms-clear': {
|
118 | display: 'none',
|
119 | },
|
120 | },
|
121 | },
|
122 | Styling_1.getPlaceholderStyles(placeholderStyles),
|
123 | disabled && Styling_1.getPlaceholderStyles(disabledPlaceholderStyles),
|
124 | inputClassName,
|
125 | ],
|
126 | screenReaderText: Styling_1.hiddenContentStyle,
|
127 | };
|
128 | }
|
129 | exports.getStyles = getStyles;
|
130 |
|
\ | No newline at end of file |