Grid

Source: docs/grid_system.md

v 0.1

Responsividade

A responsividade tem os seguintes breakpoints

xs : only screen and (max-width: 576px)"
sm : "only screen and (min-width: 576.98px) and (max-width: 768px)
md : only screen and (min-width: 768px.98px) and (max-width: 992px)
lg : only screen and (min-width: 992px) and (max-width: 1440px)
xlg : "only screen and (min-width: 1440.98px)
print : "only print - utiliado somente em impressao

todas as classes que definen tamanho podem ter responsividade aplicada utilizando -xs -sm etc

Container

o container somente determina a largura maxima .container conforme os breakspoints para cada tamanho de tela

.container - max de 1280 px
.container-fluid - 100%

Grids

grid container - podemos ter grid de uma ou varias colunas, utilizando

.grid .grid-num - num = numero de colunas, de 1 a 24. exemplo .grid-12
.grid .grid-num-expandable - permite que items do grid maior que sua coluna aumente o tamanho da coluna
.grid .grid-auto-num - cria automaticamente colunas, com num defininto o tamanho minimo da coluna, de 10 a 2400px exemplo .grid-auto-200

grid items - são os items dentro do grid, que podem ocupar uma ou mais coluna e ou linhas, utilizando as classes

.col-num - num = o numero de colunas que o elemento ocupa (1-24)
.row-num - num = o numero de linhas que o elemento ocupa (1-24)

espacamento - podemos definir os espacos/gaps entre os elementos do grid:

.gap-num - num = espaco entre as celuas da grid, de 0 a 12 (espaco final multiplos de 4)
.col-gap-num - num = espaco entre as colunas, de 0 a 12 (espaco final multiplos de 4)
.row-gap-num - num = espaco entre as linhas, de 0 a 12 (espaco final multiplos de 4)

responsividade - grids containers, elementos e espacamentos podem ser utilizados para diferentes tamanho de tela, aplicando -sm ou -md etc antes dos num. Exemplos:

.grid .grid-1 .grid-md-3 .grid-lg-4 - em mobile vai ter 1 coluna, em md (768px) vai ter 3, e adiante 4 colunas
.grid .grid-6 .grid-xs-3 - grid vai ter 6 colunas, em mobile vai ter 3
.col-1 col-sm-2 - um elemente do grid ocupa 1 coluna, e 2 colunas acima de sm(576)
.row-2 row-sm-2 - um elemente do grid ocupa 2 linhas, e 3 linhas acima de md(768px)
.gap-10 .gap-xs-2 - os elementos vao ter uma espacamento normal 40px, em mobile vai ter de 8 pixel

Example

    <div class='container-fluid'>
    <h5> grid de 4 colunas md, 2 coluna small, 1 coluna mobile </h5>
    <div class='grid grid-1 grid-sm-2 grid-md-4 '>
        <div> 1 </div>
        <div> 2 </div>
        <div> 3 </div>
        <div> 4 </div>
        <div> 5 </div>
        <div > 6 </div>
        <div> 7 </div>
        <div > 8 </div>

    </div>

    <h5> grid com numero de colunas automatizados, se definindo o tamanho minimo sempre </h5>
    <div class='grid grid-auto-100 gap-2 gap-md-5'>
        <div> 1 </div>
        <div> 2 </div>
        <div> 3 </div>
        <div> 4 </div>
        <div> 5 </div>
        <div > 6 </div>
        <div> 7 </div>
        <div > 8 </div>

    </div>

    <h5> grid com o item 5 ocupando 4 colunas normal, 2 em small, e 1 em mobile </h5>
    <div class='grid grid-4'>
        <div> 1 </div>
        <div> 2 </div>
        <div> 3 </div>
        <div> 4 </div>
        <div class="col-1 col-sm-2 col-md-4" > 5 (span) </div>
        <div > 6  </div>
        <div> 7 </div> 
        <div > 8 </div>
    </div>


    <h5> grid responsiva, o um item `col-num` maior que o numero da grid vai ser ignorado 
    </h5>

    <div class='grid grid-2 grid-sm-2 grid-lg-6'>
        <div> 1 </div>
        <div> 2 </div>
        <div> 3 </div>
        <div> 4 </div>
        <div class="col-lg-6" > 5 (span) </div>
        <div > 6  </div>
        <div> 7 </div> 
        <div > 8 </div>
    </div>
    <h5> grid definindo espacamento entre os itens responsivo </h5>
    <div class='grid grid-4 gap-1 gap-md-10'>
        <div> 1 </div>
        <div> 2 </div>
        <div> 3 </div>
        <div> 4 </div>
        <div> 5 </div>
        <div> 6 </div>
        <div> 7 </div>
        <div> 8 </div>
        <div> 9 </div>
    </div>
    <h5> grid definindo tamanho de linhas que um elemento oculpa, responsivo (4 row grande, 2row small) </h5>
    <div class='grid grid-4 gap-1'>
        <div> 1 </div>
        <div> 2 </div>
        <div> 3 </div>
        <div class='row-2 row-md-4'> 4 (row 2) </div>
        <div> 5 </div>
        <div> 6 </div>
        <div> 7 </div>
        <div> 8 </div>
        <div> 9 </div>
    </div>
    </div>

    h5{
        margin-top:5em;
    }
    .grid > div{
        background: gray;
        padding:20px;
    }

