estagio/contas_pagar/templates/admin/legenda_parcelas_contas_pagar.html
{% 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>