52a9fcf5d6
The search item highlight when selected or hovered over is now talled, and the margin between search items is reduced to counteract any effect to spacing.
153 lines
5.2 KiB
SCSS
153 lines
5.2 KiB
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 {
|
|
|
|
.search-input {
|
|
// Align with the top of the divider bar, below create button
|
|
margin-top: 10px;
|
|
width: 100%;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.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 we
|
|
// 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-more-button {
|
|
// Space away form the results list
|
|
margin-top: 5px;
|
|
|
|
// Center it
|
|
position: relative;
|
|
left: 25%;
|
|
width: 50%;
|
|
|
|
// Make smallish button
|
|
height: 20px;
|
|
line-height: 11px;
|
|
font-size: 0.7em;
|
|
}
|
|
}
|
|
} |