search

revery-ui / revery

:zap: Native, high-performance, cross-platform desktop apps - built with Reason!
https://www.outrunlabs.com/revery/
MIT License
8.07k stars 197 forks source link

UI - Box Shadow: 'Inset' property #187

Open bryphe opened 5 years ago

bryphe commented 5 years ago

The CSS box-shadow supports a property called inset, which causes the box-shadow to be rendered inside the element:

Without inset: image

With inset: image

We use this inner-box-shadow styling in Oni's tab-bar to create the illusion of depth: image

The README.md and Theme.re both have this style applied to make it appear they are 'underneath' the editor surface. It would be cool if we had that styling capability for Oni2, as well.

I think the approach would be quite similiar to the approach @Akin909 took with #107 - it'd just be about rendering the shadow above the element, and positioning it correctly in the inset case.

akinsho commented 5 years ago

I can have a look at this @bryphe, since I knew it would come up :laughing:

bryphe commented 5 years ago

Sweet, thanks @Akin909 !