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

//
// Citizen - Search Styles
// https://starcitizen.tools
//

@suggestion-max-width: 400px + @icon-box-size + @icon-padding * 2; // 454px

// TODO: Make it configurable and flexible
#site-search {
	#search-form {
		position: absolute;
		z-index: -1; // Not interactable
		margin: 7px 0 8px; // 1px h3 screen reader
		display: flex;
		top: 0;
		right: @icon-box-size + @icon-padding * 2;
		opacity: 0;
		.boxshadow(4);
		transition: @transition-opacity;

		// Search field
		#search-input {
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
			padding: 12px 15px;
			width: 0;
			max-width: calc( ~'100vw -'@icon-box-size * 2 + @icon-padding * 4 + @margin-side );
			border: 1px solid @base-90;
			transition: @transition-width, @transition-box-shadow;

			&:focus {
				outline: 0;
				.boxshadow(5);
			}
		}

		// Search field button
		#search-button {
			.button-blue;
			width: @icon-box-size + @icon-padding * 2;
			height: 42px;
			border: 0;
			cursor: pointer; //somehow it is not pointer

			img {
				filter: invert( 1 );
				width: 16px;
			}

			&:hover,
			&:active,
			&:focus {
				.button-blue-active;
			}
		}
	}

	#search-toggle-icon-container {
		display: flex;
		align-items: center;
		justify-content: center;
		height: inherit;

		#search-toggle-icon {
			opacity: @opacity-icon;
			position: absolute;
			margin-top: -2px;
			margin-left: -2px;
			width: 10px;
			height: 10px;
			border: solid 2px @base-0;
			border-radius: 100%;
			transform: rotate( -45deg );
			transition: @transition-transform-quick, @transition-height-quick, @transition-opacity-quick, @transition-border-color-quick;

			&:before,
			&:after {
				content: '';
				position: absolute;
				width: 2px;
				background-color: @base-0;
				transition: inherit;
			}

			&:before {
				top: 10px;
				left: 3px;
				height: 10px;
			}

			&:after {
				opacity: 0;
				top: -1px;
				left: 4px;
				height: 18px;
				transform: rotate( -90deg );
			}
		}
	}

	#search-toggle {
		&:checked {
			~ #search-form {
				z-index: 10;
				opacity: 1;

				#search-input {
					width: 400px;
				}
			}

			~ #search-toggle-icon-container #search-toggle-icon {
				border-color: transparent;

				&:before {
					height: 18px;
					transform: translate( 1px, -11px );
				}

				&:after {
					opacity: 1;
				}

				&:hover {
					~ #search-toggle-icon-container #search-toggle-icon {
						border-color: @base-0;

						&:after {
							opacity: 0;
						}
					}
				}
			}

			&:hover {
				~ #search-toggle-icon-container #search-toggle-icon {
					border-color: @base-0;

					&:after {
						height: 12px;
					}
				}
			}
		}

		&:hover {
			~ #search-toggle-icon-container #search-toggle-icon {
				opacity: @opacity-icon-active;

				&:before {
					height: 5px;
					transform: translate( 0, 5px );
				}
			}
		}
	}
}

#typeahead-suggestions {
	position: absolute;
	top: @header-height;
	z-index: 99999;
}

.suggestions-dropdown {
	background: @base-100;
	.boxshadow(4);
	width: @suggestion-max-width;
	max-width: calc( ~'100vw -'@icon-box-size + @icon-padding * 2 + @margin-side );
}

.suggestion-link {
	display: block;
	position: relative;
	min-height: 2rem * @content-scaling;
	padding: 1rem 1rem 1rem 8.5rem * @content-scaling;
	border-bottom: 1px solid @base-90;
}

.suggestion-title {
	margin: 0 0 0.78rem * @content-scaling 0;
	color: @base-10;
	font-size: 1.6rem * @content-scaling;
	font-weight: normal;
	line-height: 1.872rem * @content-scaling;
}

.suggestion-link.active .suggestion-title {
	color: @accent-50;
}

.suggestion-highlight {
	font-weight: 600;
	font-style: normal;
}

.suggestion-description {
	color: @base-30;
	margin: 0;
	font-family: @fonts;
	font-size: 1.3rem * @content-scaling;
	line-height: 1.43rem * @content-scaling;
}

.suggestion-link.active {
	background-color: @accent-90;
}

/* using element selector to override default anchor styles */
a.suggestion-link:hover {
	text-decoration: none;
}

.suggestion-thumbnail {
	background-color: @base-80;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 100%;
	width: 7rem * @content-scaling;
	position: absolute;
	top: 0;
	left: 0;
}

.suggestion-placeholder {
	.suggestion-title {
		width: 30%;
		height: 1.6rem * @content-scaling;
	}

	.suggestion-description {
		width: 70%;
		height: 1.3rem * @content-scaling;
	}

	.suggestion-title,
	.suggestion-description {
		animation-duration: 1.8s;
		animation-fill-mode: forwards;
		animation-iteration-count: infinite;
		animation-name: placeHolderShimmer;
		animation-timing-function: linear;
		background: @base-70;
		background: linear-gradient( to right, @base-90 8%, @base-80 38%, @base-90 54% );
		background-size: 1000px 640px;
		position: relative;
	}
}

// RTL tweaks
.rtl {
	#site-search {
		#search-form {
			left: @icon-box-size + @margin-side + @icon-padding;
			right: unset;
		}
	}
}

@media only screen and ( max-width: @suggestion-max-width ) {
	.suggestions-dropdown {
		position: fixed;
		left: 0;
		top: @header-height + 1px;
		max-width: 100vw;

		&:after {
			content: '';
			width: 100vw;
			height: 100vh;
			background: #000;
			display: block;
			opacity: 0.7;
			position: fixed;
		}
	}
}

@keyframes placeHolderShimmer {
	0% {
		background-position: -468px 0;
	}

	100% {
		background-position: 468px 0;
	}
}