mirror of
https://github.com/nasa/openmct.git
synced 2025-04-09 20:31:26 +00:00
[Search] Update CSS
Slight tweak to the padding of the search view, which affects where the top of the scroll bar appears. Also removed the search scroll div because it was unused.
This commit is contained in:
slhale
parent
e928e02b1c
commit
e05f16d780
@ -275,90 +275,87 @@ ul.tree {
|
||||
.search-holder {
|
||||
overflow-y: auto;
|
||||
padding-right: 5px;
|
||||
top: 23px; }
|
||||
/* line 37, ../sass/search/_search.scss */
|
||||
top: 23px;
|
||||
margin-top: 10px; }
|
||||
/* line 38, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-input {
|
||||
margin-top: 10px;
|
||||
width: 100%; }
|
||||
/* line 43, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll {
|
||||
height: 100%;
|
||||
overflow: auto; }
|
||||
/* line 47, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .results {
|
||||
margin-top: 10px; }
|
||||
/* line 51, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .results .search-result-item {
|
||||
-moz-transition: background-color 0.25s;
|
||||
-o-transition: background-color 0.25s;
|
||||
-webkit-transition: background-color 0.25s;
|
||||
transition: background-color 0.25s;
|
||||
margin-bottom: 2px;
|
||||
border-radius: 2px;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 2px; }
|
||||
/* line 65, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .results .search-result-item .label {
|
||||
margin-left: 6px; }
|
||||
/* line 69, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .results .search-result-item .label .title-label {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 29px;
|
||||
right: 5px;
|
||||
font-size: .8em;
|
||||
line-height: 17px;
|
||||
width: auto;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap; }
|
||||
/* line 91, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .results .search-result-item.selected {
|
||||
background: #005177;
|
||||
color: #fff; }
|
||||
/* line 95, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .results .search-result-item.selected .view-control {
|
||||
color: #0099cc; }
|
||||
/* line 98, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .results .search-result-item.selected .label .type-icon {
|
||||
color: #fff; }
|
||||
/* line 105, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .results .search-result-item:not(.selected):hover {
|
||||
background: #404040;
|
||||
color: #cccccc; }
|
||||
/* line 108, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger {
|
||||
display: block; }
|
||||
/* line 111, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .icon {
|
||||
color: #33ccff; }
|
||||
/* line 119, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .load-icon {
|
||||
position: relative; }
|
||||
/* line 121, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .load-icon.loading {
|
||||
pointer-events: none;
|
||||
/* line 42, ../sass/search/_search.scss */
|
||||
.search-holder .search .results {
|
||||
margin-top: 10px; }
|
||||
/* line 46, ../sass/search/_search.scss */
|
||||
.search-holder .search .results .search-result-item {
|
||||
-moz-transition: background-color 0.25s;
|
||||
-o-transition: background-color 0.25s;
|
||||
-webkit-transition: background-color 0.25s;
|
||||
transition: background-color 0.25s;
|
||||
margin-bottom: 2px;
|
||||
border-radius: 2px;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 2px; }
|
||||
/* line 60, ../sass/search/_search.scss */
|
||||
.search-holder .search .results .search-result-item .label {
|
||||
margin-left: 6px; }
|
||||
/* line 125, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .load-icon.loading .title-label {
|
||||
font-style: italic;
|
||||
font-size: .9em;
|
||||
opacity: 0.5;
|
||||
margin-left: 26px;
|
||||
line-height: 24px; }
|
||||
/* line 135, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .load-icon.loading .wait-spinner {
|
||||
margin-left: 6px; }
|
||||
/* line 140, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .load-icon:not(.loading) {
|
||||
cursor: pointer; }
|
||||
/* line 145, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-scroll .load-more-button {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
position: relative;
|
||||
left: 25%;
|
||||
width: 50%;
|
||||
height: 20px;
|
||||
line-height: 11px;
|
||||
font-size: 0.7em; }
|
||||
/* line 64, ../sass/search/_search.scss */
|
||||
.search-holder .search .results .search-result-item .label .title-label {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 29px;
|
||||
right: 5px;
|
||||
font-size: .8em;
|
||||
line-height: 17px;
|
||||
width: auto;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap; }
|
||||
/* line 86, ../sass/search/_search.scss */
|
||||
.search-holder .search .results .search-result-item.selected {
|
||||
background: #005177;
|
||||
color: #fff; }
|
||||
/* line 90, ../sass/search/_search.scss */
|
||||
.search-holder .search .results .search-result-item.selected .view-control {
|
||||
color: #0099cc; }
|
||||
/* line 93, ../sass/search/_search.scss */
|
||||
.search-holder .search .results .search-result-item.selected .label .type-icon {
|
||||
color: #fff; }
|
||||
/* line 100, ../sass/search/_search.scss */
|
||||
.search-holder .search .results .search-result-item:not(.selected):hover {
|
||||
background: #404040;
|
||||
color: #cccccc; }
|
||||
/* line 103, ../sass/search/_search.scss */
|
||||
.search-holder .search .results .search-result-item:not(.selected):hover .context-trigger {
|
||||
display: block; }
|
||||
/* line 106, ../sass/search/_search.scss */
|
||||
.search-holder .search .results .search-result-item:not(.selected):hover .icon {
|
||||
color: #33ccff; }
|
||||
/* line 114, ../sass/search/_search.scss */
|
||||
.search-holder .search .load-icon {
|
||||
position: relative; }
|
||||
/* line 116, ../sass/search/_search.scss */
|
||||
.search-holder .search .load-icon.loading {
|
||||
pointer-events: none;
|
||||
margin-left: 6px; }
|
||||
/* line 120, ../sass/search/_search.scss */
|
||||
.search-holder .search .load-icon.loading .title-label {
|
||||
font-style: italic;
|
||||
font-size: .9em;
|
||||
opacity: 0.5;
|
||||
margin-left: 26px;
|
||||
line-height: 24px; }
|
||||
/* line 130, ../sass/search/_search.scss */
|
||||
.search-holder .search .load-icon.loading .wait-spinner {
|
||||
margin-left: 6px; }
|
||||
/* line 135, ../sass/search/_search.scss */
|
||||
.search-holder .search .load-icon:not(.loading) {
|
||||
cursor: pointer; }
|
||||
/* line 140, ../sass/search/_search.scss */
|
||||
.search-holder .search .load-more-button {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
position: relative;
|
||||
left: 25%;
|
||||
width: 50%;
|
||||
white-space: nowrap;
|
||||
height: 20px;
|
||||
line-height: 11px;
|
||||
font-size: 0.7em; }
|
||||
|
||||
@ -30,136 +30,128 @@
|
||||
padding-right: $rightPadding;
|
||||
top: 23px;
|
||||
|
||||
// Align with the top of the divider bar, below create button
|
||||
margin-top: 10px;
|
||||
|
||||
.search {
|
||||
//height: auto;
|
||||
//overflow: auto;
|
||||
|
||||
.search-input {
|
||||
// Align with the top of the divider bar, below create button
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-scroll {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
|
||||
.results {
|
||||
// Spacing away from the search input
|
||||
margin-top: 10px;
|
||||
.results {
|
||||
// Spacing away from the search input
|
||||
margin-top: 10px;
|
||||
|
||||
.search-result-item {
|
||||
// Include transitions (for the highlights)
|
||||
@include single-transition(background-color, 0.25s);
|
||||
.search-result-item {
|
||||
// Include transitions (for the highlights)
|
||||
@include single-transition(background-color, 0.25s);
|
||||
|
||||
// Space the results from each other
|
||||
margin-bottom: 2px;
|
||||
// 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;
|
||||
// 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;
|
||||
.label {
|
||||
// Give some padding away from the left side
|
||||
margin-left: $leftMargin;
|
||||
|
||||
.title-label {
|
||||
// Text styling
|
||||
font-style: italic;
|
||||
font-size: .9em;
|
||||
opacity: 0.5;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
|
||||
// Text positioning
|
||||
margin-left: $iconWidth + $leftMargin;
|
||||
line-height: 24px;
|
||||
}
|
||||
.wait-spinner {
|
||||
margin-left: $leftMargin;
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.loading) {
|
||||
cursor: pointer;
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
.load-more-button {
|
||||
// Space away form the results list
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
|
||||
// Center it
|
||||
position: relative;
|
||||
left: 25%;
|
||||
width: 50%;
|
||||
|
||||
// Make smallish button
|
||||
height: 20px;
|
||||
line-height: 11px;
|
||||
font-size: 0.7em;
|
||||
&:not(.loading) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// temp
|
||||
//margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -35,33 +35,28 @@
|
||||
</mct-control-->
|
||||
</div>
|
||||
|
||||
<!-- This div exists to determine scroll bar location -->
|
||||
<div class="search-scroll">
|
||||
|
||||
<!-- Results list -->
|
||||
<div class="results">
|
||||
<mct-representation key="'search-item'"
|
||||
ng-repeat="result in results"
|
||||
mct-object="result.object"
|
||||
ng-model="ngModel">
|
||||
</mct-representation>
|
||||
</div>
|
||||
<!-- Results list -->
|
||||
<div class="results">
|
||||
<mct-representation key="'search-item'"
|
||||
ng-repeat="result in results"
|
||||
mct-object="result.object"
|
||||
ng-model="ngModel">
|
||||
</mct-representation>
|
||||
</div>
|
||||
|
||||
<!-- Loading icon -->
|
||||
<div class="load-icon"
|
||||
ng-class="{loading: controller.isLoading()}"
|
||||
ng-if="controller.isLoading()">
|
||||
<span class="icon wait-spinner"></span>
|
||||
<span class="title-label">Loading...</span>
|
||||
</div>
|
||||
<!-- Loading icon -->
|
||||
<div class="load-icon"
|
||||
ng-class="{loading: controller.isLoading()}"
|
||||
ng-if="controller.isLoading()">
|
||||
<span class="icon wait-spinner"></span>
|
||||
<span class="title-label">Loading...</span>
|
||||
</div>
|
||||
|
||||
<!-- Load more button -->
|
||||
<div ng-if="controller.areMore()">
|
||||
<button class="load-more-button btn very-subtle"
|
||||
ng-click="controller.loadMore()">
|
||||
Load more
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Load more button -->
|
||||
<div ng-if="controller.areMore()">
|
||||
<button class="load-more-button btn very-subtle"
|
||||
ng-click="controller.loadMore()">
|
||||
Load more
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
x
Reference in New Issue
Block a user