@gravityforms/components/dist/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-admin .gform-calendar__wrapper .gform-calendar {
			display: none;
			margin-block-start: 0.5rem;
			opacity: 0;
			position: absolute;
			transition: opacity 0.15s ease;
			z-index: 10;
		}

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

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

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

	.gform-admin .gform-calendar {
		background: #fff;
		border-radius: 3px;
		box-shadow: 0 0 1px rgba(18, 25, 97, 0.24), 0 24px 24px rgba(18, 25, 97, 0.03), 0 2px 2px rgba(18, 25, 97, 0.03), 0 4px 4px rgba(18, 25, 97, 0.03), 0 8px 8px rgba(18, 25, 97, 0.03), 0 16px 16px rgba(18, 25, 97, 0.03);
		box-sizing: border-box;
		font-family: inter, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen-sans, ubuntu, cantarell, "Helvetica Neue", sans-serif;
		inline-size: 17.125rem;
		padding: 0.75rem;
	}

	.gform-admin .gform-calendar__calendar button {
			-webkit-appearance: none;
			   -moz-appearance: none;
			        appearance: none;
			background-color: transparent;
			border: none;
			cursor: pointer;
			font-family: inter, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen-sans, ubuntu, cantarell, "Helvetica Neue", sans-serif;
			outline: none;
			padding: 0;
		}

	/* Navigation */

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

	.gform-admin .gform-calendar__calendar .react-calendar__navigation__arrow {
			block-size: 1.5rem;
			border: 1px solid #e4e9eb;
			border-radius: 3px;
			box-shadow: 0 1px 4px rgba(18, 25, 97, 0.0779552);
			flex: none;
			inline-size: 1.5rem;
			padding: 1px;
		}

	.gform-admin .gform-calendar__calendar .react-calendar__navigation__arrow svg path {
				fill: #5b5e80;
			}

	.gform-admin .gform-calendar__calendar .react-calendar__navigation__arrow:hover svg path, .gform-admin .gform-calendar__calendar .react-calendar__navigation__arrow:focus svg path {
					fill: #0f3d6c;
				}

	.gform-admin .gform-calendar__calendar .react-calendar__navigation__label {
			color: #242748;
			flex: auto;
			font-size: 0.875rem;
			font-weight: 500;
		}

	.gform-admin .gform-calendar__calendar .react-calendar__navigation__label:hover, .gform-admin .gform-calendar__calendar .react-calendar__navigation__label:focus {
				color: #0f3d6c;
			}

	/* Tiles */

	.gform-admin .gform-calendar__calendar .react-calendar__month-view__days__day, .gform-admin .gform-calendar__calendar .react-calendar__year-view__months__month, .gform-admin .gform-calendar__calendar .react-calendar__decade-view__years__year, .gform-admin .gform-calendar__calendar .react-calendar__century-view__decades__decade {
			border: 1px solid transparent;
			border-radius: 3px;
			color: #242748;
			line-height: 1;
		}

	.gform-admin .gform-calendar__calendar .react-calendar__month-view__days__day:hover, .gform-admin .gform-calendar__calendar .react-calendar__month-view__days__day.react-calendar__tile--range, .gform-admin .gform-calendar__calendar .react-calendar__year-view__months__month:hover, .gform-admin .gform-calendar__calendar .react-calendar__year-view__months__month.react-calendar__tile--range, .gform-admin .gform-calendar__calendar .react-calendar__decade-view__years__year:hover, .gform-admin .gform-calendar__calendar .react-calendar__decade-view__years__year.react-calendar__tile--range, .gform-admin .gform-calendar__calendar .react-calendar__century-view__decades__decade:hover, .gform-admin .gform-calendar__calendar .react-calendar__century-view__decades__decade.react-calendar__tile--range {
				background: #f2f3f5;
				border: 1px solid #d5d7e9;
			}

	.gform-admin .gform-calendar__calendar .react-calendar__month-view__days__day:focus, .gform-admin .gform-calendar__calendar .react-calendar__year-view__months__month:focus, .gform-admin .gform-calendar__calendar .react-calendar__decade-view__years__year:focus, .gform-admin .gform-calendar__calendar .react-calendar__century-view__decades__decade:focus {
				border: 1px solid #0f3d6c;
			}

	.gform-admin .gform-calendar__calendar .react-calendar__month-view__days__day:disabled, .gform-admin .gform-calendar__calendar .react-calendar__year-view__months__month:disabled, .gform-admin .gform-calendar__calendar .react-calendar__decade-view__years__year:disabled, .gform-admin .gform-calendar__calendar .react-calendar__century-view__decades__decade:disabled {
				color: #d5d7e9;
			}

	.gform-admin .gform-calendar__calendar .react-calendar__month-view__days__day.react-calendar__tile--now, .gform-admin .gform-calendar__calendar .react-calendar__year-view__months__month.react-calendar__tile--now, .gform-admin .gform-calendar__calendar .react-calendar__decade-view__years__year.react-calendar__tile--now, .gform-admin .gform-calendar__calendar .react-calendar__century-view__decades__decade.react-calendar__tile--now {
				position: relative;
			}

	.gform-admin .gform-calendar__calendar .react-calendar__month-view__days__day.react-calendar__tile--now::after, .gform-admin .gform-calendar__calendar .react-calendar__year-view__months__month.react-calendar__tile--now::after, .gform-admin .gform-calendar__calendar .react-calendar__decade-view__years__year.react-calendar__tile--now::after, .gform-admin .gform-calendar__calendar .react-calendar__century-view__decades__decade.react-calendar__tile--now::after {
					background: #0f3d6c;
					block-size: 3px;
					border-radius: 50%;
					content: "";
					inline-size: 3px;
					inset-block-end: 0.125rem;
					inset-inline-start: 50%;
					position: absolute;
					transform: translateX(-50%);
				}

	.gform-admin .gform-calendar__calendar .react-calendar__month-view__days__day.react-calendar__tile--rangeStart, .gform-admin .gform-calendar__calendar .react-calendar__month-view__days__day.react-calendar__tile--rangeEnd, .gform-admin .gform-calendar__calendar .react-calendar__year-view__months__month.react-calendar__tile--rangeStart, .gform-admin .gform-calendar__calendar .react-calendar__year-view__months__month.react-calendar__tile--rangeEnd, .gform-admin .gform-calendar__calendar .react-calendar__decade-view__years__year.react-calendar__tile--rangeStart, .gform-admin .gform-calendar__calendar .react-calendar__decade-view__years__year.react-calendar__tile--rangeEnd, .gform-admin .gform-calendar__calendar .react-calendar__century-view__decades__decade.react-calendar__tile--rangeStart, .gform-admin .gform-calendar__calendar .react-calendar__century-view__decades__decade.react-calendar__tile--rangeEnd {
				background: #0f3d6c;
				border: 1px solid #0f3d6c;
				color: #fff;
			}

	.gform-admin .gform-calendar__calendar .react-calendar__month-view__days__day.react-calendar__tile--rangeStart.react-calendar__tile--now::after, .gform-admin .gform-calendar__calendar .react-calendar__month-view__days__day.react-calendar__tile--rangeEnd.react-calendar__tile--now::after, .gform-admin .gform-calendar__calendar .react-calendar__year-view__months__month.react-calendar__tile--rangeStart.react-calendar__tile--now::after, .gform-admin .gform-calendar__calendar .react-calendar__year-view__months__month.react-calendar__tile--rangeEnd.react-calendar__tile--now::after, .gform-admin .gform-calendar__calendar .react-calendar__decade-view__years__year.react-calendar__tile--rangeStart.react-calendar__tile--now::after, .gform-admin .gform-calendar__calendar .react-calendar__decade-view__years__year.react-calendar__tile--rangeEnd.react-calendar__tile--now::after, .gform-admin .gform-calendar__calendar .react-calendar__century-view__decades__decade.react-calendar__tile--rangeStart.react-calendar__tile--now::after, .gform-admin .gform-calendar__calendar .react-calendar__century-view__decades__decade.react-calendar__tile--rangeEnd.react-calendar__tile--now::after {
					background: #fff;
				}

	/* Month View */

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

	.gform-admin .gform-calendar__calendar .react-calendar__month-view__weekdays__weekday {
			align-items: center;
			display: flex;
			justify-content: center;
		}

	.gform-admin .gform-calendar__calendar .react-calendar__month-view__weekdays__weekday abbr {
				font-size: 0.75rem;
				font-weight: 600;
				text-decoration: none;
			}

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

	.gform-admin .gform-calendar__calendar .react-calendar__month-view__days__day {
			block-size: 2rem;
			font-size: 0.875rem;
			font-weight: 400;
		}

	.gform-admin .gform-calendar__calendar .react-calendar__month-view__days__day.react-calendar__month-view__days__day--neighboringMonth {
				color: #d5d7e9;
			}

	/* Year/Decade/Century View */

	.gform-admin .gform-calendar__calendar .react-calendar__year-view, .gform-admin .gform-calendar__calendar .react-calendar__decade-view, .gform-admin .gform-calendar__calendar .react-calendar__century-view {
			padding-block: 1rem 0.625rem;
		}

	.gform-admin .gform-calendar__calendar .react-calendar__year-view__months, .gform-admin .gform-calendar__calendar .react-calendar__decade-view__years, .gform-admin .gform-calendar__calendar .react-calendar__century-view__decades {
			grid-column-gap: 0.625rem;
			-moz-column-gap: 0.625rem;
			     column-gap: 0.625rem;
			display: grid !important;
			grid-template-columns: 1fr 1fr 1fr;
			grid-row-gap: 0.75rem;
			row-gap: 0.75rem;
		}

	.gform-admin .gform-calendar__calendar .react-calendar__year-view__months__month, .gform-admin .gform-calendar__calendar .react-calendar__decade-view__years__year, .gform-admin .gform-calendar__calendar .react-calendar__century-view__decades__decade {
			background: #fdfdff;
			block-size: 1.875rem;
			font-size: 0.75rem;
			font-weight: 500;
		}

	.gform-admin .gform-calendar__footer {
		display: flex;
		gap: 0.5rem;
		justify-content: center;
		margin-block-start: 0.75rem;
	}

/*# sourceMappingURL=calendar.css.map */