I want to trigger handle to be affected when hover the splitter

user_5843339 0
Viewed 73

I am using the vaadin-split-layout and I wonder if there is way when hover the splitter part will also affect the handle part. I tried to change color for both when splitter is hover

vaadin-split-layout::part(splitter):hover > vaadin-split-layout::part(handle) {
background-color: var(standard-hover);
&::after {
    background-color: limegreen;
}}
vaadin14 vaadin
1 Answers

You'll have to apply your css to the shadow DOM of the component.

You can do that in your frontend/styles/shared-styles.js :

import '@vaadin/vaadin-lumo-styles/all-imports';
import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
...
registerStyles('vaadin-split-layout', css`
  [part='splitter']:hover [part='handle']::after {
    background-color: limegreen;
  }
`);
user_24774440
Related