Stefan Hacker
100 lines
3.7 KiB
JavaScript
100 lines
3.7 KiB
JavaScript
define(["require", "exports", "@fluentui/style-utilities"], function (require, exports, style_utilities_1) {
|
|
"use strict";
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.styles = void 0;
|
|
var GlobalClassNames = {
|
|
root: 'ms-DatePicker',
|
|
callout: 'ms-DatePicker-callout',
|
|
withLabel: 'ms-DatePicker-event--with-label',
|
|
withoutLabel: 'ms-DatePicker-event--without-label',
|
|
disabled: 'msDatePickerDisabled ',
|
|
};
|
|
var TEXTFIELD_HEIGHT = 32;
|
|
var styles = function (props) {
|
|
var _a;
|
|
var className = props.className, theme = props.theme, disabled = props.disabled, underlined = props.underlined, label = props.label, isDatePickerShown = props.isDatePickerShown;
|
|
var palette = theme.palette, semanticColors = theme.semanticColors, fonts = theme.fonts;
|
|
var classNames = (0, style_utilities_1.getGlobalClassNames)(GlobalClassNames, theme);
|
|
var DatePickerIcon = {
|
|
color: palette.neutralSecondary,
|
|
fontSize: style_utilities_1.FontSizes.icon,
|
|
lineHeight: '18px',
|
|
pointerEvents: 'none',
|
|
position: 'absolute',
|
|
right: '4px',
|
|
padding: '5px',
|
|
};
|
|
return {
|
|
root: [classNames.root, theme.fonts.large, isDatePickerShown && 'is-open', style_utilities_1.normalize, className],
|
|
textField: [
|
|
{
|
|
position: 'relative',
|
|
selectors: {
|
|
'& input[readonly]': {
|
|
cursor: 'pointer',
|
|
},
|
|
input: {
|
|
selectors: {
|
|
'::-ms-clear': {
|
|
display: 'none',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
disabled && {
|
|
selectors: {
|
|
'& input[readonly]': {
|
|
cursor: 'default',
|
|
},
|
|
},
|
|
},
|
|
],
|
|
callout: [classNames.callout],
|
|
icon: [
|
|
DatePickerIcon,
|
|
label ? classNames.withLabel : classNames.withoutLabel,
|
|
{ paddingTop: '7px' },
|
|
!disabled && [
|
|
classNames.disabled,
|
|
{
|
|
pointerEvents: 'initial',
|
|
cursor: 'pointer',
|
|
},
|
|
],
|
|
disabled && {
|
|
color: semanticColors.disabledText,
|
|
cursor: 'default',
|
|
},
|
|
],
|
|
statusMessage: [
|
|
fonts.small,
|
|
{
|
|
color: semanticColors.errorText,
|
|
marginTop: 5,
|
|
},
|
|
],
|
|
readOnlyTextField: [
|
|
{
|
|
cursor: 'pointer',
|
|
height: TEXTFIELD_HEIGHT,
|
|
lineHeight: TEXTFIELD_HEIGHT - 2,
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
},
|
|
underlined && {
|
|
lineHeight: TEXTFIELD_HEIGHT + 2,
|
|
},
|
|
],
|
|
readOnlyPlaceholder: (_a = {
|
|
color: semanticColors.inputPlaceholderText
|
|
},
|
|
_a[style_utilities_1.HighContrastSelector] = {
|
|
color: 'GrayText',
|
|
},
|
|
_a),
|
|
};
|
|
};
|
|
exports.styles = styles;
|
|
});
|
|
//# sourceMappingURL=DatePicker.styles.js.map
|