@gravityforms/components/css/admin/calendar.css

UI components for use in Gravity Forms development. Both React and vanilla js flavors.

.gform-admin {

	.gform-calendar__wrapper {
		display: inline-block;
		position: relative;

		.gform-calendar {
			display: none;
			margin-block-start: var(--gform-admin-spacer-2);
			opacity: 0;
			position: absolute;
			transition: var(--gform-admin-transition-dropdown);
			z-index: 10;
		}

		&.gform-calendar__wrapper--reveal .gform-calendar {
			display: block;
		}

		&.gform-calendar__wrapper--hide .gform-calendar {
			display: block;
			opacity: 0;
		}

		&.gform-calendar__wrapper--open .gform-calendar {
			display: block;
			opacity: 1;
		}
	}

	.gform-calendar {
		background: var(--gform-admin-color-white);
		border-radius: 3px;
		box-shadow: var(--gform-admin-box-shadow-popup);
		box-sizing: border-box;
		font-family: var(--gform-admin-font-family-base);
		inline-size: 17.125rem;
		padding: var(--gform-admin-spacer-3);
	}

	.gform-calendar__calendar {

		button {
			appearance: none;
			background-color: transparent;
			border: none;
			cursor: pointer;
			font-family: var(--gform-admin-font-family-base);
			outline: none;
			padding: 0;
		}

		/* Navigation */

		.react-calendar__navigation {
			display: flex;
			gap: 0.375rem;
			margin-block-end: 0.375rem;
		}

		.react-calendar__navigation__arrow {
			block-size: 1.5rem;
			border: 1px solid var(--gform-admin-color-porcelain-gray);
			border-radius: 3px;
			box-shadow: var(--gform-admin-box-shadow-micro);
			flex: none;
			inline-size: 1.5rem;
			padding: 1px;

			svg path {
				fill: var(--gform-admin-color-comet);
			}

			&:hover,
			&:focus {

				svg path {
					fill: var(--gform-admin-color-chathams);
				}
			}
		}

		.react-calendar__navigation__label {
			color: var(--gform-admin-color-port);
			flex: auto;
			font-size: var(--gform-admin-font-size-sm);
			font-weight: var(--gform-admin-font-weight-medium);

			&:hover,
			&:focus {
				color: var(--gform-admin-color-chathams);
			}
		}

		/* Tiles */

		.react-calendar__month-view__days__day,
		.react-calendar__year-view__months__month,
		.react-calendar__decade-view__years__year,
		.react-calendar__century-view__decades__decade {
			border: 1px solid transparent;
			border-radius: 3px;
			color: var(--gform-admin-color-port);
			line-height: 1;

			&:hover,
			&.react-calendar__tile--range {
				background: var(--gform-admin-color-anti-flash-white);
				border: 1px solid var(--gform-admin-color-snuff);
			}

			&:focus {
				border: 1px solid var(--gform-admin-color-chathams);
			}

			&:disabled {
				color: var(--gform-admin-color-snuff);
			}

			&.react-calendar__tile--now {
				position: relative;

				&::after {
					background: var(--gform-admin-color-chathams);
					block-size: 3px;
					border-radius: 50%;
					content: "";
					inline-size: 3px;
					inset-block-end: 0.125rem;
					inset-inline-start: 50%;
					position: absolute;
					transform: translateX(-50%);
				}
			}

			&.react-calendar__tile--rangeStart,
			&.react-calendar__tile--rangeEnd {
				background: var(--gform-admin-color-chathams);
				border: 1px solid var(--gform-admin-color-chathams);
				color: var(--gform-admin-color-white);

				&.react-calendar__tile--now::after {
					background: var(--gform-admin-color-white);
				}
			}
		}

		/* Month View */

		.react-calendar__month-view__weekdays {
			block-size: 2.3125rem;
			margin-inline: calc((var(--gform-admin-spacer-3) / 2) * -1);
		}

		.react-calendar__month-view__weekdays__weekday {
			align-items: center;
			display: flex;
			justify-content: center;

			abbr {
				font-size: var(--gform-admin-font-size-xs);
				font-weight: var(--gform-admin-font-weight-semibold);
				text-decoration: none;
			}
		}

		.react-calendar__month-view__days {
			column-gap: calc(var(--gform-admin-spacer-3) / 2);
			display: grid !important;
			grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
			margin-inline: calc((var(--gform-admin-spacer-3) / 2) * -1);
			row-gap: var(--gform-admin-spacer-3);
		}

		.react-calendar__month-view__days__day {
			block-size: 2rem;
			font-size: var(--gform-admin-font-size-sm);
			font-weight: var(--gform-admin-font-weight-normal);

			&.react-calendar__month-view__days__day--neighboringMonth {
				color: var(--gform-admin-color-snuff);
			}
		}

		/* Year/Decade/Century View */

		.react-calendar__year-view,
		.react-calendar__decade-view,
		.react-calendar__century-view {
			padding-block: var(--gform-admin-spacer-4) 0.625rem;
		}

		.react-calendar__year-view__months,
		.react-calendar__decade-view__years,
		.react-calendar__century-view__decades {
			column-gap: 0.625rem;
			display: grid !important;
			grid-template-columns: 1fr 1fr 1fr;
			row-gap: var(--gform-admin-spacer-3);
		}

		.react-calendar__year-view__months__month,
		.react-calendar__decade-view__years__year,
		.react-calendar__century-view__decades__decade {
			background: var(--gform-admin-color-titan-white);
			block-size: 1.875rem;
			font-size: var(--gform-admin-font-size-xs);
			font-weight: var(--gform-admin-font-weight-medium);
		}
	}

	.gform-calendar__footer {
		display: flex;
		gap: var(--gform-admin-spacer-2);
		justify-content: center;
		margin-block-start: var(--gform-admin-spacer-3);
	}
}