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.
 *****************************************************************************/

.clear-icon,
.menu-icon {
    cursor: pointer;
    font-family: symbolsfont;
    @include trans-prop-nice((opacity, color), 150ms);
}

.clear-icon {
    // 'x' in circle icon
    &:before {
        content: '\e607';
    }
}

.holder-search {
	$iconWidth: 20px;

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

		.search-input {
			height: $treeSearchInputBarH;
			line-height: $treeSearchInputBarH;
		}
		
		&:before,
		.clear-icon,
		.menu-icon {
			@include box-sizing(border-box);
			color: $colorInputIcon;
			height: $iconD;
            width: $iconD;
			line-height: $iconD;
			position: absolute;
			text-align: center;
			top: $iconEdgeM;
		}

		.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: inherit; // was 100%
			}
		}

		&:before {
            // Magnify glass icon
            content:'\4d';
            font-family: symbolsfont;
            left: $interiorMarginSm;
            @include trans-prop-nice(color, 250ms);
            pointer-events: none;
            z-index: 1;
        }

		// Make icon lighten when hovering over search bar
		&:hover:before {
			color: pullForward($colorInputIcon, 10%);
		}

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

			// Icon is visible only when there is text input
            visibility: hidden;
			opacity: 0;
			&.show {
                visibility: visible;
				opacity: 1;
			}

			&:hover {
				color: pullForward($colorInputIcon, 10%);
			}
		}

		.menu-icon {
            // 'v' invoke menu icon
            &:before { content: '\76'; }
			font-size: 0.8em;
			padding-right: $iconEdgeM;
			right: $iconEdgeM;
			text-align: right;

			&:hover {
				color: pullForward($colorInputIcon, 10%);
			}
		}

		.search-menu-holder {
			float: right;
			left: -20px;
			z-index: 70;
			transition: visibility .05s, opacity .05s;
		}
	}

	.active-filter-display {
		$s: 0.65em;
		$p: $interiorMargin;
		@include box-sizing(border-box);
		line-height: 130%;
		padding-left: $s * 2.25;
		font-size: $s;

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

	.search-results {
        @include trans-prop-nice((opacity, visibility), 250ms);
        margin-top: $interiorMarginLg; // Always include margin here to fend off the search input
		padding-right: $interiorMargin;
        .hint {
            margin-bottom: $interiorMarginLg;
            font-size: 0.65em;
            opacity: 0.6;
        }
        &.active {
            visibility: visible;
            opacity: 1;
        }
		.load-more-button {
            @include transform(translateX(-50%));
            display: inline-block;
			margin-top: $interiorMargin;
            padding: 0 $interiorMarginLg;
			font-size: 0.75em;
			margin-left: 50%;
			white-space: nowrap;
		}
	}
}