When i add a shared style to an element such as the nav wizard submit button, my style initially appears to apply and then on preview I see it is not applied. Returning to design mode the style is no longer applied there either. When I explore the css I see my shared style being applied first (in order of appearance) and then the default button styles follow. This means my style is getting overridden by the underlying styles. It seems to me that my styles should be applied last in the css so they override the default. I can "override" properties that are not set in any of the default (library) styles but cascading (overriding) existing properties doesn't work. Surely the point of overriding something is that it get's the last say?
For example I have a custom style ".another-button" which "overrides" the border radius but it doesn't get applied because the ".nav-wizard-button" takes precedence. Here is a snippet from explore styles followed by a screenshot from chrome developer tools. You can see my radius of 2px is being ignored.
This is possibly more of a UI issue than anything else. The Item Style sits at the top of the Selected style palette and it overrides settings from shared styles beneath it. So for a 'Continue Button' the palette looks like this:
Item StyleWizard Navigator ButtonWizard Navigation Continue Button
If I apply a pink background directly to the button in the item style it overrides the 2 styles below it.
It does this because it is implemented with a more specific selector than the styles below it and it appears to get an !important flag also (which doesn't show in the explore styles), but it does appear first in the css order. If this is converted to a shared style then the pink background dissappears from the Item Style and a new shared style appears below the Item style, like this:
1. Item Style2. Pink Button Style3. Wizard Navigator Button4. Wizard Navigation Continue Button
But now my button is no longer pink! The CSS cascade appears to go from top to bottom but actually it goes from 1 - Item Style down to 4 - Wizard Navigation Continue Button and then works it's way back up to 3 and then 2. In order to get the Pink Button Style to work you need to:
1. Publish the template. 2. Close the form.3. Ensure that the library where you published the style appears first in the hierarchy of libraries or at least before any others that are relevant to the component in question.4. Re-Open the form.
I think this is a pretty confusing process, particularly where after creating a shared style all the changes you made just cease to work.
I suggest that:
1. The order of the styles in the Selected Styles tab go either from top to bottom or bottom to top instead of top then bottom then back up to the top
2. That the default for creating a style in a new project be to take precedence in the library over all other styles.
Also, updating a shared style has a similar effect where the changes cease to apply until you publish the template again.
Currently the order of the shared styles in the style panel has nothing to do with the order that the CSS is applied. If your css is being overridden it means that you need more number items in your css selectors so that your css is more specific.
As for the UI issue it is known that when you select a shared style in Maestro, the precedence is increased in the wireframe. The styling is a temporary artefact and will disappear once you save or preview as the screen resets if your css is not specific enough. I always rely on the preview and try to inspect the browser rather than relying on the Maestro UI.
I hope this helps.