PDF Invoice

2026-04-30 03:25:59 +00:00 · 2021-04-24 07:40:20 +02:00
parent 9a5f9fe49d
commit e65e3e88d7
8 changed files with 864 additions and 239 deletions
@@ -0,0 +1,304 @@
+$primary-color: #bc30fd;
+$text-color: #1B2539;
+$border-color: #D8D8D8;
+$background-color: #F4F5F6;
+$border-radius: 15px;
+
+@mixin font-size($size) {
+    font-size:(($size*1.6)/16) + 0em;
+}
+
+body {
+    padding: 25px;
+}
+
+* {
+    outline: 0;
+    margin: 0;
+    padding: 0;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    color: $text-color;
+}
+
+*, html, body, h1, h2, h3, h4, p, span, b, strong {
+    font-family: 'Nunito', serif;
+}
+
+html {
+    font-size: 100%;
+}
+
+.row {
+    display: flex;
+    flex-wrap: nowrap;
+
+    &.spaces {
+        margin: 0 -15px;
+
+        div[class^='col-'] {
+            padding: 0 15px;
+        }
+    }
+
+    div[class^='col-'] {
+        flex-grow: 1;
+
+        &.align-right {
+            text-align: right;
+        }
+    }
+
+    .col-left, .col-right {
+        width: 50%;
+    }
+
+    &.align-center div[class^='col-'] {
+        align-self: center;
+    }
+    &.align-bottom div[class^='col-'] {
+        align-self: flex-end;
+    }
+}
+
+.invoice-header {
+
+    .logo {
+        margin-bottom: 5px;
+        display: block;
+        width: 260px;
+    }
+
+    .email, .phone {
+        display: block;
+        @include font-size(7);
+        font-weight: 400;
+        margin-bottom: 2px;
+    }
+
+    h1 {
+        line-height: 1;
+        padding-bottom: 5px;
+        @include font-size(16);
+    }
+
+    h2 {
+        color: $primary-color;
+        font-weight: 600;
+        @include font-size(11);
+    }
+
+    h4 {
+        color: $text-color;
+        font-weight: 600;
+        @include font-size(7);
+    }
+}
+
+.supplier {
+    float: right;
+    max-width: 600px;
+
+    .box {
+        background: $background-color;
+        border-radius: $border-radius;
+        padding: 20px;
+    }
+
+    .dates {
+        margin-top: 10px;
+
+        p {
+            text-align: right;
+            @include font-size(9);
+        }
+    }
+}
+
+.special-wrapper {
+    display: grid;
+    grid-template-columns: 2fr 1fr 1fr 1fr;
+    gap: 20px;
+
+    .special-item {
+        background: $background-color;
+        border-radius: 8px;
+
+        .padding {
+            padding: 10px 15px;
+        }
+    }
+
+    b {
+        color: $primary-color;
+        @include font-size(9);
+        font-weight: 600;
+        margin-bottom: 5px;
+        display: block;
+    }
+
+    span {
+        @include font-size(10);
+        font-weight: 600;
+        word-break: break-word;
+        overflow-wrap: break-word;
+        width: 100%;
+        display: block;
+    }
+}
+
+.table {
+    width: 100%;
+
+    .table-row {
+        display: flex;
+
+        &:nth-child(even) {
+            background-color: $background-color;
+            border-radius: 12px;
+        }
+
+        .table-cell {
+            flex: 1 1 100%;
+            text-align: left;
+            min-width: 50px;
+            word-break: break-word;
+
+            span, a {
+                word-break: break-word;
+            }
+
+            &:first-child {
+                flex: 0 0 280px;
+                padding-left: 15px;
+                padding-right: 15px;
+            }
+
+            &:last-child {
+                text-align: right;
+                padding-right: 15px;
+            }
+        }
+    }
+
+    tbody {
+        .table-row {
+            padding: 5px 0;
+        }
+    }
+
+    thead {
+        background-color: white !important;
+        padding-bottom: 15px;
+        border-bottom: 0;
+        display: block;
+
+        .table-cell {
+
+            span {
+                color: $primary-color;
+                font-weight: 600;
+                @include font-size(9);
+                white-space: nowrap;
+            }
+        }
+    }
+
+    .table-cell {
+        align-self: center;
+
+        span, a {
+            vertical-align: middle;
+            font-weight: 500;
+            @include font-size(9);
+        }
+    }
+}
+
+.summary {
+    max-width: 300px;
+    margin: 20px 0 30px auto;
+    text-align: right;
+
+    li {
+        padding: 2px 0;
+
+        .col-full:first-child {
+
+            b, span {
+                white-space: nowrap;
+            }
+        }
+
+        .col-full {
+            width: 50%;
+        }
+    }
+
+    span {
+        @include font-size(10);
+    }
+
+    b {
+        @include font-size(13);
+        font-weight: 600;
+    }
+}
+
+h3 {
+    color: $primary-color;
+    font-weight: 600;
+    padding-bottom: 8px;
+    @include font-size(10);
+}
+
+p, span {
+    font-weight: 400;
+    padding-bottom: 4px;
+    @include font-size(10);
+    color: $text-color;
+}
+
+.highlight {
+    color: $primary-color;
+}
+
+section, header {
+    border-bottom: 1px dashed $border-color;
+    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;
+    }
+
+    div {
+        align-self: flex-end;
+    }
+
+    h3 {
+        display: inline-block;
+    }
+}