Alinhamento do Grid

Justify/Align tanto definido no grid container como em algum elemento do grid

.j-start - justify
.j-center
.j-end
.j-stretch
.a-start - align
.a-center
.a-end
.a-stretch

responsividade pode ser utilizado aplicando -md etc antes da centralizacao

.j-start .j-md-center - ate 760px justifica no inicio, depois justifica no centro no centro

Example

    <div class='container-fluid'>
    <h5> jutify-align aplicado aos itens, com o item 2 mudando conforme o tamanho da tela </h5>
    <div class='grid grid-4'>
        <div> 1 </div>
        <div class="col-3 j-center j-md-end"> 2 </div>
        <div class="col-2 j-end"> 5 </div>
        <div class="col-2"> 6 </div>
        <div> 7 </div>
        <div class="j-end"> 8 </div>

    </div>

    <h5> alinhamentos aplicado ao grid container, com o elemento 4 utilizando alinhamento responsivo </h5>
    <div class='grid grid-4 gap-1 j-center a-center'>
        <div> 1 </div>
        <div> 2 </div>
        <div> 3 </div>
        <div class='row-3 a-lg-end'> 4 </div>
        <div> 5 </div>
        <div> 6 </div>
        <div> 7 </div>
        <div> 8 </div>
        <div> 9 </div>
    </div>

  </div>

   h5{
        margin-top:5em;
    }
    .grid div{
        background: gray;
        padding:20px;
    }

Elements in Rows or Cols using Flex

podemos ter uma linha ou colunas usando o flex, com responsividade podendo ser determinada

.in-cols (.in-cols-sm) - todos os elementos vao aparecer como colunas, uma do lado da outra
.in-rows (.in-rows-sm) - todos os elementos filhos vao aparecer de linha em linha
.gap-2 - o espacamento(margim) entre os elementos
.inline (.inline-sm) - o container se comporta como inline-flex
.wrap (.wrap-sm) - o container se comporta como inline-flex
.nowrap, .(nowrap-sm) - o container se comporta como inline-flex

itens size

.grow-num (.grow-sm-num) - num de 1 a 5
.shrink-num (.shrink-sm-num) - num de 1 a 5
.w-num (.w-sm-num) - determina a largura/flexbasis, num de 0 a 100, de 10 em 10
.h-num (.h-sm-num) - mesma coisa que w, para quando usamos o .in-rows

order

.order-1, (.order-sm-1) ordem, de 1 a 24
.order--1 (.order-sm--1) de -1 a -24

Justify/Align Flex container and itens with with

.j-start (.j-sm-start) - justify-content
.j-center
.j-end
.j-stretch
.j-space-between
.j-space-around
.j-space-evenly
.j-stretch
.a-start - align-itens
.a-center
.a-end
.a-stretch
.a-baseline
.ac-start - align-content
.ac-center
.ac-end
.ac-stretch
.ac-baseline

exemplos:

Example

    <div class='container-fluid'>
    <h5> itens em colunas </h5>

    <div class='in-cols gap-2'>
        <div> 1 </div>
        <div> 2 </div>
        <div> 3 </div>
        <div> 4 </div>
        <div class="grow-1"> 5 </div>
        <div class="grow-1"> 6 </div>
        <div> 7 </div>
        <div class="col-3"> 8 </div>

    </div>

    <h5> items em linhas </h5>
    <div class='in-rows gap-4'>
        <div> 1 </div>
        <div> 2 </div>
        <div class="a-center"> no centro </div>
        <div> 4 </div>
        <div> 5 </div>
        <div> 6 </div>
        <div> 7 </div>
        <div class="a-end"> 8 no final </div>
        <div  class="order--1"> 9 que vira 1 </div>
    </div>


    <h5> items in colunas e em linha no mobile </h5>
    <div class='in-rows-xs in-cols-sm gap-4'>
        <div> 1 </div>
        <div> 2 </div>       
        <div> 3 </div>       
        <div> 4 </div>
        <div> 5 </div>
    </div>

    </div>

    div > div > div{
        background: gray;
        padding:20px;
    }

