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

/*****************************************************************************
 * Open MCT, Copyright (c) 2014-2018, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT 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 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;
    @include trans-prop-nice((opacity, color), 150ms);
}

.c-search-btn-wrapper,
.c-search {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    position: relative;

    > * {
        &:not(:first-child) { margin-left: $interiorMargin; }
    }
}

.c-search-btn-wrapper {
    // Holds c-search and Cancel button
    //@include test();
    &.holder {
        margin-bottom: $interiorMargin;
    }

}

.c-search {
    // New approach to search and filter inputs
    // Block element
    // Holds magnify glass icon, html input, cancel button, etc.
    $m: $interiorMarginSm;
    @include nice-input();
    flex: 1 1 99%;
    font-size: 0.8rem;
    height: $btnStdH;
    padding: 1px $interiorMargin;

    > * {
        display: inline-block;
        flex: 0 0 auto;
        position: relative;
    }

    &:before {
        // Magnify glass icon
        content: $glyph-icon-magnify;
        font-family: symbolsfont;
        opacity: 0.3;
        pointer-events: none;
        transition: opacity 500ms;
    }

    &:hover:before {
        opacity: 0.6;
    }
}

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

    &:hover {
        opacity: 1;
    }
}

input.c-search__search-input {
    background: none  !important;
    box-shadow: none !important; // !important needed to override default for [input]
    flex: 1 1 99%;
    min-width: 10px;
}

.c-search__search-menu-holder {
    left: 100%;
    position: absolute;
    transform: translate(-30px, 10px);
    z-index: 70;
}

.holder-search {
	$iconWidth: 20px;

    .results-msg {
        font-size: 0.8rem;
        opacity: 0.6;
    }

	.active-filter-display {
		$s: 0.7rem;
		$p: $interiorMargin;
		box-sizing: border-box;
		line-height: 130%;
		padding-left: $s * 1.5;
		font-size: $s;

		.clear-filters {
			opacity: 1;
			font-size: 0.9em;
            margin-right: $interiorMarginSm;
			position: absolute;
			left: 1px;
			cursor: pointer;
		}
	}

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