invoice backend VAT & discount calculations

This commit is contained in:
Peter Papp
2021-05-04 09:44:55 +02:00
parent fbde515a40
commit 0332f8b1fb
13 changed files with 478 additions and 556 deletions

View File

@@ -1 +1,322 @@
*{outline:0;margin:0;padding:0;box-sizing:border-box;color:#1b2539}*,b,body,h1,h2,h3,h4,html,p,span,strong{font-family:Nunito,serif}html{font-size:100%}.row{display:-webkit-flex;-webkit-flex-wrap:nowrap;width:100%}.row.spaces{margin:0 -15px}.row.spaces div[class^=col-]{padding:0 15px}.row div[class^=col-]{-webkit-flex-grow:1}.row div[class^=col-].align-right{text-align:right}.row .col-left,.row .col-right{width:49%}.row.align-center div[class^=col-]{-webkit-align-self:center}.row.align-bottom div[class^=col-]{-webkit-align-self:flex-end}.invoice-header .col-left,.invoice-header .col-right{display:inline-block}.invoice-header .logo{margin-bottom:5px;display:block;width:260px}.invoice-header .email,.invoice-header .phone{display:block;font-size:.7em;font-weight:400;margin-bottom:2px}.invoice-header h1{line-height:1;padding-bottom:5px;font-size:1.6em}.invoice-header h2{color:#bc30fd;font-weight:600;font-size:1.1em}.invoice-header h4{color:#1b2539;font-weight:600;font-size:.7em}.supplier{float:right;max-width:600px}.supplier .box{background:#f4f5f6;border-radius:15px;padding:20px}.supplier .dates{margin-top:10px}.supplier .dates p{text-align:right;font-size:.9em}.special-wrapper{padding-bottom:25px;border-bottom:1px dashed #d8d8d8;margin:0 -5px 25px}.special-wrapper .special-item{background:#f4f5f6;border-radius:8px;display:inline-block;width:20.9%;margin:0 5px}.special-wrapper .special-item:first-child{width:31.5%}.special-wrapper .special-item .padding{padding:10px 15px}.special-wrapper b{color:#bc30fd;font-size:.9em;font-weight:600;margin-bottom:5px;display:block}.special-wrapper span{font-size:1em;font-weight:600;word-break:break-word;overflow-wrap:break-word;width:100%;display:block}.table{table-layout:fixed;border-collapse:collapse;width:100%}.table .table-row:nth-child(2n){background-color:#f4f5f6;border-radius:12px}.table .table-row .table-cell{text-align:left;word-break:break-word;padding:5px}.table .table-row .table-cell a,.table .table-row .table-cell span{word-break:break-word}.table .table-row .table-cell:first-child{width:280px;padding-left:15px;padding-right:15px}.table .table-row .table-cell:last-child{text-align:right;padding-right:15px}.table tbody .table-row{padding:5px 0}.table thead{background-color:#fff!important;padding-bottom:15px;border-bottom:0}.table thead .table-cell span{color:#bc30fd;font-weight:600;font-size:.9em;white-space:nowrap}.table .table-cell{word-break:break-all}.table .table-cell a,.table .table-cell span{vertical-align:middle;font-weight:500;font-size:.9em}.summary{max-width:300px;margin:20px 0 20px auto;text-align:right}.summary li{padding:2px 0;display:block}.summary li b,.summary li span{white-space:nowrap}.summary li .col-full{width:50%;display:inline-block}.summary span{font-size:1em}.summary b{font-size:1.3em;font-weight:600}.notes{padding-top:25px;border-top:1px dashed #d8d8d8}.invoice-author{display:-webkit-flex;-webkit-justify-content:space-between;-webkit-align-items:flex-end;padding-bottom:25px}.invoice-author .sign{text-align:right}.invoice-author img{max-width:240px;display:block;margin:0 0 0 auto}.invoice-footer{padding-top:15px;border-top:1px dashed #d8d8d8;text-align:center}.invoice-footer p{font-size:1em}.invoice-footer a,h3{color:#bc30fd}h3{font-weight:600;padding-bottom:8px}h3,p,span{font-size:1em}p,span{font-weight:400;padding-bottom:4px;color:#1b2539}.highlight{color:#bc30fd}header,section{border-bottom:1px dashed #d8d8d8;padding-bottom:25px;margin-bottom:25px}.address,.number{display:block;font-weight:600}.content-box{padding-bottom:15px}.thank-you{text-align:center;font-size:22px;margin-top:20px;margin-bottom:60px}footer .stamp{max-width:200px;display:block;margin:0 0 0 auto}footer div{align-self:flex-end}footer h3{display:inline-block}
* {
outline: 0;
margin: 0;
padding: 0;
box-sizing: border-box;
color: #1b2539
}
*, b, body, h1, h2, h3, h4, html, p, span, strong {
font-family: Nunito, serif
}
html {
font-size: 100%
}
.row {
display: -webkit-flex;
-webkit-flex-wrap: nowrap;
width: 100%
}
.row.spaces {
margin: 0 -15px
}
.row.spaces div[class^=col-] {
padding: 0 15px
}
.row div[class^=col-] {
-webkit-flex-grow: 1
}
.row div[class^=col-].align-right {
text-align: right
}
.row .col-left, .row .col-right {
width: 49%
}
.row.align-center div[class^=col-] {
-webkit-align-self: center
}
.row.align-bottom div[class^=col-] {
-webkit-align-self: flex-end
}
.invoice-header .col-left, .invoice-header .col-right {
display: inline-block
}
.invoice-header .logo {
margin-bottom: 5px;
display: block;
width: 260px
}
.invoice-header .email, .invoice-header .phone {
display: block;
font-size: .7em;
font-weight: 400;
margin-bottom: 2px
}
.invoice-header h1 {
line-height: 1;
padding-bottom: 5px;
font-size: 1.6em
}
.invoice-header h2 {
color: #bc30fd;
font-weight: 600;
font-size: 1.1em
}
.invoice-header h4 {
color: #1b2539;
font-weight: 600;
font-size: .7em
}
.supplier {
float: right;
max-width: 600px
}
.supplier .box {
background: #f4f5f6;
border-radius: 15px;
padding: 20px
}
.supplier .dates {
margin-top: 10px
}
.supplier .dates p {
text-align: right;
font-size: .9em
}
.special-wrapper {
padding-bottom: 20px;
border-bottom: 1px dashed #d8d8d8;
margin: 0 -5px 25px
}
.special-wrapper .special-item {
background: #f4f5f6;
border-radius: 8px;
display: inline-block;
width: 20.9%;
margin: 0 5px
}
.special-wrapper .special-item:first-child {
width: 31.5%
}
.special-wrapper .special-item .padding {
padding: 10px 15px
}
.special-wrapper b {
color: #bc30fd;
font-size: .9em;
font-weight: 600;
margin-bottom: 5px;
display: block
}
.special-wrapper span {
font-size: 1em;
font-weight: 600;
word-break: break-word;
overflow-wrap: break-word;
width: 100%;
display: block
}
.table {
table-layout: fixed;
border-collapse: collapse;
width: 100%
}
.table .table-row:nth-child(2n) {
background-color: #f4f5f6;
border-radius: 12px
}
.table .table-row .table-cell {
text-align: left;
word-break: break-word;
padding: 5px
}
.table .table-row .table-cell a, .table .table-row .table-cell span {
word-break: break-word
}
.table .table-row .table-cell:first-child {
width: 280px;
padding-left: 15px;
padding-right: 15px
}
.table .table-row .table-cell:last-child {
text-align: right;
padding-right: 15px
}
.table tbody .table-row {
padding: 5px 0
}
.table thead {
background-color: #fff !important;
padding-bottom: 15px;
border-bottom: 0
}
.table thead .table-cell span {
color: #bc30fd;
font-weight: 600;
font-size: .9em;
white-space: nowrap
}
.table .table-cell {
word-break: break-all
}
.table .table-cell a, .table .table-cell span {
vertical-align: middle;
font-weight: 600;
font-size: .9em
}
.summary {
max-width: 300px;
margin: 15px 0 10px auto;
text-align: right
}
.summary li {
padding: 2px 0;
display: block
}
.summary li b, .summary li span {
white-space: nowrap
}
.summary li .col-full {
width: 50%;
display: inline-block
}
.summary span {
font-size: 1em
}
.summary b {
font-size: 1.3em;
font-weight: 600
}
.notes {
padding-top: 20px;
border-top: 1px dashed #d8d8d8
}
.invoice-author {
display: -webkit-flex;
-webkit-justify-content: space-between;
-webkit-align-items: flex-end;
padding-bottom: 25px
}
.invoice-author .sign {
text-align: right
}
.invoice-author img {
max-height: 125px;
display: block;
margin: 0 0 0 auto
}
.invoice-footer {
padding-top: 15px;
border-top: 1px dashed #d8d8d8;
text-align: center
}
.invoice-footer p {
font-size: 1em
}
.invoice-footer a, h3 {
color: #bc30fd
}
h3 {
font-weight: 600;
padding-bottom: 8px
}
h3, p, span {
font-size: 1em
}
p, span {
font-weight: 600;
padding-bottom: 4px;
color: #1b2539
}
.highlight {
color: #bc30fd
}
header, section {
border-bottom: 1px dashed #d8d8d8;
padding-bottom: 10px;
margin-bottom: 20px
}
.address, .number {
display: block;
font-weight: 600
}
.content-box {
padding-bottom: 15px
}
.thank-you {
text-align: center;
font-size: 22px;
margin-top: 20px;
margin-bottom: 60px
}
footer .stamp {
max-width: 200px;
display: block;
margin: 0 0 0 auto
}
footer div {
align-self: flex-end
}
footer h3 {
display: inline-block
}