@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--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-button--size-height-m.gform-repeater-item__control,
		.gform-button--size-height-m.gform-repeater-item__delete {
			height: 34px;
		}
	}

	.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__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__control,
	.gform-repeater-item__delete {

		&: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--has-arrows .gform-repeater-item__controls {

		.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__controls {

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

	.gform-repeater--type-block {

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

		.gform-repeater-item__collapsible {
			margin-inline-start: auto;
			transition: none;
		}

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