Redesign Lumo variants

Base the size of the handle in sizing properties instead of space properties. Redesigned “small” variant – now just 1px divider and the handle is only visible on hover. The handle is now always the same size for normal and small, only the splitter part changes. Rename “subtle” to “minimal” (align with other element variant names). The minimal variant doesn’t have any visible splitter, and the handle is only visible on hover. Update demos to reflect the changes.
vaadin · Feb 18, 2018 · cd0d5a0 · cd0d5a0
1 parent c6f1f77
commit cd0d5a0
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 49 deletions.
diff --git a/demo/split-layout-lumo-theme-demos.html b/demo/split-layout-lumo-theme-demos.html
@@ -6,29 +6,6 @@
       }
     </style>
 
-    <h3>Default</h3>
-    <vaadin-demo-snippet id='split-layout-lumo-theme-demos-default'>
-      <template preserve-content>
-        <style>
-          vaadin-split-layout {
-            min-height: 200px;
-            flex: auto;
-          }
-        </style>
-        <div style="display: flex">
-          <vaadin-split-layout>
-            <div></div>
-            <div></div>
-          </vaadin-split-layout>
-
-          <vaadin-split-layout orientation="vertical">
-            <div></div>
-            <div></div>
-          </vaadin-split-layout>
-        </div>
-      </template>
-    </vaadin-demo-snippet>
-
     <h3>Small</h3>
     <vaadin-demo-snippet id='split-layout-lumo-theme-demos-small'>
       <template preserve-content>
@@ -37,6 +14,9 @@ <h3>Small</h3>
             min-height: 200px;
             flex: auto;
           }
+          div:first-child {
+            background-color: var(--lumo-shade-5pct);
+          }
         </style>
         <div style="display: flex">
           <vaadin-split-layout theme="small">
@@ -53,22 +33,25 @@ <h3>Small</h3>
       </template>
     </vaadin-demo-snippet>
 
-    <h3>Subtle</h3>
-    <vaadin-demo-snippet id='split-layout-lumo-theme-demos-subtle'>
+    <h3>Minimal</h3>
+    <vaadin-demo-snippet id='split-layout-lumo-theme-demos-minimal'>
       <template preserve-content>
         <style>
           vaadin-split-layout {
             min-height: 200px;
             flex: auto;
           }
+          div:first-child {
+            background-color: var(--lumo-shade-5pct);
+          }
         </style>
         <div style="display: flex">
-          <vaadin-split-layout theme="subtle">
+          <vaadin-split-layout theme="minimal">
             <div></div>
             <div></div>
           </vaadin-split-layout>
 
-          <vaadin-split-layout orientation="vertical" theme="subtle">
+          <vaadin-split-layout orientation="vertical" theme="minimal">
             <div></div>
             <div></div>
           </vaadin-split-layout>

diff --git a/theme/lumo/vaadin-split-layout.html b/theme/lumo/vaadin-split-layout.html
@@ -6,35 +6,35 @@
 <dom-module id="lumo-split-layout" theme-for="vaadin-split-layout">
   <template>
     <style>
-      :host {
-        --lumo-split-layout-size: var(--lumo-space-s);
-      }
-
       [part="splitter"] {
-        min-width: var(--lumo-split-layout-size);
-        min-height: var(--lumo-split-layout-size);
+        min-width: var(--lumo-space-s);
+        min-height: var(--lumo-space-s);
         background-color: var(--lumo-contrast-5pct);
         transition: 0.1s background-color;
       }
 
       [part="handle"] {
-        display: flex;
-        align-items: center;
-        justify-content: center;
+        width: var(--lumo-size-m);
+        height: var(--lumo-size-m);
       }
 
       [part="handle"]::after {
         content: "";
-        display: block;
-        width: var(--lumo-space-xs);
-        height: var(--lumo-size-s);
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 45%;
+        right: 45%;
         border-radius: var(--lumo-border-radius);
         background-color: var(--lumo-contrast-30pct);
-        transition: 0.1s background-color;
+        transition: 0.1s all;
       }
 
       :host([orientation="vertical"]) [part="handle"]::after {
-        transform: rotate(90deg);
+        left: 0;
+        right: 0;
+        top: 45%;
+        bottom: 45%;
       }
 
       /* Hover style */
@@ -56,20 +56,40 @@
         background-color: var(--lumo-contrast-50pct);
       }
 
-      /* Small style */
+      /* Small/minimal */
 
-      :host([theme~="small"]) {
-        --lumo-split-layout-size: var(--lumo-space-xs);
+      :host([theme~="small"]) > [part="splitter"] {
+        min-width: 1px;
+        min-height: 1px;
+        background-color: var(--lumo-contrast-10pct);
       }
 
-      :host([theme~="small"]) [part="handle"]::after {
-        width: calc(var(--lumo-space-xs) / 2);
+      :host([theme~="minimal"]) > [part="splitter"] {
+        min-width: 0;
+        min-height: 0;
+        background-color: transparent;
       }
 
-      /* Subtle style */
+      :host([theme~="small"]) > [part="splitter"]::after,
+      :host([theme~="minimal"]) > [part="splitter"]::after {
+        content: "";
+        position: absolute;
+        top: -4px;
+        right: -4px;
+        bottom: -4px;
+        left: -4px;
+      }
 
-      :host([theme~="subtle"]) [part="splitter"] {
-        background-color: transparent;
+      :host([theme~="small"]) > [part="splitter"] > [part="handle"]::after,
+      :host([theme~="minimal"]) > [part="splitter"] > [part="handle"]::after {
+        opacity: 0;
+      }
+
+      :host([theme~="small"]) > [part="splitter"]:hover > [part="handle"]::after,
+      :host([theme~="small"]) > [part="splitter"]:active > [part="handle"]::after,
+      :host([theme~="minimal"]) > [part="splitter"]:hover > [part="handle"]::after,
+      :host([theme~="minimal"]) > [part="splitter"]:active > [part="handle"]::after {
+        opacity: 1;
       }
     </style>
   </template>