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

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

/* HTML Dropdown styles */

	.gform-admin .gform-dropdown {
		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-dropdown * {
			box-sizing: border-box;
		}

	.gform-admin .gform-dropdown.gform-dropdown--position-top .gform-dropdown__container {
				border-block-end: 0;
				border-block-start: 0.0625rem solid #d5d7e9;
				border-end-end-radius: 0;
				border-end-start-radius: 0;
				border-start-end-radius: 0.1875rem;
				border-start-start-radius: 0.1875rem;
				box-shadow: 0 -0.125rem 0.75rem rgba(28, 31, 63, 0.09);
				inset-block-end: 40px;
				inset-block-start: auto;
			}

	.gform-admin .gform-dropdown.gform-dropdown--position-top .gform-dropdown__container::before {
					inset-block-end: -5px;
					inset-block-start: auto;
				}

	.gform-admin .gform-dropdown__control {
		align-items: center;
		background: #fff;
		block-size: 2.375rem;
		border: 0.0625rem solid #d5d7e9;
		border-radius: 0.1875rem;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
		cursor: pointer;
		display: flex;
		inline-size: 100%;
		line-height: 1.1;
		padding-block: 0;
		padding-inline: 1rem 2.25rem;
		position: relative;
		z-index: 1;
	}

	.gform-admin .gform-dropdown__control:focus {
			border-color: #3e7da6;
			box-shadow: 0 0 0 2px #bed8ed;
			outline: none;
		}

	.gform-admin .gform-dropdown__control.gform-dropdown__control--placeholder .gform-dropdown__control-text {
				color: #5b5e80;
				font-weight: 400;
			}

	.gform-admin .gform-dropdown__control .gform-dropdown__chevron, .gform-admin .gform-dropdown__control .gform-dropdown__spinner {
			align-items: center;
			background-size: 16px 16px;
			block-size: 100%;
			color: #9092b2;
			font-size: 1.375rem;
			inline-size: 2.25rem;
			inset-block-start: 0;
			inset-inline-end: 0;
			justify-content: center;
			position: absolute;
			transition: color 0.15s ease;
		}

	.gform-admin .gform-dropdown__control .gform-dropdown__chevron {
			display: flex;
		}

	.gform-admin .gform-dropdown__group {
		line-height: normal;
		padding-block-start: 0.6875rem;
	}

	.gform-admin .gform-dropdown__group .gform-dropdown__trigger {
		padding-inline-start: 1.75rem;
	}

	.gform-admin .gform-dropdown__control-text, .gform-admin .gform-dropdown__group-text {
		color: #242748;
		font-family: inter, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen-sans, ubuntu, cantarell, "Helvetica Neue", sans-serif;
		font-size: 0.8125rem;
		font-weight: 500;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.gform-admin .gform-dropdown__group-text {
		padding-inline-start: 0.875rem;
	}

	.gform-admin .gform-dropdown__container {
		background: #fff;
		border: 0.0625rem solid #d5d7e9;
		border-block-start: 0;
		border-end-end-radius: 0.1875rem;
		border-end-start-radius: 0.1875rem;
		box-shadow: 0 0.125rem 0.75rem rgba(28, 31, 63, 0.09);
		box-sizing: border-box;
		display: none;
		inline-size: 100%;
		inset-block-start: 2.3125rem;
		opacity: 0;
		outline: none;
		padding-block-start: 0.25rem;
		position: absolute;
		transition: opacity 0.15s ease;
		z-index: 2;
	}

	.gform-admin .gform-dropdown__container::before {
			background: #fff;
			block-size: 0.5rem;
			border-inline: 0.0625rem solid #d5d7e9;
			content: "";
			inline-size: 100%;
			inset-block-start: -0.5rem;
			inset-inline-start: -1px;
			position: absolute;
			z-index: 3;
		}

	.gform-admin .gform-dropdown--align-left .gform-dropdown__container {
		inset-inline-start: 0;
	}

	.gform-admin .gform-dropdown--align-right .gform-dropdown__container {
		inset-inline-end: 0;
	}

	.gform-admin .gform-dropdown__list-container {
		max-block-size: 14.0625rem;
		overflow-y: auto;
	}

	.gform-admin .gform-dropdown__item {
		margin: 0;
	}

	.gform-admin .gform-dropdown__search-icon {
		color: #9092b2;
		font-size: 1.5rem;
		inset-block-start: 0.75rem;
		inset-inline-end: 1rem;
		position: absolute;
		transition: color 0.15s ease;
	}

	.gform-admin .gform-dropdown__search {
		border-block-end: 1px solid #ecedf8;
		padding-block: 0.375rem 0.875rem;
		padding-inline: 0.625rem;
		position: relative;
	}

	.gform-admin .gform-dropdown__search .gform-dropdown__search-input {
			inline-size: 100%;
			padding-inline-end: 2.125rem;
		}

	.gform-admin .gform-dropdown__search:focus-within .gform-dropdown__search-icon {
				color: #3e7da6;
			}

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

	.gform-admin .gform-dropdown__trigger {
		background: transparent;
		border: 0;
		border-inline-start: 0.1875rem solid transparent;
		color: #242748;
		cursor: pointer;
		display: block;
		font-size: 0.8125rem;
		inline-size: 100%;
		outline: none;
		padding-block: 0.6875rem;
		padding-inline: 0.875rem 1rem;
		text-align: start;
		transition: all 0.15s ease;
	}

	.gform-admin .gform-dropdown__trigger:hover, .gform-admin .gform-dropdown__trigger:focus {
			background: #f6f9fc;
			border-inline-start-color: #3e7da6;
		}

	.gform-admin .gform-dropdown__trigger-text {
		-webkit-box-orient: vertical;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.gform-admin .gform-dropdown--show-spinner .gform-dropdown__chevron {
			display: none;
		}

	.gform-admin .gform-dropdown--show-spinner .gform-dropdown__spinner {
			display: flex;
		}

	.gform-admin .gform-dropdown--reveal .gform-dropdown__container {
			display: block;
		}

	.gform-admin .gform-dropdown--hide .gform-dropdown__container {
			display: block;
			opacity: 0;
		}

	.gform-admin .gform-dropdown--open .gform-dropdown__chevron {
			color: #242748;
			transform: rotate(180deg);
		}

	.gform-admin .gform-dropdown--open .gform-dropdown__control {
			box-shadow: 0 0.125rem 0.75rem rgba(28, 31, 63, 0.09);
		}

	.gform-admin .gform-dropdown--open .gform-dropdown__control:focus {
				border-color: #d5d7e9;
			}

	.gform-admin .gform-dropdown--open .gform-dropdown__container {
			display: block;
			opacity: 1;
		}

	/* React Dropdown styles */

	.gform-admin .gform-dropdown--react, .gform-admin .gform-dropdown--react * {
			box-sizing: border-box;
		}

	.gform-admin .gform-dropdown--react.gform-dropdown--reveal .gform-dropdown__popover {
				display: block;
			}

	.gform-admin .gform-dropdown--react.gform-dropdown--open .gform-dropdown__popover {
				display: block;
				opacity: 1;
			}

	.gform-admin .gform-dropdown--react.gform-dropdown--hide .gform-dropdown__popover {
				display: block;
				opacity: 0;
			}

	.gform-admin .gform-dropdown--react .gform-dropdown__label {
			cursor: default;
			margin-block-end: 0.375rem;
		}

	.gform-admin .gform-dropdown--react .gform-dropdown__trigger-wrapper {
			position: relative;
		}

	.gform-admin .gform-dropdown--react .simplebar-content {
			padding: 0 !important;
		}

	.gform-admin .gform-dropdown--react .gform-dropdown__trigger {
			align-items: center;
			background: #fff;
			border: 1px solid #9092b0;
			border-radius: 3px;
			box-shadow: 0 0.25rem 0.25rem rgba(18, 25, 97, 0.0405344);
			cursor: pointer;
			display: flex;
			gap: 0.375rem;
			inline-size: 100%;
			justify-content: flex-start;
			outline: inherit;
			padding-block: 0.5rem;
			padding-inline: 0.75rem 2rem;
			position: relative;
			transition: none;
		}

	.gform-admin .gform-dropdown--react .gform-dropdown__trigger::after {
				background: center / contain no-repeat url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="21" fill="none"%3E%3Cpath fill="%239092B0" fill-rule="evenodd" d="M5.293 7.793a1 1 0 0 1 1.414 0L10 11.086l3.293-3.293a1 1 0 1 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 0-1.414Z" clip-rule="evenodd"/%3E%3C/svg%3E'); /* stylelint-disable-line */
				block-size: 1.3125rem;
				content: "";
				inline-size: 1.25rem;
				inset-inline-end: 0.75rem;
				pointer-events: none;
				position: absolute;
			}

	.gform-admin .gform-dropdown--react .gform-dropdown__trigger:focus {
				border-color: #175cff;
				outline: 0.125rem solid #bed8ed;
			}

	.gform-admin .gform-dropdown--react .gform-dropdown__trigger:disabled {
				background: #f6f9fc;
				border-color: #d5d7e9;
				color: #9092b0;
				cursor: not-allowed;
			}

	.gform-admin .gform-dropdown--react .gform-dropdown__trigger-before-label, .gform-admin .gform-dropdown--react .gform-dropdown__trigger-after-label {
			block-size: 1.25rem;
			flex: none;
			inline-size: 1.25rem;
		}

	.gform-admin .gform-dropdown--react .gform-dropdown__trigger-label {
			flex: auto;
		}

	.gform-admin .gform-dropdown--react.gform-dropdown--size-r .gform-dropdown__trigger {
			block-size: 2.1875rem;
		}

	.gform-admin .gform-dropdown--react.gform-dropdown--size-r .gform-dropdown__trigger::after {
				inset-block-start: 0.4375rem;
			}

	.gform-admin .gform-dropdown--react.gform-dropdown--size-l .gform-dropdown__trigger {
			block-size: 2.375rem;
		}

	.gform-admin .gform-dropdown--react.gform-dropdown--size-l .gform-dropdown__trigger::after {
				inset-block-start: 0.5rem;
			}

	.gform-admin .gform-dropdown--react.gform-dropdown--size-xl .gform-dropdown__trigger {
			block-size: 2.9375rem;
		}

	.gform-admin .gform-dropdown--react.gform-dropdown--size-xl .gform-dropdown__trigger::after {
				inset-block-start: 0.8125rem;
			}

	.gform-admin .gform-dropdown--react .gform-dropdown__pills {
			display: flex;
			flex-wrap: wrap;
			gap: 0.5rem;
			inline-size: 100%;
			inset-block-start: 0;
			inset-inline-start: 0;
			padding-block: 0.25rem;
			padding-inline: 0.75rem 2rem;
			pointer-events: none;
			position: absolute;
		}

	.gform-admin .gform-dropdown--react .gform-dropdown__pill {
			pointer-events: auto;
		}

	.gform-admin .gform-dropdown--react .gform-dropdown__popover-wrapper {
			position: relative;
			top: 0.5rem;
		}

	.gform-admin .gform-dropdown--react .gform-dropdown__popover {
			background: #fff;
			border-radius: 3px;
			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;
			inline-size: 100%;
			opacity: 0;
			overflow: hidden;
			padding-block: 0.5rem;
			position: absolute;
			transition: opacity 0.15s ease;
			z-index: 12;
		}

	.gform-admin .gform-dropdown--react.gform-dropdown--popover-position-top.gform-dropdown--size-xl .gform-dropdown__popover {
					transform: translateY(calc(-63px + -100%));
				}

	.gform-admin .gform-dropdown--react.gform-dropdown--popover-position-top.gform-dropdown--size-l .gform-dropdown__popover {
					transform: translateY(calc(-55px + -100%));
				}

	.gform-admin .gform-dropdown--react.gform-dropdown--popover-position-top.gform-dropdown--size-r .gform-dropdown__popover {
					transform: translateY(calc(-50px + -100%));
				}

	.gform-admin .gform-dropdown--react .gform-dropdown__popover-simplebar {
			padding-block-end: 1rem;
		}

	.gform-admin .gform-dropdown--react .gform-dropdown__popover-simplebar [data-simplebar] {
				height: 100%;
				overflow-y: auto;
			}

	.gform-admin .gform-dropdown--react .gform-dropdown__popover-simplebar [data-simplebar] .gform-dropdown__list {
					overflow: visible;
				}

	.gform-admin .gform-dropdown--react .gform-dropdown__search-wrapper {
			margin-block-end: 0.25rem;
			padding-block: 0.5rem;
			padding-inline: 1rem;
		}

	.gform-admin .gform-dropdown--react .gform-dropdown__search {
			inline-size: 100%;
		}

	.gform-admin .gform-dropdown--react .gform-dropdown__list {
			margin-block: calc(0.5rem * -1);
			overflow-y: auto;
			padding-block: 0.5rem;
		}

	.gform-admin .gform-dropdown--react .gform-dropdown__list:focus-visible {
				outline: none;
			}

	.gform-admin .gform-dropdown--react.gform-dropdown--has-search .gform-dropdown__list {
				margin-block-start: calc(0.25rem * -1);
				padding-block-start: 0.25rem;
			}

	.gform-admin .gform-dropdown--react .gform-dropdown__list-group:not(:last-child) {
			margin-block-end: 0.25rem;
		}

	.gform-admin .gform-dropdown--react .gform-dropdown__list-group-label {
			border-block-end: 1px solid #d5d7e9;
			margin-block-end: 0.75rem;
			padding-block: 0.5rem;
			padding-inline: 1rem;
		}

	.gform-admin .gform-dropdown--react .gform-dropdown__list-item {
			cursor: pointer;
			padding-block: 0.25rem;
			padding-inline: 0.5rem;
		}

	.gform-admin .gform-dropdown--react .gform-dropdown__list-item:not(:last-child) {
				margin-block-end: 0.25rem;
			}

	.gform-admin .gform-dropdown--react .gform-dropdown__list-item:focus-visible {
				outline: none;
			}

	.gform-admin .gform-dropdown--react .gform-dropdown__list-item[data-active-item] .gform-dropdown__list-item-inner {
				background: #f6f9fc;
				border-color: #f6f9fc;
			}

	.gform-admin .gform-dropdown--react .gform-dropdown__list-item:active .gform-dropdown__list-item-inner {
				background: #f6f9fc;
				border-color: #d5d7e9;
			}

	.gform-admin .gform-dropdown--react .gform-dropdown__list-item-inner {
			align-items: center;
			background: #fff;
			border: 1px solid #fff;
			border-radius: 3px;
			display: flex;
			gap: 0.375rem;
			justify-content: flex-start;
			padding-block: 0.1875rem;
			padding-inline: 0.4375rem;
		}

	.gform-admin .gform-dropdown--react .gform-dropdown__list-item-before-label, .gform-admin .gform-dropdown--react .gform-dropdown__list-item-after-label {
			block-size: 1.25rem;
			display: flex;
			flex: none;
			font-size: 1.25rem;
			inline-size: 1.25rem;
		}

	.gform-admin .gform-dropdown--react .gform-dropdown__list-item-label {
			flex: auto;
		}

html[dir="rtl"] .gform-admin .gform-dropdown__control {
		padding: 0 1rem 0 2.25rem;
	}

html[dir="rtl"] .gform-admin .gform-dropdown__control .gform-dropdown__chevron, html[dir="rtl"] .gform-admin .gform-dropdown__control .gform-dropdown__spinner {
			left: 0;
			right: auto;
		}

html[dir="rtl"] .gform-admin .gform-dropdown__search .gform-dropdown__search-input {
			padding-left: 2.125rem;
			padding-right: 1rem;
		}

html[dir="rtl"] .gform-admin .gform-dropdown__search-icon {
		left: 1rem;
		right: auto;
	}

html[dir="rtl"] .gform-admin .gform-dropdown__trigger {
		border-left: 0;
		border-right: 0.1875rem solid transparent;
		text-align: right;
	}

html[dir="rtl"] .gform-admin .gform-dropdown__trigger:hover, html[dir="rtl"] .gform-admin .gform-dropdown__trigger:focus {
			border-right-color: #3e7da6;
		}

html[dir="rtl"] .gform-admin .gform-dropdown__group .gform-dropdown__trigger {
		padding-left: 0.875rem;
		padding-right: 1.75rem;
	}

html[dir="rtl"] .gform-admin .gform-dropdown__group-text {
		padding-left: 0;
		padding-right: 0.875rem;
	}

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