openmct/platform/commonUI/general/res/sass/search/_search.scss

/*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT Web is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT Web includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/

.abs.search-holder {
	//@include test(#990000);
	height: $treeSearchInputBarH;
	bottom: 0;
	&.active {
		height: auto;
		bottom: 0;
	}
	top: 23px;

	// Align with the top of the divider bar, below create button
	//margin-top: 10px; // CH comment out
	z-index:5;
}

.search {
	$iconWidth: 20px;
	$leftMargin: 6px;
	$rightPadding: 5px;

	//padding-right: $rightPadding;
	//@include test();
	display: flex; //block;
	flex-direction: column;
	height: 100%;

	.search-bar {
		//$heightAdjust: 4px;
		$textInputHeight: 19px; // This is equal to the default value, 19px
		$iconEdgeM: 4px;
		$iconD: $treeSearchInputBarH - ($iconEdgeM*2);
		font-size: 0.8em;

		//order: 1;

		position: relative;
		width: 100%;
		//height: $textInputHeight;
		//margin-top: $heightAdjust;
		.search-input,
		.search-icon {
		}
		
		.search-input {
			height: $treeSearchInputBarH;
			line-height: $treeSearchInputBarH;
			padding-top: 0;
			padding-bottom: 0;
		}
		
		.search-icon,
		.clear-icon,
		.menu-icon {
			//@include test(#008800);
			@include box-sizing(border-box);
			color: $colorItemFg;
			height: $iconD; width: $iconD;
			line-height: $iconD;
			position: absolute;
			text-align: center;
			top: $iconEdgeM;
		}

		.clear-icon,
		.menu-icon {
			cursor: pointer;
			transition: color .25s;
		}


		.search-input {
			position: relative;
			width: 100%;
			padding-left: $iconD + $interiorMargin !important;
			padding-right: ($iconD * 2) + ($interiorMargin * 2) !important;

			// Make work for mct-control textfield
			input {
				width: 100%;
			}
		}

		.search-icon {
			color: $colorItemFg;
			left: $interiorMarginSm;
			transition: visibility .15s, opacity .15s, color .2s;
			pointer-events: none;

			&.content {
				// Make icon invisible whenever there is text input
				//visibility: hidden;
				//opacity: 0;
			}
		}

		// Make icon invisible when the text input is focused
		.search-input:focus + div.search-icon {
			//visibility: hidden;
			//opacity: 0;
		}

		// Make icon lighten when hovering over search bar
		.search-input:hover + div.search-icon {
			color: lighten($colorItemFg, 20%);
		}

		.clear-icon {
			right: $iconD + $interiorMargin;

			// Icon is visible only when there is text input
			visibility: hidden;
			opacity: 0;

			transition: visibility .15s, opacity .15s, color .2s;

			&.content {
				visibility: visible;
				opacity: 1;
			}

			&:hover {
				color: lighten($colorItemFg, 20%);
			}
		}

		.menu-icon {
			font-size: 0.8em;
			padding-right: $iconEdgeM;
			right: $iconEdgeM;
			text-align: right;

			&:hover {
				color: lighten($colorItemFg, 20%);
			}
		}

		.search-menu-holder {
			float: right;
			//margin-top: $textInputHeight - 2px;
			//left: -50px;
			left: -20px;

			z-index: 1;

			transition: visibility .05s, opacity .05s;

			&.off {
				visibility: hidden;
				opacity: 0;
			}
		}

		// Hovering reveals menu
		.menu-icon:hover + div.search-menu-holder {
			visibility: visible;
		}
		div.search-menu-holder:hover {
			visibility: visible;
		}
	}

	.active-filter-display {
		//order: 2;
		$s: 0.65em;
		$p: $interiorMargin;
		@include border-radius($basicCr);
		@include box-sizing(border-box);
		line-height: 130%;
		padding: $p 0;
		padding-left: $s * 2.25;
		font-size: $s;
		//background-color: rgba(#000, 0.3);
		//border-radius: $basicCr;
		margin-top: $interiorMarginSm;


		.clear-filters-icon {
			opacity: 0.4;
			font-size: 0.8em;
			position: absolute;
			left: 1px;
			cursor: pointer;
		}

		// Transition looks weird when the results list has none
		//transition: visibility .2s, opacity .2s;

		&.off {
			visibility: hidden;
			opacity: 0;
			height: 0;
			margin: 0;
			padding: 0;
			border: 0;
		}
	}

	.search-scroll {
		order: 3;

		//padding-right: $rightPadding;
		margin-top: 4px;

		// Adjustable scrolling size
		overflow-y: auto;
		top: auto;
		height: auto;
		max-height: 100%;
		position: relative;

		.load-icon {
			position: relative;
			&.loading {
				pointer-events: none;
				margin-left: $leftMargin;

				.title-label {
					// Text styling
					font-style: italic;
					font-size: .9em;
					opacity: 0.5;

					// Text positioning
					margin-left: $iconWidth + $leftMargin;
					line-height: 24px;
				}
				.wait-spinner {
					margin-left: $leftMargin;
				}
			}

			&:not(.loading) {
				cursor: pointer;
			}
		}

		.load-more-button {
			margin-top: $interiorMargin 0;
			font-size: 0.8em;
			position: relative;
			left: 50%;
			margin-left: -45px;
			text-align: center;
			width: 90px;
			white-space: nowrap;
		}
	}
}