Typography

Source: docs/typography_system.md

Text Sizes

os tamanhos das fontes são tanto determinados como classe, ou como css variaveis

tamanho como css var

.titulo{ font-size: var(--fs-md) }

tamanho como classes
.fs-xs - 0.67em;
.fs-sm - 0.75em;
.fs-md - 1em
.fs-lg - 1.333em;
.fs-xlg - 1.777em;
.fs-xxlg - 2.369em;
.fs-xxxlg - 3.157em;
.fs-xxxxlg - 4.209em;

Example


<div class="mt-2 fs-xs"> This is a Title with Font Size</div>
<div class="mt-2 fs-sm"> This is a Title with Font Size</div>
<div class="mt-2 fs-md"> This is a Title with Font Size</div>
<div class="mt-2 fs-lg"> This is a Title with Font Size</div>
<div class="mt-2 fs-xlg"> This is a Title with Font Size</div>
<div class="mt-2 fs-xxlg"> This is a Title with Font Size</div>
<div class="mt-2 fs-xxxlg"> This is a Title with Font Size</div>
<div class="mt-2 fs-xxxxlg"> This is a Title with Font Size</div>

Others typefaces definition

Example

    <code> `.text` </code>
    <div class="text"> a normal text </div>

    <code> .title-tables </code>
    <div class="title-tables"> Tabela Title </div>

    <code> ..big-number__label </code>
    <div class="big-number__label"> big number labels </div>
    <code> .big-number__number </code>
    <div class="big-number__number"> 123 </div>

    <code> .big-number__number--md </code>
    <div class="big-number__number--md"> 123 </div>

Utilitys

Source: docs/utils.md

Spacing

margim with

.mt-1 (.mt-sm-1) - margin top - 1 a 12
.ml-1 - margin left - 1 a 12
.mr-1 - margin right - 1 a 12
.mb-1 - margin bottom - 1 a 12
.mx-1 - margin left and right - 1 a 12
.my-1 - margin top and bottom - 1 a 12
.mx-auto - margin top and bottom - 1 a 12

padding with

.pt-1 (.pt-sm-1) - margin top - 1 a 12
.pl-1 - margin left - 1 a 12
.pr-1 - margin right - 1 a 12
.pb-1 - margin bottom - 1 a 12
.px-1 - margin left and right - 1 a 12
.py-1 - margin top and bottom - 1 a 12

Sizer

w-num (.w-sm-num) width in percent 0-100
h-num height in percent 0-100
wv-num width in viewport 0-100
hv-num height in viewport 0-100
wp-num width in scales pixels 0-24
hp-num height in scales pixels 0-24

Fonts

.fs-xs (.fs-xs-xs)
.fs-sm
.fs-md
.fs-lg
.fs-xlg
.fs-xxlg
.fs-xxxlg
.fs-xxxxlg
.fs-1 (fs-sm-1) fontsize 1 a 12 in scalar pixel
.fs--1 (fs-sm--1) fontsize -1 a -12 scalar pixel
.fs-1rem fontsize 1 a 12 in rem
.fs--1em fontsize 1 a 12 in em

line-height

.lh-08 (lh-sm-08) - line height of 06 - 14 ( significa 0.6 1.4)

text align

.tr (.tr-sm) text-right
.tl text-left
.tc text-center

Opacity

.o-10 (o-sm-50) opacity from 0 to 100 (step of 10)

Display

.d-none (d-sm-block)
.d-block
.d-inline-block
.d-flex
.d-inline-flex
.d-grid
.d-inline-grid

Hidden

.hidden
.hidden-xs
...

Example

    <div class='container-fluid'>
       <div> small: <span class='hidden-xs'> showing </span> <span class='hidden-sm'> hidden </span> 
       </div>
        <div class='show hidden-md'> hidden-md </div>
        <div> 3 </div>
        <div> 4 </div>
        <div> 5 </div>
        <div > 6 </div>
        <div> 7 </div>
        <div > 8 </div>


    </div>

    h5{
        margin-top:5em;
    }
    .grid > div{
        background: gray;
        padding:20px;
    }

show

.show
.show-xs

Colors

