mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-15 04:10:32 +00:00
259 lines
7.7 KiB
Plaintext
259 lines
7.7 KiB
Plaintext
extends ../PaperTemplateLayout.pug
|
|
|
|
block head
|
|
- var prefix = 'bc'
|
|
style.
|
|
.#{prefix}-root {
|
|
color: #111;
|
|
padding: 24px 30px;
|
|
font-size: 12px;
|
|
position: relative;
|
|
box-shadow: inset 0 4px 0px 0 var(--invoice-primary-color);
|
|
}
|
|
.#{prefix}-header{
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-flow: wrap;
|
|
flex: 0 0 auto;
|
|
-webkit-box-align: start;
|
|
align-items: start;
|
|
-webkit-box-pack: start;
|
|
justify-content: flex-start;
|
|
gap: 10px;
|
|
}
|
|
.#{prefix}-header-details{
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 20px;
|
|
flex: 1 1 0%;
|
|
}
|
|
.#{prefix}-big-title {
|
|
font-size: 30px;
|
|
margin: 0;
|
|
line-height: 1;
|
|
font-weight: 500;
|
|
color: #333;
|
|
}
|
|
.#{prefix}-logo-wrap img {
|
|
width: 100%;
|
|
height: 100%;
|
|
max-width: 260px;
|
|
max-height: 100px;
|
|
}
|
|
.#{prefix}-details {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
margin-bottom: 24px;
|
|
}
|
|
.#{prefix}-detail {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 12px;
|
|
}
|
|
.#{prefix}-detail__label {
|
|
min-width: 120px;
|
|
color: #333;
|
|
}
|
|
.#{prefix}-detail__value {
|
|
/* Styles for detail values */
|
|
}
|
|
.#{prefix}-address-root {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-flow: wrap;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
gap: 10px;
|
|
margin-bottom: 24px;
|
|
}
|
|
.#{prefix}-address-from {
|
|
flex: 1;
|
|
}
|
|
.#{prefix}-address-from__item {
|
|
/* Styles for items in the billed-from address */
|
|
}
|
|
.#{prefix}-address-to {
|
|
flex: 1;
|
|
}
|
|
.#{prefix}-address-to__item {
|
|
/* Styles for items in the billed-to address */
|
|
}
|
|
.#{prefix}-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
text-align: left;
|
|
font-size: inherit;
|
|
}
|
|
.#{prefix}-table__header {
|
|
font-weight: 400;
|
|
border-bottom: 1px solid #000;
|
|
padding: 2px 10px;
|
|
color: #333;
|
|
}
|
|
.#{prefix}-table__header:first-of-type{
|
|
padding-left: 0;
|
|
}
|
|
.#{prefix}-table__header:last-of-type{
|
|
padding-right: 0;
|
|
}
|
|
.#{prefix}-table__header--right {
|
|
text-align: right;
|
|
}
|
|
.#{prefix}-table__cell {
|
|
border-bottom: 1px solid #F6F6F6;
|
|
padding: 12px 10px;
|
|
}
|
|
.#{prefix}-table__cell:first-of-type{
|
|
padding-left: 0;
|
|
}
|
|
.#{prefix}-table__cell:last-of-type {
|
|
padding-right: 0;
|
|
}
|
|
.#{prefix}-table__cell--right {
|
|
text-align: right;
|
|
}
|
|
.#{prefix}-totals {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-left: auto;
|
|
width: 300px;
|
|
margin-bottom: 24px;
|
|
}
|
|
.#{prefix}-totals__item {
|
|
display: flex;
|
|
padding: 4px 0;
|
|
}
|
|
.#{prefix}-totals__item--border-gray {
|
|
border-bottom: 1px solid #DADADA;
|
|
}
|
|
.#{prefix}-totals__item--border-dark {
|
|
border-bottom: 1px solid #000;
|
|
}
|
|
.#{prefix}-totals__item--font-weight-bold {
|
|
font-weight: bold;
|
|
}
|
|
.#{prefix}-totals__item-label {
|
|
min-width: 160px;
|
|
}
|
|
.#{prefix}-totals__item-amount {
|
|
flex: 1 1 auto;
|
|
text-align: right;
|
|
}
|
|
.#{prefix}-paragraph {
|
|
margin-bottom: 20px;
|
|
}
|
|
.#{prefix}-paragraph__label {
|
|
color: #666;
|
|
}
|
|
.#{prefix}-paragraph__value {
|
|
/* Styles for values within the paragraph section */
|
|
}
|
|
block content
|
|
//- block head
|
|
div(class=`${prefix}-root`, style=`--invoice-primary-color: ${primaryColor}; --invoice-secondary-color: ${secondaryColor};`)
|
|
|
|
//- Header (includes big title, details and logo )
|
|
div(class=`${prefix}-header`)
|
|
//- Header details (includes big title and details )
|
|
div(class=`${prefix}-header-details`)
|
|
//- Title and company logo
|
|
h1(class=`${prefix}-big-title`) Invoice
|
|
|
|
//- Invoice details
|
|
div(class=`${prefix}-details`)
|
|
if showInvoiceNumber
|
|
div(class=`${prefix}-detail`)
|
|
div(class=`${prefix}-detail__label`) #{invoiceNumberLabel}
|
|
div(class=`${prefix}-detail__value`) #{invoiceNumber}
|
|
|
|
if showDateIssue
|
|
div(class=`${prefix}-detail`)
|
|
div(class=`${prefix}-detail__label`) #{dateIssueLabel}
|
|
div(class=`${prefix}-detail__value`) #{dateIssue}
|
|
|
|
if showDueDate
|
|
div(class=`${prefix}-detail`)
|
|
div(class=`${prefix}-detail__label`) #{dueDateLabel}
|
|
div(class=`${prefix}-detail__value`) #{dueDate}
|
|
|
|
//- Company logo
|
|
if showCompanyLogo && companyLogoUri
|
|
div(class=`${prefix}-logo-wrap`)
|
|
img(alt="Company logo", src=companyLogoUri)
|
|
|
|
//- Address section
|
|
div(class=`${prefix}-address-root`)
|
|
if showCompanyAddress
|
|
div(class=`${prefix}-address-from`)
|
|
div !{companyAddress}
|
|
|
|
if showCustomerAddress
|
|
div(class=`${prefix}-address-to`)
|
|
strong #{billedToLabel}
|
|
div !{customerAddress}
|
|
|
|
//- Invoice table
|
|
table(class=`${prefix}-table`)
|
|
thead
|
|
tr
|
|
th(class=`${prefix}-table__header`) #{lineItemLabel}
|
|
th(class=`${prefix}-table__header`) #{lineDescriptionLabel}
|
|
th(class=`${prefix}-table__header ${prefix}-table__header--right`) #{lineRateLabel}
|
|
th(class=`${prefix}-table__header ${prefix}-table__header--right`) #{lineTotalLabel}
|
|
tbody
|
|
each line in lines
|
|
tr
|
|
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__item ${prefix}-totals__item--border-gray`)
|
|
div(class=`${prefix}-totals__item-label`) #{subtotalLabel}
|
|
div(class=`${prefix}-totals__item-amount`) #{subtotal}
|
|
|
|
if showDiscount
|
|
div(class=`${prefix}-totals__item`)
|
|
div(class=`${prefix}-totals__item-label`) #{discountLabel}
|
|
div(class=`${prefix}-totals__item-amount`) #{discount}
|
|
|
|
if showTaxes
|
|
each tax in taxes
|
|
div(class=`${prefix}-totals__item`)
|
|
div(class=`${prefix}-totals__item-label`) #{tax.label}
|
|
div(class=`${prefix}-totals__item-amount`) #{tax.amount}
|
|
|
|
if showTotal
|
|
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}
|
|
|
|
if showPaymentMade
|
|
div(class=`${prefix}-totals__item`)
|
|
div(class=`${prefix}-totals__item-label`) #{paymentMadeLabel}
|
|
div(class=`${prefix}-totals__item-amount`) #{paymentMade}
|
|
|
|
if showBalanceDue
|
|
div(class=`${prefix}-totals__item ${prefix}-totals__item--border-dark ${prefix}-totals__item--font-weight-bold`)
|
|
div(class=`${prefix}-totals__item-label`) #{balanceDueLabel}
|
|
div(class=`${prefix}-totals__item-amount`) #{balanceDue}
|
|
|
|
//- Footer section
|
|
if showTermsConditions && termsConditions
|
|
div(class=`${prefix}-paragraph`)
|
|
if termsConditionsLabel
|
|
div(class=`${prefix}-paragraph__label`) #{termsConditionsLabel}
|
|
div(class=`${prefix}-paragraph__value`) #{termsConditions}
|
|
|
|
if showStatement && statement
|
|
div(class=`${prefix}-paragraph`)
|
|
if statementLabel
|
|
div(class=`${prefix}-paragraph__label`) #{statementLabel}
|
|
div(class=`${prefix}-paragraph__value`) #{statement}
|