mirror of
https://github.com/nasa/openmct.git
synced 2024-12-25 07:41:06 +00:00
[Search] Search icon
Moved the search icon to appear within the text input area, and dissapears when the input area is focused.
This commit is contained in:
parent
7141c2818a
commit
7b471e5379
@ -278,22 +278,31 @@ ul.tree {
|
|||||||
margin-top: 10px; }
|
margin-top: 10px; }
|
||||||
/* line 36, ../sass/search/_search.scss */
|
/* line 36, ../sass/search/_search.scss */
|
||||||
.search-holder .search .search-bar {
|
.search-holder .search .search-bar {
|
||||||
width: 100%; }
|
width: 100%;
|
||||||
/* line 39, ../sass/search/_search.scss */
|
margin-top: 4px; }
|
||||||
.search-holder .search .search-bar .search-icon {
|
/* line 43, ../sass/search/_search.scss */
|
||||||
color: #0099cc;
|
|
||||||
float: left;
|
|
||||||
font-size: 20px;
|
|
||||||
margin-right: 2px; }
|
|
||||||
/* line 46, ../sass/search/_search.scss */
|
|
||||||
.search-holder .search .search-bar .search-input {
|
.search-holder .search .search-bar .search-input {
|
||||||
width: 120px;
|
width: 100%;
|
||||||
float: left; }
|
float: left;
|
||||||
/* line 52, ../sass/search/_search.scss */
|
position: relative;
|
||||||
|
top: -4px; }
|
||||||
|
/* line 51, ../sass/search/_search.scss */
|
||||||
|
.search-holder .search .search-bar .search-icon {
|
||||||
|
color: #737373;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-left: 3px;
|
||||||
|
float: left;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
margin-top: -19px; }
|
||||||
|
/* line 65, ../sass/search/_search.scss */
|
||||||
|
.search-holder .search .search-bar .search-input:focus ~ div.search-icon {
|
||||||
|
display: none; }
|
||||||
|
/* line 71, ../sass/search/_search.scss */
|
||||||
.search-holder .search .search-scroll {
|
.search-holder .search .search-scroll {
|
||||||
top: 25px;
|
top: 25px;
|
||||||
overflow-y: auto; }
|
overflow-y: auto; }
|
||||||
/* line 59, ../sass/search/_search.scss */
|
/* line 78, ../sass/search/_search.scss */
|
||||||
.search-holder .search .search-scroll .results .search-result-item {
|
.search-holder .search .search-scroll .results .search-result-item {
|
||||||
-moz-transition: background-color 0.25s;
|
-moz-transition: background-color 0.25s;
|
||||||
-o-transition: background-color 0.25s;
|
-o-transition: background-color 0.25s;
|
||||||
@ -303,10 +312,10 @@ ul.tree {
|
|||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
padding-top: 4px;
|
padding-top: 4px;
|
||||||
padding-bottom: 2px; }
|
padding-bottom: 2px; }
|
||||||
/* line 73, ../sass/search/_search.scss */
|
/* line 92, ../sass/search/_search.scss */
|
||||||
.search-holder .search .search-scroll .results .search-result-item .label {
|
.search-holder .search .search-scroll .results .search-result-item .label {
|
||||||
margin-left: 6px; }
|
margin-left: 6px; }
|
||||||
/* line 77, ../sass/search/_search.scss */
|
/* line 96, ../sass/search/_search.scss */
|
||||||
.search-holder .search .search-scroll .results .search-result-item .label .title-label {
|
.search-holder .search .search-scroll .results .search-result-item .label .title-label {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -318,47 +327,47 @@ ul.tree {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap; }
|
white-space: nowrap; }
|
||||||
/* line 99, ../sass/search/_search.scss */
|
/* line 118, ../sass/search/_search.scss */
|
||||||
.search-holder .search .search-scroll .results .search-result-item.selected {
|
.search-holder .search .search-scroll .results .search-result-item.selected {
|
||||||
background: #005177;
|
background: #005177;
|
||||||
color: #fff; }
|
color: #fff; }
|
||||||
/* line 103, ../sass/search/_search.scss */
|
/* line 122, ../sass/search/_search.scss */
|
||||||
.search-holder .search .search-scroll .results .search-result-item.selected .view-control {
|
.search-holder .search .search-scroll .results .search-result-item.selected .view-control {
|
||||||
color: #0099cc; }
|
color: #0099cc; }
|
||||||
/* line 106, ../sass/search/_search.scss */
|
/* line 125, ../sass/search/_search.scss */
|
||||||
.search-holder .search .search-scroll .results .search-result-item.selected .label .type-icon {
|
.search-holder .search .search-scroll .results .search-result-item.selected .label .type-icon {
|
||||||
color: #fff; }
|
color: #fff; }
|
||||||
/* line 113, ../sass/search/_search.scss */
|
/* line 132, ../sass/search/_search.scss */
|
||||||
.search-holder .search .search-scroll .results .search-result-item:not(.selected):hover {
|
.search-holder .search .search-scroll .results .search-result-item:not(.selected):hover {
|
||||||
background: #404040;
|
background: #404040;
|
||||||
color: #cccccc; }
|
color: #cccccc; }
|
||||||
/* line 116, ../sass/search/_search.scss */
|
/* line 135, ../sass/search/_search.scss */
|
||||||
.search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger {
|
.search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger {
|
||||||
display: block; }
|
display: block; }
|
||||||
/* line 119, ../sass/search/_search.scss */
|
/* line 138, ../sass/search/_search.scss */
|
||||||
.search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .icon {
|
.search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .icon {
|
||||||
color: #33ccff; }
|
color: #33ccff; }
|
||||||
/* line 127, ../sass/search/_search.scss */
|
/* line 146, ../sass/search/_search.scss */
|
||||||
.search-holder .search .search-scroll .load-icon {
|
.search-holder .search .search-scroll .load-icon {
|
||||||
position: relative; }
|
position: relative; }
|
||||||
/* line 129, ../sass/search/_search.scss */
|
/* line 148, ../sass/search/_search.scss */
|
||||||
.search-holder .search .search-scroll .load-icon.loading {
|
.search-holder .search .search-scroll .load-icon.loading {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
margin-left: 6px; }
|
margin-left: 6px; }
|
||||||
/* line 133, ../sass/search/_search.scss */
|
/* line 152, ../sass/search/_search.scss */
|
||||||
.search-holder .search .search-scroll .load-icon.loading .title-label {
|
.search-holder .search .search-scroll .load-icon.loading .title-label {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
font-size: .9em;
|
font-size: .9em;
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
margin-left: 26px;
|
margin-left: 26px;
|
||||||
line-height: 24px; }
|
line-height: 24px; }
|
||||||
/* line 143, ../sass/search/_search.scss */
|
/* line 162, ../sass/search/_search.scss */
|
||||||
.search-holder .search .search-scroll .load-icon.loading .wait-spinner {
|
.search-holder .search .search-scroll .load-icon.loading .wait-spinner {
|
||||||
margin-left: 6px; }
|
margin-left: 6px; }
|
||||||
/* line 148, ../sass/search/_search.scss */
|
/* line 167, ../sass/search/_search.scss */
|
||||||
.search-holder .search .search-scroll .load-icon:not(.loading) {
|
.search-holder .search .search-scroll .load-icon:not(.loading) {
|
||||||
cursor: pointer; }
|
cursor: pointer; }
|
||||||
/* line 153, ../sass/search/_search.scss */
|
/* line 172, ../sass/search/_search.scss */
|
||||||
.search-holder .search .search-scroll .load-more-button {
|
.search-holder .search .search-scroll .load-more-button {
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
|
@ -34,18 +34,37 @@
|
|||||||
.search {
|
.search {
|
||||||
|
|
||||||
.search-bar {
|
.search-bar {
|
||||||
width: 100%;
|
$heightAdjust: 4px;
|
||||||
|
$textInputHeight: 19px;
|
||||||
|
|
||||||
.search-icon {
|
width: 100%;
|
||||||
color: $colorItemTreeIcon;
|
margin-top: $heightAdjust;
|
||||||
float: left;
|
|
||||||
font-size: $iconWidth;
|
|
||||||
margin-right: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-input {
|
.search-input {
|
||||||
width: 120px;
|
width: 100%;
|
||||||
float: left;
|
float: left;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
top: -$heightAdjust;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-icon {
|
||||||
|
color: $colorItemFg;
|
||||||
|
font-size: 12px;//$iconWidth;
|
||||||
|
|
||||||
|
// Make the icon within the left edge of the input area
|
||||||
|
margin-left: 3px;
|
||||||
|
float: left;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
|
||||||
|
// Line up icon with text input vertically
|
||||||
|
margin-top: -$textInputHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input:focus~div.search-icon {
|
||||||
|
// Make icon invisible when the text input is focused
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -25,14 +25,14 @@
|
|||||||
<!-- Search bar input -->
|
<!-- Search bar input -->
|
||||||
<!-- ui symbols for search are 'd' and 'M' -->
|
<!-- ui symbols for search are 'd' and 'M' -->
|
||||||
<div class="search-bar">
|
<div class="search-bar">
|
||||||
<div class="search-icon ui-symbol">
|
|
||||||
d
|
|
||||||
</div>
|
|
||||||
<input class="search-input"
|
<input class="search-input"
|
||||||
type="text"
|
type="text"
|
||||||
ng-model="ngModel.input"
|
ng-model="ngModel.input"
|
||||||
ng-keyup="controller.search()" />
|
ng-keyup="controller.search()"
|
||||||
|
id="searchInput" />
|
||||||
|
<div class="ui-symbol search-icon">
|
||||||
|
M
|
||||||
|
</div>
|
||||||
<!--mct-control key="textfield"
|
<!--mct-control key="textfield"
|
||||||
class="search-input"
|
class="search-input"
|
||||||
ng-model="ngModel.input">
|
ng-model="ngModel.input">
|
||||||
|
Loading…
Reference in New Issue
Block a user