From 94662cb904ee1a90a447f37f6ce9a38df2dee670 Mon Sep 17 00:00:00 2001
From: slhale <sarah.hale@nasa.gov>
Date: Fri, 14 Aug 2015 10:52:03 -0700
Subject: [PATCH] [Search] Search filter options display style

Created a box around the options display.
---
 platform/commonUI/general/res/css/tree.css    | 63 +++++++++++--------
 .../general/res/sass/search/_search.scss      | 38 ++++++-----
 2 files changed, 60 insertions(+), 41 deletions(-)

diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index cf7456fcb1..a14ebb239c 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -283,11 +283,11 @@ ul.tree {
     height: 100%; }
     /* line 39, ../sass/search/_search.scss */
     .search-holder .search .search-bar {
+      order: 1;
+      position: relative;
       width: 100%;
       height: 19px;
-      margin-top: 4px;
-      position: relative;
-      order: 1; }
+      margin-top: 4px; }
       /* line 50, ../sass/search/_search.scss */
       .search-holder .search .search-bar .search-input {
         position: relative;
@@ -405,10 +405,16 @@ ul.tree {
         visibility: visible; }
     /* line 223, ../sass/search/_search.scss */
     .search-holder .search .active-filter-display {
+      order: 2;
       font-size: .6em;
-      margin-bottom: -3px;
-      order: 2; }
-      /* line 231, ../sass/search/_search.scss */
+      background-color: #4d4d4d;
+      border-radius: 2px;
+      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 {
         padding: 4px;
         position: relative;
@@ -417,21 +423,24 @@ ul.tree {
         cursor: pointer;
         color: #737373;
         font-size: 6px; }
-      /* line 244, ../sass/search/_search.scss */
+      /* line 249, ../sass/search/_search.scss */
       .search-holder .search .active-filter-display .filter-options {
         position: relative;
-        margin-left: 10px;
-        top: -8px; }
-    /* line 251, ../sass/search/_search.scss */
+        top: -8px;
+        margin-bottom: -6px;
+        margin-left: 14px;
+        text-indent: -4px; }
+    /* line 260, ../sass/search/_search.scss */
     .search-holder .search .search-scroll {
-      overflow-y: auto;
+      order: 3;
       padding-right: 5px;
+      margin-top: 4px;
+      overflow-y: auto;
       top: auto;
       height: auto;
       max-height: 100%;
-      order: 3;
       position: relative; }
-      /* line 265, ../sass/search/_search.scss */
+      /* line 275, ../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;
@@ -441,10 +450,10 @@ ul.tree {
         border-radius: 2px;
         padding-top: 4px;
         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 {
           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 {
             display: inline-block;
             position: absolute;
@@ -456,47 +465,47 @@ ul.tree {
             overflow: hidden;
             text-overflow: ellipsis;
             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 {
           background: #005177;
           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 {
             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 {
             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 {
           background: #404040;
           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 {
             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 {
             color: #33ccff; }
-      /* line 333, ../sass/search/_search.scss */
+      /* line 343, ../sass/search/_search.scss */
       .search-holder .search .search-scroll .load-icon {
         position: relative; }
-        /* line 335, ../sass/search/_search.scss */
+        /* line 345, ../sass/search/_search.scss */
         .search-holder .search .search-scroll .load-icon.loading {
           pointer-events: none;
           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 {
             font-style: italic;
             font-size: .9em;
             opacity: 0.5;
             margin-left: 26px;
             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 {
             margin-left: 6px; }
-        /* line 354, ../sass/search/_search.scss */
+        /* line 364, ../sass/search/_search.scss */
         .search-holder .search .search-scroll .load-icon:not(.loading) {
           cursor: pointer; }
-      /* line 359, ../sass/search/_search.scss */
+      /* line 369, ../sass/search/_search.scss */
       .search-holder .search .search-scroll .load-more-button {
         margin-top: 5px;
         margin-bottom: 5px;
diff --git a/platform/commonUI/general/res/sass/search/_search.scss b/platform/commonUI/general/res/sass/search/_search.scss
index 0c15c449c2..885c3b36a0 100644
--- a/platform/commonUI/general/res/sass/search/_search.scss
+++ b/platform/commonUI/general/res/sass/search/_search.scss
@@ -40,13 +40,13 @@
             $heightAdjust: 4px;
             $textInputHeight: 19px; // This is equal to the default value, 19px
             
+            order: 1;
+            
+            position: relative;
             width: 100%;
             height: $textInputHeight;
             margin-top: $heightAdjust;
             
-            position: relative;
-            order: 1;
-            
             .search-input {
                 position: relative;
                 top: -$heightAdjust;
@@ -221,13 +221,18 @@
         }
         
         .active-filter-display {
-            font-size: .6em;
-            
-            // Align bottom correctly
-            margin-bottom: -3px;
-            
             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 {
                 padding: 4px;
                 
@@ -243,21 +248,26 @@
             
             .filter-options {
                 position: relative;
-                margin-left: 10px;
                 top: -8px;
+                margin-bottom: -6px;
+                
+                // Hanging indent
+                margin-left: 14px;
+                text-indent: -4px;
             }
         }
         
         .search-scroll {
-            // Spacing away from the search input
-            //top: 25px;
-            overflow-y: auto;
-            padding-right: $rightPadding;
+            order: 3;
             
+            padding-right: $rightPadding;
+            margin-top: 4px;
+            
+            // Adjustable scrolling size
+            overflow-y: auto;
             top: auto;
             height: auto;
             max-height: 100%;
-            order: 3;
             position: relative;
             
             .results {