alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Search] Highlight transitions

Browse Source 
Added transitions for when objects get
highlighted from selection or hover.
This commit is contained in:
shale
2015-07-23 13:14:20 -07:00
parent 2680e466fa
commit 7b271dcb6b
4 changed files with 27 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
platform/commonUI/general/res/css/theme-espresso.css
View File

@@ -707,9 +707,6 @@ mct-container {
/* line 42, ../sass/search/_layout.scss */
.pane.treeview.left .tree-holder {
top: 0; }
/* line 47, ../sass/search/_layout.scss */
.pane.treeview.left .tree-holder.search-in-use {
display: none; }
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government

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

@@ -271,47 +271,51 @@ ul.tree {
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
/* line 22, ../sass/search/_search.scss */
/* line 23, ../sass/search/_search.scss */
.search-holder {
overflow-y: auto;
padding-right: 5px; }
/* line 33, ../sass/search/_search.scss */
/* line 34, ../sass/search/_search.scss */
.search-holder .search .search-input {
margin-top: 10px;
width: 100%; }
/* line 39, ../sass/search/_search.scss */
/* line 40, ../sass/search/_search.scss */
.search-holder .search .load-icon {
position: relative; }
/* line 41, ../sass/search/_search.scss */
/* line 42, ../sass/search/_search.scss */
.search-holder .search .load-icon.loading {
pointer-events: none;
margin-left: 6px; }
/* line 45, ../sass/search/_search.scss */
/* line 46, ../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 55, ../sass/search/_search.scss */
/* line 56, ../sass/search/_search.scss */
.search-holder .search .load-icon.loading .wait-spinner {
margin-left: 6px; }
/* line 60, ../sass/search/_search.scss */
/* line 61, ../sass/search/_search.scss */
.search-holder .search .load-icon:not(.loading) {
cursor: pointer; }
/* line 65, ../sass/search/_search.scss */
/* line 66, ../sass/search/_search.scss */
.search-holder .search .results {
margin-top: 10px; }
/* line 69, ../sass/search/_search.scss */
/* line 70, ../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: 5px;
border-radius: 2px;
padding-top: 2px;
padding-bottom: 1px; }
/* line 78, ../sass/search/_search.scss */
/* line 82, ../sass/search/_search.scss */
.search-holder .search .results .search-result-item .label {
margin-left: 6px; }
/* line 82, ../sass/search/_search.scss */
/* line 86, ../sass/search/_search.scss */
.search-holder .search .results .search-result-item .label .title-label {
display: inline-block;
position: absolute;
@@ -323,27 +327,27 @@ ul.tree {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
/* line 104, ../sass/search/_search.scss */
/* line 108, ../sass/search/_search.scss */
.search-holder .search .results .search-result-item.selected {
background: #005177;
color: #fff; }
/* line 108, ../sass/search/_search.scss */
/* line 112, ../sass/search/_search.scss */
.search-holder .search .results .search-result-item.selected .view-control {
color: #0099cc; }
/* line 111, ../sass/search/_search.scss */
/* line 115, ../sass/search/_search.scss */
.search-holder .search .results .search-result-item.selected .label .type-icon {
color: #fff; }
/* line 118, ../sass/search/_search.scss */
/* line 122, ../sass/search/_search.scss */
.search-holder .search .results .search-result-item:not(.selected):hover {
background: #404040;
color: #cccccc; }
/* line 121, ../sass/search/_search.scss */
/* line 125, ../sass/search/_search.scss */
.search-holder .search .results .search-result-item:not(.selected):hover .context-trigger {
display: block; }
/* line 124, ../sass/search/_search.scss */
/* line 128, ../sass/search/_search.scss */
.search-holder .search .results .search-result-item:not(.selected):hover .icon {
color: #33ccff; }
/* line 132, ../sass/search/_search.scss */
/* line 136, ../sass/search/_search.scss */
.search-holder .search .load-more-button {
margin-top: 5px;
position: relative;

2
platform/commonUI/general/res/sass/search/_layout.scss
View File

@@ -45,7 +45,7 @@
// Make tree invisible when there are things in search results
&.search-in-use {
display: none;
//display: none;
}
}
}

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

@@ -19,6 +19,7 @@
* 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;
@@ -67,6 +68,9 @@
margin-top: 10px;
.search-result-item {
// Include transitions (for the highlights)
@include single-transition(background-color, 0.25s);
// Space the results from each other
margin-bottom: 5px;