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

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

.gform-admin {

	/* HTML Dropdown styles */
	.gform-dropdown {
		box-sizing: border-box;
		font-family: var(--gform-admin-font-family-base);
		position: relative;

		* {
			box-sizing: border-box;
		}

		&.gform-dropdown--position-top {

			.gform-dropdown__container {
				border-block-end: 0;
				border-block-start: 0.0625rem solid var(--gform-admin-color-snuff);
				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;

				&::before {
					inset-block-end: -5px;
					inset-block-start: auto;
				}
			}
		}
	}

	.gform-dropdown__control {
		align-items: center;
		background: var(--gform-admin-color-white);
		block-size: 2.375rem;
		border: 0.0625rem solid var(--gform-admin-color-snuff);
		border-radius: 0.1875rem;
		box-shadow: var(--gform-admin-box-shadow-button);
		cursor: pointer;
		display: flex;
		inline-size: 100%;
		line-height: 1.1;
		padding-block: 0;
		padding-inline: 1rem 2.25rem;
		position: relative;
		z-index: 1;

		&:focus {
			border-color: var(--gform-admin-color-gravity-blue);
			box-shadow: 0 0 0 2px var(--gform-admin-color-focus);
			outline: none;
		}

		&.gform-dropdown__control--placeholder {

			.gform-dropdown__control-text {
				color: var(--gform-admin-color-comet);
				font-weight: var(--gform-admin-font-weight-normal);
			}
		}

		.gform-dropdown__chevron,
		.gform-dropdown__spinner {
			align-items: center;
			background-size: 16px 16px;
			block-size: 100%;
			color: var(--gform-admin-color-amethyst-smoke);
			font-size: 1.375rem;
			inline-size: 2.25rem;
			inset-block-start: 0;
			inset-inline-end: 0;
			justify-content: center;
			position: absolute;
			transition: var(--gform-admin-transition-color);
		}

		.gform-dropdown__chevron {
			display: flex;
		}
	}

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

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

	.gform-dropdown__control-text,
	.gform-dropdown__group-text {
		color: var(--gform-admin-color-port);
		font-family: var(--gform-admin-font-family-base);
		font-size: var(--gform-admin-font-size-base-old);
		font-weight: var(--gform-common-font-weight-medium);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

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

	.gform-dropdown__container {
		background: var(--gform-admin-color-white);
		border: 0.0625rem solid var(--gform-admin-color-snuff);
		border-block-start: 0;
		border-end-end-radius: 0.1875rem;
		border-end-start-radius: 0.1875rem;
		box-shadow: var(--gform-admin-box-shadow-small);
		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: var(--gform-admin-transition-dropdown);
		z-index: 2;

		&::before {
			background: var(--gform-admin-color-white);
			block-size: 0.5rem;
			border-inline: 0.0625rem solid var(--gform-admin-color-snuff);
			content: "";
			inline-size: 100%;
			inset-block-start: -0.5rem;
			inset-inline-start: -1px;
			position: absolute;
			z-index: 3;
		}
	}

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

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

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

	.gform-dropdown__item {
		margin: 0;
	}

	.gform-dropdown__search-icon {
		color: var(--gform-admin-color-amethyst-smoke);
		font-size: 1.5rem;
		inset-block-start: 0.75rem;
		inset-inline-end: 1rem;
		position: absolute;
		transition: var(--gform-admin-transition-color);
	}

	.gform-dropdown__search {
		border-block-end: 1px solid var(--gform-admin-color-white-lilac);
		padding-block: 0.375rem 0.875rem;
		padding-inline: 0.625rem;
		position: relative;

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

		&:focus-within {

			.gform-dropdown__search-icon {
				color: var(--gform-admin-color-gravity-blue);
			}
		}
	}

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

	.gform-dropdown__trigger {
		background: transparent;
		border: 0;
		border-inline-start: 0.1875rem solid transparent;
		color: var(--gform-admin-color-port);
		cursor: pointer;
		display: block;
		font-size: var(--gform-admin-font-size-base-old);
		inline-size: 100%;
		outline: none;
		padding-block: 0.6875rem;
		padding-inline: 0.875rem 1rem;
		text-align: start;
		transition: var(--gform-admin-transition-hover);

		&:hover,
		&:focus {
			background: var(--gform-admin-color-light-blue);
			border-inline-start-color: var(--gform-admin-color-gravity-blue);
		}
	}

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

	.gform-dropdown--show-spinner {

		.gform-dropdown__chevron {
			display: none;
		}

		.gform-dropdown__spinner {
			display: flex;
		}
	}

	.gform-dropdown--reveal {

		.gform-dropdown__container {
			display: block;
		}
	}

	.gform-dropdown--hide {

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

	.gform-dropdown--open {

		.gform-dropdown__chevron {
			color: var(--gform-admin-color-port);
			transform: rotate(180deg);
		}

		.gform-dropdown__control {
			box-shadow: var(--gform-admin-box-shadow-small);

			&:focus {
				border-color: var(--gform-admin-color-snuff);
			}
		}

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

	/* React Dropdown styles */
	.gform-dropdown--react {

		&,
		* {
			box-sizing: border-box;
		}

		&.gform-dropdown--reveal {

			.gform-dropdown__popover {
				display: block;
			}
		}

		&.gform-dropdown--open {

			.gform-dropdown__popover {
				display: block;
				opacity: 1;
			}
		}

		&.gform-dropdown--hide {

			.gform-dropdown__popover {
				display: block;
				opacity: 0;
			}
		}

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

		.gform-dropdown__trigger-wrapper {
			position: relative;
		}

		.gform-dropdown__trigger {
			align-items: center;
			background: var(--gform-admin-color-white);
			border: 1px solid var(--gform-admin-color-santas);
			border-radius: 3px;
			box-shadow: var(--gform-admin-box-shadow-input-hover);
			cursor: pointer;
			display: flex;
			gap: 0.375rem;
			inline-size: 100%;
			justify-content: flex-start;
			outline: inherit;
			padding-block: var(--gform-admin-spacer-2);
			padding-inline: var(--gform-admin-spacer-3) var(--gform-admin-spacer-8);
			position: relative;
			transition: none;

			&::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;
			}

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

			&:disabled {
				background: var(--gform-admin-color-light-blue);
				border-color: var(--gform-admin-color-snuff);
				color: var(--gform-admin-color-santas);
				cursor: not-allowed;
			}
		}

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

		.gform-dropdown__trigger-label {
			flex: auto;
		}

		&.gform-dropdown--size-r .gform-dropdown__trigger {
			block-size: 2.1875rem;

			&::after {
				inset-block-start: 0.4375rem;
			}
		}

		&.gform-dropdown--size-l .gform-dropdown__trigger {
			block-size: 2.375rem;

			&::after {
				inset-block-start: 0.5rem;
			}
		}

		&.gform-dropdown--size-xl .gform-dropdown__trigger {
			block-size: 2.9375rem;

			&::after {
				inset-block-start: 0.8125rem;
			}
		}

		.gform-dropdown__pills {
			display: flex;
			flex-wrap: wrap;
			gap: var(--gform-admin-spacer-2);
			inline-size: 100%;
			inset-block-start: 0;
			inset-inline-start: 0;
			padding-block: var(--gform-admin-spacer-1);
			padding-inline: var(--gform-admin-spacer-3) var(--gform-admin-spacer-8);
			pointer-events: none;
			position: absolute;
		}

		.gform-dropdown__pill {
			pointer-events: auto;
		}

		.gform-dropdown__popover-wrapper {
			position: relative;
			top: var(--gform-admin-spacer-2);
		}

		.gform-dropdown__popover {
			background: var(--gform-admin-color-white);
			border-radius: 3px;
			box-shadow: var(--gform-admin-box-shadow-popup);
			display: none;
			inline-size: 100%;
			opacity: 0;
			overflow: hidden;
			padding-block: var(--gform-admin-spacer-2);
			position: absolute;
			transition: opacity 0.15s ease;
		}

		.gform-dropdown__popover-simplebar {
			padding-block-end: 1rem;

			[data-simplebar] {
				height: 100%;
				overflow-y: auto;

				.gform-dropdown__list {
					overflow: visible;
				}
			}
		}

		.gform-dropdown__search-wrapper {
			margin-block-end: var(--gform-admin-spacer-1);
			padding-block: var(--gform-admin-spacer-2);
			padding-inline: var(--gform-admin-spacer-4);
		}

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

		.gform-dropdown__list {
			margin-block: calc(var(--gform-admin-spacer-2) * -1);
			overflow-y: auto;
			padding-block: var(--gform-admin-spacer-2);

			&:focus-visible {
				outline: none;
			}
		}

		&.gform-dropdown--has-search {

			.gform-dropdown__list {
				margin-block-start: calc(var(--gform-admin-spacer-1) * -1);
				padding-block-start: var(--gform-admin-spacer-1);
			}
		}

		.gform-dropdown__list-item {
			cursor: pointer;
			padding-block: var(--gform-admin-spacer-1);
			padding-inline: var(--gform-admin-spacer-2);

			&:not(:last-child) {
				margin-block-end: var(--gform-admin-spacer-1);
			}

			&:focus-visible {
				outline: none;
			}

			&[data-active-item] .gform-dropdown__list-item-inner {
				background: var(--gform-admin-color-light-blue);
				border-color: var(--gform-admin-color-light-blue);
			}

			&:active .gform-dropdown__list-item-inner {
				background: var(--gform-admin-color-light-blue);
				border-color: var(--gform-admin-color-snuff);
			}
		}

		.gform-dropdown__list-item-inner {
			align-items: center;
			background: var(--gform-admin-color-white);
			block-size: 1.75rem;
			border: 1px solid var(--gform-admin-color-white);
			border-radius: 3px;
			display: flex;
			gap: 0.375rem;
			justify-content: flex-start;
			padding-block: 0.1875rem;
			padding-inline: 0.4375rem;
		}

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

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

html[dir="rtl"] .gform-admin {

	.gform-dropdown__control {
		padding: 0 1rem 0 2.25rem;

		.gform-dropdown__chevron,
		.gform-dropdown__spinner {
			left: 0;
			right: auto;
		}
	}

	.gform-dropdown__search {

		.gform-dropdown__search-input {
			padding-left: 2.125rem;
			padding-right: 1rem;
		}
	}

	.gform-dropdown__search-icon {
		left: 1rem;
		right: auto;
	}

	.gform-dropdown__trigger {
		border-left: 0;
		border-right: 0.1875rem solid transparent;
		text-align: right;

		&:hover,
		&:focus {
			border-right-color: var(--gform-admin-color-gravity-blue);
		}
	}

	.gform-dropdown__group .gform-dropdown__trigger {
		padding-left: 0.875rem;
		padding-right: 1.75rem;
	}

	.gform-dropdown__group-text {
		padding-left: 0;
		padding-right: 0.875rem;
	}
}