diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss
index ae5674d9ff..1b3b330aee 100644
--- a/packages/theme/styles/_colors.scss
+++ b/packages/theme/styles/_colors.scss
@@ -82,6 +82,7 @@
--theme-navpanel-divider: rgba(255, 255, 255, .1);
--theme-navpanel-border: transparent;
--theme-navpanel-icons-color: #7F7F7F;
+ --theme-navpanel-icons-divider: rgba(255, 255, 255, .11);
--theme-comp-header-color: #1F1F2C;
--theme-divider-color: rgba(255, 255, 255, .06);
@@ -229,6 +230,7 @@
--theme-navpanel-divider: rgba(0, 0, 0, .06);
--theme-navpanel-border: rgba(0, 0, 0, .06);
--theme-navpanel-icons-color: #7F7F7F;
+ --theme-navpanel-icons-divider: rgba(0, 0, 0, .1);
--theme-comp-header-color: #FBFBFC;
--theme-divider-color: rgba(0, 0, 0, .06);
diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index 5872cf1de3..5f1c93fb86 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -231,6 +231,8 @@ input.search {
display: flex;
flex-direction: column;
align-items: center;
+ min-width: 0;
+ min-height: 0;
}
.flex-col-stretch {
display: flex;
@@ -646,6 +648,10 @@ input.search {
.square-36 { width: 2.25rem; height: 2.25rem; }
/* --------- */
+.svg-16px {
+ width: 16px;
+ height: 16px;
+}
.svg-inline {
width: 1em;
height: 1em;
diff --git a/packages/theme/styles/common.scss b/packages/theme/styles/common.scss
index 408b7727af..bf4cfe0d4e 100644
--- a/packages/theme/styles/common.scss
+++ b/packages/theme/styles/common.scss
@@ -23,18 +23,19 @@
justify-content: space-between;
align-items: center;
background-color: var(--theme-navpanel-color);
- border-right: 1px solid var(--theme-navpanel-divider);
&.vertical {
flex-direction: column;
min-width: var(--app-panel-width);
width: var(--app-panel-width);
height: 100%;
+ border-right: 1px solid var(--theme-navpanel-divider);
}
&.horizonatl {
min-height: var(--app-panel-width);
height: var(--app-panel-width);
width: 100%;
+ border-top: 1px solid var(--theme-navpanel-divider);
}
}
.antiPanel-navigator,
diff --git a/packages/ui/src/components/Scroller.svelte b/packages/ui/src/components/Scroller.svelte
index 73de1f29b2..e341a041e2 100644
--- a/packages/ui/src/components/Scroller.svelte
+++ b/packages/ui/src/components/Scroller.svelte
@@ -21,6 +21,7 @@
import { defaultSP } from '../types'
import IconUpOutline from './icons/UpOutline.svelte'
import IconDownOutline from './icons/DownOutline.svelte'
+ import HalfUpDown from './icons/HalfUpDown.svelte'
export let padding: string | undefined = undefined
export let autoscroll: boolean = false
@@ -31,7 +32,7 @@
export let horizontal: boolean = false
export let contentDirection: 'vertical' | 'vertical-reverse' | 'horizontal' = 'vertical'
export let noStretch: boolean = autoscroll
- export let buttons: boolean = false
+ export let buttons: 'normal' | 'union' | false = false
export let shrink: boolean = false
export let divScroll: HTMLElement | undefined = undefined
export let checkForHeaders = false
@@ -422,6 +423,17 @@
}
}
}
+
+ $: topButton =
+ (orientir === 'vertical' && (mask === 'top' || mask === 'both')) ||
+ (orientir === 'horizontal' && (maskH === 'right' || maskH === 'both'))
+ ? 'visible'
+ : 'hidden'
+ $: bottomButton =
+ (orientir === 'vertical' && (mask === 'bottom' || mask === 'both')) ||
+ (orientir === 'horizontal' && (maskH === 'left' || maskH === 'both'))
+ ? 'visible'
+ : 'hidden'
@@ -429,7 +441,8 @@
- {#if buttons}
+ {#if buttons === 'normal'}