feat: element customize component

2026-02-17 13:20:31 +00:00 · 2024-09-09 21:07:22 +02:00
parent dc18bde6be
commit f644ed6708
25 changed files with 319 additions and 292 deletions
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.module.scss
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.module.scss
@@ -0,0 +1,149 @@
+
+.root {
+  border-radius: 5px;
+  background-color: #fff;
+  color: #111;
+  box-shadow: inset 0 4px 0px 0 #002762, 0 10px 15px rgba(0, 0, 0, 0.05);
+  padding: 24px 30px;
+  font-size: 12px;
+  position: relative;
+  margin: 0 auto;
+  width: 794px;
+  height: 1123px;
+}
+
+.bigTitle{
+  font-size: 60px;
+  margin: 0;
+  line-height: 1;
+  margin-bottom: 25px;
+  font-weight: 500;
+  color: #333;
+}
+
+.details {
+  margin-bottom: 25px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.detail {
+  display: flex;
+  flex-direction: row;
+  gap: 12px;
+}
+.detailLabel {
+  min-width: 120px;
+  color: #333;
+}
+
+.addressRoot{
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 25px;
+}
+
+.addressBillTo{
+  flex: 1;
+}
+
+.addressFrom{
+  flex: 1;
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  text-align: left;
+
+  thead th{
+    font-weight: 400;
+    border-bottom: 1px solid #000;
+    padding: 2px 10px;
+    color: #333;
+
+    &.rate,
+    &.total{
+      text-align: right;
+    }
+    &:first-of-type{
+      padding-left: 0;
+    }
+    &:last-of-type{
+      padding-right: 0;
+    }
+  }
+
+  tbody{
+
+    tr {
+
+    }
+    td{
+      border-bottom: 1px solid #F6F6F6;
+      padding: 12px 10px;
+
+      &:first-of-type{
+        padding-left: 0;
+      }
+      &:last-of-type{
+        padding-right: 0;
+      }
+
+      &.rate,
+      &.total{
+        text-align: right;
+      }
+    }
+  }
+}
+
+.totals{
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 40px;
+  margin-left: auto;
+  width: 300px;
+}
+.totalsItem{
+  display: flex;
+  padding: 4px 0;
+}
+.totalsItemLabel{
+  min-width: 160px;
+}
+.totalsItemAmount{
+  flex: 1 1 auto;
+  text-align: right;
+}
+.totalBottomBordered {
+  border-bottom: 1px solid #000;
+}
+.totalBottomGrayBordered {
+  border-bottom: 1px solid #DADADA;
+}
+
+.logoWrap{
+  height: 120px;
+  width: 120px;
+  position: absolute;
+  right: 26px;
+  top: 26px;
+  border-radius: 5px;
+  overflow: hidden;
+
+  img{
+    max-width: 100%;
+  }
+}
+
+.footer{
+
+}
+
+.paragraph{
+  margin-bottom: 20px;  
+}
+.paragraphLabel{
+  color: #666;
+}