UBER-1101: updated Separator (Float mode), fixed Scroller visibility

packages/theme/styles/_layouts.scss

@@ -569,6 +569,7 @@ input.search {
 .px-10 { padding: 0 2.5rem; }
 .py-0-5 { padding: 0.125rem 0; }
 .py-1 { padding: 0.25rem 0; }
+.py-2 { padding: 0.5rem 0; }
 .py-4 { padding: 1rem 0; }
 .py-8 { padding: 2rem 0; }
 .py-10 { padding: 2.5rem 0; }
@@ -942,7 +943,7 @@ a.no-line {
 .background-button-noborder-bg-hover { background-color: var(--noborder-bg-hover); }
 .background-primary-color { background-color: var(--primary-button-default); }
 .background-content-accent-color { background-color: var(--accent-color); }
-.background-comp-header-color { background-color: var(--theme-comp-header-color); }
+.background-comp-header-color { background-color: var(--theme-comp-header-color) !important; }
 
 .content-trans-color { color: var(--theme-trans-color); }
 .content-darker-color { color: var(--theme-darker-color); }

packages/theme/styles/common.scss

@@ -44,12 +44,9 @@
 
 .antiPanel-navigator,
 .antiPanel-component {
-  flex-grow: 1;
   display: flex;
-  flex-direction: column;
   height: 100%;
   min-height: 0;
-  overflow: hidden;
 
   &.header { background-color: var(--theme-comp-header-color); }
   &.filled { background-color: var(--theme-bg-color); }
@@ -63,8 +60,8 @@
   max-width: 22.5rem;
   width: 17.5rem;
   background-color: var(--theme-navpanel-color);
-  // border-right: 1px solid var(--theme-navpanel-border);
 }
+
 @media (max-width: 1024px) {
   .antiPanel-navigator {
     position: fixed;
@@ -82,16 +79,29 @@
     }
   }
 }
-.antiPanel-component:not(.aside) {
+.antiPanel-component {
+  overflow: hidden;
+  flex-direction: column;
   flex-grow: 1;
-  background-color: var(--theme-bg-color);
 }
+.antiPanel-component:not(.aside) { background-color: var(--theme-bg-color); }
 .antiPanel-component.aside {
   min-width: 30rem;
   width: 30rem;
   max-width: 30rem;
 }
 
+.antiPanel-wrap__content {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+
+  &.hidden { overflow: hidden; }
+}
+
 /* Navigation */
 .antiNav-header {
   display: flex;

packages/theme/styles/panel.scss

@@ -243,15 +243,16 @@
 
       &.float {
         position: absolute;
+        flex-direction: row;
         flex-shrink: 0;
         top: 0;
         left: 100%;
         width: var(--panel-aside-width);
-        min-width: 0;
-        max-width: var(--panel-aside-width);
         height: 100%;
+        min-width: 0;
+        min-height: 0;
         background-color: var(--theme-panel-color);
-        border-left: 1px solid var(--theme-divider-color);
+        // border-left: 1px solid var(--theme-divider-color);
         border-bottom-right-radius: .45rem;
         box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
         transition: box-shadow 150ms ease 0s, transform 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275);

packages/ui/src/components/Panel.svelte

@@ -219,14 +219,17 @@
       </div>
     {/if}
     {#if $$slots.aside && isAside && asideShown}
-      <Separator name={'panel-aside'} index={0} />
+      <Separator name={'panel-aside'} float={asideFloat} index={0} />
       <div class="popupPanel-body__aside" class:float={asideFloat} class:shown={asideShown}>
-        {#if moveUtils}
-          <div class="buttons-group justify-end xsmall-gap" style:margin={'.5rem 2rem 0'}>
-            <slot name="utils" />
-          </div>
-        {/if}
-        <slot name="aside" />
+        <Separator name={'panel-aside'} float={asideFloat ? 'aside' : true} index={0} />
+        <div class="antiPanel-wrap__content">
+          {#if moveUtils}
+            <div class="buttons-group justify-end xsmall-gap" style:margin={'.5rem 2rem 0'}>
+              <slot name="utils" />
+            </div>
+          {/if}
+          <slot name="aside" />
+        </div>
       </div>
     {/if}
   </div>

packages/ui/src/components/Scroller.svelte

@@ -194,6 +194,7 @@
     const el: HTMLElement = event.currentTarget as HTMLElement
     if (el && isScrolling) {
       document.removeEventListener('mousemove', onScroll)
+      // document.body.style.pointerEvents = 'all'
       document.body.style.userSelect = 'auto'
       document.body.style.webkitUserSelect = 'auto'
     }
@@ -210,6 +211,7 @@
           : event.clientX - el.getBoundingClientRect().x
       document.addEventListener('mouseup', onScrollEnd)
       document.addEventListener('mousemove', onScroll)
+      // document.body.style.pointerEvents = 'none'
       document.body.style.userSelect = 'none'
       document.body.style.webkitUserSelect = 'none'
       isScrolling = direction
@@ -593,16 +595,18 @@
       </button>
     </div>
   {/if}
-  <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <div class="track" class:hovered={isScrolling === 'vertical'} on:click|stopPropagation={(ev) => clickOnTrack(ev)} />
-  <div
-    class="bar"
-    class:hovered={isScrolling === 'vertical'}
-    bind:this={divBar}
-    on:mousedown={(ev) => onScrollStart(ev, 'vertical')}
-    on:mouseleave={checkFade}
-  />
-  {#if horizontal}
+  {#if mask !== 'none'}
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <div class="track" class:hovered={isScrolling === 'vertical'} on:click|stopPropagation={(ev) => clickOnTrack(ev)} />
+    <div
+      class="bar"
+      class:hovered={isScrolling === 'vertical'}
+      bind:this={divBar}
+      on:mousedown={(ev) => onScrollStart(ev, 'vertical')}
+      on:mouseleave={checkFade}
+    />
+  {/if}
+  {#if horizontal && maskH !== 'none'}
     <!-- svelte-ignore a11y-click-events-have-key-events -->
     <div
       class="track-horizontal"