mediawiki-skins-Citizen/resources/skins.citizen.search/skins.citizen.search.less

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

.citizen-typeahead {
	border-bottom-right-radius: var( --border-radius-medium );
	border-bottom-left-radius: var( --border-radius-medium );

	a {
		&: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-semibold );
		color: var( --color-emphasized );
	}

	&__labelItem {
		display: flex;
		gap: var( --space-xxs );
		align-items: center;
		font-size: var( --font-size-x-small );
		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;
}
fix(search): 🐛 undefined LESS variables 2023-07-07 21:26:12 +00:00			`@import '../variables.less';`
			`@import '../mixins.less';`

feat: rework search module (#386) * feat: rewrite search module (WIP) There are some caveats because it is a WIP - Messages are not i18n yet - Missing placeholder suggestion thumbnail - Only REST mode works - Missing greeting message when there is no search query - Code might look like a mess (I learned JS not long ago) * refactor: remove old search module * feat: clean up search suggestion styles * feat: hide overflow for suggestion text * feat: add action API and various cleanup * feat: re-add abort controller * feat: add message support and tweaks * feat: use virtual config instead of ResourceLoader hook * fix: missing comma in const definition * feat: add ARIA attributes 2021-05-17 20:34:14 +00:00			`.citizen-typeahead {`
feat(core): ✨ use px for border-radius - Move border radius calculation to CSS variable instead of LESS - Rename CSS variable according to Codex, soft-deprecating the existing border radius 2024-07-05 17:24:31 +00:00			`border-bottom-right-radius: var( --border-radius-medium );`
			`border-bottom-left-radius: var( --border-radius-medium );`
feat(search): ✨ tweak search box to be more center for desktop 2024-09-26 18:55:49 +00:00
fix(search): 🐛 add missing reset style for li 2024-09-27 06:26:56 +00:00			`a {`
			`&:hover,`
			`&:focus {`
			`text-decoration: none;`
			`}`
			`}`

refactor(search): ♻️ use faux element to display search query 2023-08-29 01:22:16 +00:00			`&-input {`
			`// Display overlay instead of the input, but keep the caret`
			`color: transparent;`
feat(core): ✨ convert some CSS variables into Codex equivalent This is an on-going work to adapt Codex into Citizen. Some of the CSS variables are soft depreciated, see tokens.less for updated info. 2024-06-30 05:04:30 +00:00			`caret-color: var( --color-emphasized );`
refactor(search): ♻️ use faux element to display search query 2023-08-29 01:22:16 +00:00
			`&-group {`
			`position: relative;`
			`display: flex;`
			`flex-grow: 1;`
			`}`

			`&-overlay {`
			`position: absolute;`
fix(search): 🐛 incorrect thumbnail icon width 2023-08-30 14:31:26 +00:00			`inset: 0 var( --height-search-bar ) 0 0; // clear button`
refactor(search): ♻️ use faux element to display search query 2023-08-29 01:22:16 +00:00			`display: flex;`
			`align-items: center;`
feat(search): ✨ various tweaks to typeahead styles 2023-08-29 19:32:28 +00:00			`overflow: hidden;`
			`white-space: nowrap;`
fix(search): 🐛 make search input selectable 2023-09-06 21:34:47 +00:00			`pointer-events: none;`
refactor(search): ♻️ use faux element to display search query 2023-08-29 01:22:16 +00:00
			`&-query {`
feat(core): ✨ convert some CSS variables into Codex equivalent This is an on-going work to adapt Codex into Citizen. Some of the CSS variables are soft depreciated, see tokens.less for updated info. 2024-06-30 05:04:30 +00:00			`color: var( --color-emphasized );`
refactor(search): ♻️ use faux element to display search query 2023-08-29 01:22:16 +00:00			`}`
			`}`
			`}`

refactor(search): ♻️ partial cleanup on typeahead DOM 2022-12-04 07:13:37 +00:00			`&__highlight {`
			`font-weight: var( --font-weight-medium );`
feat(core): ✨ convert some CSS variables into Codex equivalent This is an on-going work to adapt Codex into Citizen. Some of the CSS variables are soft depreciated, see tokens.less for updated info. 2024-06-30 05:04:30 +00:00			`color: var( --color-subtle );`
refactor(search): ♻️ partial cleanup on typeahead DOM 2022-12-04 07:13:37 +00:00			`}`

fix(search): 🐛 incorrect full text search URL 2022-12-13 23:25:14 +00:00			`&__query {`
			`font-weight: var( --font-weight-semibold );`
feat(core): ✨ convert some CSS variables into Codex equivalent This is an on-going work to adapt Codex into Citizen. Some of the CSS variables are soft depreciated, see tokens.less for updated info. 2024-06-30 05:04:30 +00:00			`color: var( --color-emphasized );`
fix(search): 🐛 incorrect full text search URL 2022-12-13 23:25:14 +00:00			`}`

refactor(search): ♻️ partial cleanup on typeahead DOM 2022-12-04 07:13:37 +00:00			`&__labelItem {`
			`display: flex;`
feat(search): ✨ clean up and simplify styles 2024-09-26 19:51:36 +00:00			`gap: var( --space-xxs );`
refactor(search): ♻️ partial cleanup on typeahead DOM 2022-12-04 07:13:37 +00:00			`align-items: center;`
feat(core): ✨ use CSS variables for x-small font sizes 2024-02-26 22:14:19 +00:00			`font-size: var( --font-size-x-small );`
feat(core): ✨ convert some CSS variables into Codex equivalent This is an on-going work to adapt Codex into Citizen. Some of the CSS variables are soft depreciated, see tokens.less for updated info. 2024-06-30 05:04:30 +00:00			`color: var( --color-subtle );`
refactor(search): ♻️ partial cleanup on typeahead DOM 2022-12-04 07:13:37 +00:00			`}`
feat(search): ✨ show enter key tip when item is active 2022-12-05 20:52:36 +00:00			`}`

fix(core): hide double MW search suggestion In rare scenario such as #520, default MW search suggestions will load regardless of the settings. This simple CSS hack is used to hide in case if it loaded. This will not be needed when vue search is implemented. 2022-09-28 21:02:15 +00:00			`// HACK: Hide default MW search suggestion if it somehow loaded`
			`// This should be removed when we switch to vue search`
			`.suggestions {`
fix(search): hide default MW search suggestion Sometimes the JS is not able to stop the search module from loading. We can use CSS to hide the suggestion for now. 2022-11-08 05:25:40 +00:00			`display: none !important;`
fix(core): hide double MW search suggestion In rare scenario such as #520, default MW search suggestions will load regardless of the settings. This simple CSS hack is used to hide in case if it loaded. This will not be needed when vue search is implemented. 2022-09-28 21:02:15 +00:00			`}`