Gustavosdo/summum

{% load i18n admin_static %}
{% load geral_filters %}

{% tag_lista_status_parcela as lsp %}

<style>
.item-legenda {
    width: 25%;
}

.fonte-legenda, .fonte-legenda-vencida, .fonte-legenda-paga-parcialmente {
    font-weight: normal;
    font-size: 12px;
    display: inline-block;
    line-height: normal;
}

.fonte-legenda-vencida {
    color: {{ lsp.2.0 }};
}

.fonte-legenda-paga-parcialmente {
    color: {{ lsp.1.0 }};
}

.fonte-legenda-paga {
    color: {{ lsp.0.0 }};
}

.fonte-legenda-aberto {
    color: {{ lsp.3.0 }};
}


/* basic positioning */
.legenda-parcelas { 
    list-style: none; 
}
.legenda-parcelas li { 
    float: left; margin-right: 10px; padding: 10px;
}
.legenda-parcelas span { 
    float: left;
    width: 7px;
    height: 7px;
    margin: 2px;
    margin-top: 4px;
}

/* colors */
.legenda-parcelas .cor-vencida { 
    background-color: {{ lsp.2.0 }}; border: 1px solid {{ lsp.2.0 }};
}
.legenda-parcelas .cor-paga-parcialmente { 
    background-color: {{ lsp.1.0 }}; border: 1px solid {{ lsp.1.0 }};
}
.legenda-parcelas .cor-paga { 
    background-color: {{ lsp.0.0 }}; border: 1px solid {{ lsp.0.0 }};
}
.legenda-parcelas .cor-aberto { 
    background-color: {{ lsp.3.0 }}; border: 1px solid {{ lsp.3.0 }};
}
.cor-vencida, .cor-paga-parcialmente, .cor-paga, .cor-aberto {
    border-radius: 50%;
}

#box-legenda-cores-parcelas {
    background-color: #f6f7f8;
    border: 1px solid #dddddd;
    width: 100%;
    display: table;
}

</style>

<div id="box-legenda-cores-parcelas">
  <ul class="legenda-parcelas">
    <li class="item-legenda">
      <span class="cor-paga"></span>
      <font class="fonte-legenda-paga">{% trans 'Paga' %}</font>
    </li>
    <li class="item-legenda">
      <span class="cor-paga-parcialmente"></span>
      <font class="fonte-legenda-paga-parcialmente">{% trans 'Paga parcialmente' %}</font>
    </li>
    <li class="item-legenda">
      <span class="cor-aberto"></span> 
      <font class="fonte-legenda-aberto">{% trans 'Em aberto' %}</font>
    </li>
    <li>
      <span class="cor-vencida"></span> 
      <font class="fonte-legenda-vencida">{% trans 'Vencida' %}</font>
    </li>
  </ul>
</div>