@gravityforms/components/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: var(--gform-admin-box-shadow-button);
		box-sizing: border-box;
		cursor: pointer;
		display: inline-flex;
		font-family: var(--gform-admin-font-family-base);
		font-size: var(--gform-admin-font-size-sm);
		font-weight: var(--gform-common-font-weight-medium);
		height: 2.375rem;
		line-height: normal;
		padding-block: 0;
		padding-inline: 1.125rem;
		position: relative;
		text-decoration: none;
		transition: var(--gform-admin-transition-button);
		white-space: nowrap;

		&:focus {
			outline: 0.125rem solid var(--gform-admin-color-focus);
		}

		&:disabled {
			pointer-events: none;
		}

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

	.gform-button__icon {
		font-size: var(--gform-admin-font-size-lg);
		position: relative;
	}

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

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

	.gform-button--primary {
		background: var(--gform-admin-color-gravity-blue);
		border-color: var(--gform-admin-color-gravity-blue);
		color: var(--gform-admin-color-white);

		&:hover,
		&:active {
			background: var(--gform-admin-color-primary-light);
		}

		&:disabled {
			background: var(--gform-admin-color-gravity-blue);
			color: var(--gform-admin-color-button-disabled);
		}
	}

	.gform-button--primary-new {
		background: var(--gform-admin-color-chathams);
		border-color: var(--gform-admin-color-chathams);
		box-shadow: var(--gform-admin-box-shadow-button);
		color: var(--gform-admin-color-white);

		&:hover,
		&:active {
			background: var(--gform-admin-color-port);
			border-color: var(--gform-admin-color-port);
			box-shadow: var(--gform-admin-box-shadow-toggle);
		}

		&:focus {
			border-color: var(--gform-admin-color-light-blue);
			outline: 0.125rem solid var(--gform-admin-color-spindle);
		}

		&:disabled {
			background: var(--gform-admin-color-chathams);
			border-color: var(--gform-admin-color-chathams);
			opacity: 0.5;
		}

		.gform-button__loader circle {
			stroke: var(--gform-admin-color-white);
		}
	}

	.gform-button--secondary {
		background: var(--gform-admin-color-white);
		border-color: var(--gform-admin-color-gravity-blue);
		color: var(--gform-admin-color-gravity-blue);

		&:hover,
		&:active {
			border-color: var(--gform-admin-color-primary-light);
			color: var(--gform-admin-color-primary-light);
		}

		&:disabled {
			border-color: var(--gform-admin-color-blue-haze);
			color: var(--gform-admin-color-blue-haze);
		}
	}

	.gform-button--white {
		background: var(--gform-admin-color-titan-white);
		border-color: var(--gform-admin-color-snuff);
		box-shadow: var(--gform-admin-box-shadow-button);
		color: var(--gform-admin-color-port);

		&:hover,
		&:active {
			box-shadow: var(--gform-admin-box-shadow-toggle);
		}

		&:focus {
			border-color: var(--gform-admin-color-blue-haze);
			outline: 0.125rem solid var(--gform-admin-color-white-lilac);
		}

		&:disabled {
			border-color: var(--gform-admin-color-snuff);
			opacity: 0.5;
		}

		.gform-button__icon {
			color: var(--gform-admin-color-comet);
		}

		.gform-button__loader circle {
			stroke: var(--gform-admin-color-comet);
		}
	}

	.gform-button--apple-green {
		background: var(--gform-admin-color-light-green);
		border-color: var(--gform-admin-color-tara);
		box-shadow: var(--gform-admin-box-shadow-button);
		color: var(--gform-admin-color-green);

		&:hover,
		&:active {
			box-shadow: var(--gform-admin-box-shadow-toggle);
		}

		&:focus {
			border-color: var(--gform-admin-color-emerald);
			outline: 0.125rem solid var(--gform-admin-color-tara);
		}

		&:disabled {
			border-color: var(--gform-admin-color-tara);
			opacity: 0.5;
		}
	}

	.gform-button--egyptian-blue {
		background: var(--gform-admin-color-titan-white);
		border-color: var(--gform-admin-color-spindle);
		box-shadow: var(--gform-admin-box-shadow-button);
		color: var(--gform-admin-color-blue-ribbon);

		&:hover,
		&:active {
			box-shadow: var(--gform-admin-box-shadow-toggle);
		}

		&:focus {
			border-color: var(--gform-admin-color-blue-ribbon);
			outline: 0.125rem solid var(--gform-admin-color-spindle);
		}

		&:disabled {
			border-color: var(--gform-admin-color-spindle);
			opacity: 0.5;
		}
	}

	.gform-button--amaranth-red {
		background: var(--gform-admin-color-rose-white);
		border-color: var(--gform-admin-color-spanish-pink);
		box-shadow: var(--gform-admin-box-shadow-button);
		color: var(--gform-admin-color-red);

		&:hover,
		&:active {
			box-shadow: var(--gform-admin-box-shadow-toggle);
		}

		&:focus {
			border-color: var(--gform-admin-color-red);
			outline: 0.125rem solid var(--gform-admin-color-spanish-pink);
		}

		&:disabled {
			border-color: var(--gform-admin-color-spanish-pink);
			opacity: 0.5;
		}
	}

	.gform-button--simplified {
		background: transparent;
		box-shadow: none;
		color: var(--gform-admin-color-comet);

		&:hover,
		&:active {
			background-color: var(--gform-admin-color-white-lilac);
			border-color: var(--gform-admin-color-white);
			color: var(--gform-admin-color-chathams);
		}

		&:focus {
			border-color: var(--gform-admin-color-blue-ribbon);
			outline: 0.125rem solid var(--gform-admin-color-spindle);
		}

		&:disabled {
			border-color: var(--gform-admin-color-spindle);
			opacity: 0.5;
		}
	}

	.gform-button--unstyled {
		background: none;
		border: none;
		box-shadow: none;
		color: var(--gform-admin-color-text);
		font-size: var(--gform-admin-font-size-base-old);
		padding: 0;

		.gform-button__icon {
			color: var(--gform-admin-color-icon);
			font-size: 1.5rem;
			inset-block-start: 0.05rem;
			padding-inline-end: 0.25rem;
			position: relative;
		}

		&:hover,
		&:active,
		&:focus {
			background: none;
			border: none;
			box-shadow: none;
			color: var(--gform-admin-color-button);
			outline: none;

			.gform-button__icon {
				color: var(--gform-admin-color-button);
			}
		}

		&:disabled {
			border: none;
			color: var(--gform-admin-color-blue-haze);
		}
	}

	.gform-button--icon-white,
	.gform-button--icon-grey {
		color: var(--gform-admin-color-comet);

		&.gform-button--size-height-s {
			block-size: 1.875rem;
			inline-size: 1.875rem;
			padding: 0.25rem;
		}

		&.gform-button--size-height-m {
			block-size: 2.25rem;
			inline-size: 2.25rem;
			padding: 0.4375rem;
		}
	}

	.gform-button--icon-white {
		background: var(--gform-admin-color-titan-white);
		border-color: var(--gform-admin-color-snuff);
		box-shadow: var(--gform-admin-box-shadow-button);

		&:hover,
		&:active {
			box-shadow: var(--gform-admin-box-shadow-super);
		}

		&:focus {
			border-color: var(--gform-admin-color-blue-ribbon);
			outline: 0.125rem solid var(--gform-admin-color-spindle);
		}

		&:disabled {
			border-color: var(--gform-admin-color-snuff);
			box-shadow: var(--gform-admin-box-shadow-button);
			opacity: 0.5;
		}
	}

	.gform-button--icon-grey {
		background: var(--gform-admin-color-white);
		border-color: var(--gform-admin-color-white);
		box-shadow: none;

		&:hover,
		&:active {
			background: var(--gform-admin-color-white-lilac);
			border-color: var(--gform-admin-color-white-lilac);
		}

		&:focus {
			background: var(--gform-admin-color-titan-white);
			border-color: var(--gform-admin-color-blue-ribbon);
			box-shadow: var(--gform-admin-box-shadow-button);
			outline: 0.125rem solid var(--gform-admin-color-spindle);
		}

		&:disabled {
			background: var(--gform-admin-color-titan-white);
			border-color: var(--gform-admin-color-titan-white);
			box-shadow: var(--gform-admin-box-shadow-button);
			opacity: 0.5;
		}
	}

	/*
	 * Size variants
	 */

	.gform-button--size-xs {
		block-size: 2rem;
		font-size: var(--gform-admin-font-size-xs);
		padding-block: 0;
		padding-inline: 0.6875rem;

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

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

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

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

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

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

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

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

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

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

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

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

	/*
	 * Icon variants
	 */

	.gform-button--icon-leading {

		.gform-button__icon {
			margin-inline-end: 0.35rem;
		}

		&.gform-button--size-xs {

			.gform-button__icon {
				margin-inline-end: 0.375rem;
			}
		}

		&.gform-button--size-sm {

			.gform-button__icon {
				margin-inline-end: 0.375rem;
			}
		}

		&.gform-button--size-l {

			.gform-button__icon {
				margin-inline-end: 0.625rem;
			}
		}

		&.gform-button--size-xl {

			.gform-button__icon {
				margin-inline-end: 0.75rem;
			}
		}
	}

	.gform-button--icon-trailing {

		.gform-button__icon {
			margin-inline-start: 0.5rem;
		}

		&.gform-button--size-xs {

			.gform-button__icon {
				margin-inline-start: 0.375rem;
			}
		}

		&.gform-button--size-sm {

			.gform-button__icon {
				margin-inline-start: 0.375rem;
			}
		}

		&.gform-button--size-l {

			.gform-button__icon {
				margin-inline-start: 0.625rem;
			}
		}

		&.gform-button--size-xl {

			.gform-button__icon {
				margin-inline-start: 0.75rem;
			}
		}
	}

	/*
	 * Rounded variants
	 */

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

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

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

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

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

	/*
	 * Circular variants
	 */

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

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

		&.gform-button--size-xs {
			height: 1.875rem;
			width: 1.875rem;

			.gform-button__icon {
				font-size: 1.125rem;
			}
		}

		&.gform-button--size-sm {
			height: 2.125rem;
			width: 2.125rem;

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

		&.gform-button--size-l {
			height: 2.625rem;
			width: 2.625rem;

			.gform-button__icon {
				font-size: 1.75rem;
			}
		}

		&.gform-button--size-xl {
			height: 3.125rem;
			width: 3.125rem;

			.gform-button__icon {
				font-size: 2rem;
			}
		}
	}

	/*
	 * Active state
	 */

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

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

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

		&.gform-button--primary {
			color: var(--gform-admin-color-white);
		}

		.gform-button__icon--inactive {
			display: none;
		}

		.gform-button__text--inactive {
			display: none;
		}

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