mediawiki-skins-Citizen/resources/skins.citizen.styles/Searchbox.less

#search {
	&-checkbox {
		&:checked {
			~ #searchform {
				z-index: 10;
				pointer-events: auto; // clickable
				transform: none;
			}

			~ #search-toggle-icon {
				#search-toggle-icon {
					&-2 {
						border-color: transparent;
					}

					&-1 {
						height: 16px;
						transform: translate3d( -5px, -5px, 0 ) rotate( 135deg );
					}

					&-3 {
						opacity: 1;
					}
				}

				&:hover {
					border-color: @base-0;

					#search-toggle-icon-3 {
						opacity: 0;
					}
				}
			}

			&:hover {
				~ #search-toggle-icon {
					#search-toggle-icon {
						&-1 {
							height: 12px;
							transform: translate3d( -5px, -5px, 0 ) rotate( 135deg );
						}

						&-2 {
							border-color: transparent;
						}

						&-3 {
							height: 12px;
						}

						&-1,
						&-3 {
							background-color: var( --background-color-icon--hover );
						}
					}
				}
			}

			&:active {
				~ #search-toggle-icon {
					#search-toggle-icon {
						&-1,
						&-3 {
							background-color: var( --background-color-icon--active );
						}
					}
				}
			}
		}
	}

	&form {
		--width-search-bar: @width-search-bar;
		--height-search-bar: @height-search-bar;
		position: absolute;
		z-index: -1; // not interactable
		top: 0;
		right: @margin-side / 2;
		display: flex;
		margin: var( --margin-header-item ) 0; // 1px h3 screen reader
		border-radius: @border-radius-small;
		pointer-events: none; // not clickable
		transform: translateX( 120% );
		transition: @transition-transform-quick;
		.boxshadow(4);

		&-icon {
			position: absolute;
			z-index: 110;
			width: var( --height-search-bar );
			height: var( --height-search-bar );
			background-position: center;
			background-repeat: no-repeat;
			background-size: 14px;
			opacity: var( --opacity-icon-base );
		}

		&-random {
			position: absolute;
			z-index: 120;
			right: 38px;
			width: var( --height-search-bar );
			height: var( --height-search-bar );
			background-position: center;
			background-repeat: no-repeat;
			background-size: 18px;
			opacity: var( --opacity-icon-base );
			transition: @transition-transform-quick, @transition-opacity-quick;

			&:hover {
				opacity: var( --opacity-icon-base--hover );
				transform: rotate( 30deg );
			}

			&:active {
				opacity: var( --opacity-icon-base--active );
			}
		}
	}

	&-toggle {
		position: absolute;
		z-index: 21; // override to be on top of the form
		right: 0; // align checkbox with icon
		margin-right: var( --margin-header-item--corner );
		margin-left: var( --margin-header-item--corner );

		&-icon {
			position: relative;
			z-index: 20; // stay on top of search form
			display: flex;
			width: var( --width-button-base );
			height: var( --height-header );
			align-items: center;
			justify-content: center;
			margin-right: 10px;
			transition: @transition-transform-quick, @transition-height-quick, @transition-opacity-quick, @transition-border-color-quick;

			&-1 {
				top: 6px;
				/* @noflip */
				left: 12px;
				height: 8px;
				transform: rotate( -45deg );
			}

			&-2 {
				width: 10px;
				height: 10px;
				/* Use background-color variable because it is a part of the logo */
				border: solid 2px var( --background-color-icon );
				margin-top: -4px;
				/* @noflip */
				margin-left: -2px;
				border-radius: 100%;
				transform: rotate( -45deg );
			}

			&-3 {
				top: 1px;
				left: -7px;
				height: 16px;
				opacity: 0;
				transform: rotate( -135deg );
			}

			&-1,
			&-3 {
				width: 2px;
				background-color: var( --background-color-icon );
			}
		}

		&:hover {
			~ #search-toggle-icon {
				#search-toggle-icon {
					&-1 {
						height: 6px;
						background-color: var( --background-color-icon--hover );
						transform: translate3d( 2px, 2px, 0 ) rotate( -45deg );
					}

					&-2 {
						border-color: var( --background-color-icon--hover );
					}
				}
			}
		}

		&:active {
			~ #search-toggle-icon {
				#search-toggle-icon {
					&-1 {
						background-color: var( --background-color-icon--active );
					}

					&-2 {
						border-color: var( --background-color-icon--active );
					}
				}
			}
		}
	}

	&Input {
		z-index: 100;
		width: var( --width-search-bar );
		max-width: ~'calc( 100vw - var( --padding-page ) )';
		height: var( --height-search-bar );
		padding: 8px ~'calc( var( --height-search-bar ) * 2 )' 8px var( --height-search-bar );
		border: 1px solid var( --border-color-base--lighter );
		appearance: none;
		background: var( --background-color-dp-03 );
		border-radius: @border-radius-small;
		transition: @transition-background-quick, @transition-box-shadow-quick;

		&:focus {
			background-color: var( --background-color-dp-08 );
			outline: 0;
			.boxshadow(5);
		}
	}
}

