CODEWITHSUNDEEP
htmlcsspolymer
Captain Kopp
Captain Kopp

Reputation: 149

Polymer ignores paper-card margin

I want to modify the margin of paper-card elements, so I simply created a style html file. here's the relevant code:

paper-card {
    max-width: 400px;
    vertical-align: top;
    margin: 10px;
    --paper-card-header-color: var(--paper-pink-a200);
}

Both header color and vertical-align are being applied properly, but margin and max-width are being ignored (Chrome dev console says that these values have been overriden for some reason). What am I doing wrong?

Upvotes: 1

Views: 528

Answers (1)

Srik
Srik

Reputation: 2381

You need to use the --paper-card mixin to apply the style like below

.with-margin {
  --paper-card:{
    margin: 10px;
  }
}

<paper-card class="with-margin"></paper-card>

Working jsbin: http://jsbin.com/xoxewe/edit?html,output

Upvotes: 1

Related Questions