@gravityforms/components/css/admin/inputs.css

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

.gform-admin {

	.gform-input {
		-webkit-appearance: none;
		background: var(--gform-admin-color-white);
		border: 1px solid var(--gform-admin-color-blue-haze);
		border-radius: 3px;
		box-shadow: 0 0 0 transparent;
		box-sizing: border-box;
		color: var(--gform-admin-color-text);
		font-family: var(--gform-admin-font-family-base);
		font-size: var(--gform-admin-font-size-base-old);
		line-height: 2;
		margin: 0;
		min-block-size: 0;
		outline: none;
		padding: 0.25rem 0.75rem;
		transition: var(--gform-admin-transition-inputs);

		&.gform-input--size-xl {
			padding: 0.594rem 0.75rem;
		}

		&:focus {

			@mixin inputFocus;
		}

		&::placeholder {
			color: var(--gform-admin-color-placeholder);
			font-family: var(--gform-admin-font-family-base);
			font-size: var(--gform-admin-font-size-base-old);
			font-weight: var(--gform-admin-font-weight-normal);
		}
	}

	.gform-input-wrapper--input.gform-input-wrapper--theme-cosmos {

		.gform-input__wrapper {
			position: relative;
		}

		.gform-input {
			border-color: var(--gform-admin-color-santas);

			+ .gform-input__label:nth-child(1) {
				margin-bottom: 0.375rem;
			}

			+ .gform-input-help-text:nth-child(2) {
				margin-bottom: 0.375rem;
			}

			+ .gform-input-help-text:nth-child(3) {
				margin-top: 0.375rem;
			}

			&:focus {
				border-color: var(--gform-admin-color-blue-ribbon);
			}

			&:disabled {
				background-color: var(--gform-admin-color-light-blue);
				color: var(--gform-admin-color-santas);
			}

			&::placeholder {
				font-size: var(--gform-admin-font-size-sm);
			}
		}

		.gform-input__action-wrapper {

			.gform-input__action-button {
				border-color: var(--gform-admin-color-santas);

				.gform-icon {
					color: var(--gform-admin-color-santas);
				}
			}
		}

		&.gform-input-wrapper--required {

			.gform-input {

				+ .gform-input-help-text:nth-child(4) {
					margin-top: 0.375rem;
				}
			}
		}

		&.gform-input-wrapper--border-error {

			.gform-input {
				border: 1px solid var(--gform-admin-color-red);

				&:focus {
					box-shadow: 0 0.125rem 0.0675rem rgba(28, 31, 63, 0.0634624), 0 0 0 2px var(--gform-admin-color-background-red);
				}
			}

			.gform-input-help-text {
				color: var(--gform-admin-color-red);
			}

			.gform-input__action-wrapper {

				.gform-input {
					border-inline-end: 0;

					&:focus {
						border: 1px solid var(--gform-admin-color-red);
						z-index: 1;
					}
				}

				.gform-input__action-button {
					border-inline-start-color: var(--gform-admin-color-red);

					&:focus {
						border-inline-start-color: var(--gform-admin-color-santas);
					}
				}
			}
		}

		&.gform-input-wrapper--border-correct {

			.gform-input {
				border: 1px solid var(--gform-admin-color-emerald);

				&:focus {
					box-shadow: 0 0.125rem 0.0675rem rgba(28, 31, 63, 0.0634624), 0 0 0 2px var(--gform-admin-color-tara);
				}
			}

			.gform-input__action-wrapper {

				.gform-input {
					border-inline-end: 0;

					&:focus {
						border: 1px solid var(--gform-admin-color-emerald);
						z-index: 1;
					}
				}

				.gform-input__action-button {
					border-inline-start-color: var(--gform-admin-color-emerald);

					&:focus {
						border-inline-start-color: var(--gform-admin-color-santas);
					}
				}
			}
		}

		&.gform-input-wrapper--with-icon {

			.gform-input {
				padding-inline-end: 2.75rem;
			}
		}

		&.gform-input-wrapper--text-security-circle {

			.gform-input {
				-webkit-text-security: circle;
			}
		}

		&.gform-input-wrapper--text-security-disc {

			.gform-input {
				-webkit-text-security: disc;
			}
		}

		&.gform-input-wrapper--text-security-square {

			.gform-input {
				-webkit-text-security: square;
			}
		}

		.gform-input--size-r {
			padding: 0.375rem 0.75rem;
		}

		.gform-input--size-l {
			padding: 0.5rem 0.75rem;
		}

		.gform-input--size-xl {
			padding: 0.75rem;
		}

		&.gform-input-wrapper--clearable {

			.gform-input {
				padding-inline-end: 2.75rem;
			}
		}

		.gform-label {
			margin-block-end: 0.375rem;
		}

		.gform-input-help-text:nth-child(2) {
			margin-block-end: 0.375rem;
		}

		.gform-input-help-text:nth-child(3) {
			margin-block-start: 0.375rem;
		}

		.gform-input__icon {
			inset-block-start: 50%;
			inset-inline-end: 0.8125rem;
			pointer-events: none;
			position: absolute;
			transform: translateY(-50%);
		}
	}

	.gform-input__action-wrapper {
		display: flex;
		width: 100%;

		.gform-input__wrapper {
			flex: 1;
		}

		.gform-input {
			border-end-end-radius: 0;
			border-inline-end: 0;
			border-start-end-radius: 0;
			position: relative;
			width: 100%;

			&:focus {
				border: 1px solid var(--gform-admin-color-blue-ribbon);
				z-index: 1;
			}
		}

		.gform-input__icon {
			z-index: 2;
		}

		.gform-input__action-button {
			border-end-start-radius: 0;
			border-start-start-radius: 0;
			height: auto;
			margin-inline-start: 0;
			padding-inline-end: 0.85rem;
			padding-inline-start: 0.85rem;

			.gform-icon {
				font-size: 1rem;
			}
		}
	}

	.gform-input-wrapper--clearable {
		position: relative;
	}

	.gform-input__clearable-button {
		align-items: center;
		block-size: 100%;
		display: flex;
		inline-size: 1.875rem;
		inset-block-start: 50%;
		inset-inline-end: var(--gform-admin-spacer-2);
		justify-content: center;
		position: absolute;
		transform: translateY(-50%);

		.gform-button__icon {
			color: var(--gform-admin-color-comet);
			font-size: 1.25rem;
			inset-block-start: 0;
			padding: 0;

			&::before {
				font-size: 1.25rem;
			}
		}

		&:focus,
		&:hover {

			.gform-button__icon {
				color: var(--gform-admin-color-amethyst-smoke);

				&::before {
					font-size: 1.25rem;
				}
			}
		}
	}

	.gform-input-add-on-wrapper {
		align-items: stretch;
		display: flex;
		flex-direction: row;
	}

	.gform-input-add-on-wrapper--suffix .gform-input {
		border-end-end-radius: 0;
		border-start-end-radius: 0;
	}

	.gform-input__add-on {
		align-items: center;
		background-color: var(--gform-admin-color-light-blue);
		border: 1px solid var(--gform-admin-color-santas);
		border-radius: 3px;
		color: var(--gform-admin-color-port);
		display: flex;
		font-family: var(--gform-admin-font-family-base);
		font-size: var(--gform-admin-font-size-base-old);
		font-weight: 400;
		padding-left: 13px;
		padding-right: 13px;
		white-space: nowrap;
	}

	.gform-input__add-on--prefix {
		border-end-end-radius: 0;
		border-inline-end: 0;
		border-start-end-radius: 0;
	}

	.gform-input__add-on--suffix {
		border-end-start-radius: 0;
		border-inline-start: 0;
		border-start-start-radius: 0;
	}

	.gform-input__add-on + .gform-input {
		border-end-start-radius: 0;
		border-start-start-radius: 0;
	}

	.gform-input__add-on--action-button {
		background-color: var(--gform-admin-color-white);
		border-color: var(--gform-admin-color-snuff);
		height: auto;
		margin-inline-start: 12px;
		padding-inline-end: 12px;
		padding-inline-start: 12px;
	}

	.gform-input__add-on--action-button.gform-button--icon-leading.gform-button--size-sm .gform-button__icon {
		color: var(--gform-admin-color-comet);
		font-size: 14px;
		margin: 0;
	}

}