@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
118 lines • 4.47 kB
JavaScript
import { css } from "@emotion/css";
import { tokens } from "@fluentui/react-components";
export var useCalendarStyles = function () {
var styles = {
calendarWrapper: 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: css({
display: "flex",
justifyContent: "start",
gap: "10px",
alignItems: "center",
padding: "16px",
}),
dayHeader: css({
textAlign: "start",
padding: "8px",
borderBottom: "1px solid ".concat(tokens.colorNeutralStroke1),
}),
day: css({
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
border: "1px solid ".concat(tokens.colorNeutralStroke1),
backgroundColor: tokens.colorNeutralBackground1,
position: "relative", // Ensure proper stacking context
}),
otherMonthDay: css({
color: tokens.colorNeutralStroke2,
backgroundColor: tokens.colorNeutralBackground2,
}),
cardDay: css({
height: "100%",
minHeight: 100,
borderRadius: 0,
overflow: "hidden !important",
}),
cardDayOnHover: css({
":hover": {
backgroundColor: tokens.colorNeutralBackground2,
},
}),
currentDay: css({
borderTop: "5px solid ".concat(tokens.colorBrandBackground),
}),
currentDayLabel: css({
color: tokens.colorBrandBackground,
fontWeight: 600,
}),
eventCard: css({
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
zIndex: 1, // Ensure it appears above parent hover styles
}),
eventContainer: 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: tokens.colorNeutralBackground4, // Light gray for the track
borderRadius: "10px",
},
"::-webkit-scrollbar-thumb": {
background: tokens.colorBrandStroke2Hover, // Dark gray for the thumb
borderRadius: "10px",
},
"::-webkit-scrollbar-thumb:hover": {
background: tokens.colorNeutralStroke2, // Dark gray for the thumb
},
}),
eventCardWeekView: css({
backgroundColor: tokens.colorBrandBackground,
color: tokens.colorNeutralForegroundOnBrand,
borderRadius: "4px",
padding: "4px",
margin: "2px",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
height: "100%",
}),
popoverContent: css({
padding: 0,
borderTopWidth: 20,
borderTopStyle: "solid",
}),
};
var applyEventHouverColorClass = function (backgroundColor, houverColor) {
return css({
backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : tokens.colorBrandBackground,
":hover": {
backgroundColor: houverColor !== null && houverColor !== void 0 ? houverColor : tokens.colorBrandBackgroundHover,
},
});
};
return { styles: styles, applyEventHouverColorClass: applyEventHouverColorClass };
};
//# sourceMappingURL=useCalendarStyles.js.map