@gravityforms/components/css/admin/dialog.css

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

.gform-admin {

	/* Dialog: WordPress UI Handling */

	.admin-bar & {

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

	.wp-admin & {

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

	/* Dialog: Mask */

	.gform-dialog__mask {
		align-items: safe center;
		block-size: 100%;
		box-sizing: border-box;
		display: none;
		inline-size: 100%;
		justify-content: center;
		opacity: 0;
		top: 0;
		transition: opacity 200ms ease-in-out;

		* {
			box-sizing: border-box;
		}

		&.gform-dialog--anim-in-ready {
			display: flex;
			opacity: 0;
		}

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

			.gform-dialog {
				transform: scale(1);
			}
		}

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

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

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

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

		&.gform-dialog__mask--blur {
			backdrop-filter: blur(8px);
		}

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

		&.gform-dialog--alignment-top {
			align-items: flex-start;
			padding-block: 110px 50px;
		}

		&:not(:has(.gform-dialog--container)) {
			padding-block: var(--gform-admin-spacer-5);
		}
	}

	/* Dialog: Scroll Handling */

	.gform-dialog--scroll-simplebar {

		&.gform-dialog--scrollbar-location-mask {
			padding-block: 0;

			.gform-dialog__simplebar {
				block-size: 100%;
				padding-block: var(--gform-admin-spacer-5);

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

					& > .simplebar-content-wrapper {
						align-items: safe center;
						display: flex;

						& > .simplebar-content {
							display: flex;
							inline-size: 100%;
						}
					}
				}
			}

			&.gform-dialog--alignment-top {

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

			.gform-dialog {
				margin: auto;
			}
		}

		&.gform-dialog--scrollbar-location-content {

			& > .gform-dialog {
				block-size: 100%;
				max-block-size: fit-content;
				padding: 0;

				.gform-dialog__simplebar {
					max-block-size: 100%;
					padding: 14px 25px 25px;
				}
			}
		}

		.gform-dialog__simplebar {
			display: flex;
			inline-size: 100%;

			.simplebar-content-wrapper {
				border: 0;
				outline: 0;
			}
		}
	}

	.gform-dialog--scroll-native {

		&.gform-dialog--scrollbar-location-mask {
			overflow-y: auto;
		}

		&.gform-dialog--scrollbar-location-content {

			& > .gform-dialog {
				max-block-size: 100%;
				overflow-y: auto;
			}
		}
	}

	.gform-dialog__mask:not([class*="gform-flyout--scroll-"]) {

		/* CASE: specific to HTML component */
		overflow-y: auto;
	}

	/* Dialog */

	.gform-dialog {
		background: var(--gform-admin-color-white);
		border: 1px solid var(--gform-admin-color-light-blue);
		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);
		max-width: 600px;
		padding: 14px 25px 25px;
		position: relative;
		transform: scale(0.95);
		transition: transform 200ms ease-in-out;
		width: calc(100% - 40px);

		&.gform-dialog--container {
			border: none;
			box-shadow: none;
			height: 100%;
			max-width: none;
			padding: 0;
			width: 100%;
		}

		&.gform-dialog--animated {
			opacity: 0;
			position: relative;
			top: 20px;
			transform: scale(1);
			transition: transform 600ms, opacity 600ms, top 600ms;

			&.gform-dialog--animate-reveal {
				opacity: 1;
				top: 0;
				transform: scale(1);
			}
		}

		&.gform-dialog__theme--cosmos {
			border-radius: 3px;
			box-shadow: var(--gform-admin-box-shadow-mega);

			.gform-dialog__content {
				color: var(--gform-admin-color-grey-500);
			}

			.gform-dialog__footer {
				padding-top: 32px;
			}
		}

		.gform-dialog__close {
			inset-inline-end: 25px;
			position: absolute;
			top: 25px;

			&.gform-button--size-xs {
				height: 1.875rem;
				width: 1.875rem;

				.gform-button__icon {
					top: 0;
				}
			}

			&.gform-button--size-md {
				height: 2.5rem;
				inset-inline-end: 20px;
				top: 20px;
				width: 2.5rem;

				.gform-button__icon {
					top: 0;
				}
			}
		}

		.gform-dialog__close.gform-button--circular.gform-dialog__close--plain {
			background: none;
			border: none;

			.gform-button__icon {
				color: var(--gform-admin-color-white);
				font-size: 2rem;
			}
		}

		.gform-dialog__close.gform-button--unstyled.gform-button--size-md {
			justify-content: flex-end;
		}

		.gform-dialog__close.gform-button--unstyled .gform-button__icon {
			color: var(--gform-admin-color-comet);
		}

		.gform-dialog__head {

			&.gform-dialog__head--with-divider {
				border-bottom: 1px solid var(--gform-admin-color-secondary-border);
				padding-bottom: 15px;
			}

			.gform-indicator {
				position: absolute;
			}

			.gform-indicator--confirm {
				inset-block-start: 26px;
			}
		}

		.gform-dialog__title {
			color: var(--gform-admin-color-port);
			font-family: var(--gform-admin-font-family-base);
			font-size: 1.1875rem;
			font-weight: var(--gform-common-font-weight-medium);
			line-height: initial;
			margin: 10px 0 0 0;
			padding-inline-end: 30px;
			position: relative;

			&.gform-dialog__title--has-icon {
				padding-block-start: 6px;
				padding-inline-start: 50px;
			}

			&.gform-dialog__title--icon-type-confirm {
				padding-block-start: 0;
				padding-inline-start: 30px;
			}
		}

		&.gform-dialog--title-size-md {

			.gform-dialog__title {
				font-size: 1.5rem;
				font-weight: var(--gform-common-font-weight-semibold);
			}
		}

		.gform-dialog__description {
			color: var(--gform-admin-color-comet);
			display: inline-block;
			font-family: var(--gform-admin-font-family-base);
			font-size: 0.875rem;
			font-weight: var(--gform-common-font-weight-normal);
			line-height: initial;
			margin: 0.75rem 0 0 0;
			padding-inline-end: 30px;
			position: relative;

			&.gform-dialog__title--has-icon {
				padding-inline-start: 50px;
			}
		}

		.gform-dialog__title-icon {
			font-size: 1.5rem;
			inset-inline-start: 0;
			position: absolute;
			top: 3px;
		}

		.gform-dialog__content {
			padding-inline-start: 0;
			padding-bottom: 0;
			padding-top: 10px;

			&.gform-dialog__content--with-divider {
				padding-top: 15px;
			}

			&.gform-dialog__content--pad-content {
				padding-inline-end: 30px;
			}
		}

		.gform-dialog__content,
		.gform-dialog__content p {
			color: var(--gform-admin-color-port);
			font-family: var(--gform-admin-font-family-base);
			font-size: 0.875rem;
			line-height: 1.188rem;
		}

		.gform-dialog__footer {
			align-items: center;
			display: flex;
			padding-top: 20px;
			width: 100%;
		}

		.gform-dialog__confirm {
			margin-inline-start: 12px;

			&.gform-button--icon-leading .gform-button__icon {
				font-size: 1.5rem;
			}
		}
	}

	.gform-dialog--full-screen {
		height: calc(100vh - 40px);
		max-width: 1280px;
		overflow: auto;
		padding: 0;

		.gform-dialog__content {
			margin: 0;
			padding: 0;
		}
	}
}