Cutlery/invoiceninja
1
0
Fork 0
mirror of https://github.com/invoiceninja/invoiceninja.git synced 2025-06-01 07:54:36 -04:00
Code Issues Packages Projects Releases Wiki Activity

Elegant: Line height, header spacing

Browse Source
This commit is contained in:
Benjamin Beganović 2021-08-18 12:17:48 +02:00
parent 31065b10ee
commit 2910f35f21
1 changed files with 27 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
resources/views/pdf-designs/elegant.html
View File

@ -2,6 +2,7 @@
:root { :root {
--primary-color: $primary_color; --primary-color: $primary_color;
--secondary-color: $secondary_color; --secondary-color: $secondary_color;
--line-height: 1.6;
} }
body { body {
@ -23,14 +24,14 @@
} }
.company-logo { .company-logo {
max-width: 65%; max-width: 55%;
margin-left: auto;
margin-right: auto;
display: block;
} }
.company-logo-wrapper { .company-logo-wrapper {
display: flex; padding-bottom: 60px;
flex-direction: row;
justify-content: center;
padding-bottom: 2.5rem;
border-bottom: 4px solid; border-bottom: 4px solid;
} }
@ -39,12 +40,15 @@
} }
.client-entity-wrapper { .client-entity-wrapper {
display: grid; display: flex;
grid-template-columns: 1.8fr 1.2fr;
margin-top: 3rem; margin-top: 3rem;
gap: 10px; gap: 20px;
margin-left: 10px;
line-height: var(--line-height);
} }
#entity-details p { margin-right: 20px; margin-top: 5px; }
.client-entity-wrapper .wrapper-info-text { .client-entity-wrapper .wrapper-info-text {
display: block; display: block;
font-size: 1.5rem; font-size: 1.5rem;
@ -56,6 +60,8 @@
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
} }
.text-with-client { margin-right: 15px; }
.client-entity-wrapper .wrapper-left-side #client-details, .client-entity-wrapper .wrapper-left-side #client-details,
.client-entity-wrapper .wrapper-left-side #company-details, .client-entity-wrapper .wrapper-left-side #company-details,
.client-entity-wrapper .wrapper-left-side #company-address { .client-entity-wrapper .wrapper-left-side #company-address {
@ -121,11 +127,18 @@
#product-table > tbody > tr > td, #product-table > tbody > tr > td,
#delivery-note-table > tbody > tr > td, #delivery-note-table > tbody > tr > td,
#task-table > tbody > tr > td { #task-table > tbody > tr > td {
border-bottom: 1px solid; border-bottom: 1pt solid;
border-top: 1px solid;
padding: 1rem; padding: 1rem;
} }
#product-table > tbody > tr:first-child > td,
#delivery-note-table > tbody > tr:first-child > td,
#task-table > tbody > tr:first-child > td {
border-top: 1pt solid !important;
padding: 1rem;
}
#product-table > tbody > tr > td:last-child, #product-table > tbody > tr > td:last-child,
#delivery-note-table > tbody > tr > td:last-child, #delivery-note-table > tbody > tr > td:last-child,
#task-table > tbody > tr > td:last-child { #task-table > tbody > tr > td:last-child {
@ -236,24 +249,21 @@
<div id="body"> <div id="body">
<div class="company-logo-wrapper"> <div class="company-logo-wrapper">
<img <img class="company-logo" src="$company.logo" alt="$company.name logo">
class="company-logo"
src="$company.logo"
alt="$company.name logo"
/>
</div> </div>
<hr class="double-border"/> <hr class="double-border">
<div class="client-entity-wrapper"> <div class="client-entity-wrapper">
<div class="wrapper-left-side"> <div class="wrapper-left-side">
<div class="text-with-client"> <div class="text-with-client">
<h2 class="wrapper-info-text">$balance_due_label</h2> <h2 class="wrapper-info-text">$to_label</h2>
<div id="client-details"></div> <div id="client-details"></div>
</div> </div>
<div class="company-info"> <div class="company-info">
<h2 class="wrapper-info-text">$from_label</h2>
<div id="company-details"></div> <div id="company-details"></div>
<div id="company-address"></div> <div id="company-address"></div>
</div> </div>