ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-18 07:08:12 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

[Search] Search filter options display style

Browse Source 
Created a box around the options display.
This commit is contained in:
slhale
2015-08-14 10:52:03 -07:00
parent 26ab9af911
commit 94662cb904
2 changed files with 60 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -283,11 +283,11 @@ ul.tree {
height: 100%; } height: 100%; }
/* line 39, ../sass/search/_search.scss */ /* line 39, ../sass/search/_search.scss */
.search-holder .search .search-bar { .search-holder .search .search-bar {
order: 1;
position: relative;
width: 100%; width: 100%;
height: 19px; height: 19px;
margin-top: 4px; margin-top: 4px; }
position: relative;
order: 1; }
/* line 50, ../sass/search/_search.scss */ /* line 50, ../sass/search/_search.scss */
.search-holder .search .search-bar .search-input { .search-holder .search .search-bar .search-input {
position: relative; position: relative;
@ -405,10 +405,16 @@ ul.tree {
visibility: visible; } visibility: visible; }
/* line 223, ../sass/search/_search.scss */ /* line 223, ../sass/search/_search.scss */
.search-holder .search .active-filter-display { .search-holder .search .active-filter-display {
order: 2;
font-size: .6em; font-size: .6em;
margin-bottom: -3px; background-color: #4d4d4d;
order: 2; } border-radius: 2px;
/* line 231, ../sass/search/_search.scss */ border: 1px solid #404040;
padding-left: 4px;
padding-right: 4px;
overflow: hidden;
margin-top: 2px; }
/* line 236, ../sass/search/_search.scss */
.search-holder .search .active-filter-display .clear-filters-icon { .search-holder .search .active-filter-display .clear-filters-icon {
padding: 4px; padding: 4px;
position: relative; position: relative;
@ -417,21 +423,24 @@ ul.tree {
cursor: pointer; cursor: pointer;
color: #737373; color: #737373;
font-size: 6px; } font-size: 6px; }
/* line 244, ../sass/search/_search.scss */ /* line 249, ../sass/search/_search.scss */
.search-holder .search .active-filter-display .filter-options { .search-holder .search .active-filter-display .filter-options {
position: relative; position: relative;
margin-left: 10px; top: -8px;
top: -8px; } margin-bottom: -6px;
/* line 251, ../sass/search/_search.scss */ margin-left: 14px;
text-indent: -4px; }
/* line 260, ../sass/search/_search.scss */
.search-holder .search .search-scroll { .search-holder .search .search-scroll {
overflow-y: auto; order: 3;
padding-right: 5px; padding-right: 5px;
margin-top: 4px;
overflow-y: auto;
top: auto; top: auto;
height: auto; height: auto;
max-height: 100%; max-height: 100%;
order: 3;
position: relative; } position: relative; }
/* line 265, ../sass/search/_search.scss */ /* line 275, ../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;
@ -441,10 +450,10 @@ ul.tree {
border-radius: 2px; border-radius: 2px;
padding-top: 4px; padding-top: 4px;
padding-bottom: 2px; } padding-bottom: 2px; }
/* line 279, ../sass/search/_search.scss */ /* line 289, ../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 283, ../sass/search/_search.scss */ /* line 293, ../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;
@ -456,47 +465,47 @@ ul.tree {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; } white-space: nowrap; }
/* line 305, ../sass/search/_search.scss */ /* line 315, ../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 309, ../sass/search/_search.scss */ /* line 319, ../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 312, ../sass/search/_search.scss */ /* line 322, ../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 319, ../sass/search/_search.scss */ /* line 329, ../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 322, ../sass/search/_search.scss */ /* line 332, ../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 325, ../sass/search/_search.scss */ /* line 335, ../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 333, ../sass/search/_search.scss */ /* line 343, ../sass/search/_search.scss */
.search-holder .search .search-scroll .load-icon { .search-holder .search .search-scroll .load-icon {
position: relative; } position: relative; }
/* line 335, ../sass/search/_search.scss */ /* line 345, ../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 339, ../sass/search/_search.scss */ /* line 349, ../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 349, ../sass/search/_search.scss */ /* line 359, ../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 354, ../sass/search/_search.scss */ /* line 364, ../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 359, ../sass/search/_search.scss */ /* line 369, ../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;

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

@ -40,13 +40,13 @@
$heightAdjust: 4px; $heightAdjust: 4px;
$textInputHeight: 19px; // This is equal to the default value, 19px $textInputHeight: 19px; // This is equal to the default value, 19px
order: 1;
position: relative;
width: 100%; width: 100%;
height: $textInputHeight; height: $textInputHeight;
margin-top: $heightAdjust; margin-top: $heightAdjust;
position: relative;
order: 1;
.search-input { .search-input {
position: relative; position: relative;
top: -$heightAdjust; top: -$heightAdjust;
@ -221,13 +221,18 @@
} }
.active-filter-display { .active-filter-display {
font-size: .6em;
// Align bottom correctly
margin-bottom: -3px;
order: 2; order: 2;
font-size: .6em;
background-color: lighten($colorBodyBg, 10%);
border-radius: 2px;
border: 1px solid lighten($colorBodyBg, 5%);
padding-left: 4px;
padding-right: 4px;
overflow: hidden;
margin-top: 2px;
.clear-filters-icon { .clear-filters-icon {
padding: 4px; padding: 4px;
@ -243,21 +248,26 @@
.filter-options { .filter-options {
position: relative; position: relative;
margin-left: 10px;
top: -8px; top: -8px;
margin-bottom: -6px;
// Hanging indent
margin-left: 14px;
text-indent: -4px;
} }
} }
.search-scroll { .search-scroll {
// Spacing away from the search input order: 3;
//top: 25px;
overflow-y: auto;
padding-right: $rightPadding;
padding-right: $rightPadding;
margin-top: 4px;
// Adjustable scrolling size
overflow-y: auto;
top: auto; top: auto;
height: auto; height: auto;
max-height: 100%; max-height: 100%;
order: 3;
position: relative; position: relative;
.results { .results {