mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-17 13:20:31 +00:00
fix: pdf templates
This commit is contained in:
@@ -44,8 +44,7 @@ block head
|
||||
.#{prefix}-terms-item__value {
|
||||
/* Styles for the term value */
|
||||
}
|
||||
|
||||
.#{prefix}-group {
|
||||
.#{prefix}-address-section{
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
@@ -56,12 +55,9 @@ block head
|
||||
gap: 10px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
|
||||
.#{prefix}-address {
|
||||
/* Styles for each address block */
|
||||
.#{prefix}-address-section > * {
|
||||
flex: 1 1;
|
||||
}
|
||||
|
||||
.#{prefix}-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
@@ -124,15 +120,12 @@ block head
|
||||
flex: 1 1 auto;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.#{prefix}-statement {
|
||||
/* Styles for customer note/terms statement section */
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.#{prefix}-statement__label {
|
||||
/* Styles for statement label */
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.#{prefix}-statement__value {
|
||||
/* Styles for statement value */
|
||||
}
|
||||
@@ -156,7 +149,7 @@ block content
|
||||
div(class=`${prefix}-terms-item__label`) #{creditNoteDateLabel}:
|
||||
div(class=`${prefix}-terms-item__value`) #{creditNoteDate}
|
||||
|
||||
div(class=`${prefix}-group`)
|
||||
div(class=`${prefix}-address-section`)
|
||||
if showBilledFromAddress
|
||||
div(class=`${prefix}-address`)
|
||||
strong #{companyName}
|
||||
@@ -169,30 +162,30 @@ block content
|
||||
div #{address}
|
||||
|
||||
table(class=`${prefix}-table`)
|
||||
thead(class=`${prefix}-table__header`)
|
||||
thead
|
||||
tr
|
||||
th #{'Item'}
|
||||
th #{'Description'}
|
||||
th #{'Rate'}
|
||||
th #{'Total'}
|
||||
th(class=`${prefix}-table__header`) #{'Item'}
|
||||
th(class=`${prefix}-table__header`) #{'Description'}
|
||||
th(class=`${prefix}-table__header`) #{'Rate'}
|
||||
th(class=`${prefix}-table__header`) #{'Total'}
|
||||
tbody
|
||||
each line in lines
|
||||
tr(class=`${prefix}-table__row`)
|
||||
td #{line.item}
|
||||
td #{line.description}
|
||||
td(class=`${prefix}-table__column--right`) #{line.rate}
|
||||
td(class=`${prefix}-table__column--right`) #{line.total}
|
||||
td(class=`${prefix}-table__cell`) #{line.item}
|
||||
td(class=`${prefix}-table__cell`) #{line.description}
|
||||
td(class=`${prefix}-table__cell--right`) #{line.rate}
|
||||
td(class=`${prefix}-table__cell--right`) #{line.total}
|
||||
|
||||
div(class=`${prefix}-totals`)
|
||||
if showSubtotal
|
||||
div(class=`${prefix}-totals__item ${prefix}-totals__item--border-gray`)
|
||||
div #{subtotalLabel}:
|
||||
div #{subtotal}
|
||||
div(class=`${prefix}-totals__item-label`) #{subtotallabel}
|
||||
div(class=`${prefix}-totals__item-amount`) #{subtotal}
|
||||
|
||||
if showTotal
|
||||
div(class=`${prefix}-totals__item ${prefix}-totals__item--border-dark`)
|
||||
div #{totalLabel}:
|
||||
div #{total}
|
||||
div(class=`${prefix}-totals__item-amount`) #{totalLabel}:
|
||||
div(class=`${prefix}-totals__item-label`) #{total}
|
||||
|
||||
if showCustomerNote
|
||||
div(class=`${prefix}-statement`)
|
||||
|
||||
@@ -26,7 +26,7 @@ block head
|
||||
top: 26px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.#{prefix}-terms-list {
|
||||
.#{prefix}-terms {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
@@ -43,7 +43,7 @@ block head
|
||||
}
|
||||
.#{prefix}-terms-item__value {
|
||||
}
|
||||
.#{prefix}-address-section{
|
||||
.#{prefix}-addresses{
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
@@ -54,6 +54,9 @@ block head
|
||||
gap: 10px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.#{prefix}-addresses > * {
|
||||
flex: 1 1;
|
||||
}
|
||||
.#{prefix}-address {
|
||||
}
|
||||
.#{prefix}-address__item {
|
||||
@@ -120,8 +123,10 @@ block head
|
||||
text-align: right;
|
||||
}
|
||||
.#{prefix}-statement {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.#{prefix}-statement__label {
|
||||
color: #666;
|
||||
}
|
||||
.#{prefix}-statement__value {
|
||||
}
|
||||
@@ -150,7 +155,7 @@ block content
|
||||
div(class=`${prefix}-terms-item__value`) #{expirationDate}
|
||||
|
||||
//- Addresses (Group section)
|
||||
div(class=`${prefix}-address-section`)
|
||||
div(class=`${prefix}-addresses`)
|
||||
if showBilledFromAddress
|
||||
div(class=`${prefix}-address`)
|
||||
strong #{companyName}
|
||||
@@ -182,21 +187,21 @@ block content
|
||||
//- Totals section
|
||||
div(class=`${prefix}-totals`)
|
||||
if showSubtotal
|
||||
div(class=`${prefix}-totals__item`)
|
||||
div(class=`${prefix}-totals__item ${prefix}-totals__item--border-gray`)
|
||||
div(class=`${prefix}-totals__item-label`) #{subtotalLabel}
|
||||
div(class=`${prefix}-totals__item-amount`) #{subtotal}
|
||||
if showTotal
|
||||
div(class=`${prefix}-totals__item`)
|
||||
div(class=`${prefix}-totals__item ${prefix}-totals__item--border-dark ${prefix}-totals__item--font-weight-bold`)
|
||||
div(class=`${prefix}-totals__item-label`) #{totalLabel}
|
||||
div(class=`${prefix}-totals__item-amount`) #{total}
|
||||
|
||||
//- Statements section
|
||||
if showCustomerNote
|
||||
if showCustomerNote && customerNote
|
||||
div(class=`${prefix}-statement`)
|
||||
div(class=`${prefix}-statement__label`) #{customerNoteLabel}
|
||||
div(class=`${prefix}-statement__value`) #{customerNote}
|
||||
|
||||
if showTermsConditions
|
||||
if showTermsConditions && termsConditions
|
||||
div(class=`${prefix}-statement`)
|
||||
div(class=`${prefix}-statement__label`) #{termsConditionsLabel}
|
||||
div(class=`${prefix}-statement__value`) #{termsConditions}
|
||||
@@ -229,13 +229,13 @@ block content
|
||||
div(class=`${prefix}-totals__item-amount`) #{balanceDue}
|
||||
|
||||
//- Footer section
|
||||
if showTermsConditions
|
||||
if showTermsConditions && termsConditions
|
||||
div(class=`${prefix}-paragraph`)
|
||||
if termsConditionsLabel
|
||||
div(class=`${prefix}-paragraph__label`) #{termsConditionsLabel}
|
||||
div(class=`${prefix}-paragraph__value`) #{termsConditions}
|
||||
|
||||
if showStatement
|
||||
if showStatement && statement
|
||||
div(class=`${prefix}-paragraph`)
|
||||
if statementLabel
|
||||
div(class=`${prefix}-paragraph__label`) #{statementLabel}
|
||||
|
||||
@@ -41,9 +41,6 @@ block head
|
||||
.#{prefix}-terms-item__label{
|
||||
min-width: 120px;
|
||||
color: #333;
|
||||
}
|
||||
.#{prefix}-group{
|
||||
|
||||
}
|
||||
.#{prefix}-addresses{
|
||||
box-sizing: border-box;
|
||||
@@ -95,12 +92,6 @@ block head
|
||||
}
|
||||
.#{prefix}-table__cell--right {
|
||||
text-align: right;
|
||||
}
|
||||
.#{prefix}-table__column{
|
||||
|
||||
}
|
||||
.#{prefix}-table__column--right{
|
||||
|
||||
}
|
||||
.#{prefix}-totals {
|
||||
display: flex;
|
||||
@@ -177,11 +168,11 @@ block content
|
||||
|
||||
div(class=`${prefix}-totals`)
|
||||
if showSubtotal
|
||||
div(class=`${prefix}-totals__item`)
|
||||
div(class=`${prefix}-totals__item ${prefix}-totals__item--gray-border`)
|
||||
div(class=`${prefix}-totals__item-label`) #{subtotalLabel}
|
||||
div(class=`${prefix}-totals__item-amount`) #{subtotal}
|
||||
|
||||
if showTotal
|
||||
div(class=`${prefix}-totals__item`)
|
||||
div(class=`${prefix}-totals__item ${prefix}-totals__item--dark-border`)
|
||||
div(class=`${prefix}-totals__item-label`) #{totalLabel}
|
||||
div(class=`${prefix}-totals__item-amount`) #{total}
|
||||
|
||||
@@ -4,21 +4,13 @@ block head
|
||||
- var prefix = 'bc'
|
||||
style.
|
||||
.#{prefix}-root {
|
||||
color: #111;
|
||||
color: #000;
|
||||
padding: 24px 30px;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
box-shadow: inset 0 4px 0px 0 var(--invoice-primary-color);
|
||||
}
|
||||
.#{prefix}-logo-wrap {
|
||||
font-size: 60px;
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
margin-bottom: 25px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
.#{prefix}-big-title {
|
||||
height: 120px;
|
||||
width: 120px;
|
||||
position: absolute;
|
||||
@@ -26,6 +18,14 @@ block head
|
||||
top: 26px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.#{prefix}-big-title {
|
||||
font-size: 60px;
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
margin-bottom: 25px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
.#{prefix}-terms-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -53,6 +53,9 @@ block head
|
||||
gap: 10px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.#{prefix}-address-section > * {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.#{prefix}-address {}
|
||||
.#{prefix}-table {
|
||||
width: 100%;
|
||||
@@ -99,8 +102,12 @@ block head
|
||||
display: flex;
|
||||
padding: 4px 0;
|
||||
}
|
||||
.#{prefix}-totals__line--gray-border {}
|
||||
.#{prefix}-totals__line--dark-border {}
|
||||
.#{prefix}-totals__line--gray-border {
|
||||
border-bottom: 1px solid #DADADA;
|
||||
}
|
||||
.#{prefix}-totals__line--dark-border {
|
||||
border-bottom: 1px solid #000;
|
||||
}
|
||||
.#{prefix}-totals__line__label {
|
||||
min-width: 160px;
|
||||
}
|
||||
@@ -161,30 +168,31 @@ block content
|
||||
tbody
|
||||
each line in lines
|
||||
tr(class=`${prefix}-table__row`)
|
||||
td(class=`${prefix}-table__column`)= line.item
|
||||
td(class=`${prefix}-table__column`)= line.description
|
||||
td(class=`${prefix}-table__column ${prefix}-table__column--right`)= line.rate
|
||||
td(class=`${prefix}-table__column ${prefix}-table__column--right`)= line.total
|
||||
td(class=`${prefix}-table__cell`)= line.item
|
||||
td(class=`${prefix}-table__cell`)= line.description
|
||||
td(class=`${prefix}-table__cell${prefix}-table__cell--right`)= line.rate
|
||||
td(class=`${prefix}-table__cell${prefix}-table__cell--right`)= line.total
|
||||
|
||||
//- Totals Section
|
||||
div(class=`${prefix}-totals`)
|
||||
if showSubtotal
|
||||
div(class=`${prefix}-totals__line #{prefix}-totals__line--gray-border`)
|
||||
div(class=`${prefix}-totals__line ${prefix}-totals__line--gray-border`)
|
||||
span(class=`${prefix}-totals__line__label`)= subtotalLabel
|
||||
span(class=`${prefix}-totals__line__amount`)= subtotal
|
||||
|
||||
if showTotal
|
||||
div(class=`${prefix}-totals__line #{prefix}-totals__line--dark-border`)
|
||||
div(class=`${prefix}-totals__line ${prefix}-totals__line--dark-border`)
|
||||
span(class=`${prefix}-totals__line__label`)= totalLabel
|
||||
span(class=`${prefix}-totals__line__amount`)= total
|
||||
|
||||
//- Customer Note Section
|
||||
if showCustomerNote
|
||||
div(class=`${prefix}-statement`)
|
||||
span(class=`${prefix}-statement__label`)= customerNoteLabel
|
||||
p(class=`${prefix}-statement__value`)= customerNote
|
||||
div(class=`${prefix}-statement__label`)= customerNoteLabel
|
||||
div(class=`${prefix}-statement__value`)= customerNote
|
||||
|
||||
//- Terms & Conditions Section
|
||||
if showTermsConditions
|
||||
div(class=`${prefix}-statement`)
|
||||
span(class=`${prefix}-statement__label`)= termsConditionsLabel
|
||||
p(class=`${prefix}-statement__value`)= termsConditions
|
||||
div(class=`${prefix}-statement__label`)= termsConditionsLabel
|
||||
div(class=`${prefix}-statement__value`)= termsConditions
|
||||
|
||||
Reference in New Issue
Block a user