csx/tests/pdf/index.pcss

@import "./fonts.pcss";

@page {
    size: A4 landscape;
    margin: 0;
}

@media print {
    html {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: none !important;
    }

    body {
        width: 297mm;
        height: 210mm;
        size: landscape A4;
        border: none !important;
        background: none !important;
        padding: 0 !important;
    }
}

html{
    background: #aeaeae;
    font-family: 'DINPro';
    font-size: 10.5pt;
}
body{
    background: white;
    margin: 0;
    display: flex;
    width: 289mm;
    height: 202mm;
    border: 1px solid black;
    padding: 4mm;
}

.kaarten-print{
    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.kaarten-pair{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    justify-content: space-evenly;
}

.kaart{
    display: flex;
    flex-direction: column;
    max-width: 148mm;
    padding: 1em;

    & .header{
        display: flex;
        flex-direction: row;

        & .logo{
            flex: 0 1 35%;
            max-width: 35%;
        }

        & .header-info{
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 1 1 auto;

            & .title{
                font-size: 200%;
                font-weight: bold;
            }

            & .sub-title{
               font-weight: 700;
                color: #666;
            }
        }
    }

    & .content{
        display: flex;
        flex-direction: column;

        & table{
            margin-bottom: .75em;
        }

        & .order >tr >td{
            padding-bottom: .25em;
        }

        & .product-name{
            font-weight: 600;
            width: 6em;
        }
        & .product-multiplier{
            font-weight: 600;
            width: 1em;
        }
        & .product-price, & .total-label{
            font-weight: 600;
            text-align: right;
            width: 4em;
        }

        & .payment-options{
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;

            & .option{
                padding: 0 0 1em;
            }
        }

    }

    & .footer{
        align-self: center;
        display: flex;
        flex-direction: column;
        align-items: center;

        & .form-for{
            font-weight: bold;
        }
        & .contact{
            font-size: 90%;
        }

    }
}

input[type=text]{
    border: none;
    border-bottom: 1px dashed darkgray;

    width: calc(100% - 1em);
}

input[type=checkbox]{
    -webkit-appearance: none;
    border: 1px solid #999;
    padding: 9px;
    display: inline-block;
    position: relative;
    top: 6px;
    margin: 3px 6px;
}