425 lines
14 KiB
SCSS
425 lines
14 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 {
|
|
display: flex;//block;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
|
|
.search-bar {
|
|
$heightAdjust: 4px;
|
|
$textInputHeight: 19px; // This is equal to the default value, 19px
|
|
|
|
order: 1;
|
|
|
|
position: relative;
|
|
width: 100%;
|
|
height: $textInputHeight;
|
|
margin-top: $heightAdjust;
|
|
|
|
.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;
|
|
|
|
transition: visibility .15s, opacity .15s, color .2s;
|
|
|
|
&.content {
|
|
// Make icon invisible whenever there is text input
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
// Make icon invisible when the text input is focused
|
|
.search-input:focus + div.search-icon {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
}
|
|
|
|
// Make icon lighten when hovering over search bar
|
|
.search-input:hover + div.search-icon {
|
|
color: lighten($colorItemFg, 20%);
|
|
}
|
|
|
|
.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, color .2s;
|
|
|
|
&.content {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
|
|
&:hover {
|
|
color: lighten($colorItemFg, 20%);
|
|
}
|
|
|
|
// Modifications for existence of menu icon:
|
|
right: 3px + 6px + 6px;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
.menu-icon {
|
|
position: absolute;
|
|
display: block;
|
|
|
|
cursor: pointer;
|
|
|
|
color: $colorItemFg;
|
|
font-size: 6px;
|
|
padding: 6px;
|
|
padding-left: 3px;
|
|
|
|
right: 0px;
|
|
top: -3px;
|
|
|
|
transition: color .2s;
|
|
|
|
&:hover {
|
|
color: lighten($colorItemFg, 20%);
|
|
}
|
|
}
|
|
|
|
.search-menu-holder {
|
|
float: right;
|
|
margin-top: $textInputHeight - 2px;
|
|
left: -50px;
|
|
|
|
z-index: 9;
|
|
|
|
transition: visibility .08s, opacity .08s;
|
|
|
|
&.off {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
}
|
|
|
|
.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;
|
|
color: lighten($colorBodyBg, 70%);
|
|
|
|
cursor: pointer;
|
|
|
|
transition: background-color .13s;
|
|
|
|
.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: 2px;
|
|
|
|
// Change checkbox colors
|
|
em:before {
|
|
// check
|
|
color: white;
|
|
// box
|
|
background-color: grey;
|
|
|
|
// Change size
|
|
height: 12px;
|
|
width: 12px;
|
|
font-size: .7em;
|
|
}
|
|
}
|
|
|
|
.search-menu-glyph {
|
|
color: lighten($colorMenuIc, 5%);//lighten($colorItemFg, 35%);//$colorMenuIc;
|
|
}
|
|
|
|
&.special {
|
|
font-weight: bold;
|
|
background-color: lighten($colorBodyBg, 20%);
|
|
|
|
.search-menu-label {
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: lighten($colorBodyBg, 30%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Make bubble caret thing
|
|
.search-menu-holder:after {
|
|
position: absolute;
|
|
top: -6px;
|
|
left: 35px;
|
|
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;
|
|
}
|
|
}
|
|
|
|
.active-filter-display {
|
|
order: 2;
|
|
|
|
font-size: .6em;
|
|
background-color: lighten($colorBodyBg, 10%);
|
|
border-radius: 2px;
|
|
border: 1px solid lighten($colorBodyBg, 5%);
|
|
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
//overflow: hidden;
|
|
margin-top: 2px;
|
|
|
|
.clear-filters-icon {
|
|
padding: 4px;
|
|
|
|
position: relative;
|
|
margin-left: -4px;
|
|
top: 0.7em;
|
|
|
|
cursor: pointer;
|
|
|
|
color: $colorItemFg;
|
|
font-size: 6px;
|
|
}
|
|
|
|
.filter-options {
|
|
position: relative;
|
|
top: -0.5em;
|
|
//margin-bottom: -5px;
|
|
|
|
// Hanging indent
|
|
margin-left: 14px;
|
|
text-indent: -4px;
|
|
}
|
|
|
|
// Transition looks weird when the results list has none
|
|
//transition: visibility .2s, opacity .2s;
|
|
|
|
&.off {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
height: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
}
|
|
}
|
|
|
|
.search-scroll {
|
|
order: 3;
|
|
|
|
//padding-right: $rightPadding;
|
|
margin-top: 4px;
|
|
|
|
// Adjustable scrolling size
|
|
overflow-y: auto;
|
|
top: auto;
|
|
height: auto;
|
|
max-height: 100%;
|
|
position: relative;
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
} |