On Thu, Jul 16, 2015 at 1:57 PM, Kelly St. John <[email protected]> wrote:
> On a somewhat related note, is there a reason the demos/docs are not in > place for paper-styles in the new 1.0 element catalog? ( > https://elements.polymer-project.org/elements/paper-styles) > > Should I be using paper-styles, or is it experimental? > It's not experimental. I'm not sure why the documentation isn't showing up. > > > > On Thursday, 16 July 2015 12:39:25 UTC-7, Kelly St. John wrote: >> >> Hi All, >> >> I'm currently in the midst of migrating an app built on polymer 0.5.4 to >> 1.0. In the 0.5 app I leveraged the core-style element throughout in order >> to apply common styling amongst the various custom elements. I'm not a CSS >> expert by any means (a relative newbie actually), and could really use an >> example of how to do the same using the new 1.0 styling paradigms. I like >> the idea of using a document-level element (via an external html file) to >> store application-level common styles. For instance, one would presume I >> could then place something like this in that document level external file: >> >> <style is="custom-style"> >> >> .center { >> @apply(--layout-center); >> } >> >> .horizontal { >> @apply(--layout-horizontal); >> } >> >> .vertical { >> @apply(--layout-vertical); >> } >> >> >> </style> >> >> >> And use these document level styles by applying classes to any tag in >> the app, like: >> >> <div class="horizontal center"> >> >> However, that approach doesn't seem to be working at the moment. >> > This is as intended. The styles are scoped on purpose so that they don't leak downward. It's totally possible that in some component you're using that .center is supposed to have a slightly different styling (especially considering how many ways there are to center), and you wouldn't want to override it. The correct approach is to apply the properties where you need them. In the host of that <div>, use @apply: .my-class { @apply(--layout-center); } <div class="my-class"></div> If you want to pass styles down the tree, and through scope boundaries, then you can use CSS custom properties, but it's always up to the element in a scope to choose to apply the property. In that way it's opt-in from the element's point of view. Does that help? Cheers, Justin > I'm likely missing something with the scoping of CSS styles in Polymer >> 1.0, or maybe even barking down the wrong path entirely. I want to employ >> a theming strategy that will continue working as Polymer evolves beyond >> 1.0. I do not want to rewrite this application anytime soon...or it will >> likely be necessary for me to look for other employment. Can someone >> kindly point me in the right direction, please? >> >> Thanks >> > Follow Polymer on Google+: plus.google.com/107187849809354688692 > --- > You received this message because you are subscribed to the Google Groups > "Polymer" group. > To unsubscribe from this group and stop receiving emails from it, send an > email to [email protected]. > To view this discussion on the web visit > https://groups.google.com/d/msgid/polymer-dev/3759a8f4-2da7-4fca-b51a-77f57d2d8d8f%40googlegroups.com > <https://groups.google.com/d/msgid/polymer-dev/3759a8f4-2da7-4fca-b51a-77f57d2d8d8f%40googlegroups.com?utm_medium=email&utm_source=footer> > . > > For more options, visit https://groups.google.com/d/optout. > Follow Polymer on Google+: plus.google.com/107187849809354688692 --- You received this message because you are subscribed to the Google Groups "Polymer" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAEKsHmDK-shKBHJ%2BnX6g2JqUBJW9p9-cSC0fee0KthyWvvs2rw%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
