@fluentui/react
Version:
Reusable React components for building web experiences.
265 lines • 12.4 kB
JavaScript
define(["require", "exports", "tslib", "@fluentui/style-utilities", "@fluentui/date-time-utilities", "../Calendar/Calendar.types"], function (require, exports, tslib_1, style_utilities_1, date_time_utilities_1, Calendar_types_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.styles = void 0;
var GlobalClassNames = {
hoverStyle: 'ms-CalendarDay-hoverStyle',
pressedStyle: 'ms-CalendarDay-pressedStyle',
dayIsTodayStyle: 'ms-CalendarDay-dayIsToday',
daySelectedStyle: 'ms-CalendarDay-daySelected',
};
var transitionRowDisappearance = (0, style_utilities_1.keyframes)({
'100%': {
width: 0,
height: 0,
overflow: 'hidden',
},
'99.9%': {
width: '100%',
height: 28,
overflow: 'visible',
},
'0%': {
width: '100%',
height: 28,
overflow: 'visible',
},
});
var styles = function (props) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
var theme = props.theme, dateRangeType = props.dateRangeType, showWeekNumbers = props.showWeekNumbers, lightenDaysOutsideNavigatedMonth = props.lightenDaysOutsideNavigatedMonth, animateBackwards = props.animateBackwards, animationDirection = props.animationDirection;
var palette = theme.palette;
var classNames = (0, style_utilities_1.getGlobalClassNames)(GlobalClassNames, theme);
var rowAnimationStyle = {};
if (animateBackwards !== undefined) {
if (animationDirection === Calendar_types_1.AnimationDirection.Horizontal) {
rowAnimationStyle = animateBackwards ? style_utilities_1.AnimationStyles.slideRightIn20 : style_utilities_1.AnimationStyles.slideLeftIn20;
}
else {
rowAnimationStyle = animateBackwards ? style_utilities_1.AnimationStyles.slideDownIn20 : style_utilities_1.AnimationStyles.slideUpIn20;
}
}
var firstTransitionRowAnimationStyle = {};
var lastTransitionRowAnimationStyle = {};
if (animateBackwards !== undefined) {
if (animationDirection !== Calendar_types_1.AnimationDirection.Horizontal) {
firstTransitionRowAnimationStyle = animateBackwards ? { animationName: '' } : style_utilities_1.AnimationStyles.slideUpOut20;
lastTransitionRowAnimationStyle = animateBackwards ? style_utilities_1.AnimationStyles.slideDownOut20 : { animationName: '' };
}
}
var disabledStyle = {
selectors: {
'&, &:disabled, & button': {
color: palette.neutralTertiaryAlt,
pointerEvents: 'none',
},
},
};
return {
wrapper: {
paddingBottom: 10,
},
table: [
{
textAlign: 'center',
borderCollapse: 'collapse',
borderSpacing: '0',
tableLayout: 'fixed',
fontSize: 'inherit',
marginTop: 4,
width: 196,
position: 'relative',
paddingBottom: 10,
},
showWeekNumbers && {
width: 226,
},
],
dayCell: [
(0, style_utilities_1.getFocusStyle)(theme, { inset: -3 }),
{
margin: 0,
padding: 0,
width: 28,
height: 28,
lineHeight: 28,
fontSize: style_utilities_1.FontSizes.small,
fontWeight: style_utilities_1.FontWeights.regular,
color: palette.neutralPrimary,
cursor: 'pointer',
position: 'relative',
selectors: (_a = {},
_a[style_utilities_1.HighContrastSelector] = tslib_1.__assign({ color: 'WindowText', backgroundColor: 'transparent', zIndex: 0 }, (0, style_utilities_1.getHighContrastNoAdjustStyle)()),
_a['&.' + classNames.hoverStyle] = {
backgroundColor: palette.neutralLighter,
selectors: (_b = {},
_b[style_utilities_1.HighContrastSelector] = {
zIndex: 3,
backgroundColor: 'Window',
outline: '1px solid Highlight',
},
_b),
},
_a['&.' + classNames.pressedStyle] = {
backgroundColor: palette.neutralLight,
selectors: (_c = {},
_c[style_utilities_1.HighContrastSelector] = {
borderColor: 'Highlight',
color: 'Highlight',
backgroundColor: 'Window',
},
_c),
},
_a['&.' + classNames.pressedStyle + '.' + classNames.hoverStyle] = {
selectors: (_d = {},
_d[style_utilities_1.HighContrastSelector] = {
backgroundColor: 'Window',
outline: '1px solid Highlight',
},
_d),
},
_a),
},
],
daySelected: [
dateRangeType !== date_time_utilities_1.DateRangeType.Month && {
backgroundColor: palette.neutralLight + '!important',
selectors: (_e = {
'&::before': {
content: '""',
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
}
},
_e['&:hover, &.' + classNames.hoverStyle + ', &.' + classNames.pressedStyle] = (_f = {
backgroundColor: palette.neutralLight + '!important'
},
_f[style_utilities_1.HighContrastSelector] = {
color: 'HighlightText!important',
background: 'Highlight!important',
},
_f),
_e[style_utilities_1.HighContrastSelector] = tslib_1.__assign({ background: 'Highlight!important', color: 'HighlightText!important', borderColor: 'Highlight!important' }, (0, style_utilities_1.getHighContrastNoAdjustStyle)()),
_e),
},
],
weekRow: rowAnimationStyle,
weekDayLabelCell: style_utilities_1.AnimationStyles.fadeIn200,
weekNumberCell: {
margin: 0,
padding: 0,
borderRight: '1px solid',
borderColor: palette.neutralLight,
backgroundColor: palette.neutralLighterAlt,
color: palette.neutralSecondary,
boxSizing: 'border-box',
width: 28,
height: 28,
fontWeight: style_utilities_1.FontWeights.regular,
fontSize: style_utilities_1.FontSizes.small,
},
dayOutsideBounds: disabledStyle,
dayOutsideNavigatedMonth: lightenDaysOutsideNavigatedMonth && {
color: palette.neutralSecondary,
fontWeight: style_utilities_1.FontWeights.regular,
},
dayButton: {
width: 24,
height: 24,
lineHeight: 24,
fontSize: style_utilities_1.FontSizes.small,
fontWeight: 'inherit',
borderRadius: 2,
border: 'none',
padding: 0,
color: 'inherit',
backgroundColor: 'transparent',
cursor: 'pointer',
overflow: 'visible', // explicitly specify for IE11
selectors: {
span: {
height: 'inherit',
lineHeight: 'inherit',
},
},
},
dayIsToday: {
backgroundColor: palette.themePrimary + '!important',
borderRadius: '100%',
color: palette.white + '!important',
fontWeight: (style_utilities_1.FontWeights.semibold + '!important'),
selectors: (_g = {},
_g[style_utilities_1.HighContrastSelector] = tslib_1.__assign({ background: 'WindowText!important', color: 'Window!important', borderColor: 'WindowText!important' }, (0, style_utilities_1.getHighContrastNoAdjustStyle)()),
_g),
},
firstTransitionWeek: tslib_1.__assign(tslib_1.__assign({ position: 'absolute', opacity: 0, width: 0, height: 0, overflow: 'hidden' }, firstTransitionRowAnimationStyle), { animationName: firstTransitionRowAnimationStyle.animationName + ',' + transitionRowDisappearance }),
lastTransitionWeek: tslib_1.__assign(tslib_1.__assign({ position: 'absolute', opacity: 0, width: 0, height: 0, overflow: 'hidden', marginTop: -28 }, lastTransitionRowAnimationStyle), { animationName: lastTransitionRowAnimationStyle.animationName + ',' + transitionRowDisappearance }),
dayMarker: {
width: 4,
height: 4,
backgroundColor: palette.neutralSecondary,
borderRadius: '100%',
bottom: 1,
left: 0,
right: 0,
position: 'absolute',
margin: 'auto',
selectors: (_h = {},
_h['.' + classNames.dayIsTodayStyle + ' &'] = {
backgroundColor: palette.white,
selectors: (_j = {},
_j[style_utilities_1.HighContrastSelector] = {
backgroundColor: 'Window',
},
_j),
},
_h['.' + classNames.daySelectedStyle + ' &'] = {
selectors: (_k = {},
_k[style_utilities_1.HighContrastSelector] = {
backgroundColor: 'HighlightText',
},
_k),
},
_h[style_utilities_1.HighContrastSelector] = tslib_1.__assign({ backgroundColor: 'WindowText' }, (0, style_utilities_1.getHighContrastNoAdjustStyle)()),
_h),
},
topRightCornerDate: {
borderTopRightRadius: '2px',
},
topLeftCornerDate: {
borderTopLeftRadius: '2px',
},
bottomRightCornerDate: {
borderBottomRightRadius: '2px',
},
bottomLeftCornerDate: {
borderBottomLeftRadius: '2px',
},
datesAbove: {
'&::before': {
borderTop: "1px solid ".concat(palette.neutralSecondary),
},
},
datesBelow: {
'&::before': {
borderBottom: "1px solid ".concat(palette.neutralSecondary),
},
},
datesLeft: {
'&::before': {
borderLeft: "1px solid ".concat(palette.neutralSecondary),
},
},
datesRight: {
'&::before': {
borderRight: "1px solid ".concat(palette.neutralSecondary),
},
},
};
};
exports.styles = styles;
});
//# sourceMappingURL=CalendarDayGrid.styles.js.map