@gravityforms/components/dist/css/admin/button.css

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

.gform-admin .gform-button {
		align-items: center; /* stylelint-disable-line */
		border: 1px solid transparent;
		border-radius: 3px;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
		box-sizing: border-box;
		cursor: pointer;
		display: inline-flex;
		font-family: inter, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen-sans, ubuntu, cantarell, "Helvetica Neue", sans-serif;
		font-size: 0.875rem;
		font-weight: 500;
		height: 2.375rem;
		line-height: normal;
		padding-block: 0;
		padding-inline: 1.125rem;
		position: relative;
		text-decoration: none;
		transition: transform 300ms ease, box-shadow 300ms ease, background-color 300ms ease;
		white-space: nowrap;
	}

		.gform-admin .gform-button:focus {
			outline: 0.125rem solid #bed8ed;
		}

		.gform-admin .gform-button:disabled {
			pointer-events: none;
		}

		.gform-admin .gform-button.gform-button--circular {
			border-radius: 100%;
			justify-content: center;
			padding: 0;
		}

	.gform-admin .gform-button__icon {
		font-size: 1.25rem;
		position: relative;
	}

	.gform-admin .gform-button--width-half {
		justify-content: center;
		width: 50%;
	}

	.gform-admin .gform-button--width-full {
		justify-content: center;
		width: 100%;
	}

	.gform-admin .gform-button--primary {
		background: #3e7da6;
		border-color: #3e7da6;
		color: #fff;
	}

	.gform-admin .gform-button--primary:hover, .gform-admin .gform-button--primary:active {
			background: #3985b7;
		}

	.gform-admin .gform-button--primary:disabled {
			background: #3e7da6;
			color: #639cc1;
		}

	.gform-admin .gform-button--primary-new {
		background: #0f3d6c;
		border-color: #0f3d6c;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
		color: #fff;
	}

	.gform-admin .gform-button--primary-new:hover, .gform-admin .gform-button--primary-new:active {
			background: #242748;
			border-color: #242748;
			box-shadow: 0 3px 8px rgba(18, 25, 97, 0.15), 0 1px 1px rgba(18, 25, 97, 0.16), 0 2px 1px rgba(18, 25, 97, 0.04);
		}

	.gform-admin .gform-button--primary-new:focus {
			border-color: #f6f9fc;
			outline: 0.125rem solid #bed8ed;
		}

	.gform-admin .gform-button--primary-new:disabled {
			background: #0f3d6c;
			border-color: #0f3d6c;
			opacity: 0.5;
		}

	.gform-admin .gform-button--primary-new .gform-button__loader circle {
			stroke: #fff;
		}

	.gform-admin .gform-button--secondary {
		background: #fff;
		border-color: #3e7da6;
		color: #3e7da6;
	}

	.gform-admin .gform-button--secondary:hover, .gform-admin .gform-button--secondary:active {
			border-color: #3985b7;
			color: #3985b7;
		}

	.gform-admin .gform-button--secondary:disabled {
			border-color: #c3c5db;
			color: #c3c5db;
		}

	.gform-admin .gform-button--white {
		background: #fdfdff;
		border-color: #d5d7e9;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
		color: #242748;
	}

	.gform-admin .gform-button--white:hover, .gform-admin .gform-button--white:active {
			box-shadow: 0 3px 8px rgba(18, 25, 97, 0.15), 0 1px 1px rgba(18, 25, 97, 0.16), 0 2px 1px rgba(18, 25, 97, 0.04);
		}

	.gform-admin .gform-button--white:focus {
			border-color: #c3c5db;
			outline: 0.125rem solid #ecedf8;
		}

	.gform-admin .gform-button--white:disabled {
			border-color: #d5d7e9;
			opacity: 0.5;
		}

	.gform-admin .gform-button--white .gform-button__icon {
			color: #5b5e80;
		}

	.gform-admin .gform-button--white .gform-button__loader circle {
			stroke: #5b5e80;
		}

	.gform-admin .gform-button--apple-green {
		background: #f5fcf6;
		border-color: #e1f6ed;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
		color: #22a753;
	}

	.gform-admin .gform-button--apple-green:hover, .gform-admin .gform-button--apple-green:active {
			box-shadow: 0 3px 8px rgba(18, 25, 97, 0.15), 0 1px 1px rgba(18, 25, 97, 0.16), 0 2px 1px rgba(18, 25, 97, 0.04);
		}

	.gform-admin .gform-button--apple-green:focus {
			border-color: #57c091;
			outline: 0.125rem solid #e1f6ed;
		}

	.gform-admin .gform-button--apple-green:disabled {
			border-color: #e1f6ed;
			opacity: 0.5;
		}

	.gform-admin .gform-button--egyptian-blue {
		background: #fdfdff;
		border-color: #bed8ed;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
		color: #175cff;
	}

	.gform-admin .gform-button--egyptian-blue:hover, .gform-admin .gform-button--egyptian-blue:active {
			box-shadow: 0 3px 8px rgba(18, 25, 97, 0.15), 0 1px 1px rgba(18, 25, 97, 0.16), 0 2px 1px rgba(18, 25, 97, 0.04);
		}

	.gform-admin .gform-button--egyptian-blue:focus {
			border-color: #175cff;
			outline: 0.125rem solid #bed8ed;
		}

	.gform-admin .gform-button--egyptian-blue:disabled {
			border-color: #bed8ed;
			opacity: 0.5;
		}

	.gform-admin .gform-button--amaranth-red {
		background: #fff9f9;
		border-color: #ffc7bb;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
		color: #dd301d;
	}

	.gform-admin .gform-button--amaranth-red:hover, .gform-admin .gform-button--amaranth-red:active {
			box-shadow: 0 3px 8px rgba(18, 25, 97, 0.15), 0 1px 1px rgba(18, 25, 97, 0.16), 0 2px 1px rgba(18, 25, 97, 0.04);
		}

	.gform-admin .gform-button--amaranth-red:focus {
			border-color: #dd301d;
			outline: 0.125rem solid #ffc7bb;
		}

	.gform-admin .gform-button--amaranth-red:disabled {
			border-color: #ffc7bb;
			opacity: 0.5;
		}

	.gform-admin .gform-button--simplified {
		background: transparent;
		box-shadow: none;
		color: #5b5e80;
	}

	.gform-admin .gform-button--simplified:hover, .gform-admin .gform-button--simplified:active {
			background-color: #ecedf8;
			border-color: #fff;
			color: #0f3d6c;
		}

	.gform-admin .gform-button--simplified:focus {
			border-color: #175cff;
			outline: 0.125rem solid #bed8ed;
		}

	.gform-admin .gform-button--simplified:disabled {
			border-color: #bed8ed;
			opacity: 0.5;
		}

	.gform-admin .gform-button--unstyled {
		background: none;
		border: none;
		box-shadow: none;
		color: #242748;
		font-size: 0.8125rem;
		padding: 0;
	}

	.gform-admin .gform-button--unstyled .gform-button__icon {
			color: #9092b2;
			font-size: 1.5rem;
			inset-block-start: 0.05rem;
			padding-inline-end: 0.25rem;
			position: relative;
		}

	.gform-admin .gform-button--unstyled:hover, .gform-admin .gform-button--unstyled:active, .gform-admin .gform-button--unstyled:focus {
			background: none;
			border: none;
			box-shadow: none;
			color: #3e7da6;
			outline: none;
		}

	.gform-admin .gform-button--unstyled:hover .gform-button__icon, .gform-admin .gform-button--unstyled:active .gform-button__icon, .gform-admin .gform-button--unstyled:focus .gform-button__icon {
				color: #3e7da6;
			}

	.gform-admin .gform-button--unstyled:disabled {
			border: none;
			color: #c3c5db;
		}

	.gform-admin .gform-button--icon-white, .gform-admin .gform-button--icon-grey {
		color: #5b5e80;
		justify-content: center;
	}

	.gform-admin .gform-button--icon-white.gform-button--size-height-s, .gform-admin .gform-button--icon-grey.gform-button--size-height-s {
			block-size: 1.875rem;
			inline-size: 1.875rem;
			padding: 0.25rem;
		}

	.gform-admin .gform-button--icon-white.gform-button--size-height-m, .gform-admin .gform-button--icon-grey.gform-button--size-height-m {
			block-size: 2.1875rem;
			inline-size: 2.1875rem;
			padding: 0.375rem;
		}

	.gform-admin .gform-button--icon-white {
		background: #fdfdff;
		border-color: #d5d7e9;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	}

	.gform-admin .gform-button--icon-white:hover, .gform-admin .gform-button--icon-white:active {
			box-shadow: 0 3px 8px rgba(18, 25, 97, 0.15), 0 1px 1px rgba(18, 25, 97, 0.16), 0 2px 1px rgba(18, 25, 97, 0.04);
		}

	.gform-admin .gform-button--icon-white:focus {
			border-color: #175cff;
			outline: 0.125rem solid #bed8ed;
		}

	.gform-admin .gform-button--icon-white:disabled {
			border-color: #d5d7e9;
			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
			opacity: 0.5;
		}

	.gform-admin .gform-button--icon-grey {
		background: #fff;
		border-color: #fff;
		box-shadow: none;
	}

	.gform-admin .gform-button--icon-grey:hover, .gform-admin .gform-button--icon-grey:active {
			background: #ecedf8;
			border-color: #ecedf8;
		}

	.gform-admin .gform-button--icon-grey:focus {
			background: #fdfdff;
			border-color: #175cff;
			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
			outline: 0.125rem solid #bed8ed;
		}

	.gform-admin .gform-button--icon-grey:disabled {
			background: #fdfdff;
			border-color: #fdfdff;
			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
			opacity: 0.5;
		}

	/*
	 * Size variants
	 */

	.gform-admin .gform-button--size-xs {
		block-size: 2rem;
		font-size: 0.75rem;
		padding-block: 0;
		padding-inline: 0.6875rem;
	}

	.gform-admin .gform-button--size-xs .gform-button__icon {
			font-size: 1rem;
		}

	.gform-admin .gform-button--size-sm {
		block-size: 2.125rem;
		padding-block: 0;
		padding-inline: 0.8125rem;
	}

	.gform-admin .gform-button--size-sm .gform-button__icon {
			font-size: 1rem;
		}

	.gform-admin .gform-button--size-l {
		block-size: 2.625rem;
		font-size: 1rem;
	}

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

	.gform-admin .gform-button--size-xl {
		block-size: 3.125rem;
		font-size: 1rem;
		padding-block: 0.8125rem;
		padding-inline: 1.5625rem;
	}

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

	.gform-admin .gform-button--size-height-s {
		height: 1.875rem;
		padding: 0.375rem 0.5rem;
	}

	.gform-admin .gform-button--size-height-m {
		height: 2.1875rem;
		padding: 0.375rem 0.625rem;
	}

	.gform-admin .gform-button--size-height-l {
		height: 2.375rem;
		padding: 0.5rem 0.875rem;
	}

	.gform-admin .gform-button--size-height-xl {
		height: 2.9375rem;
		padding: 0.75rem 0.875rem;
	}

	.gform-admin .gform-button--size-height-xxl {
		height: 3.375rem;
		padding: 0.875rem;
	}

	/*
	 * Icon variants
	 */

	.gform-admin .gform-button--icon-leading .gform-button__icon {
			margin-inline-end: 0.35rem;
		}

	.gform-admin .gform-button--icon-leading.gform-button--size-xs .gform-button__icon {
				margin-inline-end: 0.375rem;
			}

	.gform-admin .gform-button--icon-leading.gform-button--size-sm .gform-button__icon {
				margin-inline-end: 0.375rem;
			}

	.gform-admin .gform-button--icon-leading.gform-button--size-l .gform-button__icon {
				margin-inline-end: 0.625rem;
			}

	.gform-admin .gform-button--icon-leading.gform-button--size-xl .gform-button__icon {
				margin-inline-end: 0.75rem;
			}

	.gform-admin .gform-button--icon-trailing .gform-button__icon {
			margin-inline-start: 0.5rem;
		}

	.gform-admin .gform-button--icon-trailing.gform-button--size-xs .gform-button__icon {
				margin-inline-start: 0.375rem;
			}

	.gform-admin .gform-button--icon-trailing.gform-button--size-sm .gform-button__icon {
				margin-inline-start: 0.375rem;
			}

	.gform-admin .gform-button--icon-trailing.gform-button--size-l .gform-button__icon {
				margin-inline-start: 0.625rem;
			}

	.gform-admin .gform-button--icon-trailing.gform-button--size-xl .gform-button__icon {
				margin-inline-start: 0.75rem;
			}

	/*
	 * Rounded variants
	 */

	.gform-admin .gform-button--round {
		border-radius: 1.1875rem;
	}

	.gform-admin .gform-button--round.gform-button--size-xs {
			border-radius: 0.9375rem;
		}

	.gform-admin .gform-button--round.gform-button--size-sm {
			border-radius: 1.0625rem;
		}

	.gform-admin .gform-button--round.gform-button--size-l {
			border-radius: 1.3125rem;
		}

	.gform-admin .gform-button--round.gform-button--size-xl {
			border-radius: 1.5625rem;
		}

	/*
	 * Circular variants
	 */

	.gform-admin .gform-button--circular {
		height: 2.375rem;
		width: 2.375rem;
	}

	.gform-admin .gform-button--circular .gform-button__icon {
			font-size: 1.375rem;
		}

	.gform-admin .gform-button--circular.gform-button--size-xs {
			height: 1.875rem;
			width: 1.875rem;
		}

	.gform-admin .gform-button--circular.gform-button--size-xs .gform-button__icon {
				font-size: 1.125rem;
			}

	.gform-admin .gform-button--circular.gform-button--size-sm {
			height: 2.125rem;
			width: 2.125rem;
		}

	.gform-admin .gform-button--circular.gform-button--size-sm .gform-button__icon {
				font-size: 1.25rem;
			}

	.gform-admin .gform-button--circular.gform-button--size-l {
			height: 2.625rem;
			width: 2.625rem;
		}

	.gform-admin .gform-button--circular.gform-button--size-l .gform-button__icon {
				font-size: 1.75rem;
			}

	.gform-admin .gform-button--circular.gform-button--size-xl {
			height: 3.125rem;
			width: 3.125rem;
		}

	.gform-admin .gform-button--circular.gform-button--size-xl .gform-button__icon {
				font-size: 2rem;
			}

	/*
	 * Active state
	 */

	.gform-admin .gform-button__text--active {
		display: none;
		margin-inline-start: 10px;
	}

	.gform-admin .gform-button--loader-after .gform-button__text--active {
		margin-inline: 0 0.5rem;
	}

	.gform-admin .gform-button--activated {
		justify-content: center;
	}

	.gform-admin .gform-button--activated.gform-button--primary {
			color: #fff;
		}

	.gform-admin .gform-button--activated .gform-button__icon--inactive {
			display: none;
		}

	.gform-admin .gform-button--activated .gform-button__text--inactive {
			display: none;
		}

	.gform-admin .gform-button--activated .gform-button__text--active {
			display: inline-flex;
		}

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