@gravityforms/components/dist/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: #fff;
		border: 1px solid #c3c5db;
		border-radius: 3px;
		box-shadow: 0 0 0 transparent;
		box-sizing: border-box;
		color: #242748;
		font-family: inter, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen-sans, ubuntu, cantarell, "Helvetica Neue", sans-serif;
		font-size: 0.8125rem;
		line-height: 2;
		margin: 0;
		min-block-size: 0;
		outline: none;
		padding: 0.25rem 0.75rem;
		transition: box-shadow 0.15s ease, background-color 0.15s ease;
	}

		.gform-admin .gform-input:focus {

			border: 1px solid #3985b7;

			box-shadow: 0 0.125rem 0.0675rem rgba(28, 31, 63, 0.0634624), 0 0 0 2px #bed8ed;

			color: #242748;
		}

		.gform-admin .gform-input::-moz-placeholder {
			color: #5b5e80;
			font-family: inter, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen-sans, ubuntu, cantarell, "Helvetica Neue", sans-serif;
			font-size: 0.8125rem;
			font-weight: 400;
		}

		.gform-admin .gform-input::placeholder {
			color: #5b5e80;
			font-family: inter, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen-sans, ubuntu, cantarell, "Helvetica Neue", sans-serif;
			font-size: 0.8125rem;
			font-weight: 400;
		}

	.gform-admin .gform-input-wrapper--input.gform-input-wrapper--theme-cosmos .gform-input__wrapper {
			position: relative;
		}

	.gform-admin .gform-input-wrapper--input.gform-input-wrapper--theme-cosmos .gform-input {
			border-color: #9092b0;
		}

	.gform-admin .gform-input-wrapper--input.gform-input-wrapper--theme-cosmos .gform-input + .gform-input__label:nth-child(1) {
				margin-bottom: 0.375rem;
			}

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

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

	.gform-admin .gform-input-wrapper--input.gform-input-wrapper--theme-cosmos .gform-input:focus {
				border-color: #175cff;
			}

	.gform-admin .gform-input-wrapper--input.gform-input-wrapper--theme-cosmos .gform-input:disabled {
				background-color: #f6f9fc;
				color: #9092b0;
			}

	.gform-admin .gform-input-wrapper--input.gform-input-wrapper--theme-cosmos .gform-input::-moz-placeholder {
				font-size: 0.875rem;
			}

	.gform-admin .gform-input-wrapper--input.gform-input-wrapper--theme-cosmos .gform-input::placeholder {
				font-size: 0.875rem;
			}

	.gform-admin .gform-input-wrapper--input.gform-input-wrapper--theme-cosmos .gform-input__action-wrapper .gform-input__action-button {
				border-color: #9092b0;
			}

	.gform-admin .gform-input-wrapper--input.gform-input-wrapper--theme-cosmos .gform-input__action-wrapper .gform-input__action-button .gform-icon {
					color: #9092b0;
				}

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

	.gform-admin .gform-input-wrapper--input.gform-input-wrapper--theme-cosmos.gform-input-wrapper--border-error .gform-input {
				border: 1px solid #dd301d;
			}

	.gform-admin .gform-input-wrapper--input.gform-input-wrapper--theme-cosmos.gform-input-wrapper--border-error .gform-input:focus {
					box-shadow: 0 0.125rem 0.0675rem rgba(28, 31, 63, 0.0634624), 0 0 0 2px #fee4e2;
				}

	.gform-admin .gform-input-wrapper--input.gform-input-wrapper--theme-cosmos.gform-input-wrapper--border-error .gform-input-help-text {
				color: #dd301d;
			}

	.gform-admin .gform-input-wrapper--input.gform-input-wrapper--theme-cosmos.gform-input-wrapper--border-error .gform-input__action-wrapper .gform-input {
					border-inline-end: 0;
				}

	.gform-admin .gform-input-wrapper--input.gform-input-wrapper--theme-cosmos.gform-input-wrapper--border-error .gform-input__action-wrapper .gform-input:focus {
						border: 1px solid #dd301d;
						z-index: 1;
					}

	.gform-admin .gform-input-wrapper--input.gform-input-wrapper--theme-cosmos.gform-input-wrapper--border-error .gform-input__action-wrapper .gform-input__action-button {
					border-inline-start-color: #dd301d;
				}

	.gform-admin .gform-input-wrapper--input.gform-input-wrapper--theme-cosmos.gform-input-wrapper--border-error .gform-input__action-wrapper .gform-input__action-button:focus {
						border-inline-start-color: #9092b0;
					}

	.gform-admin .gform-input-wrapper--input.gform-input-wrapper--theme-cosmos.gform-input-wrapper--border-correct .gform-input {
				border: 1px solid #57c091;
			}

	.gform-admin .gform-input-wrapper--input.gform-input-wrapper--theme-cosmos.gform-input-wrapper--border-correct .gform-input:focus {
					box-shadow: 0 0.125rem 0.0675rem rgba(28, 31, 63, 0.0634624), 0 0 0 2px #e1f6ed;
				}

	.gform-admin .gform-input-wrapper--input.gform-input-wrapper--theme-cosmos.gform-input-wrapper--border-correct .gform-input__action-wrapper .gform-input {
					border-inline-end: 0;
				}

	.gform-admin .gform-input-wrapper--input.gform-input-wrapper--theme-cosmos.gform-input-wrapper--border-correct .gform-input__action-wrapper .gform-input:focus {
						border: 1px solid #57c091;
						z-index: 1;
					}

	.gform-admin .gform-input-wrapper--input.gform-input-wrapper--theme-cosmos.gform-input-wrapper--border-correct .gform-input__action-wrapper .gform-input__action-button {
					border-inline-start-color: #57c091;
				}

	.gform-admin .gform-input-wrapper--input.gform-input-wrapper--theme-cosmos.gform-input-wrapper--border-correct .gform-input__action-wrapper .gform-input__action-button:focus {
						border-inline-start-color: #9092b0;
					}

	.gform-admin .gform-input-wrapper--input.gform-input-wrapper--theme-cosmos.gform-input-wrapper--with-icon .gform-input {
				padding-inline-end: 2.75rem;
			}

	.gform-admin .gform-input-wrapper--input.gform-input-wrapper--theme-cosmos.gform-input-wrapper--text-security-circle .gform-input {
				-webkit-text-security: circle;
			}

	.gform-admin .gform-input-wrapper--input.gform-input-wrapper--theme-cosmos.gform-input-wrapper--text-security-disc .gform-input {
				-webkit-text-security: disc;
			}

	.gform-admin .gform-input-wrapper--input.gform-input-wrapper--theme-cosmos.gform-input-wrapper--text-security-square .gform-input {
				-webkit-text-security: square;
			}

	.gform-admin .gform-input-wrapper--input.gform-input-wrapper--theme-cosmos .gform-input--size-r {
			block-size: 2.1875rem;
			padding: 0.375rem 0.75rem;
		}

	.gform-admin .gform-input-wrapper--input.gform-input-wrapper--theme-cosmos .gform-input--size-l {
			block-size: 2.375rem;
			padding: 0.5rem 0.75rem;
		}

	.gform-admin .gform-input-wrapper--input.gform-input-wrapper--theme-cosmos .gform-input--size-xl {
			block-size: 2.9375rem;
			padding: 0.75rem;
		}

	.gform-admin .gform-input-wrapper--input.gform-input-wrapper--theme-cosmos.gform-input-wrapper--clearable .gform-input {
				padding-inline-end: 2.75rem;
			}

	.gform-admin .gform-input-wrapper--input.gform-input-wrapper--theme-cosmos .gform-label {
			margin-block-end: 0.375rem;
		}

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

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

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

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

	.gform-admin .gform-input__action-wrapper .gform-input__wrapper {
			flex: 1;
		}

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

	.gform-admin .gform-input__action-wrapper .gform-input:focus {
				border: 1px solid #175cff;
				z-index: 1;
			}

	.gform-admin .gform-input__action-wrapper .gform-input__icon {
			z-index: 2;
		}

	.gform-admin .gform-input__action-wrapper .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-admin .gform-input__action-wrapper .gform-input__action-button .gform-icon {
				font-size: 1rem;
			}

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

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

	.gform-admin .gform-input__clearable-button .gform-button__icon {
			color: #5b5e80;
			font-size: 1.25rem;
			inset-block-start: 0;
			padding: 0;
		}

	.gform-admin .gform-input__clearable-button .gform-button__icon::before {
				font-size: 1.25rem;
			}

	.gform-admin .gform-input__clearable-button:focus .gform-button__icon, .gform-admin .gform-input__clearable-button:hover .gform-button__icon {
				color: #9092b2;
			}

	.gform-admin .gform-input__clearable-button:focus .gform-button__icon::before, .gform-admin .gform-input__clearable-button:hover .gform-button__icon::before {
					font-size: 1.25rem;
				}

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

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

	.gform-admin .gform-input__add-on {
		align-items: center;
		background-color: #f6f9fc;
		border: 1px solid #9092b0;
		border-radius: 3px;
		color: #242748;
		display: flex;
		font-family: inter, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen-sans, ubuntu, cantarell, "Helvetica Neue", sans-serif;
		font-size: 0.8125rem;
		font-weight: 400;
		padding-left: 13px;
		padding-right: 13px;
		white-space: nowrap;
	}

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

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

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

	.gform-admin .gform-input__add-on--action-button {
		background-color: #fff;
		border-color: #d5d7e9;
		height: auto;
		margin-inline-start: 12px;
		padding-inline-end: 12px;
		padding-inline-start: 12px;
	}

	.gform-admin .gform-input__add-on--action-button.gform-button--icon-leading.gform-button--size-sm .gform-button__icon {
		color: #5b5e80;
		font-size: 14px;
		margin: 0;
	}

/*# sourceMappingURL=inputs.css.map */