@ronymmoura/react-reports/public/Report.css

【WIP】React components to create reports

html, body, #root {
    width: 100%;
    height: 100%;
    margin: 0;
}

.report-page-body {
    background: rgb(204, 204, 204);
    height: 100%;
}

.report-page-body table {
    width: 100%;
}

.table-bordered td, .table-bordered th {
    border-color: #000;
}

.table thead th {
    border-color: #000;
}

.report-commands { 
    margin: 0 auto;
    width: 21cm;
    text-align: center;
    padding: 20px;
}

.report-commands .btn {
    margin: 10px;
}

.page {
    background: white;
    display: block;
}

.report-content.preview .page {
    margin: 0 auto;
    width: 21cm;
    padding: 10mm;
    margin-bottom: 0.5cm;
    box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
}

.page p {
    line-height: normal;
}

*, ::after, ::before {
    box-sizing: content-box !important;
}

.page > header,
.page > footer {
    display: none;
}

.report-content.preview > .page > header {
    display: block;
    top: 0;
    width: 100%;
}

.report-content.preview > .page > footer {
    display: block;
    bottom: 0;
    width: 100%;
}

.page-header-space,
.page-footer-space {
    display: none;
}

.report-content > header,
.report-content > footer {
    display: none;
}

.page-break {
    break-after: page;
}

@page {
    margin: 10mm
}

@media print {
    thead {
        display: table-header-group;
    }
    tfoot {
        display: table-footer-group;
    }

    .report-commands {
        display: none;
    }

    .page-header-space,
    .page-footer-space {
        display: block;
        margin-top: 10px;
    }

    .report-content > header,
    .report-content > footer {
        display: block;
        position: fixed;
    }

    .page > header,
    .page > footer {
        display: none;
    }

    button {
        display: none;
    }
    body {
        margin: 0;
    }
    .page {
        box-shadow: none;
        width: auto;
        padding: 0;
    }
}