.black - font colors
.white
.green
.gray
.yellow
.bg-black - background colors
.bg-white
.bg-green
.bg-gray
.bg-yellow

Header Button Menu

Source: docs/header_button_menu.md

Esse elemento corresponde ao botão de menu presente no cabeçalho do relatório.

Example

   <div class='relatorio'>
    <div class="header__button-menu">
        <!-- <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="45px" height="45px" fill= "#5A9591"
     viewBox="0 0 384 384" style="enable-background:new 0 0 384 384;" xml:space="preserve">
            <g></g>
                <g>
                    <g>
                        <rect x="0" y="277.333" width="384" height="49.667"/>
                        <rect x="0" y="170.667" width="384" height="49.667"/>
                        <rect x="0" y="64" width="384" height="49.667"/>
                    </g>
                </g>
            </g>
            </svg>
        -->
    </div>
    </div>

Header Button Print

Source: docs/header_button_print.md

Esse elemento corresponde ao botão de imprimir presente no cabeçalho do relatório.

Example

   <div class='relatorio'>
    <div class="header__button-print">
        <span> IMPRIMIR </span>
    </div>
    </div>

Header Button Reports and Panels

Source: docs/header_button_report_panel.md

Esse elemento corresponde ao botão de abrir mais relatórios e painéis. Se encontra no lado superior direito do cabeçalho.

Example

   <div class='relatorio'>
<div class="container" style="display: flex; flex-direction: row; width: 20%">
    <div class="header__button-report">
        Relatórios
        <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
        width="12px" height="12px" viewBox="0 0 438.533 438.533" fill= "#575555"
        xml:space="preserve">
        <g>
        <path d="M409.133,109.203c-19.608-33.592-46.205-60.189-79.798-79.796C295.736,9.801,259.058,0,219.273,0
            c-39.781,0-76.47,9.801-110.063,29.407c-33.595,19.604-60.192,46.201-79.8,79.796C9.801,142.8,0,179.489,0,219.267
            c0,39.78,9.804,76.463,29.407,110.062c19.607,33.592,46.204,60.189,79.799,79.798c33.597,19.605,70.283,29.407,110.063,29.407
            s76.47-9.802,110.065-29.407c33.593-19.602,60.189-46.206,79.795-79.798c19.603-33.596,29.403-70.284,29.403-110.062
            C438.533,179.485,428.732,142.795,409.133,109.203z M361.733,204.705L232.119,334.324c-3.614,3.614-7.9,5.428-12.849,5.428
            c-4.948,0-9.229-1.813-12.847-5.428L76.804,204.705c-3.617-3.615-5.426-7.898-5.426-12.845c0-4.949,1.809-9.235,5.426-12.851
            l29.119-29.121c3.621-3.618,7.9-5.426,12.851-5.426c4.948,0,9.231,1.809,12.847,5.426l87.65,87.65l87.65-87.65
            c3.614-3.618,7.898-5.426,12.847-5.426c4.949,0,9.233,1.809,12.847,5.426l29.123,29.121c3.621,3.616,5.428,7.902,5.428,12.851
            C367.164,196.807,365.357,201.09,361.733,204.705z"/>
            </g>
            <g>
            </g>
            <g>
            </g>
            <g>
            </g>
            <g>
            </g>
            <g>
            </g>
            <g>
            </g>
            <g>
            </g>
            <g>
            </g>
            <g>
            </g>
            <g>
            </g>
            <g>
            </g>
            <g>
            </g>
            <g>
            </g>
            <g>
            </g>
            <g>
            </g>
            </svg>
