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

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

.admin-bar .gform-admin .gform-flyout__mask--position-fixed {
			block-size: calc(100vh - 46px);
			inset-block-start: 46px;
		}

			@media (min-width: 783px) {.admin-bar .gform-admin .gform-flyout__mask--position-fixed {
				block-size: calc(100vh - 32px);
				inset-block-start: 32px
		}
			}

	@media (min-width: 783px) {

	.wp-admin .gform-admin .gform-flyout__mask--position-fixed {
				inline-size: calc(100% - 160px)
		}
			}

	@media (min-width: 783px) {

	.wp-admin.folded .gform-admin .gform-flyout__mask--position-fixed, .wp-admin.auto-fold .gform-admin .gform-flyout__mask--position-fixed {
				inline-size: calc(100% - 36px)
		}
			}

	@media (min-width: 961px) {

	.wp-admin.auto-fold:not(.folded) .gform-admin .gform-flyout__mask--position-fixed {
				inline-size: calc(100% - 160px)
		}
			}

	.gform-admin .gform-flyout__mask {
		align-items: center;
		block-size: 100%;
		display: none;
		inline-size: 100%;
		inset-block-start: 0;
		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: 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 {
			-webkit-backdrop-filter: blur(8px);
			        backdrop-filter: blur(8px);
		}

	.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--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--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--simplebar [data-simplebar="init"] {
				max-block-size: 100%;
				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: 2;
			}

	.gform-admin .gform-flyout.gform-flyout--header-fixed .gform-flyout__close.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--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;
			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 {
			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 {
				border-color: #d5d7e9;
			}

	.gform-admin .gform-flyout .gform-flyout__close.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 {
				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 {
					border-color: #fff;
				}

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

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

	.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;
		padding-inline-end: 1.125rem;
	}

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

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

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

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 */