<link rel="import" href="../polymer/polymer.html">

<polymer-element name="listas-page">

  <template>
    <style>
      #section2 {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        padding-left: 20px;
        padding-right: 40px;
        padding-bottom: 40px;
      }
      #sub_header {
        color: rgb(0, 121, 107);
        font-family: 'Roboto Slab', serif;
        font-weight: 400;
        font-size: 18px;
        padding: 15px;
        -webkit-user-select: none;
      }
      #group_recibidos, #group_procesados, #group_despachados {
        width: 30%;
        height: 100%;
      }
      .shadow_list {
        position: relative;
        width: 100%;
        height: 100%;
      }
      .pedidos_list {
        width: 100%;
        height: 100%;
        background-color: rgb(250, 250, 250);
      }
    </style>
    <section id="section2" main horizontal justified layout fit>
      <div id="group_recibidos" vertical layout center>
        <sub_header id="sub_header">Pedidos Recibidos</sub_header>
        <paper-shadow id="paper_shadow2" z="2" class="shadow_list" vertical layout>
          <core-list id="recibidos" class="pedidos_list" vertical layout></core-list>
        </paper-shadow>
      </div>
      <div id="group_procesados" vertical layout center>
        <sub_header id="sub_header">Pedidos Procesados</sub_header>
        <paper-shadow id="paper_shadow" z="2" class="shadow_list" vertical layout>
          <core-list id="procesados" class="pedidos_list" vertical layout></core-list>
        </paper-shadow>
      </div>
      <div id="group_despachados" vertical layout center>
        <sub_header id="sub_header">Pedidos Despachados</sub_header>
        <paper-shadow id="paper_shadow1" z="2" class="shadow_list" vertical layout>
          <core-list id="despachados" class="pedidos_list" vertical layout></core-list>
        </paper-shadow>
      </div>
    </section>
  </template>

  <script>

    Polymer({

    });

  </script>

</polymer-element>