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

.search-holder {
    $iconWidth: 20px;
    $leftMargin: 6px;
    $rightPadding: 5px;
    
    //position: relative;
    //overflow-y: auto;  // This should make it scroll, but isn't wokring :(
    padding-right: $rightPadding;
    
    .search {
        //height: auto;
        //overflow: auto;
        
        .search-input {
            // Align with the top of the divider bar, below create button 
            margin-top: 10px;
            width: 100%;
        }
        
        .search-scroll {
            height: 100%;
            overflow: auto;
            
            .results {
                // Spacing away from the search input
                margin-top: 10px;

                .search-result-item {
                    // Include transitions (for the highlights)
                    @include single-transition(background-color, 0.25s);

                    // Space the results from each other
                    margin-bottom: 2px;

                    // Make the highlights the right color and shape.
                    // Attempting to match the style in the tree, but  
                    //   while having these be compact. 
                    border-radius: 2px;
                    padding-top: 4px;
                    padding-bottom: 2px;

                    .label {
                        // Give some padding away from the left side
                        margin-left: $leftMargin;

                        .title-label {
                            display: inline-block;
                            position: absolute;

                            // Give some padding away from the left side
                            left: $leftMargin + 3px + $iconWidth;
                            // and the right side
                            right: $rightPadding;

                            // Size and position the text
                            font-size: .8em;
                            line-height: 17px;

                            // Hide overflow text
                            width: auto;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                    }

                    // Change styling when it's selected
                    &.selected {
                        $c: #fff;
                        background: $colorKeySelectedBg;
                        color: $c;
                        .view-control {
                            color: $colorItemTreeIcon;
                        }
                        .label .type-icon {
                            color: #fff;
                        }
                    }

                    // Change styling when it's being hovered over
                    &:not(.selected) {
                        &:hover {
                            background: lighten($colorBodyBg, 5%);
                            color: lighten($colorBodyFg, 20%);
                            .context-trigger {
                                display: block;
                            }
                            .icon {
                                color: $colorItemTreeIconHover;
                            }
                        }
                    }
                }
            }

            .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 {
                // Space away form the results list
                margin-top: 5px;
                margin-bottom: 5px;

                // Center it
                position: relative;
                left: 25%;
                width: 50%;

                // Make smallish button 
                height: 20px;
                line-height: 11px;
                font-size: 0.7em;
            }
            
            // temp
            //margin-bottom: 30px;
        }
    }
}