</div>

    <div class="header__button-panels">
        Painéis
        <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
        width="12px" height="12px" viewBox="0 0 438.533 438.533" fill= "#575555"
        xml:space="preserve">
        <g>
            <path d="M409.133,109.203c-19.608-33.592-46.205-60.189-79.798-79.796C295.736,9.801,259.058,0,219.273,0
                c-39.781,0-76.47,9.801-110.063,29.407c-33.595,19.604-60.192,46.201-79.8,79.796C9.801,142.8,0,179.489,0,219.267
                c0,39.78,9.804,76.463,29.407,110.062c19.607,33.592,46.204,60.189,79.799,79.798c33.597,19.605,70.283,29.407,110.063,29.407
                s76.47-9.802,110.065-29.407c33.593-19.602,60.189-46.206,79.795-79.798c19.603-33.596,29.403-70.284,29.403-110.062
                C438.533,179.485,428.732,142.795,409.133,109.203z M361.733,204.705L232.119,334.324c-3.614,3.614-7.9,5.428-12.849,5.428
                c-4.948,0-9.229-1.813-12.847-5.428L76.804,204.705c-3.617-3.615-5.426-7.898-5.426-12.845c0-4.949,1.809-9.235,5.426-12.851
                l29.119-29.121c3.621-3.618,7.9-5.426,12.851-5.426c4.948,0,9.231,1.809,12.847,5.426l87.65,87.65l87.65-87.65
                c3.614-3.618,7.898-5.426,12.847-5.426c4.949,0,9.233,1.809,12.847,5.426l29.123,29.121c3.621,3.616,5.428,7.902,5.428,12.851
                C367.164,196.807,365.357,201.09,361.733,204.705z"/>
             </g>
        <g>
        </g>
        <g>
        </g>
        <g>
        </g>
        <g>
        </g>
        <g>
        </g>
        <g>
        </g>
        <g>
        </g>
        <g>
        </g>
        <g>
        </g>
        <g>
        </g>
        <g>
        </g>
        <g>
        </g>
        <g>
        </g>
        <g>
        </g>
        <g>
        </g>
        </svg>

    </div>
</div>
</div>

Header Date

Source: docs/header_date.md

Esse elemento corresponde a data e hora em que foi gerado o relatório.

Example

   <div class='relatorio'>
<div class="container">
    <div class="header__date">
        <h6> Gerado em 21/5/2020 às 09h58min </h6>
    </div>
</div>
</div>

Header Reference Year

Source: docs/header_referenceyear.md

Esse elemento corresponde ao ano de refêrencia do conteúdo presente no relatório.

Example

   <div class='relatorio'>
<div class="container">
    <div class="header__year">
        2019
    </div>
</div>
</div>

Header Title

Source: docs/header_title.md

Esse elemento corresponde ao título do relatório e a localidade do presente no cabeçalho do relatório.

Example

   <div class='relatorio'>
    <div class="header__title">
        <h2> e Relatório Municipal de Gestão de Resíduos Sólidos: </h2>
        <h1> Nova Iorque | MA </h1>
    </div>
</div>

Legends

Source: docs/legends.md

Elementos que deve ser usado para esse tipo de componente: <div>.

Esse elemento corresponde as legendas dos gráficos e mapas do relatório.

Para adicionar uma nova linha de legenda, deve-se adicionar uma div com class="line" e dentro da mesma duas divs com classe "legend__bullets" e "legend__text".

Example

   <div class='relatorio'>

<div class="container" style="display: flex">
    <div class="section__legends">

        <div class="line">
            <div class="legend__bullets" style="background: #314559">
            </div>
            <div class="legend__text">
                Exemplo de legenda 1
            </div>
        </div>

        <div class="line">
            <div class="legend__bullets" style="background: #5A9591">
            </div>
            <div class="legend__text">
                Exemplo de legenda 2
            </div>
        </div>

        <div class="line">
            <div class="legend__bullets" style="background: #E5A253">
            </div>
            <div class="legend__text">
                Exemplo de legenda 3
            </div>
        </div>

        <div class="line">
            <div class="legend__bullets" style="background: #F1A1A1">
            </div>
            <div class="legend__text">
                Exemplo de legenda 4
            </div>
        </div>

    </div>
</div>
</div>

Section Box Mini Mapa

Source: docs/section_boxminimapa.md

Elementos que deve ser usado para esse tipo de componente: <div>.

Box Mini Map representa uma informação espacializada.

Example


   <div class='relatorio'>
<div class="container">

    <div class="section__boxmap">

        <div class="section__boxmap--maparea">
            <img src="src/assets/icons/bahia_svg.svg" width="100%" height="100%">
        </div>

        <div class="section__boxmap__infos">
            <div class="section__boxmap__infos--title">
                Região Metropolitana
            </div>

            <div class="section__boxmap__infos--value">
            Quesetrino Metrolopito
            </div>

            <div class="section__boxmap__infos--title">
                Microrregião
            </div>

            <div class="section__boxmap__infos--value">
                Quesetrino Metrolopito
            </div>

        </div>

    </div>

</div>
</div>

Section Calc

Source: docs/section_calc.md

Elementos que deve ser usado para esse tipo de componente: <div>.

Section Calculo representa os calculos utilizados para compor algum indice ou informação do relatório.

Example

   <div class='relatorio'>
