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

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

.gform-admin {

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

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

	/* Repeater Item */

	.gform-repeater-item {
		background: var(--gform-admin-color-white);
		border: 1px solid var(--gform-admin-color-snuff);
		border-radius: 3px;
		box-shadow: var(--gform-admin-box-shadow-outline-light);
		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--has-arrows,
	.gform-repeater-item--has-drag-handle {

		.gform-repeater-item__wrapper {
			padding-inline-start: var(--gform-admin-spacer-2);

			@container (min-width: 30rem) {
				padding-inline-start: var(--gform-admin-spacer-6);
			}
		}
	}

	.gform-repeater-item--is-collapsible {

		.gform-repeater-item__wrapper {
			padding-inline-end: var(--gform-admin-spacer-2);

			@container (min-width: 30rem) {
				padding-inline-end: var(--gform-admin-spacer-6);
			}
		}
	}

	.gform-repeater-item--type-inline {

		/* Flip to inline layout on larger screens */

		@container (min-width: 30rem) {
			border: none;
			border-radius: 0;
			box-shadow: none;
			display: flex;
			gap: var(--gform-admin-spacer-3);
			justify-content: space-between;
		}

		&.gform-repeater-item--is-collapsed {
	
			.gform-repeater-item__block-content {

				@container (min-width: 30rem) {
					display: flex;
				}
			}
		}

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

			.gform-repeater-item__wrapper,
			.gform-repeater-item__block-content {
	
				@container (min-width: 30rem) {
	
					align-items: center;
				}
			}
		}

		&:not(.gform-repeater-item--has-arrows, .gform-repeater-item--has-drag-handle) {

			.gform-repeater-item__wrapper {
	
				@container (min-width: 30rem) {
					display: none;
				}
			}
		}

		.gform-repeater-item__wrapper {
	
			@container (min-width: 30rem) {

				align-items: flex-end;
				border-bottom: 0;
				justify-content: space-between;
				padding: 0;
			}
		}

		.gform-repeater-item__block-header,
		.gform-repeater-item__collapsible {
		
			@container (min-width: 30rem) {
				display: none;
			}
		}

		.gform-repeater-item__minimal-actions {
			display: none;

			@container (min-width: 30rem) {
				display: flex;
			}
		}

		.gform-repeater-item__block-content {

			@container (min-width: 30rem) {
				align-items: flex-end;
				flex-direction: row;
				min-inline-size: 0;
				padding: 0;
			}
		}

		.gform-repeater-item__block-content-footer {

			@container (min-width: 30rem) {
				display: none;
			}
		}

		/* Use inline layout on small screens */

		&.gform-repeater-item--use-inline-layout-mobile {
			border: none;
			border-radius: 0;
			box-shadow: none;
			display: flex;
			gap: var(--gform-admin-spacer-3);
			justify-content: space-between;
	
			&.gform-repeater-item--style-minimal {
	
				.gform-repeater-item__wrapper,
				.gform-repeater-item__block-content {
					align-items: center;
				}
			}
	
			&:not(.gform-repeater-item--has-arrows, .gform-repeater-item--has-drag-handle) {
	
				.gform-repeater-item__wrapper {
					display: none;
				}
			}
	
			.gform-repeater-item__wrapper {
				align-items: flex-end;
				border-bottom: 0;
				justify-content: space-between;
				min-block-size: 0;
				padding: 0;
			}
	
			.gform-repeater-item__block-header,
			.gform-repeater-item__collapsible {
				display: none;
			}
	
			.gform-repeater-item__minimal-actions {
				display: flex;
			}
	
			.gform-repeater-item__block-content {
				align-items: flex-end;
				flex-direction: row;
				min-inline-size: 0;
				padding: 0;
			}
	
			.gform-repeater-item__block-content-footer {
				display: none;
			}
		}
	}

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

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

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

		.gform-repeater-item__controls {
			gap: 0;
		}

		.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--show-actions-on-hover {

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

		&:hover,
		&:focus-within {

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

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

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

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

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

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

		.gform-input-wrapper {
			flex: 1;

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

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

	/* Repeater Item Header */

	.gform-repeater-item__wrapper {
		align-items: center;
		border-bottom: 1px solid var(--gform-admin-color-snuff);
		display: flex;
		gap: var(--gform-admin-spacer-3);
		justify-content: flex-start;
		min-block-size: 60px;
		padding-block: var(--gform-admin-spacer-3);
		padding-inline: var(--gform-admin-spacer-6);

		@container (min-width: 30rem) {
			min-block-size: 0;
			padding-block: var(--gform-admin-spacer-5);
		}

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

	/* Repeater Item Controls */

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

	.gform-repeater-item__collapsible {
		margin-inline-start: auto;
		transform: rotate(180deg);
		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);
		}
	}

	/* Repeater Item Content */

	.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__block-content-footer {
		display: flex;
		gap: var(--gform-admin-spacer-2);
		justify-content: flex-start;
	}

	/* Repeater DND */

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

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