@gravityforms/components/css/admin/tag.css

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

.gform-admin {

	.gform-tag {
		border-radius: 3px;
		color: var(--gform-admin-color-port);
		display: inline-block;
		font-family: var(--gform-admin-font-family-base);
		padding-block: 5px;
		padding-inline: 8px;
		position: relative;
		z-index: 1;

		&.gform-tag--triangle-left {

			&.gform-typography--size-text-xxs {

				.gform-tag__triangle {
					height: 0.938rem;
					inset-inline-start: -0.375rem;
					top: calc(50% - 0.5rem);
					width: 0.938rem;
				}
			}

			&.gform-typography--size-text-xs {

				.gform-tag__triangle {
					height: 1.06rem;
					inset-inline-start: -0.438rem;
					top: calc(50% - 0.55rem);
					width: 1.06rem;
				}
			}

			&.gform-typography--size-text-sm {

				.gform-tag__triangle {
					height: 1.188rem;
					inset-inline-start: -0.5rem;
					top: calc(50% - 0.594rem);
					width: 1.188rem;
				}
			}

			&.gform-typography--size-text-md {

				.gform-tag__triangle {
					height: 1.281rem;
					inset-inline-start: -0.563rem;
					top: calc(50% - 0.641rem);
					width: 1.281rem;
				}
			}

			&.gform-typography--size-text-lg {

				.gform-tag__triangle {
					height: 1.313rem;
					inset-inline-start: -0.563rem;
					top: calc(50% - 0.656rem);
					width: 1.313rem;
				}
			}

			&.gform-typography--size-text-xl {

				.gform-tag__triangle {
					height: 1.375rem;
					inset-inline-start: -0.625rem;
					top: calc(50% - 0.688rem);
					width: 1.375rem;
				}
			}
		}

	}

	.gform-tag--type-chathams {
		background: var(--gform-admin-color-chathams);
		color: var(--gform-admin-color-white);
	}

	.gform-tag--type-amethyst-smoke {
		background: var(--gform-admin-color-amethyst-smoke);
		color: var(--gform-admin-color-white);
	}

	.gform-tag--type-upgrade {
		background: var(--gform-admin-color-santas);
		box-shadow: var(--gform-admin-box-shadow-micro);
		color: var(--gform-admin-color-white);
		padding-block: 2px;
		padding-inline: 6px;
		text-transform: uppercase;
	}

	.gform-tag--type-blue {
		background: var(--gform-admin-color-hawkes-blue);
		border: 1px solid var(--gform-admin-color-spindle);
		box-shadow: var(--gform-admin-box-shadow-micro);
		color: #204ce5;
		padding-block: 1px;
		padding-inline: 5px;
		text-transform: uppercase;
	}

	.gform-tag__triangle {
		background-color: inherit;
		border: inherit;
		border-radius: 3px;
		display: block;
		position: absolute;
		transform: rotate(45deg) skew(15deg, 15deg);
		z-index: -1;
	}
}