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

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

.gform-admin {

	.admin-bar & {

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

			@media (--gform-admin-viewport-wpadmin) {
				block-size: calc(100vh - 32px);
				inset-block-start: 32px;
			}
		}
	}

	.wp-admin & {

		.gform-flyout__mask--position-fixed {

			@media (--gform-admin-viewport-wpadmin) {
				inline-size: calc(100% - 160px);
			}
		}
	}

	.wp-admin.folded &,
	.wp-admin.auto-fold & {

		.gform-flyout__mask--position-fixed {

			@media (--gform-admin-viewport-wpadmin) {
				inline-size: calc(100% - 36px);
			}
		}
	}

	.wp-admin.auto-fold:not(.folded) & {

		.gform-flyout__mask--position-fixed {

			@media (--gform-admin-viewport-wpadmin-961) {
				inline-size: calc(100% - 160px);
			}
		}
	}

	.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-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: 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 {
		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--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--expanded {

			&.gform-flyout--right {

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

			&.gform-flyout--left {

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

		&.gform-flyout--simplebar {

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

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

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

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

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

		&:focus-within {

			.gform-flyout__expand {
				opacity: 1;
			}
		}

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

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