Files
openmct/platform/commonUI/general/res/sass/search/_search.scss
shale 4759162bb7 [Search] Added right padding
Added padding to the right side of the
search holder to match the tree holder's
padding.
2015-07-23 11:08:31 -07:00

107 lines
3.7 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%;
}
.results {
// Spacing away from the search input
margin-top: 10px;
.search-result-item {
// Space the results from each other
margin-bottom: 5px;
// Make the highlights the right color and shape
border-radius: 2px;
padding-top: 2px;
padding-bottom: 1px;
.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; //$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;
}
}
}