X-Git-Url: https://gerrit.onap.org/r/gitweb?p=aai%2Fsparky-fe.git;a=blobdiff_plain;f=resources%2Fscss%2Ftier-support%2F_splitPane.scss;fp=resources%2Fscss%2Ftier-support%2F_splitPane.scss;h=dc07be0a1e7858daab1f20ef66d54f2a2ca52961;hp=db0770e396273c792780ddcfa74fd97711e4e9bb;hb=bca1bdc7d52b01ede5c0e85f06cd6c64e5aaab57;hpb=d4fd54113808e9efa637719719b2831e0597996e

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;
 }