JSFiddle - React, Tailwind, and code Playground

by mgiuffrida

HTML

<base href="https://polygit.org/*+:master/components/">
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-dialog/paper-dialog.html">
<link rel="import" href="paper-button/paper-button.html">

<dom-module id="my-complex-card">
  <template>
    <div>A complex card that was expanded and has a dialog it can bind data to.</div>
    <div>The dialog gets stuck behind the backdrop <strong>if this card is expanded</strong>, because this card creates a stacking context.</div>
    <paper-button raised on-tap="openDialog">Open dialog</paper-button>
    <paper-dialog id="dialog" with-backdrop opened="[[opened]]">
      <div>My data:</div>
      <div>[[myData]]</div>
    </paper-dialog>
  </template>
</dom-module>

<dom-module id="my-simple-card">
  <template>
    A simple card.
  </template>
</dom-module>

<dom-module id="x-foo">
  <style>
    #main {
      background-color: #ccf;
      height: 400px;
    }
    
    .card {
      position: relative;
      margin-top: 10px;
      display: block;
      height: 150px;
      width: 400px;
      background-color: white;
    }
    
    .card.expanded {
      position: absolute;
      left: 100px;
      top: 0px;
      background-color: green;
      color: white;
      height: 500px;
      width: 200px;
      z-index: 1;
    }

  </style>
  <template>
    <div id="main">
      <my-simple-card class="card">
      </my-simple-card>

      <my-complex-card class="card expanded">
      </my-complex-card>

      <my-simple-card class="card">
      </my-simple-card>

      <my-complex-card class="card">
      </my-complex-card>

    </div>
  </template>
</dom-module>

<x-foo></x-foo>

JavaScript

Polymer({
  is: 'my-complex-card',
  properties: {
    myData: {
      type: String,
      value: 'Hello World!',
    },
  },
  openDialog: function() {
    this.$.dialog.open();
  }
});
Polymer({
  is: 'my-simple-card',
});
Polymer({
  is: 'x-foo',
});