skins.citizen.search.less
No OneTemporary
Actions

Size

1 KB

Referenced Files

None

Subscribers

None

skins.citizen.search.less
View Options

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

	.citizen-typeahead {
	border-bottom-right-radius: var( --border-radius-medium );
	border-bottom-left-radius: var( --border-radius-medium );
	.mixin-citizen-font-styles( 'small' );

	a {
	color: var( --color-base );

	&:hover,
	&:focus {
	text-decoration: none;
	}
	}

	&-input {
	// Display overlay instead of the input, but keep the caret
	color: transparent;
	caret-color: var( --color-emphasized );

	&-group {
	position: relative;
	display: flex;
	flex-grow: 1;
	}

	&-overlay {
	position: absolute;
	inset: 0 var( --height-search-bar ) 0 0; // clear button
	display: flex;
	align-items: center;
	overflow: hidden;
	white-space: nowrap;
	pointer-events: none;

	&-query {
	color: var( --color-emphasized );
	}
	}
	}

	&__highlight {
	font-weight: var( --font-weight-medium );
	color: var( --color-subtle );
	}

	&__query {
	font-weight: var( --font-weight-semi-bold );
	color: var( --color-emphasized );
	}

	&__labelItem {
	display: flex;
	gap: var( --space-xxs );
	align-items: center;
	color: var( --color-subtle );
	}
	}

	// HACK: Hide default MW search suggestion if it somehow loaded
	// This should be removed when we switch to vue search
	.suggestions {
	display: none !important;
	}