@gravityforms/components/css/admin/branded-button.css

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

.gform-admin {

	.gform-branded-button {
		align-items: stretch;
		block-size: 2.5rem;
		border-radius: 3px;
		box-shadow: var(--gform-admin-box-shadow-midnight);
		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-bold);
		padding: 0;
		text-decoration: none;
		transition: var(--gform-admin-transition-button);
		white-space: nowrap;

		&:focus {
			outline-offset: 0;
		}

		&:disabled {
			pointer-events: none;
		}
	}

	.gform-branded-button--color {
		background: var(--gform-admin-color-blue-ribbon);
		border: 1px solid var(--gform-admin-color-blue-ribbon);
		color: var(--gform-admin-color-white);

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

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

		&:disabled {
			box-shadow: var(--gform-admin-box-shadow-midnight);
			opacity: 0.5;
		}
	}

	.gform-branded-button--white {
		background: var(--gform-admin-color-white);
		border: 1px solid var(--gform-admin-color-white);
		color: var(--gform-admin-color-comet);

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

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

		&:disabled {
			box-shadow: var(--gform-admin-box-shadow-midnight);
			opacity: 0.5;
		}
	}

	.gform-branded-button__svg {
		align-items: center;
		background: var(--gform-admin-color-white);
		block-size: 2.375rem;
		border-radius: 2px;
		display: flex;
		inline-size: 2.375rem;
		justify-content: center;
	}

	.gform-branded-button__text {
		align-items: center;
		display: flex;
		justify-content: center;
		padding-inline: 0.625rem;
	}
}