Implement dynamic header and table color functionality
This commit is contained in:
parent
4f9e42cba0
commit
7feaa85d41
|
|
@ -293,7 +293,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
|
||||||
}
|
}
|
||||||
.header-section-wrapper {
|
.header-section-wrapper {
|
||||||
padding: 5px 0px;
|
padding: 5px 0px;
|
||||||
background: #f3f3f3;
|
// background: #f3f3f3;
|
||||||
border-radius: 1%;
|
border-radius: 1%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
@ -435,7 +435,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
|
||||||
.invoice-head{
|
.invoice-head{
|
||||||
font-weight: light;
|
font-weight: light;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
color: #5e5e5e;
|
// color: #5e5e5e;
|
||||||
}
|
}
|
||||||
.meta-info {
|
.meta-info {
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
|
|
@ -453,7 +453,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
|
||||||
border-spacing: 0px 5px;
|
border-spacing: 0px 5px;
|
||||||
}
|
}
|
||||||
.product-table th {
|
.product-table th {
|
||||||
background: #ebebebff;
|
// background: #ebebebff;
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
@ -583,7 +583,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
|
||||||
.invoice-head{
|
.invoice-head{
|
||||||
font-weight: light;
|
font-weight: light;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #5e5e5e;
|
// color: #5e5e5e;
|
||||||
}
|
}
|
||||||
.meta-info {
|
.meta-info {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -888,7 +888,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.header-section-wrapper {
|
.header-section-wrapper {
|
||||||
background: #ccccccff;
|
// background: #ccccccff;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -928,7 +928,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
|
||||||
.product-table th {
|
.product-table th {
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
background: #ccccccff;
|
// background: #ccccccff;
|
||||||
}
|
}
|
||||||
.product-table td {
|
.product-table td {
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
|
|
@ -1057,7 +1057,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
background: #ccccccff;
|
// background: #ccccccff;
|
||||||
}
|
}
|
||||||
.product-table td {
|
.product-table td {
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
|
|
@ -1153,7 +1153,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
|
||||||
}
|
}
|
||||||
.header-section {
|
.header-section {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: #dbdbdb;
|
// background: #dbdbdb;
|
||||||
padding: 1px 8px;
|
padding: 1px 8px;
|
||||||
}
|
}
|
||||||
.header-section-wrapper {
|
.header-section-wrapper {
|
||||||
|
|
@ -1192,7 +1192,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
|
||||||
.product-table th {
|
.product-table th {
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
background: #ccccccff;
|
// background: #ccccccff;
|
||||||
}
|
}
|
||||||
.product-table td {
|
.product-table td {
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
|
|
@ -1297,7 +1297,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
background: #dbdbdb;
|
// background: #dbdbdb;
|
||||||
}
|
}
|
||||||
.header-company {
|
.header-company {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
|
|
@ -1327,7 +1327,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
|
||||||
.product-table th {
|
.product-table th {
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
background: #ccccccff;
|
// background: #ccccccff;
|
||||||
}
|
}
|
||||||
.product-table td {
|
.product-table td {
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
|
|
@ -1436,7 +1436,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
background: #dbdbdb;
|
// background: #dbdbdb;
|
||||||
}
|
}
|
||||||
.branch-address {
|
.branch-address {
|
||||||
margin: 5px 0px;
|
margin: 5px 0px;
|
||||||
|
|
@ -1463,7 +1463,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
|
||||||
.product-table th {
|
.product-table th {
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
background: #ccccccff;
|
// background: #ccccccff;
|
||||||
}
|
}
|
||||||
.product-table td {
|
.product-table td {
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
|
|
@ -1621,7 +1621,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
background: #ccccccff;
|
// background: #ccccccff;
|
||||||
border-bottom: 2px dashed #000;
|
border-bottom: 2px dashed #000;
|
||||||
}
|
}
|
||||||
.product-table td {
|
.product-table td {
|
||||||
|
|
@ -1808,8 +1808,8 @@ export const printDCToInvoiceStyles = (printStyle) => {
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
border: 2px solid #fff;
|
border: 2px solid #fff;
|
||||||
background: rgb(55, 59, 68);
|
// background: rgb(55, 59, 68);
|
||||||
color:rgb(255, 255, 255);
|
// color:rgb(255, 255, 255);
|
||||||
}
|
}
|
||||||
.product-table tr:nth-child(even) {
|
.product-table tr:nth-child(even) {
|
||||||
background-color: #E8E8E8;
|
background-color: #E8E8E8;
|
||||||
|
|
@ -1899,7 +1899,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
background: rgb(253, 199, 22);
|
// background: rgb(253, 199, 22);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display : flex;
|
display : flex;
|
||||||
justify-content :center;
|
justify-content :center;
|
||||||
|
|
@ -1988,11 +1988,11 @@ export const printDCToInvoiceStyles = (printStyle) => {
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
border: 2px solid #fff;
|
border: 2px solid #fff;
|
||||||
background: rgb(55, 59, 68);
|
// background: rgb(55, 59, 68);
|
||||||
color:rgb(255, 255, 255);
|
// color:rgb(255, 255, 255);
|
||||||
}
|
}
|
||||||
.product-table tr:nth-child(even) {
|
.product-table tr:nth-child(even) {
|
||||||
background-color: #E8E8E8;
|
// background-color: #E8E8E8;
|
||||||
}
|
}
|
||||||
.product-table td {
|
.product-table td {
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
|
|
@ -2018,7 +2018,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
|
||||||
.footer-notes {
|
.footer-notes {
|
||||||
font-size: 17px;
|
font-size: 17px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
color: #5e5e5e;
|
// color: #5e5e5e;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
.greeting-section {
|
.greeting-section {
|
||||||
|
|
@ -2079,7 +2079,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
background: rgb(253, 199, 22);
|
// background: rgb(253, 199, 22);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display : flex;
|
display : flex;
|
||||||
justify-content :center;
|
justify-content :center;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue