zilly-ui/src/styles/datePicker/index.ts

Zilly web react ui components

import { makeStyles } from "@material-ui/styles";
import { transition } from "../common";

const genratorArrowStyle: any = (
	top: string | number,
	borderWidth: string,
	rotate = "-45deg",
	left?: string | number
) => {
	const objs: any = {
		position: "relative",
		top: `${top}`,
		display: "inline-block",
		width: "8px",
		height: "8px;",
		border: "0px solid #aaa",
		borderWidth: borderWidth,
		borderRadius: "1px",
		transform: `rotate(${rotate}) scale(.8)`,
		content: `" "`,
		transition: "all 0.3s"
	};
	if (left) {
		objs["left"] = left;
	}
	return objs;
};

export default makeStyles({
	root: {
		width: 288
	},
	disabledInput: {
		"& input": {
			color: "rgba(0, 0, 0, 0.25)",
			backgroundColor: "#f5f5f5",
			cursor: "not-allowed",
			opacity: 1
		}
	},
	arrowNext: {
		display: "inline-block",
		height: "100%",
		padding: "0 6px",
		"&:before": genratorArrowStyle("-1px", "1.5px 1.5px 0 0", "45deg"),
		"&:hover": {
			"&:before": {
				borderColor: "rgba(0,0,0,0.65)"
			}
		}
	},
	arrowPrev: {
		display: "inline-block",
		height: "100%",
		padding: "0 6px",
		"&:before": genratorArrowStyle("-1px", "1.5px 0 0 1.5px"),
		"&:hover": {
			"&:before": {
				borderColor: "rgba(0,0,0,0.65)"
			}
		}
	},
	doubleArrowPrev: {
		display: "inline-block",
		height: "100%",
		padding: "0 6px",
		"&:before": genratorArrowStyle("-1px", "1.5px 0 0 1.5px"),
		"&:after": genratorArrowStyle("-1px", "1.5px 0 0 1.5px", "-45deg", "-3px"),
		"&:hover": {
			"&:before, &:after": {
				borderColor: "rgba(0,0,0,0.65)"
			}
		}
	},
	doubleArrowNext: {
		display: "inline-block",
		height: "100%",
		padding: "0 6px",
		"&:before": genratorArrowStyle("-1px", "1.5px 1.5px 0 0", "45deg"),
		"&:after": genratorArrowStyle("-1px", "1.5px 1.5px 0 0", "45deg", "0px"),
		"&:hover": {
			"&:before, &:after": {
				borderColor: "rgba(0,0,0,0.65)"
			}
		}
	},
	dateHeader: {
		height: "40px",
		lineHeight: "40px",
		borderTop: "1px solid  #e8e8e8",
		borderBottom: "1px solid  #e8e8e8",
		cursor: "pointer"
	},
	dateTitle: {
		"& span": {
			display: "inline-block",
			color: "rgba(0,0,0,0.85)",
			fontWeight: 500,
			height: "100%",
			lineHeight: "40px",
			transition: "all 0.3s",
			"&:hover": {
				color: "#40a9ff"
			}
		}
	},
	isDisabled: {
		backgroundColor: "#f5f5f5",

		cursor: "not-allowed",
		"& div": {
			cursor: "not-allowed !important",
			color: "rgba(0, 0, 0, 0.25)"
		}
	},
	dateItem: {
		transition: "all 0.2s ease-in-out",
		"&:hover": {
			backgroundColor: "#e6f7ff"
		}
	},
	currentDate: {
		color: "#1890ff",
		fontWeight: "bold",
		border: "1px solid #1890ff",
		"&:hover": {
			backgroundColor: "#e6f7ff"
		}
	},
	isActive: {
		backgroundColor: "#1890ff",
		color: "#fff !important",
		"&:hover": {
			backgroundColor: "#1890ff"
		}
	},
	dateFooter: {
		borderTop: "1px solid #e8e8e8",
		padding: "0 12px",
		minHeight: "38px",

		"&-btn": {
			cursor: "pointer",
			color: "#1890ff",
			transition: "all .3s cubic-bezier(.645, .045, .355, 1)",
			"&:hover": {
				color: "#40a9ff"
			},
			"&-ok": {
				backgroundColor: "#1890ff",
				boxShadow: "0 2px 0 rgba(0,0,0,0.045)",
				height: "24px",
				padding: "0 7px",
				borderRadius: "2px",
				lineHeight: "22px",
				color: "#fff",

				cursor: "pointer",
				touchAction: "manipulation",
				transition: "all .3s cubic-bezier(.645, .045, .355, 1)",
				"&:hover": {
					color: "#fff",
					backgroundColor: " #40a9ff"
				}
			}
		}
	},
	timerWrap: {
		display: "flex",
		width: "290px",
		"&-item": {
			height: "24px",
			lineHeight: "24px",
			textAlign: "center",
			transition: "all 0.3s",
			cursor: "pointer",
			userSelect: "none",
			"&:hover": {
				background: "#e6f7ff"
			},
			"&:focus": {
				outline: 0
			}
		},
		"&-active": {
			background: "#f5f5f5",
			fontWeight: 600,
			"&:focus": {
				outline: 0
			}
		},
		"&-disabled": {
			color: "rgba(0, 0, 0, 0.25)",
			"&:hover": {
				background: "transparent",
				cursor: "not-allowed"
			}
		}
	},
	timerCloumn: {
		flex: 1,
		overflowY: "hidden",
		height: "256px",
		borderRight: "1px solid #e8e8e8",
		transition: "all 0.3s",
		"&:hover": {
			overflowY: "scroll"
		}
	}
});