.search {
	&-toggle-icon-div {
		position: relative;
		border-radius: @border-radius-large;
		transition: inherit;
	}
}

/* @noflip */
.rtl {
	#search-toggle-icon {
		&-1 {
			left: 2px;
		}

		&-2 {
			margin-left: -4px;
		}
	}
}

.skin-citizen-dark {
	#search {
		&form {
			&-icon,
			&-random {
				filter: invert( 1 );
			}
		}
	}
}

@media ( max-width: @width-search-bar ) {
	#search {
		&form {
			transition: none; // no transition on mobile

			&:before {
				position: fixed;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				display: block;
				background: var( --background-color-dp-03 );
				content: '';
				opacity: 0.9;
			}
		}
	}
}

/**
 * Loading indicator for searchbox
 * In core so that loading animation can appear while the search module loads
 * Based on Vector
 *
 * By adding a class on the parent search form
 * <div id="searchform" class="search-form__loader"></div>
 * A pseudo element is added via ':after' that adds the loading indicator.
 *
 * After appearing for more than a second, a progress-bar animation appears
 * above the loading indicator.
 *
 **/
#searchform.search-form__loading:after {
	--height-search-bar__progress-bar: @height-search-bar__progress-bar;
	position: absolute;
	z-index: 999;
	top: 100%;
	// Position loader below the input.
	display: block;
	overflow: hidden;
	width: 100%;
	// Hide text in case it extends beyond the input.
	height: var( --height-search-bar__progress-bar );
	// Ensure it doesn't extend beyond the input.
	box-sizing: border-box;
	// Animates the progress-bar.
	animation: search-bar__progress-bar
		/* duration */ 1200ms
		/* timing function */ linear
		/* delay */ 1000ms
		/* iteration count */ infinite
		/* fill direction */ alternate;
	// Add a progress-bar to the loading indicator,
	// but only show it animating after 1 second of loading.
	background: /*image*/ linear-gradient( 90deg, var( --color-primary ) 0%, var( --color-primary ) 100% )
		/* position / size*/ -10% 0 ~'/' 0 var( --height-search-bar__progress-bar )
		/* repeat */ no-repeat,transparent;
	// Align style with the form
	border-radius: 0 0 @border-radius-large @border-radius-large;
	// Placeholder text
	content: 'loading';
	text-overflow: ellipsis;
	white-space: nowrap;
}

@keyframes search-bar__progress-bar {
	0% {
		background-position: -10% 0;
		background-size: 0 var( --height-search-bar__progress-bar );
	}

	30% {
		background-position: -10% 0;
		background-size: 30% var( --height-search-bar__progress-bar );
	}

	70% {
		background-position: 110% 0;
		background-size: 30% var( --height-search-bar__progress-bar );
	}

	100% {
		background-position: 110% 0;
		background-size: 0 var( --height-search-bar__progress-bar );
	}
}