@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 {

			&.gform-flyout--fixed {
				top: 46px;

				@media (--gform-admin-viewport-wpadmin) {
					top: 32px;
				}
			}
		}
	}

	.gform-flyout {
		background: var(--gform-admin-color-white);
		bottom: 0;
		box-shadow: var(--gform-admin-box-shadow-popup);
		box-sizing: border-box;
		display: none;
		flex-direction: column;
		height: 100%;
		left: 0;
		opacity: 0;
		padding-top: 2.125rem;
		position: absolute;
		top: 0;
		transition: opacity 150ms ease-in-out, width 150ms ease-in-out;

		&:hover {

			.gform-flyout__expand {
				opacity: 1;
			}
		}

		p {
			margin: 0;
			padding: 0;
		}

		&.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 {
			left: auto;
			right: 0;

			.gform-flyout__expand-rail {
				left: -35px;
			}

			.gform-flyout__expand {
				left: -35px;
			}

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

		&.gform-flyout--left {

			.gform-flyout__expand-rail {
				right: -35px;
			}

			.gform-flyout__expand {
				right: -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__close.gform-button--size-xs {
			align-items: center;
			border: 1px solid var(--gform-admin-color-snuff);
			display: flex;
			font-size: 1.25rem;
			height: 1.625rem;
			position: absolute;
			right: 25px;
			transition: var(--gform-admin-transition-cl-button-focus);
			width: 1.625rem;
			z-index: 5;

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

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

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

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

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

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

		.gform-flyout__expand-rail {
			height: 56px;
			margin-top: -28px;
			position: absolute;
			top: 50%;
			width: 35px;
		}

		.gform-flyout__expand {
			align-items: center;
			background: var(--gform-admin-color-white);
			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;
			height: 56px;
			justify-content: center;
			margin-top: -28px;
			opacity: 0;
			position: absolute;
			top: 50%;
			transition: opacity 0.15s ease, transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
			width: 19px;

			&: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;
			color: var(--gform-admin-color-port);
			display: flex;
			font-size: 1rem;
			height: 15px;
			justify-content: center;
			position: relative;
			transition: color 300ms ease;
			width: 100%;
		}
	}

	.gform-flyout__head {
		padding: 0 2.875rem 1.25rem;
		position: relative;

		&::after {
			background: var(--gform-admin-color-white-lilac);
			bottom: 0;
			content: "";
			height: 0.0625rem;
			left: 0;
			position: absolute;
			width: 100%;
		}
	}

	.gform-flyout--no-divider {

		.gform-flyout__head::after {
			display: none;
		}
	}

	.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: 0 0 12px;
	}

	.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-right: 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: 1.25rem 2.875rem 2.125rem;


		&:focus-within {

			.gform-flyout__expand {
				opacity: 1;
			}
		}

		.simplebar-wrapper {
			height: 100%;
		}
	}
}

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

	.gform-flyout {
		left: auto;
		right: 0;

		&.gform-flyout--right {
			left: 0;
			right: auto;

			.gform-flyout__expand-rail {
				left: auto;
				right: -35px;
			}

			.gform-flyout__expand {
				left: auto;
				right: -35px;
			}

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

		.gform-flyout__close.gform-button--size-xs {
			left: 25px;
			right: auto;
		}

		&.gform-flyout--left {

			.gform-flyout__expand-rail {
				left: -35px;
				right: auto;
			}

			.gform-flyout__expand {
				left: -35px;
				right: auto;
			}

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