<div class="container>

    <div class="section__calc">
        <div class="section__calc-title"> 
            Cálculo: 
        </div>
        <div class="section__calc-form">
            <h6>(reutilização + reciclagem + recuperação energética) </h6>
            <h6 style="border-top: 1px solid gray;">Geração de resíduos sólidos urbanos</h6>
        </div>
    </div>

</div>
</div>

Section Dados Percentuais

Source: docs/section_dadospercentuais.md

Elementos que deve ser usado para esse tipo de componente: <div>.

Tipos de dados percentuais:

Default:
Primario:

Example

   <div class='relatorio'>
    <div class='container'>
      <div class='section__infopercentual'>
        <div class="section__infopercentual--title">
            Percentual de preenchimento
        </div>
        <div class="section__infopercentual--value">
            50%
        </div>
        <div class="section__infopercentual--bar">
            <div class="section__infopercentual--barfill">
            </div>
        </div>
        <div class="section__infopercentual--status">
            ENTREGUE
        </div>
      </div>
    </div>
    </div>

Section Index

Source: docs/section_index.md

Elementos que deve ser usado para esse tipo de componente: <div>.

Section Index representa um conjunto de informações que se encontram dentro de uma seção, esse componentente é formado por um titulo do indice e o valor do indice.

Example

   <div class='relatorio'>
<div class="container>

    <div class="section__index">
        <div class="section__index-title">População Total Estimada</div>
        <div class="section__index-value"> 4.683 </div>
    </div>

</div>
</div>

Section Info-Data

Source: docs/section_infodados.md

Elementos que deve ser usado para esse tipo de componente: <div>.

Info-dados representa uma determinada informação, apresentando o título e o valor em número ou texto informativo referente à ela.

Example

   <div class='relatorio'>
<div class="container>

    <div class="section__infodata">
        <div class="section__infodata_title">População Total Estimada</div>
        <div class="section__infodata_value"> 4.683 </div>
    </div>

</div>
</div>

O valor em número pode ter um prefixo, para valores monetários, ou um sufixo para valores de área/volume (R$ e km2) por exemplo.

Para adicionar basta inserir um elemento div com a classe section__infodata__value--mon

Example

   <div class='relatorio'>
<div class="container>

    <div class="section__infodata">
        <div class="section__infodata_title">PIB per capita</div>

        <div class="section__infodata_content">
            <div class="section__infodata_value--mon">R$</div>
            <div class="section__infodata_value"> 8.513,89 </div>
        </div>

    </div>

</div>
</div>

classe section__infodata--little para km2

Example

   <div class='relatorio'>
<div class="container>

    <div class="section__infodata">
        <div class="section__infodata_title">Área territorial</div>  

        <div class="section__infodata_content">
            <div class="section__infodata_value"> 700 mil </div>
            <div class="section__infodata--little">km2</div>
        </div>

    </div>

</div>
</div>

Section Listas

Source: docs/section_listas.md

Elementos que devem ser usados para esse tipo de componente <div>

Section Lista de Unidades representa as unidades de destinação e as informações referentes a cada uma delas. Para cada unidade há um ícone, que pode ser um elemento <img> inserido no conteúdo de um elemento div com a classe section__list--icon, e informações adicionais, que podem ser inseridas com formato título + conteúdo, utilizando um elemento <div> com a classe section__list--item-title e section__list--item-content.

Example

   <div class='relatorio'>
    <div class="grid grid-3">

        <div class="section__list">

            <div class="section__list--icon">
                <img src="src/assets/icons/icon-area-favoraveis-A.png">
            </div>

            <div class="section__list--item-title">
                Nome da Unidade
            </div>

            <div class="section__list--item-content">
                Aterro Santo Amorim
            </div>

            <div class="section__list--item-title">
                Tipo
            </div>

            <div class="section__list--item-content">
                Aterro Sanitário
            </div>

            <div class="section__list--item-title">
                Operador
            </div>

            <div class="section__list--item-content">
                Prefeitura Municipal
            </div>

            <div class="section__list--item-title">
                Início e fim da operação
            </div>

            <div class="section__list--item-content">
                2001-2010
            </div>

            <div class="section__list--item-title">
                Recebe de outros municípios
            </div>

            <div class="section__list--item-content">
                Sim
            </div>

            <div class="section__source">
                Fonte: SINIR
            </div>

        </div>


        <div class="section__list">

            <div class="section__list--icon">
                <img src="src/assets/icons/icon-aterro-construcao-civil-B.png">
            </div>

            <div class="section__list--item-title">
                Nome da Zona
            </div>

            <div class="section__list--item-content">
                Aérea 01 Vila Formosa
            </div>

            <div class="section__list--item-title">
                Tipo da unidade de disposição
            </div>

            <div class="section__list--item-content">
                Classe II-A (aterro sanitário)
            </div>

            <div class="section__list--item-title">
                Endereço
            </div>

            <div class="section__list--item-content">
                BR-050 km 177
            </div>

        </div>

        <div class="section__list">

            <div class="section__list--iconStriped">
                <img src="src/assets/icons/striped_c.png">
            </div>

            <div class="section__list--item-title">
                Nome do passivo
            </div>

            <div class="section__list--item-content">
                Lixão de Cana-Brava
            </div>

            <div class="section__list--item-title">
                Tipo da unidade de disposição
            </div>

            <div class="section__list--item-content">
                Classe III-A (lixão encerrado)
            </div>

            <div class="section__list--item-title">
                Área Estimada
            </div>

            <div class="section__list--item-content">
                20.000,00 km²
            </div>

            <div class="section__list--item-title">
                Endereço
            </div>

            <div class="section__list--item-content">
                41301-110, Salvador - BA
            </div>

            <div class="section__list--item-title">
                Localização
            </div>

            <div class="section__list--item-content">
                -12.921060, -38.423313
            </div>

        </div>

    </div>
