mirror of
https://github.com/invoiceninja/invoiceninja.git
synced 2024-11-10 21:22:58 +01:00
Elegant: Line height, header spacing
This commit is contained in:
parent
31065b10ee
commit
2910f35f21
@ -2,6 +2,7 @@
|
||||
:root {
|
||||
--primary-color: $primary_color;
|
||||
--secondary-color: $secondary_color;
|
||||
--line-height: 1.6;
|
||||
}
|
||||
|
||||
body {
|
||||
@ -23,14 +24,14 @@
|
||||
}
|
||||
|
||||
.company-logo {
|
||||
max-width: 65%;
|
||||
max-width: 55%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.company-logo-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
padding-bottom: 2.5rem;
|
||||
padding-bottom: 60px;
|
||||
border-bottom: 4px solid;
|
||||
}
|
||||
|
||||
@ -39,12 +40,15 @@
|
||||
}
|
||||
|
||||
.client-entity-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: 1.8fr 1.2fr;
|
||||
display: flex;
|
||||
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 {
|
||||
display: block;
|
||||
font-size: 1.5rem;
|
||||
@ -56,6 +60,8 @@
|
||||
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 #company-details,
|
||||
.client-entity-wrapper .wrapper-left-side #company-address {
|
||||
@ -121,11 +127,18 @@
|
||||
#product-table > tbody > tr > td,
|
||||
#delivery-note-table > tbody > tr > td,
|
||||
#task-table > tbody > tr > td {
|
||||
border-bottom: 1px solid;
|
||||
border-top: 1px solid;
|
||||
border-bottom: 1pt solid;
|
||||
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,
|
||||
#delivery-note-table > tbody > tr > td:last-child,
|
||||
#task-table > tbody > tr > td:last-child {
|
||||
@ -236,24 +249,21 @@
|
||||
|
||||
<div id="body">
|
||||
<div class="company-logo-wrapper">
|
||||
<img
|
||||
class="company-logo"
|
||||
src="$company.logo"
|
||||
alt="$company.name logo"
|
||||
/>
|
||||
<img class="company-logo" src="$company.logo" alt="$company.name logo">
|
||||
</div>
|
||||
|
||||
<hr class="double-border"/>
|
||||
<hr class="double-border">
|
||||
|
||||
<div class="client-entity-wrapper">
|
||||
<div class="wrapper-left-side">
|
||||
<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>
|
||||
|
||||
<div class="company-info">
|
||||
<h2 class="wrapper-info-text">$from_label</h2>
|
||||
<div id="company-details"></div>
|
||||
<div id="company-address"></div>
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user