I want to change the style of the side menu but after trying several changes to onsen-css-components-blue-basic-theme.css I can not find the element that contains the edge shadow (see below image). I want to remove the shadow from the menu - which file is this handled by?
<ons-sliding-menu var="menu" id="menusliding" main-page="main.html" menu-page="menux.html" max-slide-distance="85%" type="reveal" side="left" ></ons-sliding-menu>
Generally it's a better idea not to touch generated files as if at some point you decide to change the theme or update the version the changes will be overriden. So instead of trying to change the framework css generally it's better if you just write your styles in a separate file (at least until you decide to push things to production).
And about the question: these things can be found by doing right click => inspect element. If you do that on the element you will be able to see where the styles come from. The way which you're wording your question it sounds like you tried to find it but were unable to. Probably if you looked a while longer you would've been able to find it.
After doing the method described above I was able to find that actually it's defined in element.style of the main content. Some libraries do these kind of things even though it's not very recommended, still it's the most secure way to ensure that the style will be applied.
To remove it you can just do.
.onsen-sliding-menu__main {
box-shadow:none !important;
}
The class may vary depending on the onsen version. It's not the most elegant solution, but ons-sliding-menu is a relatively old component. In Onsen 2 there is actually an ons-splitter element which combines the behaviours of ons-sliding-menu and ons-split-view. If you use that you will see that the shadow there has been removed.
