@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
122 lines • 5.07 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useCalendarStyles = void 0;
var css_1 = require("@emotion/css");
var react_components_1 = require("@fluentui/react-components");
var useCalendarStyles = function () {
var styles = {
calendarWrapper: (0, css_1.css)({
padding: "20px",
paddingTop: "10px",
overflow: "auto",
flex: 1,
display: "grid",
gridTemplateColumns: "repeat(7, 1fr)", // 7 columns for the days of the week
gridTemplateRows: "auto", // Automatically sizes the header row
gridAutoRows: "minmax(100px, 1fr)", // Ensures all rows have a minimum height of 100px and grow equally
gap: "1px", // Gap between cells
width: "calc(100% - 40px)", // Full width minus padding
}),
header: (0, css_1.css)({
display: "flex",
justifyContent: "start",
gap: "10px",
alignItems: "center",
padding: "16px",
}),
dayHeader: (0, css_1.css)({
textAlign: "start",
padding: "8px",
borderBottom: "1px solid ".concat(react_components_1.tokens.colorNeutralStroke1),
}),
day: (0, css_1.css)({
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
border: "1px solid ".concat(react_components_1.tokens.colorNeutralStroke1),
backgroundColor: react_components_1.tokens.colorNeutralBackground1,
position: "relative", // Ensure proper stacking context
}),
otherMonthDay: (0, css_1.css)({
color: react_components_1.tokens.colorNeutralStroke2,
backgroundColor: react_components_1.tokens.colorNeutralBackground2,
}),
cardDay: (0, css_1.css)({
height: "100%",
minHeight: 100,
borderRadius: 0,
overflow: "hidden !important",
}),
cardDayOnHover: (0, css_1.css)({
":hover": {
backgroundColor: react_components_1.tokens.colorNeutralBackground2,
},
}),
currentDay: (0, css_1.css)({
borderTop: "5px solid ".concat(react_components_1.tokens.colorBrandBackground),
}),
currentDayLabel: (0, css_1.css)({
color: react_components_1.tokens.colorBrandBackground,
fontWeight: 600,
}),
eventCard: (0, css_1.css)({
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
zIndex: 1, // Ensure it appears above parent hover styles
}),
eventContainer: (0, css_1.css)({
display: "flex",
flexDirection: "column",
overflowY: "auto", // Ensures proper overflow handling
paddingTop: "5px",
paddingBottom: "5px",
paddingLeft: "5px",
paddingRight: "5px",
// Scrollbar styles
"::-webkit-scrollbar": {
width: "5px", // Width for vertical scrollbars
height: "5px", // Height for horizontal scrollbars
},
"::-webkit-scrollbar-track": {
background: react_components_1.tokens.colorNeutralBackground4, // Light gray for the track
borderRadius: "10px",
},
"::-webkit-scrollbar-thumb": {
background: react_components_1.tokens.colorBrandStroke2Hover, // Dark gray for the thumb
borderRadius: "10px",
},
"::-webkit-scrollbar-thumb:hover": {
background: react_components_1.tokens.colorNeutralStroke2, // Dark gray for the thumb
},
}),
eventCardWeekView: (0, css_1.css)({
backgroundColor: react_components_1.tokens.colorBrandBackground,
color: react_components_1.tokens.colorNeutralForegroundOnBrand,
borderRadius: "4px",
padding: "4px",
margin: "2px",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
height: "100%",
}),
popoverContent: (0, css_1.css)({
padding: 0,
borderTopWidth: 20,
borderTopStyle: "solid",
}),
};
var applyEventHouverColorClass = function (backgroundColor, houverColor) {
return (0, css_1.css)({
backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : react_components_1.tokens.colorBrandBackground,
":hover": {
backgroundColor: houverColor !== null && houverColor !== void 0 ? houverColor : react_components_1.tokens.colorBrandBackgroundHover,
},
});
};
return { styles: styles, applyEventHouverColorClass: applyEventHouverColorClass };
};
exports.useCalendarStyles = useCalendarStyles;
//# sourceMappingURL=useCalendarStyles.js.map