Suggestions for styling TabSheet?

I want:

  • our tabs to have the good-old rounded top border
  • no indentation on the left
  • No indentation on the tab content

Border was easy

vaadin-tab {
border-radius: 8px 8px 0px 0px;
border: 1px solid var(–our-frame-color);
}

Getting rid of the content indentation was also easy

vaadin-tabsheet::part(content) {
padding-left: 0;
padding-right: 0;
}

The indentation to the left of the tabs themselves was harder. I tried, but there is some positive/negative margin stuff going on, and I ended up with the TabSheet getting an unwanted horizontal scrollbar.
Any suggestions?
image.png

I think this should do it:

  margin: 0;
}```

(silly part name, but :man_shrugging: )

Doh! I had “vaadin-tabsheet::part(tabs)”…:sweat_smile:

Yeah, happens to me all the time.

If you want to make peoples heads hurt you can write the selector as
vaadin-tabsheet vaadin-tabs::part(tabs) :grin: