1 | import { normalize, getGlobalClassNames, HighContrastSelector, getInputFocusStyle } from '../../Styling';
|
2 | var GlobalClassNames = {
|
3 | root: 'ms-DatePicker',
|
4 | callout: 'ms-DatePicker-callout',
|
5 | withLabel: 'ms-DatePicker-event--with-label',
|
6 | withoutLabel: 'ms-DatePicker-event--without-label',
|
7 | disabled: 'msDatePickerDisabled ',
|
8 | };
|
9 | var TEXTFIELD_HEIGHT = 32;
|
10 | export var styles = function (props) {
|
11 | var _a, _b;
|
12 | var className = props.className, theme = props.theme, disabled = props.disabled, underlined = props.underlined, label = props.label, isDatePickerShown = props.isDatePickerShown;
|
13 | var palette = theme.palette, semanticColors = theme.semanticColors, effects = theme.effects, fonts = theme.fonts;
|
14 | var classNames = getGlobalClassNames(GlobalClassNames, theme);
|
15 | var DatePickerIcon = {
|
16 | color: palette.neutralSecondary,
|
17 | fontSize: fonts.mediumPlus.fontSize,
|
18 | lineHeight: '18px',
|
19 | pointerEvents: 'none',
|
20 | position: 'absolute',
|
21 | right: '4px',
|
22 | padding: '5px',
|
23 | };
|
24 | return {
|
25 | root: [classNames.root, theme.fonts.medium, isDatePickerShown && 'is-open', normalize, className],
|
26 | textField: [
|
27 | {
|
28 | position: 'relative',
|
29 | selectors: {
|
30 | '& input[readonly]': {
|
31 | cursor: 'pointer',
|
32 | },
|
33 | input: {
|
34 | selectors: {
|
35 | '::-ms-clear': {
|
36 | display: 'none',
|
37 | },
|
38 | },
|
39 | },
|
40 | },
|
41 | },
|
42 | disabled && {
|
43 | selectors: {
|
44 | '& input[readonly]': {
|
45 | cursor: 'default',
|
46 | },
|
47 | },
|
48 | },
|
49 | ],
|
50 | callout: [classNames.callout, { boxShadow: effects.elevation8 }],
|
51 | icon: [
|
52 | DatePickerIcon,
|
53 | label ? classNames.withLabel : classNames.withoutLabel,
|
54 | { paddingTop: '7px' },
|
55 | !disabled && [
|
56 | classNames.disabled,
|
57 | {
|
58 | pointerEvents: 'initial',
|
59 | cursor: 'pointer',
|
60 | },
|
61 | ],
|
62 | disabled && {
|
63 | color: semanticColors.disabledText,
|
64 | cursor: 'default',
|
65 | },
|
66 | ],
|
67 | readOnlyTextField: [
|
68 | {
|
69 | cursor: 'pointer',
|
70 | height: TEXTFIELD_HEIGHT,
|
71 | lineHeight: TEXTFIELD_HEIGHT - 2,
|
72 | overflow: 'hidden',
|
73 | textOverflow: 'ellipsis',
|
74 | selectors: (_a = {},
|
75 | _a['&:focus'] = getInputFocusStyle(semanticColors.inputFocusBorderAlt, effects.roundedCorner2),
|
76 | _a),
|
77 | },
|
78 | underlined && {
|
79 | lineHeight: TEXTFIELD_HEIGHT + 2,
|
80 | },
|
81 | ],
|
82 | readOnlyPlaceholder: (_b = {
|
83 | color: semanticColors.inputPlaceholderText
|
84 | },
|
85 | _b[HighContrastSelector] = {
|
86 | color: 'GrayText',
|
87 | },
|
88 | _b),
|
89 | };
|
90 | };
|
91 |
|
\ | No newline at end of file |