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

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

/* Flyout: WordPress UI Handling */

	.admin-bar .gform-admin .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-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-admin .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-admin .gform-flyout__mask.gform-flyout--anim-in-ready {
			display: flex;
		}

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

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

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

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

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

	.gform-admin .gform-flyout__mask.gform-flyout__mask--blur {
			backdrop-filter: blur(8px);
		}

	.gform-admin .gform-flyout__mask.gform-flyout--pinned {
			pointer-events: none;
		}

	.gform-admin .gform-flyout__mask.gform-flyout--pinned .gform-flyout {
				pointer-events: auto;
			}

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

	/* Flyout */

	.gform-admin .gform-flyout {
		background-color: #fff;
		block-size: 100%;
		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;
		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;
	}

	.gform-admin .gform-flyout:hover .gform-flyout__expand {
				opacity: 1;
			}

	.gform-admin .gform-flyout p {
			margin: 0;
			padding: 0;
		}

	.gform-admin .gform-flyout * {
			box-sizing: border-box;
		}

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

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

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

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

	.gform-admin .gform-flyout.gform-flyout--hide-expander .gform-flyout__expand {
				opacity: 0;
			}

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

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

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

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

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

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

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

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

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

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

	.gform-admin .gform-flyout.gform-flyout--expanded.gform-flyout--right .gform-flyout__expand-icon {
					transform: rotate(-90deg);
				}

	.gform-admin .gform-flyout.gform-flyout--expanded.gform-flyout--left .gform-flyout__expand-icon {
					transform: rotate(90deg);
				}

	.gform-admin .gform-flyout.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.
				*/

	.gform-admin .gform-flyout.gform-flyout--scroll-simplebar .gform-flyout__simplebar > .simplebar-wrapper > .simplebar-mask > .simplebar-offset > .simplebar-content-wrapper > .simplebar-content {
						min-block-size: 100%;
					}

	.gform-admin .gform-flyout.gform-flyout--scroll-simplebar .gform-flyout__body {
				block-size: auto;
			}

	.gform-admin .gform-flyout.gform-flyout--scroll-native.gform-flyout--header-footer-fixed .gform-flyout__body {
					overflow-y: auto;
				}

	.gform-admin .gform-flyout.gform-flyout--scroll-native:where(:not(.gform-flyout--header-footer-fixed)) {
				overflow-y: auto;
			}

	.gform-admin .gform-flyout.gform-flyout--scroll-native:where(:not(.gform-flyout--header-footer-fixed)) .gform-flyout__body {
					block-size: auto;
				}

	/* CASE: specific to HTML component */

	.gform-admin .gform-flyout:not([class*="gform-flyout--scroll-"]) .gform-flyout__body {
				overflow-y: auto;
			}

	.gform-admin .gform-flyout.gform-flyout--header-fixed .gform-flyout__head {
				align-items: center;
				background-color: #fff;
				inset-block-start: 0;
				padding: 1rem;
				position: sticky;
				z-index: 5;
			}

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

	@media (max-width: 767px) {

	.gform-admin .gform-flyout.gform-flyout--header-fixed .gform-flyout__body {
					padding: 1rem
			}
				}

	.gform-admin .gform-flyout.gform-flyout--footer-fixed .gform-flyout__footer {
				align-items: center;
				background-color: #fff;
				inset-block-end: 0;
				padding: 1rem;
				position: sticky;
				z-index: 5;
			}

	.gform-admin .gform-flyout.gform-flyout--footer-fixed .gform-flyout__footer::before {
					background-color: #ecedf8;
					block-size: 0.0625rem;
					content: "";
					inline-size: 100%;
					inset-block-start: 0;
					inset-inline-start: 0;
					position: absolute;
				}

	.gform-admin .gform-flyout.gform-flyout--divider .gform-flyout__head::after {
					background-color: #ecedf8;
					block-size: 0.0625rem;
					content: "";
					inline-size: 100%;
					inset-block-end: 0;
					inset-inline-start: 0;
					position: absolute;
				}

	.gform-admin .gform-flyout .gform-flyout__head {
			align-items: flex-start;
			display: flex;
			flex: none;
			gap: 1rem;
			justify-content: space-between;
			min-block-size: 62px;
			padding-block: 2rem;
			padding-inline: 2.5rem;
			position: relative;
		}

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

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

	.gform-admin .gform-flyout .gform-flyout__close.gform-button--size-xs, .gform-admin .gform-flyout .gform-flyout__expander.gform-button--size-xs {
			align-items: center;
			block-size: 1.625rem;
			border: 1px solid #d5d7e9;
			display: flex;
			font-size: 1.25rem;
			inline-size: 1.625rem;
			transition: border-color 200ms ease-in-out, box-shadow 200ms ease-in-out;
			z-index: 5;
		}

	.gform-admin .gform-flyout .gform-flyout__close.gform-button--size-xs:hover, .gform-admin .gform-flyout .gform-flyout__close.gform-button--size-xs:focus, .gform-admin .gform-flyout .gform-flyout__expander.gform-button--size-xs:hover, .gform-admin .gform-flyout .gform-flyout__expander.gform-button--size-xs:focus {
				border-color: #d5d7e9;
			}

	.gform-admin .gform-flyout .gform-flyout__close.gform-button--size-xs .gform-button__icon, .gform-admin .gform-flyout .gform-flyout__expander.gform-button--size-xs .gform-button__icon {
				font-size: 1.875rem;
			}

	.gform-admin .gform-flyout .gform-flyout__close.gform-button--size-xs.gform-button--simplified, .gform-admin .gform-flyout .gform-flyout__expander.gform-button--size-xs.gform-button--simplified {
				block-size: 1.875rem;
				border: 1px solid transparent;
				inline-size: 1.875rem;
				transition: transform 300ms ease, box-shadow 300ms ease, background-color 300ms ease;
			}

	.gform-admin .gform-flyout .gform-flyout__close.gform-button--size-xs.gform-button--simplified:hover, .gform-admin .gform-flyout .gform-flyout__expander.gform-button--size-xs.gform-button--simplified:hover {
					border-color: #fff;
				}

	.gform-admin .gform-flyout .gform-flyout__close.gform-button--size-xs.gform-button--simplified:focus, .gform-admin .gform-flyout .gform-flyout__expander.gform-button--size-xs.gform-button--simplified:focus {
					border-color: #175cff;
				}

	.gform-admin .gform-flyout .gform-flyout__close.gform-button--size-xs.gform-button--simplified .gform-button__icon, .gform-admin .gform-flyout .gform-flyout__expander.gform-button--size-xs.gform-button--simplified .gform-button__icon {
					font-size: 1.125rem;
				}

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

	.gform-admin .gform-flyout .gform-flyout__expand {
			align-items: center;
			background: #fff;
			block-size: 56px;
			border: 1px solid #ecedf8;
			border-radius: 19px;
			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);
			color: #242748;
			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;
		}

	.gform-admin .gform-flyout .gform-flyout__expand:focus {
				border-color: #d5d7e9;
				opacity: 1;
				outline: none;
			}

	.gform-admin .gform-flyout .gform-flyout__expand:focus .gform-flyout__expand-icon {
					color: #3e7da6;
				}

	.gform-admin .gform-flyout .gform-flyout__expand:hover .gform-flyout__expand-icon {
					color: #3e7da6;
				}

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

	/* Flyout: Title */

	.gform-admin .gform-flyout__title {
		color: #242748;
		font-family: inter, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen-sans, ubuntu, cantarell, "Helvetica Neue", sans-serif;
		font-size: 0.8125rem;
		font-weight: 500;
		line-height: 18px;
		margin-block: 0 12px;
		margin-inline: 0;
	}

	.gform-admin .gform-flyout--no-description .gform-flyout__title {
			margin: 0;
		}

	/* Flyout: Description */

	.gform-admin .gform-flyout__desc {
		color: #242748;
		font-family: inter, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen-sans, ubuntu, cantarell, "Helvetica Neue", sans-serif;
		font-size: 0.8125rem;
	}

	/* Flyout: Body */

	.gform-admin .gform-flyout__body {
		block-size: 100%;
		color: #242748;
		font-family: inter, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen-sans, ubuntu, cantarell, "Helvetica Neue", sans-serif;
		font-size: 0.8125rem;
		padding-block: 2rem;
		padding-inline: 2.5rem;
	}

	.gform-admin .gform-flyout__body:focus-within .gform-flyout__expand {
				opacity: 1;
			}

	.gform-admin .gform-flyout__body .gform-flyout__simplebar > .simplebar-wrapper {
				block-size: 100%;
			}

	/* Flyout: Footer */

	.gform-admin .gform-flyout__footer {
		align-items: flex-start;
		display: flex;
		flex: none;
		gap: 1rem;
		justify-content: space-between;
		min-block-size: 62px;
		padding-block: 2rem;
		padding-inline: 2.5rem;
		position: relative;
	}

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

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

	/* Flyout: Pinned Drag Handle */

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

	.gform-admin .gform-flyout__pinned-drag-handle-wrapper:hover {
			background-color: #9092b0;
		}

	.gform-admin .gform-flyout__pinned-drag-handle-wrapper[\:has\(\:focus-visible\)], .gform-admin .gform-flyout__pinned-drag-handle-wrapper[\:has\(\[data-dragging\%3D\%22true\%22\]\)], .gform-admin .gform-flyout__pinned-drag-handle-wrapper[\:has\(\[data-dragging\%3D\%22true\%22\]\)]:hover {
			background-color: #175cff;
		}

	.gform-admin .gform-flyout__pinned-drag-handle-wrapper[\:has\(\:focus-visible\)], .gform-admin .gform-flyout__pinned-drag-handle-wrapper[\:has\(\[data-dragging\%3D\%22true\%22\]\)], .gform-admin .gform-flyout__pinned-drag-handle-wrapper[\:has\(\[data-dragging\%3D\%22true\%22\]\)]:hover {
			background-color: #175cff;
		}

	.gform-admin .gform-flyout__pinned-drag-handle-wrapper:has(:focus-visible), .gform-admin .gform-flyout__pinned-drag-handle-wrapper:has([data-dragging="true"]), .gform-admin .gform-flyout__pinned-drag-handle-wrapper:has([data-dragging="true"]):hover {
			background-color: #175cff;
		}

	.gform-admin .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;
	}

	.gform-admin .gform-flyout__pinned-drag-handle:hover {
			background-color: #9092b0;
			opacity: 0.26;
		}

	.gform-admin .gform-flyout__pinned-drag-handle:focus-visible, .gform-admin .gform-flyout__pinned-drag-handle[data-dragging="true"], .gform-admin .gform-flyout__pinned-drag-handle[data-dragging="true"]:hover {
			background-color: #175cff;
			opacity: 0.26;
		}

html[dir="rtl"] .gform-admin .gform-flyout.gform-flyout--right .gform-flyout__expand-icon {
				transform: rotate(-90deg);
			}

html[dir="rtl"] .gform-admin .gform-flyout.gform-flyout--left .gform-flyout__expand-icon {
				transform: rotate(90deg);
			}

html[dir="rtl"] .gform-admin .gform-flyout.gform-flyout--expanded.gform-flyout--right .gform-flyout__expand-icon {
					transform: rotate(90deg);
				}

html[dir="rtl"] .gform-admin .gform-flyout.gform-flyout--expanded.gform-flyout--left .gform-flyout__expand-icon {
					transform: rotate(-90deg);
				}

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