How to @apply mixins from <iron-flex-layout> in external css file imported by <link>?

[NanoWANG]

Hi all

As the title said.

After several tests, I figured out that I cannot @apply mixins from <iron-flex-layout>.

So I'm wondering Is there any way to do so?

Thx

NanoWANG

[toduu]

I could not use the @apply either -  Used the following to replace layout attributes -

New -
<link rel="import" href="/bower_components/iron-flex-layout/iron-flex-layout.html">

<div class="vertical layout center center-justified">

Old -<div vertical layout center center-justified >

[NanoWANG]

But I guess the layout classes are deprecated.

[Sérgio Batista]

I don't know if it's your case, but if you're passing multiple parameters to the @apply mixin it wont work since 0.9.1, check: https://github.com/Polymer/polymer/issues/1601 

I just made a PR to update the documentation on https://github.com/Polymer/docs/pull/1173

[Robert Simon]

Only attributes are deprecated.

For me it seems that flex classes are the way to go in combination with the iron-media-query (of which I am still scared :D ) .

[the.m...@gmail.com]

A small remark on your import markup, according with the documentation, the syntax import external css files in the dom-module since polymer 1.0 is this:

<dom-module id="my-awesome-button">
  <!-- special import with type=css used to load remote CSS -->
  <link rel="import" type="css" href="my-awesome-button.css">  
  <template>
    ...
  </template>  
  <script>
    Polymer({
      is: 'my-awesome-button',
      ...
    });
  </script>

I think what is missing on your code is the type='css' attribute, I am doing that, the css is imported fine, it works, but when using @apply() for layout my component i.e.

.tools-wrapper {

  @apply(--layout-horizontal)

  margin-top: 30px;

}

It has no effect on the layout, maybe I am missing something as well?

[Arthur Evans]

Hi folks,

This kind of question ("why doesn't X work in Y") is a good candidate for Stack Overflow,

which makes it easier for other people to find the answer.

Here's a demo of this working correctly:

http://plnkr.co/edit/5r8dv9HbeLsUYngICxTZ?p=preview

In regard to the earlier statement about classes, one reason that I like the new layout is that you can use the mixins with plain media queries:

http://plnkr.co/edit/s9k8M5nJkRJccYk8t5qN?p=preview

Hope this helps,

Arthur

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 polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/afec7620-9b45-4cac-a25b-67f53c0c1707%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.