ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-04-03 01:11:33 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

[Search] Centered load more button

Browse Source 
More correctly centered the load more button,
so that when the left panel is resized,
the button remains in the middle.
Additionally, added more comments to the sass.
This commit is contained in:
shale 2015-07-22 16:35:41 -07:00
parent 8f1f4eb177
commit 501e426868
2 changed files with 23 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
platform/commonUI/general/res/css/tree.css
View File

@ -273,23 +273,22 @@ ul.tree {
*****************************************************************************/
/* line 27, ../sass/search/_search.scss */
.search .search-input {
width: 100%;
margin-top: 10px; }
/* line 32, ../sass/search/_search.scss */
margin-top: 10px;
width: 100%; }
/* line 33, ../sass/search/_search.scss */
.search .results {
margin-top: 10px; }
/* line 35, ../sass/search/_search.scss */
/* line 37, ../sass/search/_search.scss */
.search .results .search-result-item {
margin-bottom: 5px;
background: #005177;
border-radius: 2px;
padding-top: 2px;
padding-bottom: 1px; }
/* line 42, ../sass/search/_search.scss */
/* line 47, ../sass/search/_search.scss */
.search .results .search-result-item .label {
left: 15px;
margin-left: 6px; }
/* line 51, ../sass/search/_search.scss */
/* line 56, ../sass/search/_search.scss */
.search .results .search-result-item .label .title-label {
display: inline-block;
position: absolute;
@ -301,11 +300,12 @@ ul.tree {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
/* line 70, ../sass/search/_search.scss */
/* line 79, ../sass/search/_search.scss */
.search .load-more-button {
margin-top: 5px;
position: relative;
left: 25%;
width: 50%;
height: 20px;
line-height: 11px;
font-size: 0.7em; }

17
platform/commonUI/general/res/sass/search/_search.scss
View File

@ -25,22 +25,27 @@
$leftMargin: 6px;
.search-input {
width: 100%;
// 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
background: $colorKeySelectedBg; // Later make this apply to only certain ones
border-radius: 2px;
padding-top: 2px;
padding-bottom: 1px;
.label {
left: 15px;
// Give some padding away from the left side
margin-left: $leftMargin;
.type-icon {
@ -52,13 +57,17 @@
display: inline-block;
position: absolute;
// Give some padding away from the left side
width: auto;
left: $leftMargin + 3px + $iconWidth;
right: 0;
// Size and position the text
font-size: .8em;
line-height: 17px;
// Hide overflow text
// Only works when width is defined
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@ -68,11 +77,15 @@
}
.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;