</div>

Um elemento <div> com a classe section__source pode ser adicionado ao fim da lista para indicar fonte.

Example

   <div class='relatorio'>
    <div class="section__source">
        Fonte: SINIR
    </div>
</div>

Example



   <div class='relatorio'>
    <div class="section__list">

        <div class="list-general">

            <div class="section__list--iconStriped">
                <img src="src/assets/icons/striped_1.png">
            </div>

            <div class="section__list--title">
                Dolore aliqua Lorem
            </div>

            <div class="section__list--content">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book
            </div>

        </div>

    </div>


    <div class="section__list">

        <div class="section__list--iconStriped">
            <img src="src/assets/icons/striped_2.png">
        </div>

        <div class="section__list--title">
            Dolore aliqua Lorem
        </div>

        <div class="list-general">

            <div>
                <div class="section__list--item-title">
                    CNPJ:
                </div>

                <div class="section__list--item-content">
                    19.526.155/0001-94
                </div>
            </div>

            <div>
                <div class="section__list--item-title">
                    Natureza Jurídica:
                </div>

                <div class="section__list--item-content">
                    Público
                </div>
            </div>

            <div>
                <div class="section__list--item-title">
                    Telefone:
                </div>

                <div class="section__list--item-content">
                    ----
                </div>
            </div>

        </div>
    </div>
    </div>

Section Subtitle

Source: docs/section_subtitle.md

Elementos que deve ser usado para esse tipo de componente: <div>.

Tipos de titulo seção:

Default: subtitulo da seção apenas com o titulo.
Primario: titulo-secao com titulo e informativo.

Example

   <div class='relatorio'>
<div class="container">
    <div class="section__subtitle">
        <h3> Características Gerais  </h3>
    </div>

</div>
</div>

O section subtitle aceita informação abaixo, para adicionar basta inserir uma div com a classe section__subtitle__info

Example

   <div class='relatorio'>
<div class="container">
    <div class="section__subtitle">
        <h3> Características Gerais  
          <div class='section__subtitle__info'> Info descritiva sobre o titulo </div>
        </h3>

    </div>

</div>
</div>

Section Subtitle Item

Source: docs/section_subtitle_item.md

Elementos que deve ser usado para esse tipo de componente: <div> <h3>.

#formtodo: produzir um texto;

Example

   <div class='relatorio'>
<div class="container">
    <div class="section__subtitle-item">
        <h3> Plano Municipal de Gestão integrada de Resíduos Sólidos</h3>
        <h3> Plano Municipal de Saneamento   </h3>
    </div>
</div>
</div>

Section Table

Source: docs/section_table.md

Elementos que deve ser usado para esse tipo de componente: <div> <table>.

#formtodo: produzir um texto;

Example

   <div class='relatorio'>
