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

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

.gform-admin .gform-droplist {
		box-sizing: border-box;
		font-family: inter, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen-sans, ubuntu, cantarell, "Helvetica Neue", sans-serif;
		position: relative;
	}

		.gform-admin .gform-droplist * {
			box-sizing: border-box;
		}

	.gform-admin .gform-droplist__list-wrapper {
		background: #fff;
		border-radius: 0.1875rem;
		box-shadow: 0 0 1px rgba(18, 25, 97, 0.24), 0 24px 24px rgba(18, 25, 97, 0.03), 0 2px 2px rgba(18, 25, 97, 0.03), 0 4px 4px rgba(18, 25, 97, 0.03), 0 8px 8px rgba(18, 25, 97, 0.03), 0 16px 16px rgba(18, 25, 97, 0.03);
		display: none;
		inset-block-end: calc(0.5rem * -1);
		inset-block-start: auto;
		opacity: 0;
		padding-block: 0;
		position: absolute;
		transform: translateY(100%);
		transition: opacity 0.15s ease;
		z-index: 2;
	}

	.gform-admin .gform-droplist--reveal .gform-droplist__list-wrapper {
		display: block;
	}

	.gform-admin .gform-droplist--hide .gform-droplist__list-wrapper {
		display: block;
		opacity: 0;
	}

	.gform-admin .gform-droplist--open .gform-droplist__list-wrapper {
		display: block;
		opacity: 1;
	}

	.gform-admin .gform-droplist--position-top .gform-droplist__list-wrapper {
		inset-block-end: auto;
		inset-block-start: calc(0.5rem * -1);
		transform: translateY(-100%);
	}

	.gform-admin .gform-droplist--align-left .gform-droplist__list-wrapper {
		inset-inline-start: 0;
	}

	.gform-admin .gform-droplist--align-right .gform-droplist__list-wrapper {
		inset-inline-end: 0;
	}

	.gform-admin .gform-droplist__list-container {
		padding-block: 0.5rem;
	}

	.gform-admin .gform-droplist__list {
		list-style-type: none;
		margin: 0;
		padding: 0;
	}

	.gform-admin .gform-droplist__item {
		margin-block-end: 0.25rem;
		padding-block: 0.25rem;
		padding-inline: 0.5rem;
	}

	.gform-admin .gform-droplist__item:last-child {
			margin-block-end: 0;
		}

	.gform-admin .gform-droplist__item--group {
		position: relative;
	}

	.gform-admin .gform-droplist__item--has-divider {
		position: relative;
	}

	.gform-admin .gform-droplist__item--has-divider::after {
			border-block-end: 0.0625rem solid #ecedf8;
			content: "";
			inline-size: 100%;
			inset-block-end: calc(0.25rem * -1);
			inset-inline-start: 0;
			position: absolute;
		}

	.gform-admin .gform-droplist__item--group > .gform-droplist__list-container {
		background: #fff;
		border-radius: 0.1875rem;
		box-shadow: 0 0 1px rgba(18, 25, 97, 0.24), 0 24px 24px rgba(18, 25, 97, 0.03), 0 2px 2px rgba(18, 25, 97, 0.03), 0 4px 4px rgba(18, 25, 97, 0.03), 0 8px 8px rgba(18, 25, 97, 0.03), 0 16px 16px rgba(18, 25, 97, 0.03);
		display: none;
		inset-block-start: 0;
		inset-inline-start: calc(100% + 0.5rem);
		opacity: 0;
		position: absolute;
		transition: opacity 0.15s ease;
	}

	.gform-admin .gform-droplist--align-right .gform-droplist__item--group > .gform-droplist__list-container {
		inset-inline-end: calc(100% + 0.5rem);
		inset-inline-start: auto;
	}

	.gform-admin .gform-droplist__item--reveal > .gform-droplist__list-container {
		display: block;
	}

	.gform-admin .gform-droplist__item--hide > .gform-droplist__list-container {
		display: block;
		opacity: 0;
	}

	.gform-admin .gform-droplist__item--open > .gform-droplist__list-container {
		display: block;
		opacity: 1;
	}

	.gform-admin .gform-droplist__item-trigger {
		align-items: flex-start;
		background: #fff;
		border: 0.0625rem solid #fff;
		border-radius: 0.1875rem;
		cursor: pointer;
		display: flex;
		inline-size: 100%;
		outline: none;
		padding-block: 0.25rem;
		padding-inline: 0.5rem;
		text-align: start;
		text-decoration: none;
		transition: all 0.15s ease;
	}

	.gform-admin .gform-droplist__item-trigger--info:hover {
			background: #f6f9fc;
			border-color: #f6f9fc;
		}

	.gform-admin .gform-droplist__item-trigger--info:focus {
			background: #fdfdff;
			border-color: #175cff;
			box-shadow: 0 0.125rem 0.0675rem rgba(28, 31, 63, 0.0634624), 0 0 0 2px #bed8ed;
		}

	.gform-admin .gform-droplist__item-trigger--info:active {
			background: #f6f9fc;
			border-color: #d5d7e9;
			box-shadow: none;
		}

	.gform-admin .gform-droplist__item-trigger--info .gform-droplist__item-trigger-icon::before, .gform-admin .gform-droplist__item-trigger--info .gform-droplist__item-trigger-group-icon::before {
			color: #5b5e80;
		}

	.gform-admin .gform-droplist__item-trigger--error:hover {
			background: #fee4e2;
			border-color: #fee4e2;
		}

	.gform-admin .gform-droplist__item-trigger--error:focus {
			background: #fee4e2;
			border-color: #dd301d;
			box-shadow: 0 0 0 2px #fee4e2, 0 1px 2px 0 rgba(16, 24, 40, 0.05);
		}

	.gform-admin .gform-droplist__item-trigger--error:active {
			background: #fee4e2;
			border-color: #ffc7bb;
			box-shadow: none;
		}

	.gform-admin .gform-droplist__item-trigger--error, .gform-admin .gform-droplist__item-trigger--error .gform-droplist__item-trigger-icon::before, .gform-admin .gform-droplist__item-trigger--error .gform-droplist__item-trigger-group-icon::before {
			color: #dd301d;
		}

	.gform-admin .gform-droplist__item-trigger--disabled:disabled {
		background: #fff;
		border: 0.0625rem solid #fff;
		cursor: default;
		opacity: 0.5;
	}

	.gform-admin .gform-droplist__item-trigger-text {
		flex: auto;
		padding-inline-end: 1.75rem;
		white-space: nowrap;
	}

	.gform-admin .gform-droplist__item-trigger-icon {
		flex: none;
		font-size: 1.25rem;
	}

	.gform-admin .gform-droplist__item-trigger-icon--before {
		margin-inline-end: 0.375rem;
	}

	.gform-admin .gform-droplist__item-trigger-icon--after {
		margin-inline-start: 0.375rem;
	}

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