Updating versions of Sparky FE files

Updating versions of Sparky FE files as previous ones were out-dated

Issue-ID: AAI-543
Change-Id: Idc7d09e0efabaa5ef82db126cf7563fc8370f4f9
Signed-off-by: Shawn Severin <shawn.severin@amdocs.com>

3 files changed, 52 insertions, 55 deletions

diff --git a/resources/scss/tier-support/_search.scss b/resources/scss/tier-support/_search.scss
index 6c349af..b65cb57 100644
--- a/resources/scss/tier-support/_search.scss
+++ b/resources/scss/tier-support/_search.scss
@@ -21,7 +21,6 @@
  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
 
-
 .auto-complete-search {
   display: inline-block;
   vertical-align: text-bottom;
@@ -31,9 +30,9 @@
   float: left;
 }
 
-.auto-complete-search-button-group{
-  position: absolute;
-  width: 90px;
+.auto-complete-search-button-group {
+  position: absolute !important;
+  padding-top: 3px;
 }
 
 .auto-complete-search input.form-control {
@@ -41,36 +40,35 @@
 }
 
 .auto-complete-search-button, .auto-complete-search-button:focus {
-  background-color: $light-gray;
-  padding-bottom: 8px;
+  background-color: $search-button-background-color;
   width: 45px;
   height: 30px;
-  border: solid 1px $gray;
+  border: solid 1px $search-border-color1;
 }
 
 .auto-complete-search button:hover {
-  background-color: $blue;
+  background-color: $search-background-color1;
 }
 
 .auto-complete-search .fa-lg {
   font-size: 1em;
   line-height: 1em;
-  background-color: $light-gray;
+  background-color: $search-button-background-color;
 }
 
 .auto-complete-search button:hover .fa-search {
-  color: $white;
-  background-color: $blue;
+  color: $primary-background-color;
+  background-color: $search-background-color1;
 }
 
 .auto-complete-search .btn-group .auto-complete-clear-button {
   border: none;
-  margin-left: -35px;
-  margin-top: 2px;
-  padding: 5px 12px 8px 12px;
+  margin-left: -35px !important;
+  height: 30px;
+  background-color: transparent;
 
   i {
-    color: #009fdb;
+    color: $search-text-color1;
     opacity: 0.3;
     filter: alpha(opacity=30);
     background-color: transparent;
@@ -81,26 +79,28 @@
   background-color: transparent;
 
   i.fa-times {
-    color: #009fdb;
+    color: $search-text-color1;
     opacity: 1;
     background-color: transparent;
   }
 }
 
 .auto-complete-search button:hover .fa-times {
-  color: $white;
-  background-color: $blue;
+  color: $primary-background-color;
+  background-color: $search-background-color1;
 }
 
 .react-autosuggest__container {
   display: inline-block;
   position: relative;
+  padding-top: 3px;
 }
 
-.react-autosuggest__input{
+.react-autosuggest__input {
   width: 655px;
   height: 30px;
   display: inline-block;
+  padding-top: 10px;
 }
 
 .react-autosuggest__input:focus {
@@ -117,20 +117,19 @@
   overflow-y: scroll;
   height: 200px;
   border:1px ;
-
 }
 
-.react-autosuggest__suggestions-containerCopy{
+.react-autosuggest__suggestions-containerCopy {
   display: none;
   display: block;
   position: absolute;
   top: 30px;
   width: 655px;
-  border: 1px solid #aaa;
-  background-color: #fff;
+  border: 1px solid $search-border-color1;
+  background-color: $primary-background-color;
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
-  z-index: 2;
+  z-index: 90;
   overflow-y: hidden;
 }
 
@@ -139,11 +138,11 @@
   position: absolute;
   top: 30px;
   width: 655px;
-  border: 1px solid #aaa;
-  background-color: #fff;
+  border: 1px solid $search-border-color1;
+  background-color: $primary-background-color;
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
-  z-index: 2;
+  z-index: 99;
   overflow-x: hidden;
 }
 
@@ -161,14 +160,14 @@
 }
 
 .react-autosuggest__suggestion--focused {
-  background-color: #ddd;
+  background-color: $search-background-color3;
 }
 
 .react-autosuggest__section-title {
   padding: 10px 0 0 10px;
   font-size: 12px;
-  color: #777;
-  border-top: 1px dashed #ccc;
+  color: $search-background-color2;
+  border-top: 1px dashed $search-border-color1;
 }
 
 .react-autosuggest__section-container:first-child .react-autosuggest__section-title {
@@ -185,10 +184,11 @@
   flex: 20;
 }
 
-.suggestionColumnTwo{
+.suggestionColumnTwo {
   flex: 80;
 }
-.highlight{
+
+.highlight {
   font-weight: bolder;
   background-color:inherit;
   padding: 0px;
diff --git a/resources/scss/tier-support/_selectedNodeDetails.scss b/resources/scss/tier-support/_selectedNodeDetails.scss
index 0532319..ec4798c 100644
--- a/resources/scss/tier-support/_selectedNodeDetails.scss
+++ b/resources/scss/tier-support/_selectedNodeDetails.scss
@@ -21,14 +21,13 @@
  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
 
-
 .ts-selected-node-details {
   padding: 20px;
-  color: $dark-gray;
+  color: $border-color2;
   font-family: $body-font-1;
 
   h1 {
-    color: $blue;
+    color: $selected-node-details-color1;
     font-size: $heading-font-2;
     margin-bottom: 5px;
   }
@@ -40,7 +39,7 @@
   margin-top: 15px;
 
   th {
-    color: $gray;
+    color: $border-color2;
   }
 
   td {
@@ -49,14 +48,14 @@
 
   .left-column-cell {
     padding: 7px 5px 5px 0px;
-    border-bottom: solid 1px $light-gray;
-    border-right: solid 1px $light-gray;
+    border-bottom: solid 1px $border-color5;
+    border-right: solid 1px $border-color5;
     width: 50%;
   }
 
   .right-column-cell {
     padding: 7px 5px 5px 15px;
-    border-bottom: solid 1px $light-gray;
+    border-bottom: solid 1px $border-color5;
   }
 }
 
diff --git a/resources/scss/tier-support/_splitPane.scss b/resources/scss/tier-support/_splitPane.scss
index db0770e..dc07be0 100644
--- a/resources/scss/tier-support/_splitPane.scss
+++ b/resources/scss/tier-support/_splitPane.scss
@@ -21,15 +21,13 @@
  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
 
-
 .SplitPane {
-  min-width: 1280px;
-  //108 is the height of the header in tsui
-  height: calc(100% - 108px) !important;
+  min-width: $minimum-application-width;
+  height: calc(100% - #{$total-header-height}) !important;
 }
 
 .Resizer {
-  background: #000;
+  background: $border-color1;
   opacity: .2;
   z-index: 1;
   -moz-box-sizing: border-box;
@@ -48,28 +46,28 @@
 .Resizer.horizontal {
   height: 11px;
   margin: -5px 0;
-  border-top: 5px solid rgba(255, 255, 255, 0);
-  border-bottom: 5px solid rgba(255, 255, 255, 0);
+  border-top: 5px solid transparent;
+  border-bottom: 5px solid transparent;
   cursor: row-resize;
   width: 100%;
 }
 
 .Resizer.horizontal:hover {
-  border-top: 5px solid rgba(0, 0, 0, 0.5);
-  border-bottom: 5px solid rgba(0, 0, 0, 0.5);
+  border-top: 5px solid $border-color2;
+  border-bottom: 5px solid $border-color2;
 }
 
 .Resizer.vertical {
   width: 11px;
   margin: 0 -5px;
-  border-left: 5px solid rgba(255, 255, 255, 0);
-  border-right: 5px solid rgba(255, 255, 255, 0);
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
   cursor: col-resize;
 }
 
 .Resizer.vertical:hover {
-  border-left: 5px solid rgba(0, 0, 0, 0.5);
-  border-right: 5px solid rgba(0, 0, 0, 0.5);
+  border-left: 5px solid $border-color2;
+  border-right: $border-color2;
 }
 Resizer.disabled {
   cursor: not-allowed;
@@ -79,7 +77,7 @@ Resizer.disabled:hover {
 }
 
 .Pane2 {
-  background-color: $tlv-light-gray;
-  border-left: solid 2px $light-gray;
-  overflow: hidden;
+  background-color: $background-color4;
+  border-left: solid 2px $border-color5;
+  overflow: auto;
 }