mirror of
https://github.com/nasa/openmct.git
synced 2025-04-09 20:31:26 +00:00
Revert "[Search] Update CSS"
This reverts commit e05f16d780816cf635c3b16c09500b9836ed0a91.
This commit is contained in:
slhale
parent
e05f16d780
commit
5569ef8b2d
@ -275,87 +275,90 @@ ul.tree {
|
||||
.search-holder {
|
||||
overflow-y: auto;
|
||||
padding-right: 5px;
|
||||
top: 23px;
|
||||
margin-top: 10px; }
|
||||
/* line 38, ../sass/search/_search.scss */
|
||||
top: 23px; }
|
||||
/* line 37, ../sass/search/_search.scss */
|
||||
.search-holder .search .search-input {
|
||||
margin-top: 10px;
|
||||
width: 100%; }
|
||||
/* 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 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 {
|
||||
/* 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 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 {
|
||||
/* 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;
|
||||
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; }
|
||||
/* 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; }
|
||||
|
||||
@ -30,128 +30,136 @@
|
||||
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%;
|
||||
}
|
||||
|
||||
.results {
|
||||
// Spacing away from the search input
|
||||
margin-top: 10px;
|
||||
.search-scroll {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
|
||||
.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
|
||||
.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 {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
// Text styling
|
||||
font-style: italic;
|
||||
font-size: .9em;
|
||||
opacity: 0.5;
|
||||
|
||||
// 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;
|
||||
// Text positioning
|
||||
margin-left: $iconWidth + $leftMargin;
|
||||
line-height: 24px;
|
||||
}
|
||||
.wait-spinner {
|
||||
margin-left: $leftMargin;
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
&: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%;
|
||||
|
||||
// Make smallish button
|
||||
height: 20px;
|
||||
line-height: 11px;
|
||||
font-size: 0.7em;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
// temp
|
||||
//margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -35,28 +35,33 @@
|
||||
</mct-control-->
|
||||
</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>
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
<!-- 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>
|
||||
</div>
|
||||
Loading…
x
Reference in New Issue
Block a user