diff --git a/packages/lab/src/splitter/SplitHandle.css b/packages/lab/src/splitter/SplitHandle.css index 3faa65118e..bbe124b773 100644 --- a/packages/lab/src/splitter/SplitHandle.css +++ b/packages/lab/src/splitter/SplitHandle.css @@ -36,16 +36,14 @@ width: 4px; } -.saltSplitHandle-bordered { - box-shadow: 0 0 0 1px lightgrey; +/* two handles touching (horizontally) */ +div[data-panel-size="0.0"] + .saltSplitHandle-bordered[data-panel-group-direction="horizontal"] { + margin-left: -1px; } -.saltSplitHandle-bordered[data-panel-group-direction="horizontal"] + div[data-panel-size="0.0"] + .saltSplitHandle-bordered[data-panel-group-direction="horizontal"] { - margin-left: 1px; -} - -.saltSplitHandle-bordered[data-panel-group-direction="vertical"] + div[data-panel-size="0.0"] + .saltSplitHandle-bordered[data-panel-group-direction="vertical"] { - margin-top: 1px; +/* two handles touching (vertically) */ +div[data-panel-size="0.0"] + .saltSplitHandle-bordered[data-panel-group-direction="vertical"] { + margin-top: -1px; } .saltSplitHandle-dot { @@ -67,25 +65,30 @@ background: var(--salt-separable-foreground-active); } -.saltSplitHandle-accent-top-bottom, +.saltSplitHandle-accent-top-bottom { + border-top: 1px solid lightgrey; + border-bottom: 1px solid lightgrey; +} + .saltSplitHandle-accent-left-right { - box-shadow: 0 0 0 1px lightgrey; + border-left: 1px solid lightgrey; + border-right: 1px solid lightgrey; } .saltSplitHandle-accent-left { - box-shadow: -1px 0 0 0.5px lightgrey; + border-left: 1px solid lightgrey; } .saltSplitHandle-accent-right { - box-shadow: 1px 0 0 0.5px lightgrey; + border-right: 1px solid lightgrey; } .saltSplitHandle-accent-top { - box-shadow: 0 -1px 0 0.5px lightgrey; + border-top: 1px solid lightgrey; } .saltSplitHandle-accent-bottom { - box-shadow: 0 1px 0 0.5px lightgrey; + border-bottom: 1px solid lightgrey; } .saltSplitHandle-primary { diff --git a/packages/lab/src/splitter/SplitHandle.tsx b/packages/lab/src/splitter/SplitHandle.tsx index 827fe0c4ff..ee5ec7c65d 100644 --- a/packages/lab/src/splitter/SplitHandle.tsx +++ b/packages/lab/src/splitter/SplitHandle.tsx @@ -61,6 +61,7 @@ export function SplitHandle({ ( ); diff --git a/packages/lab/stories/splitter/splitter.stories.tsx b/packages/lab/stories/splitter/splitter.stories.tsx index 5f729ed194..87657c4ff9 100644 --- a/packages/lab/stories/splitter/splitter.stories.tsx +++ b/packages/lab/stories/splitter/splitter.stories.tsx @@ -1,11 +1,4 @@ -import { - Button, - DialogCloseButton, - Drawer, - FlexLayout, - StackLayout, - Text, -} from "@salt-ds/core"; +import { Button, FlexLayout, StackLayout, Text } from "@salt-ds/core"; import { ArrowLeftIcon, ArrowRightIcon, @@ -114,7 +107,7 @@ export function MultiBordered() { ); } -export function MultiTransparent() { +export function Transparent() { return ( ); } - -export function WipInsideDrawer() { - const [open, setOpen] = useState(false); - - return ( - <> - - - setOpen(false)} /> - - - - setOpen(false)} - style={{ padding: "24px" }} - > - Hello world! - - - - - ); -}