@gravityforms/components/css/admin/repeater.css

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

.gform-admin {

	.gform-repeater {
		max-inline-size: 100%;

		* {
			box-sizing: border-box;
		}
	}

	.gform-repeater-item {
		background: var(--gform-admin-color-white);
		cursor: default;

		input[type="text"] {
			transition: none;
		}

		+ .gform-repeater-item,
		+ .gform-repeater__add-button {
			margin-block-start: var(--gform-admin-spacer-4);
		}
	}

	.gform-repeater-item--show-actions-on-hover {

		.gform-repeater-item__minimal-actions {
			opacity: 0;
			transition: opacity 0.2s;

			&:focus-within {
				opacity: 1;
			}
		}

		&:hover {

			.gform-repeater-item__minimal-actions {
				opacity: 1;
			}
		}

		&:not(.gform-repeater-item--style-minimal) {

			.gform-repeater-item__action-control {
				opacity: 0;
				transition: opacity 0.2s;
			}

			&:hover,
			&:focus-within {

				.gform-repeater-item__action-control {
					opacity: 1;
				}
			}
		}
	}

	.gform-repeater-item--style-minimal {

		.gform-repeater-item__wrapper {
			align-items: flex-start;
		}

		.gform-repeater-item__controls,
		.gform-repeater-item__minimal-actions {
			display: flex;
			gap: var(--gform-admin-spacer-1);
		}

		+ .gform-repeater-item {
			margin-block-start: var(--gform-admin-spacer-1);
		}
	}

	.gform-repeater-item--is-draggable:not(.gform-repeater-item--disable-item-drag) {
		cursor: move;
	}

	.gform-repeater-item--is-dragging {
		opacity: 0.2;
	}

	.gform-repeater-item--is-keyboard-nav {
		box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.3);
		transform: translate(-2px, -2px);
	}

	.gform-repeater-item--type-block {
		border: 1px solid var(--gform-admin-color-snuff);
		border-radius: 3px;
	}

	.gform-repeater-item__wrapper {
		align-items: flex-end;
		display: flex;
		gap: var(--gform-admin-spacer-3);
		justify-content: space-between;
	}

	.gform-repeater-item--type-block .gform-repeater-item__wrapper {
		border-bottom: 1px solid var(--gform-admin-color-snuff);
		padding-block: var(--gform-admin-spacer-5);
		padding-inline: var(--gform-admin-spacer-6);
	}

	.gform-repeater-item__controls {
		display: flex;
	}

	.gform-repeater-item--style-regular {

		.gform-repeater-item__control,
		.gform-repeater-item__action-control {

			&:focus {
				border-color: var(--gform-admin-color-snuff);
				outline: none;
			}

			&:focus-visible {
				border-color: var(--gform-admin-color-blue-ribbon);
				outline: 0.125rem solid var(--gform-admin-color-spindle);
				z-index: 3;
			}
		}

		.gform-repeater-item__control--up {
			border-end-end-radius: 0;
			border-inline-end: transparent;
			border-start-end-radius: 0;

			&:focus-visible {
				border-inline-end: 1px solid var(--gform-admin-color-blue-ribbon);
				outline: 0.125rem solid var(--gform-admin-color-spindle);
			}
		}

		.gform-repeater-item__control--down {
			border-end-start-radius: 0;
			border-start-start-radius: 0;
		}

		&.gform-repeater-item--has-arrows .gform-repeater-item__control--drag-toggle {
			border-end-end-radius: 0;
			border-inline-end: transparent;
			border-start-end-radius: 0;

			&:focus-visible {
				border-inline-end: 1px solid var(--gform-admin-color-blue-ribbon);
				outline: 0.125rem solid var(--gform-admin-color-spindle);
			}
		}

		&.gform-repeater-item--has-drag-handle .gform-repeater-item__control--up {
			border-end-start-radius: 0;
			border-start-start-radius: 0;
		}
	}

	.gform-repeater-item__block-content-footer {
		display: flex;
		gap: var(--gform-admin-spacer-2);
		justify-content: flex-start;
	}

	.gform-repeater--type-block {

		.gform-repeater-item__delete,
		.gform-repeater-item__action {
			align-self: flex-start;
		}

		.gform-repeater-item__collapsible {
			margin-inline-start: auto;
			transition: box-shadow 300ms ease, background-color 300ms ease;

			&:focus {
				border-color: var(--gform-admin-color-titan-white);
				box-shadow: none;
				outline: none;
			}

			&:focus-visible {
				border-color: var(--gform-admin-color-blue-ribbon);
				outline: 0.125rem solid var(--gform-admin-color-spindle);
			}
		}

		.gform-repeater-item__wrapper {
			align-items: center;
			display: flex;
			gap: var(--gform-admin-spacer-3);
			justify-content: flex-start;

			.gform-text {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		.gform-repeater-item--is-collapsed {

			.gform-repeater-item__collapsible {
				transform: rotate(180deg);
			}

			.gform-repeater-item__wrapper {
				border-bottom: none;
			}
		}
	}

	.gform-repeater-item--is-collapsed {

		.gform-repeater-item__block-content {
			display: none;
		}
	}

	.gform-repeater-item__block-content {
		display: flex;
		flex-direction: column;
		gap: var(--gform-admin-spacer-3);
		inline-size: 100%;
		padding-block: var(--gform-admin-spacer-5);
		padding-inline: var(--gform-admin-spacer-6);
	}

	.gform-repeater-item--fill-content {

		.gform-input-wrapper {
			flex: 1;

			.gform-input {
				width: 100%;
			}
		}
	}

	.gform-repeater__drop-indicator {
		background: transparent;
		height: 3px;
	}

	.gform-repeater__drop-indicator--active {
		background: var(--gform-admin-color-chathams);
	}
}