UNPKG

3.31 kBJavaScriptView Raw
1"use strict";
2Object.defineProperty(exports, "__esModule", { value: true });
3exports.styles = void 0;
4var style_utilities_1 = require("@fluentui/style-utilities");
5var GlobalClassNames = {
6 root: 'ms-DatePicker',
7 callout: 'ms-DatePicker-callout',
8 withLabel: 'ms-DatePicker-event--with-label',
9 withoutLabel: 'ms-DatePicker-event--without-label',
10 disabled: 'msDatePickerDisabled ',
11};
12var TEXTFIELD_HEIGHT = 32;
13var styles = function (props) {
14 var _a;
15 var className = props.className, theme = props.theme, disabled = props.disabled, underlined = props.underlined, label = props.label, isDatePickerShown = props.isDatePickerShown;
16 var palette = theme.palette, semanticColors = theme.semanticColors, fonts = theme.fonts;
17 var classNames = style_utilities_1.getGlobalClassNames(GlobalClassNames, theme);
18 var DatePickerIcon = {
19 color: palette.neutralSecondary,
20 fontSize: style_utilities_1.FontSizes.icon,
21 lineHeight: '18px',
22 pointerEvents: 'none',
23 position: 'absolute',
24 right: '4px',
25 padding: '5px',
26 };
27 return {
28 root: [classNames.root, theme.fonts.large, isDatePickerShown && 'is-open', style_utilities_1.normalize, className],
29 textField: [
30 {
31 position: 'relative',
32 selectors: {
33 '& input[readonly]': {
34 cursor: 'pointer',
35 },
36 input: {
37 selectors: {
38 '::-ms-clear': {
39 display: 'none',
40 },
41 },
42 },
43 },
44 },
45 disabled && {
46 selectors: {
47 '& input[readonly]': {
48 cursor: 'default',
49 },
50 },
51 },
52 ],
53 callout: [classNames.callout],
54 icon: [
55 DatePickerIcon,
56 label ? classNames.withLabel : classNames.withoutLabel,
57 { paddingTop: '7px' },
58 !disabled && [
59 classNames.disabled,
60 {
61 pointerEvents: 'initial',
62 cursor: 'pointer',
63 },
64 ],
65 disabled && {
66 color: semanticColors.disabledText,
67 cursor: 'default',
68 },
69 ],
70 statusMessage: [
71 fonts.small,
72 {
73 color: semanticColors.errorText,
74 marginTop: 5,
75 },
76 ],
77 readOnlyTextField: [
78 {
79 cursor: 'pointer',
80 height: TEXTFIELD_HEIGHT,
81 lineHeight: TEXTFIELD_HEIGHT - 2,
82 overflow: 'hidden',
83 textOverflow: 'ellipsis',
84 },
85 underlined && {
86 lineHeight: TEXTFIELD_HEIGHT + 2,
87 },
88 ],
89 readOnlyPlaceholder: (_a = {
90 color: semanticColors.inputPlaceholderText
91 },
92 _a[style_utilities_1.HighContrastSelector] = {
93 color: 'GrayText',
94 },
95 _a),
96 };
97};
98exports.styles = styles;
99//# sourceMappingURL=DatePicker.styles.js.map
\No newline at end of file