VerticalSplitPanel inside a HorizontalSplitPanel doesn't display its second component (Valo theme) (#14152)

Change-Id: I81b340206a6020d349593926156264b85253c4e6

1 files changed, 49 insertions, 59 deletions

diff --git a/WebContent/VAADIN/themes/valo/components/_splitpanel.scss b/WebContent/VAADIN/themes/valo/components/_splitpanel.scss
index e05eb08d16..27da1d9cc6 100644
--- a/WebContent/VAADIN/themes/valo/components/_splitpanel.scss
+++ b/WebContent/VAADIN/themes/valo/components/_splitpanel.scss
@@ -1,6 +1,11 @@
 @mixin valo-splitpanel($primary-stylename : v-splitpanel) {
-  // No need for parent selector
-  @include valo-splitpanel-style($primary-stylename: $primary-stylename);
+  .#{$primary-stylename}-horizontal {
+    @include valo-splitpanel-style($primary-stylename: $primary-stylename, $orientation: horizontal);
+  }
+
+  .#{$primary-stylename}-vertical {
+    @include valo-splitpanel-style($primary-stylename: $primary-stylename, $orientation: vertical);
+  }
 }
 
 
@@ -68,14 +73,14 @@
 
   // Allow undefined/auto height for horizontal split
 
-  .#{$primary-stylename}-horizontal {
-    .#{$primary-stylename}-second-container {
+  .#{$primary-stylename}-horizontal > div {
+    > .#{$primary-stylename}-second-container {
       position: static !important;
       display: inline-block;
       vertical-align: top;
     }
 
-    .#{$primary-stylename}-first-container {
+    > .#{$primary-stylename}-first-container {
       display: inline-block;
       vertical-align: top;
     }
@@ -94,76 +99,61 @@
     $orientation: vertical horizontal
   ) {
 
-  @if contains($orientation, horizontal) {
-    .#{$primary-stylename}-hsplitter {
-      width: $splitter-size;
-    }
-  }
-
-  @if contains($orientation, vertical) {
-    .#{$primary-stylename}-vsplitter {
-      height: $splitter-size;
-    }
-  }
-
   $offset: round(($splitter-active-size - $splitter-size)/-2);
 
   @if contains($orientation, horizontal) {
-    .#{$primary-stylename}-hsplitter:after {
-      left: $offset;
-      right: $offset;
-    }
-  }
+    > div > .#{$primary-stylename}-hsplitter {
+      width: $splitter-size;
 
-  @if contains($orientation, vertical) {
-    .#{$primary-stylename}-vsplitter:after {
-      top: $offset;
-      bottom: $offset;
-    }
-  }
+      &:after {
+        left: $offset;
+        right: $offset;
+      }
+
+      div {
+       &:before {
+          @include valo-button-style($shadow: $splitter-shadow);
+          height: auto;
+          padding: 0;
+          border-radius: 0;
+          @include valo-gradient($color: $v-background-color, $direction: to right);
+        }
 
-  @if contains($orientation, horizontal) or contains($orientation, vertical) {
-    .#{$primary-stylename}-hsplitter div,
-    .#{$primary-stylename}-vsplitter div {
-      &:before {
-        @include valo-button-style($shadow: $splitter-shadow);
-        height: auto;
-        padding: 0;
-        border-radius: 0;
+        @if $splitter-handle-visible {
+          &:after {
+            @include valo-splitpanel-splitter-handle-style($horizontal: true);
+          }
+        }
       }
     }
-  }
 
-  @if contains($orientation, horizontal) {
-    .#{$primary-stylename}-hsplitter div {
-      &:before {
-        $color: $v-background-color;
-        @include valo-gradient($color: $color, $direction: to right);
-      }
+    > div > .#{$primary-stylename}-second-container {
+      margin-left: $splitter-size;
     }
   }
 
-  @if $splitter-handle-visible {
-    .#{$primary-stylename}-vsplitter div,
-    .#{$primary-stylename}-hsplitter div {
+  @if contains($orientation, vertical) {
+    > div > .#{$primary-stylename}-vsplitter {
+      height: $splitter-size;
+
       &:after {
-        @include valo-splitpanel-splitter-handle-style;
+        top: $offset;
+        bottom: $offset;
       }
-    }
 
-    @if contains($orientation, horizontal) {
-      .#{$primary-stylename}-hsplitter div {
-        &:after {
-          @include valo-splitpanel-splitter-handle-style($horizontal: true, $include-common: false);
+      div {
+       &:before {
+          @include valo-button-style($shadow: $splitter-shadow);
+          height: auto;
+          padding: 0;
+          border-radius: 0;
         }
-      }
-    }
-  }
 
-  @if contains($orientation, horizontal) {
-    &.#{$primary-stylename}-horizontal {
-      .#{$primary-stylename}-second-container {
-        margin-left: $splitter-size;
+        @if $splitter-handle-visible {
+          &:after {
+            @include valo-splitpanel-splitter-handle-style;
+          }
+        }
       }
     }
   }