2e767c94c4
Make the 'Load more' button work with the new filtered results. Added 'ALL' to the top of the search menu which allows the user to toggle all of the filtering options easily.
325 lines
11 KiB
SCSS
325 lines
11 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;
|
|
|
|
padding-right: $rightPadding;
|
|
top: 23px;
|
|
|
|
// Align with the top of the divider bar, below create button
|
|
margin-top: 10px;
|
|
|
|
.search {
|
|
|
|
.search-bar {
|
|
$heightAdjust: 4px;
|
|
$textInputHeight: 19px; // This is equal to the default value, 19px
|
|
|
|
width: 100%;
|
|
margin-top: $heightAdjust;
|
|
|
|
position: relative;
|
|
|
|
.search-input {
|
|
position: relative;
|
|
top: -$heightAdjust;
|
|
width: 100%;
|
|
height: $textInputHeight;
|
|
|
|
// For clear button
|
|
padding-right: 16px;
|
|
|
|
// Modifications for existence of menu icon:
|
|
padding-right: 16px + 12px;
|
|
}
|
|
|
|
.search-icon {
|
|
color: $colorItemFg;
|
|
font-size: 12px;
|
|
|
|
// Make the icon within the left edge of the input area
|
|
margin-left: 3px;
|
|
width: 0;
|
|
height: 0;
|
|
|
|
// Line up icon with text input vertically
|
|
margin-top: -$textInputHeight;
|
|
|
|
// Text focus display transition
|
|
transition: visibility .15s, opacity .15s;
|
|
|
|
&.content {
|
|
// Make icon invisible whenever there is text input
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.search-input:focus + div.search-icon {
|
|
// Make icon invisible when the text input is focused
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
}
|
|
|
|
.clear-icon {
|
|
position: absolute;
|
|
display: block;
|
|
|
|
cursor: pointer;
|
|
|
|
color: $colorItemFg;
|
|
font-size: 6px;
|
|
padding: 6px;
|
|
padding-left: 4px;
|
|
|
|
right: 0px;
|
|
top: -3px;
|
|
|
|
// Icon is visible only when there is text input
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
|
|
transition: visibility .15s, opacity .15s;
|
|
|
|
&.content {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
|
|
// Modifications for existence of menu icon:
|
|
right: 16px;
|
|
padding-right: 2px;
|
|
}
|
|
|
|
.menu-icon {
|
|
position: absolute;
|
|
display: block;
|
|
|
|
cursor: pointer;
|
|
|
|
color: $colorItemFg;
|
|
font-size: 6px;
|
|
padding: 6px;
|
|
padding-left: 4px;
|
|
|
|
right: 0px;
|
|
top: -3px;
|
|
}
|
|
|
|
.search-menu-holder {
|
|
//visibility: hidden;
|
|
|
|
float: right;
|
|
margin-top: $textInputHeight - 2px;
|
|
left: -25px;
|
|
|
|
.search-menu {
|
|
border-top: 0;
|
|
|
|
.search-menu-item {
|
|
// Padding only on sides
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
padding-left: 4px;
|
|
padding-right: 6px;
|
|
|
|
font-size: 0.8em;
|
|
|
|
.search-menu-checkbox {
|
|
// Vertically center
|
|
margin-top: 0.3em;
|
|
|
|
// Get rid of weird checkbox positioning
|
|
// from label.checkbox.custom
|
|
padding-left: 0;
|
|
margin-right: 0;
|
|
|
|
// Spacing with labels
|
|
padding-right: 3px;
|
|
}
|
|
|
|
.search-menu-glyph {
|
|
color: white;
|
|
}
|
|
|
|
&:hover {
|
|
// Do nothing
|
|
}
|
|
|
|
&.special {
|
|
font-weight: bold;
|
|
background-color: lighten($colorBodyBg, 30%);
|
|
|
|
.search-menu-label {
|
|
font-size: 1.1em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Make bubble caret thing
|
|
.search-menu-holder:after {
|
|
position: absolute;
|
|
top: -6px;
|
|
left: 10px;
|
|
display: inline-block;
|
|
border-right: 6px solid transparent;
|
|
//border-bottom: 6px solid white;
|
|
border-bottom: 6px solid rgb(94, 94, 94); // Where does this color come from?
|
|
border-left: 6px solid transparent;
|
|
content: '';
|
|
}
|
|
|
|
// Hovering reveals menu
|
|
.menu-icon:hover + div.search-menu-holder {
|
|
visibility: visible;
|
|
}
|
|
div.search-menu-holder:hover {
|
|
visibility: visible;
|
|
}
|
|
}
|
|
|
|
.search-scroll {
|
|
// Spacing away from the search input
|
|
top: 25px;
|
|
overflow-y: auto;
|
|
padding-right: $rightPadding;
|
|
|
|
.results {
|
|
|
|
.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%;
|
|
white-space: nowrap;
|
|
|
|
// Make smallish button
|
|
height: 20px;
|
|
line-height: 11px;
|
|
font-size: 0.7em;
|
|
}
|
|
}
|
|
}
|
|
} |