@gravityforms/components/css/admin/cards/form-template-card.css

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

.gform-admin {

	.gform-card--form-template-blank,
	.gform-card--form-template {

		&:hover,
		&:focus-within {
			box-shadow: var(--gform-admin-box-shadow-uber);
		}
	}

	/* ----------------------------------------------------------------------
	 * FORM TEMPLATE BLANK
	 * ---------------------------------------------------------------------- */

	.gform-card--form-template-blank {

		.gform-card__form-template-blank-button {
			background: transparent;
			block-size: 100%;
			border: 0;
			cursor: pointer;
			inline-size: 100%;
			inset-block-start: 0;
			inset-inline-start: 0;
			margin: 0;
			outline: 0;
			padding: 0;
			position: absolute;
			z-index: 10;
		}

		.gform-card__top-container {
			align-items: center;
			display: flex !important;
			justify-content: center;
		}
	}

	/* ----------------------------------------------------------------------
	 * FORM TEMPLATE
	 * ---------------------------------------------------------------------- */

	.gform-card--form-template {

		.gform-card__label {
			inset-block-start: 16px;
			inset-inline-start: 20px;
			position: absolute;
			z-index: 10;
		}

		.gform-card__form-template-hover-buttons {
			align-items: center;
			background-color: rgba(255, 255, 255, 0.6);
			display: flex;
			inset-block-end: 0;
			inset-block-start: 0;
			justify-content: space-between;
			opacity: 0;
			padding: 0 3.12rem;
			position: absolute;
			transition: opacity 0.2s ease;
			width: 100%;
			z-index: 1;
		}

		.gform-card__form-template-buttons-container {
			display: flex;
			inset-inline-end: 0;
			inset-inline-start: 0;
			justify-content: center;
			margin: 0 auto;
			position: absolute;
		}

		.gform-card__form-template-primary-button {
			margin-inline-end: 0.625rem;
		}

		.gform-card__form-template-secondary-button-icon {
			color: var(--gform-admin-color-comet);
			font-size: 1.25rem;
			margin-inline-end: 0.375rem;
		}

		.gform-card__image {
			background-color: var(--gform-admin-color-white);
			block-size: calc(100% - 1.25rem);
			border-start-end-radius: 0.1875rem;
			border-start-start-radius: 0.1875rem;
			box-shadow: var(--gform-admin-box-shadow-popup);
			inline-size: 12.5rem;
			inset-block-start: 1.25rem;
			inset-inline-end: 0;
			inset-inline-start: 0;
			padding-block: 0.9375rem 0;
			padding-inline: 0.9375rem;
			position: absolute;

			.gform-image__image {
				block-size: 100%;
			}
		}

		.gform-card__bottom-container {
			max-block-size: 3.8125rem;
			overflow: hidden;
			transition: max-height 0.3s ease;

			.gform-text {
				animation: 0.1s linear 0s forwards closeFormTemplateCardBottom;
				-webkit-box-orient: vertical;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				line-clamp: 1;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		&:hover,
		&:focus-within {

			.gform-card__form-template-hover-buttons {
				opacity: 1;
				transition: opacity 0.2s ease;
			}

			.gform-card__bottom-container {
				max-block-size: 6.3125rem;
				transition: max-height 0.3s ease;

				.gform-text {
					animation: 0.3s linear 0s forwards openFormTemplateCardBottom;
					-webkit-line-clamp: 3;
					line-clamp: 3;
					max-block-size: 3.75rem;
				}
			}
		}

		@keyframes openFormTemplateCardBottom {

			from {
				-webkit-line-clamp: 1;
				line-clamp: 1;
			}

			to {
				-webkit-line-clamp: initial;
				line-clamp: initial;
			}
		}

		@keyframes closeFormTemplateCardBottom {

			from {
				-webkit-line-clamp: initial;
				line-clamp: initial;
			}

			to {
				-webkit-line-clamp: 1;
				line-clamp: 1;
			}
		}
	}
}