<div class="container">
    <div class="section__table--title">
        <h6><strong> Tabela 2 </strong>- Metas para Redução, Reutilização, Coleta Seletiva e Reciclagem </h6>
    </div>

    <table>
        <thead>
            <tr class="table__category--header">
                <th class="table__blank_space"> </th>
                <th class="table__blank_space"> </th>
                <th class="category__header" colspan="2"> META </th>
            </tr>

            <tr class="table--header">
                <th> Nome </th>
                <th> Valor Atual (t) </th>
                <th> Valor (t) </th>
                <th> Prazo </th>
            </tr>
        </thead>

        <tbody class="table__highlights">
            <tr class="border--bottom">
                <td> Redução </td>
                <td>    10.000</td>
                <td>   5.000 </td>
                <td>  2022  </td>
            </tr>

            <tr class="border--bottom">
                <td > Reutilização </td>
                <td>    8.000</td>
                <td>   9.000 </td>
                <td>  Janeiro de 2023  </td>
            </tr>

            <tr class="border--bottom">
                <td>  Coleta Seletiva   </td>
                <td>    8.000</td>
                <td>   9.000 </td>
                <td>  2 anos </td>
            </tr>

            <tr class="border--bottom">
                <td> Reciclagem </td>
                <td>    20.000</td>
                <td>   9.000 </td>
                <td>  6 meses </td>
            </tr>
        </tbody>
    </table>

    <div class="section__table--font">
         <div class="section__source">
            Fonte: SINIR
        </div>
    </div>

</div>
</div>

Section Table Residues

Source: docs/section_table_residues.md

Elementos que deve ser usado para esse tipo de componente: <div> <table>.

#formtodo: produzir um texto;

Example

   <div class='relatorio'>
<div class="container">
    <div class="section__table--title">
        <h6><strong> Tabela 2 </strong>- Metas para Redução, Reutilização, Coleta Seletiva e Reciclagem </h6>
    </div>

    <table>
        <thead>
            <tr class="table__category--header">
                <th class="table__blank_space"> </th>
                <th class="table__blank_space"> </th>
                <th class="category__header-res" colspan="2"> META </th>
            </tr>

            <tr class="table--header">
                <th> Nome </th>
                <th> Valor Atual (t) </th>
                <th> Valor (t) </th>
                <th> Prazo </th>
            </tr>
        </thead>

        <tbody class="table__highlights">
            <tr class="border--bottom">
                <td> Redução </td>
                <td>    10.000</td>
                <td>   5.000 </td>
                <td>  2022  </td>
            </tr>

            <tr class="border--bottom">
                <td > Reutilização </td>
                <td>    8.000</td>
                <td>   9.000 </td>
                <td>  Janeiro de 2023  </td>
            </tr>

            <tr class="border--bottom">
                <td>  Coleta Seletiva   </td>
                <td>    8.000</td>
                <td>   9.000 </td>
                <td>  2 anos </td>
            </tr>

            <tr class="border--bottom">
                <td> Reciclagem </td>
                <td>    20.000</td>
                <td>   9.000 </td>
                <td>  6 meses </td>
            </tr>
        </tbody>
    </table>

    <div class="section__table--font">
         <div class="section__source">
            Fonte: SINIR
        </div>
    </div>

</div>
</div>

Section Table Title

Source: docs/section_table_title.md

Elementos que deve ser usado para esse tipo de componente: <div> com a classe section__table--title.

Example

   <div class='relatorio'>
<div class="container">
    <div class="section__table--title">
        <h6><strong> Tabela 2 </strong>- Metas para Redução, Reutilização, Coleta Seletiva e Reciclagem </h6>
    </div>
</div>
</div>

Section Title

Source: docs/section_title.md

Elementos que deve ser usado para esse tipo de componente: <div>.

Tipos de titulo seção:

Default: section__title apenas o titulo.
Primario: section__title__info com titulo e informativo.

Example

   <div class='relatorio'>
    <div class='container'>
      <div class='section__title'>
              <h2 class='section__title__text'> Section Title </h2>
      </div>
    </div>
    </div>

O section title aceita subtitulos tb, para isso basta adicionar uma div com a classe section__title__info

Example

   <div class='relatorio'>
    <div class='container'>
      <div class='section__title'>
              <h2 class='section__title__text'> Section Title 
                <div class='section__title__info'> INFO SOBRE TITULO </div>
              </h2>

      </div>
    </div>
    </div>

Grid

Responsividade

Container

Grids

Alinhamento do Grid

Elements in Rows or Cols using Flex

Typography

Text Sizes

Others typefaces definition

Utilitys

Spacing

Sizer

Fonts

Opacity

Display

Hidden

show

Colors

Header Button Menu

Header Button Print

Header Button Reports and Panels

Header Date

Header Reference Year

Header Title

Legends

Section Box Mini Mapa

Section Calc

Section Dados Percentuais

Section Index

Section Info-Data

Section Listas

Section Subtitle

Section Subtitle Item

Section Table

Section Table Residues

Section Table Title

Section Title

Guia de Estilo