bcea3832ed
Clicking on names of options in the search menu will now toggle the checkboxes. The filter options display now says when no filters are selected. Slightly moved the search menu to the left.
387 lines
13 KiB
SCSS
387 lines
13 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;
|
|
|
|
&.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;
|
|
|
|
transition: color .2s;
|
|
|
|
&:hover {
|
|
color: lighten($colorItemFg, 20%);
|
|
}
|
|
}
|
|
|
|
.search-menu-holder {
|
|
float: right;
|
|
margin-top: $textInputHeight - 2px;
|
|
left: -50px;
|
|
|
|
.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%);
|
|
|
|
.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;
|
|
|
|
// Change checkbox colors
|
|
em:before {
|
|
// check
|
|
color: white;
|
|
// box
|
|
background-color: grey;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 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.2em;
|
|
|
|
cursor: pointer;
|
|
|
|
color: $colorItemFg;
|
|
font-size: 6px;
|
|
}
|
|
|
|
.filter-options {
|
|
position: relative;
|
|
top: -8px;
|
|
margin-bottom: -6px;
|
|
|
|
// Hanging indent
|
|
margin-left: 14px;
|
|
text-indent: -4px;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
} |