Et2Split: Add a background color to the splitter bar

This commit is contained in:
nathan 2022-04-21 09:09:59 -06:00
parent f05ce485ca
commit 19ae591bdf

View File

@ -13,6 +13,7 @@ import {SlSplitPanel} from "@shoelace-style/shoelace";
import {et2_IDOMNode, et2_IResizeable} from "../../et2_core_interfaces"; import {et2_IDOMNode, et2_IResizeable} from "../../et2_core_interfaces";
import {et2_DOMWidget} from "../../et2_core_DOMWidget"; import {et2_DOMWidget} from "../../et2_core_DOMWidget";
import {css, html, SlotMixin} from "@lion/core"; import {css, html, SlotMixin} from "@lion/core";
import {colorsDefStyles} from "../../Styles/colorsDefStyles";
export class Et2Split extends Et2Widget(SlotMixin(SlSplitPanel)) export class Et2Split extends Et2Widget(SlotMixin(SlSplitPanel))
{ {
@ -21,6 +22,7 @@ export class Et2Split extends Et2Widget(SlotMixin(SlSplitPanel))
{ {
return [ return [
...super.styles, ...super.styles,
colorsDefStyles,
css` css`
:host { :host {
height: 100%; height: 100%;
@ -40,6 +42,9 @@ export class Et2Split extends Et2Widget(SlotMixin(SlSplitPanel))
:host([vertical]) ::slotted(.split-handle) { :host([vertical]) ::slotted(.split-handle) {
background-image: ${cssImage("splitter_horz")}; background-image: ${cssImage("splitter_horz")};
} }
.divider {
background-color: var(--gray_10)
}
` `
]; ];
} }