@gravityforms/components/css/admin/flyout.css

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

.gform-admin {

	/* Flyout: WordPress UI Handling */

	.admin-bar & {

		.gform-flyout__mask--position-fixed.gform-flyout--offset-wpadmin-bar {
			block-size: calc(100vh - var(--gform-admin-wp-admin-bar-offset) - var(--gform-admin-flyout-top-offset));
			inset-block-start: calc(var(--gform-admin-wp-admin-bar-offset) + var(--gform-admin-flyout-top-offset));
		}
	}

	.wp-admin & {

		.gform-flyout__mask--position-fixed.gform-flyout--offset-wpadmin-menu {
			inline-size: calc(100% - var(--gform-admin-wp-admin-menu-offset));
		}
	}

	/* Flyout: Mask */

	.gform-flyout__mask {
		align-items: center;
		backdrop-filter: blur(0);
		block-size: calc(100% - var(--gform-admin-flyout-top-offset));
		display: none;
		inline-size: 100%;
		inset-block-start: var(--gform-admin-flyout-top-offset);
		justify-content: center;
		opacity: 0;
		transition: opacity 200ms ease-in-out;

		&.gform-flyout--anim-in-ready {
			display: flex;
		}

		&.gform-flyout--anim-in-active {
			opacity: 1;
		}

		&.gform-flyout__mask--position-fixed {
			position: fixed;
		}

		&.gform-flyout__mask--position-absolute {
			position: absolute;
		}

		&.gform-flyout__mask--theme-light {
			background-color: rgba(255, 255, 255, 0.65);
		}

		&.gform-flyout__mask--theme-dark {
			background-color: rgba(36, 39, 72, 0.75);
		}

		&.gform-flyout__mask--blur {
			backdrop-filter: blur(8px);
		}
	
		&.gform-flyout--pinned {
			pointer-events: none;
	
			.gform-flyout {
				pointer-events: auto;
			}
		}

		&:not(.gform-flyout--offset-wpadmin-menu) {
			inset-inline-start: 0;
		}
	}

	/* Flyout */

	.gform-flyout {
		background-color: var(--gform-admin-color-white);
		block-size: 100%;
		box-shadow: var(--gform-admin-box-shadow-popup);
		box-sizing: border-box;
		display: none;
		flex-direction: column;
		inset-block-end: 0;
		inset-block-start: 0;
		inset-inline-start: 0;
		opacity: 0;
		position: absolute;
		transition: opacity 200ms ease-in-out, width 200ms ease-in-out;

		&:hover {

			.gform-flyout__expand {
				opacity: 1;
			}
		}

		p {
			margin: 0;
			padding: 0;
		}

		* {
			box-sizing: border-box;
		}

		&.gform-flyout--anim-in-ready {
			display: flex;
		}

		&.gform-flyout--anim-in-active {
			opacity: 1;
		}

		&.gform-flyout--fixed {
			position: fixed;
		}

		&.gform-flyout--absolute {
			position: absolute;
		}

		&.gform-flyout--hide-expander {

			.gform-flyout__expand {
				opacity: 0;
			}
		}

		&.gform-flyout--right {
			inset-inline-end: 0;
			inset-inline-start: auto;

			.gform-flyout__expand-rail {
				inset-inline-start: -35px;
			}

			.gform-flyout__expand {
				inset-inline-start: -35px;
			}

			.gform-flyout__expand-icon {
				transform: rotate(90deg);
			}

			.gform-flyout__pinned-drag-handle-wrapper {
				inset-inline-start: 0;
			}
		}

		&.gform-flyout--left {

			.gform-flyout__expand-rail {
				inset-inline-end: -35px;
			}

			.gform-flyout__expand {
				inset-inline-end: -35px;
			}

			.gform-flyout__expand-icon {
				transform: rotate(-90deg);
			}

			.gform-flyout__pinned-drag-handle-wrapper {
				inset-inline-end: 0;
			}
		}

		&.gform-flyout--dragging {
			transition: none;
		}

		&.gform-flyout--expanded {

			&.gform-flyout--right {

				.gform-flyout__expand-icon {
					transform: rotate(-90deg);
				}
			}

			&.gform-flyout--left {

				.gform-flyout__expand-icon {
					transform: rotate(90deg);
				}
			}
		}

		&.gform-flyout--scroll-simplebar {

			.gform-flyout__simplebar {
				display: flex;
				flex: 1;
				max-block-size: 100%;
				overflow-y: auto;

				/*
				NOTE:
				This sucks, but is necessary due to bugs with SimpleBar's classNames prop.
				We need to target the flyout's implementation specifically as there can be
				other instances of SimpleBar used within child components.
				*/
				& > .simplebar-wrapper > .simplebar-mask > .simplebar-offset > .simplebar-content-wrapper {

					& > .simplebar-content {
						min-block-size: 100%;
					}
				}
			}

			.gform-flyout__body {
				block-size: auto;
			}
		}

		&.gform-flyout--scroll-native {

			&.gform-flyout--header-footer-fixed {

				.gform-flyout__body {
					overflow-y: auto;
				}
			}

			&:where(:not(.gform-flyout--header-footer-fixed)) {
				overflow-y: auto;

				.gform-flyout__body {
					block-size: auto;
				}
			}
		}

		/* CASE: specific to HTML component */
		&:not([class*="gform-flyout--scroll-"]) {

			.gform-flyout__body {
				overflow-y: auto;
			}
		}

		&.gform-flyout--header-fixed {

			.gform-flyout__head {
				align-items: center;
				background-color: var(--gform-admin-color-white);
				inset-block-start: 0;
				padding: var(--gform-admin-spacer-4);
				position: sticky;
				z-index: 5;
			}

			.gform-flyout__close.gform-button--size-xs,
			.gform-flyout__expander.gform-button--size-xs {
				inset-block-start: 0;
			}

			.gform-flyout__body {

				@media (--gform-admin-viewport-md-down) {
					padding: var(--gform-admin-spacer-4);
				}
			}
		}

		&.gform-flyout--footer-fixed {

			.gform-flyout__footer {
				align-items: center;
				background-color: var(--gform-admin-color-white);
				inset-block-end: 0;
				padding: var(--gform-admin-spacer-4);
				position: sticky;
				z-index: 5;

				&::before {
					background-color: var(--gform-admin-color-white-lilac);
					block-size: 0.0625rem;
					content: "";
					inline-size: 100%;
					inset-block-start: 0;
					inset-inline-start: 0;
					position: absolute;
				}
			}
		}

		&.gform-flyout--divider {

			.gform-flyout__head {

				&::after {
					background-color: var(--gform-admin-color-white-lilac);
					block-size: 0.0625rem;
					content: "";
					inline-size: 100%;
					inset-block-end: 0;
					inset-inline-start: 0;
					position: absolute;
				}
			}
		}

		.gform-flyout__head {
			align-items: flex-start;
			display: flex;
			flex: none;
			gap: 1rem;
			justify-content: space-between;
			min-block-size: 62px;
			padding-block: var(--gform-admin-spacer-8);
			padding-inline: var(--gform-admin-spacer-10);
			position: relative;
		}

		.gform-flyout__head-left {
			align-self: center;
			flex: 1 1 auto;
		}

		.gform-flyout__head-right {
			align-items: center;
			display: flex;
			gap: 0.5rem;
		}

		.gform-flyout__close.gform-button--size-xs,
		.gform-flyout__expander.gform-button--size-xs {
			align-items: center;
			block-size: 1.625rem;
			border: 1px solid var(--gform-admin-color-snuff);
			display: flex;
			font-size: 1.25rem;
			inline-size: 1.625rem;
			transition: var(--gform-admin-transition-cl-button-focus);
			z-index: 5;

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

			.gform-button__icon {
				font-size: 1.875rem;
			}

			&.gform-button--simplified {
				block-size: 1.875rem;
				border: 1px solid transparent;
				inline-size: 1.875rem;
				transition: var(--gform-admin-transition-button);

				&:hover {
					border-color: var(--gform-admin-color-white);
				}

				&:focus {
					border-color: var(--gform-admin-color-blue-ribbon);
				}

				.gform-button__icon {
					font-size: 1.125rem;
				}
			}
		}

		.gform-flyout__expand-rail {
			block-size: 56px;
			inline-size: 35px;
			inset-block-start: 50%;
			margin-block-start: -28px;
			position: absolute;
		}

		.gform-flyout__expand {
			align-items: center;
			background: var(--gform-admin-color-white);
			block-size: 56px;
			border: 1px solid var(--gform-admin-color-white-lilac);
			border-radius: 19px;
			box-shadow: var(--gform-admin-box-shadow-popup);
			color: var(--gform-admin-color-port);
			cursor: pointer;
			display: flex;
			inline-size: 19px;
			inset-block-start: 50%;
			justify-content: center;
			margin-block-start: -28px;
			opacity: 0;
			position: absolute;
			transition: opacity 0.15s ease, transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;

			&:focus {
				border-color: var(--gform-admin-color-snuff);
				opacity: 1;
				outline: none;

				.gform-flyout__expand-icon {
					color: var(--gform-admin-color-gravity-blue);
				}
			}

			&:hover {

				.gform-flyout__expand-icon {
					color: var(--gform-admin-color-gravity-blue);
				}
			}
		}

		.gform-flyout__expand-icon {
			align-items: center;
			block-size: 15px;
			color: var(--gform-admin-color-port);
			display: flex;
			font-size: 1rem;
			inline-size: 100%;
			justify-content: center;
			position: relative;
			transition: color 300ms ease;
		}
	}

	/* Flyout: Title */

	.gform-flyout__title {
		color: var(--gform-admin-color-port);
		font-family: var(--gform-admin-font-family-base);
		font-size: var(--gform-admin-font-size-base-old);
		font-weight: var(--gform-common-font-weight-medium);
		line-height: 18px;
		margin-block: 0 12px;
		margin-inline: 0;
	}

	.gform-flyout--no-description {

		.gform-flyout__title {
			margin: 0;
		}
	}

	/* Flyout: Description */

	.gform-flyout__desc {
		color: var(--gform-admin-color-port);
		font-family: var(--gform-admin-font-family-base);
		font-size: var(--gform-admin-font-size-base-old);
	}

	/* Flyout: Body */

	.gform-flyout__body {
		block-size: 100%;
		color: var(--gform-admin-color-port);
		font-family: var(--gform-admin-font-family-base);
		font-size: var(--gform-admin-font-size-base-old);
		padding-block: var(--gform-admin-spacer-8);
		padding-inline: var(--gform-admin-spacer-10);

		&:focus-within {

			.gform-flyout__expand {
				opacity: 1;
			}
		}

		.gform-flyout__simplebar {

			& > .simplebar-wrapper {
				block-size: 100%;
			}
		}
	}

	/* Flyout: Footer */

	.gform-flyout__footer {
		align-items: flex-start;
		display: flex;
		flex: none;
		gap: 1rem;
		justify-content: space-between;
		min-block-size: 62px;
		padding-block: var(--gform-admin-spacer-8);
		padding-inline: var(--gform-admin-spacer-10);
		position: relative;
	}

	.gform-flyout__footer-left,
	.gform-flyout__footer-right {
		align-items: center;
		display: flex;
		gap: 0.5rem;
	}

	.gform-flyout__footer-right {
		margin-inline-start: auto;
	}

	/* Flyout: Pinned Drag Handle */

	.gform-flyout__pinned-drag-handle-wrapper {
		background-color: var(--gform-admin-color-snuff);
		block-size: 100%;
		inline-size: 3px;
		inset-block-end: 0;
		inset-block-start: 0;
		pointer-events: auto;
		position: absolute;
		transition: 200ms ease-in-out;

		&:hover {
			background-color: var(--gform-admin-color-santas);
		}

		&:has(:focus-visible),
		&:has([data-dragging="true"]),
		&:has([data-dragging="true"]):hover {
			background-color: var(--gform-admin-color-blue-ribbon);
		}
	}

	.gform-flyout__pinned-drag-handle {
		background-color: transparent;
		block-size: 100%;
		cursor: col-resize;
		inset: 0 -3px;
		opacity: 0;
		position: absolute;
		transition: 200ms ease-in-out;
		
		&:hover {
			background-color: var(--gform-admin-color-santas);
			opacity: 0.26;
		}

		&:focus-visible,
		&[data-dragging="true"],
		&[data-dragging="true"]:hover {
			background-color: var(--gform-admin-color-blue-ribbon);
			opacity: 0.26;
		}
	}
}

html[dir="rtl"] .gform-admin {

	.gform-flyout {

		&.gform-flyout--right {

			.gform-flyout__expand-icon {
				transform: rotate(-90deg);
			}
		}

		&.gform-flyout--left {

			.gform-flyout__expand-icon {
				transform: rotate(90deg);
			}
		}

		&.gform-flyout--expanded {

			&.gform-flyout--right {

				.gform-flyout__expand-icon {
					transform: rotate(90deg);
				}
			}

			&.gform-flyout--left {

				.gform-flyout__expand-icon {
					transform: rotate(-90deg);
				}
			}
		}
	}
}