TypeaheadListItem.less
No OneTemporary
Actions

Size

1 KB

Referenced Files

None

Subscribers

None

TypeaheadListItem.less
View Options

	@import '../../mixins.less';

	.citizen-typeahead-list-item {
	&-link {
	display: flex;
	gap: var( --space-sm );
	align-items: center;
	min-height: 44px;
	padding: var( --space-xs ) var( --space-md );

	&:hover,
	&[ data-mw-typeahead-selected ] {
	background-color: var( --background-color-button-quiet--hover );
	}

	&:active {
	background-color: var( --background-color-button-quiet--active );
	}
	}

	&-image {
	flex-shrink: 0;
	width: 100%;
	max-width: 60px;
	height: 60px;
	overflow: hidden;
	background-color: var( --background-color-base-fixed );
	background-position: center;
	background-size: cover;
	border-radius: var( --border-radius-medium );

	&--placeholder {
	display: grid;
	place-content: center;
	background-color: var( --color-surface-3 );

	&::before {
	width: var( --size-icon );
	height: var( --size-icon );
	}
	}
	}

	&-text {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	gap: 2px;
	overflow: hidden;
	color: var( --color-emphasized );
	white-space: nowrap;
	}

	&-title,
	&-description {
	overflow: hidden;
	text-overflow: ellipsis;
	}

	&-title {
	font-weight: var( --font-weight-semi-bold );
	.mixin-citizen-font-styles( 'body' );
	}

	&-description {
	color: var( --color-subtle );
	}

	.citizen-typeahead-group--chips & {
	&-link {
	gap: var( --space-xs );
	min-height: 36px;
	padding: var( --space-xxs ) var( --space-sm );
	border: 1px solid var( --border-color-base );
	border-radius: var( --border-radius-medium );
	}
	}
	}