Files
MyX/public/assets/sass/framework/_invoice.scss
2024-08-11 16:14:28 +02:00

117 lines
2.8 KiB
SCSS

.invoiceBackgroundLogo{
position: absolute;
left: 5%;
top: 50%;
transform: translate(0, -50%) rotate(25deg);
img{
opacity: .1;
width: 90%;
}
}
.invoice{
background: #FFF;
box-shadow: $boxShadow;
padding: 24px 16px;
margin: 8px;
position: relative;
overflow: hidden;
.invoice-page-header{
display: flex;
align-items: flex-end;
justify-content: space-between;
.invoice-logo{
img{
height: 20px;
}
}
.invoice-id{
font-size: $fontSizeCaption;
color: $colorText;
}
}
.invoice-person{
display: flex;
align-items: flex-start;
justify-content: space-between;
.invoice-to,
.invoice-from{
font-size: $fontSizeCaption;
h4{
margin-bottom: 8px;
color: $colorHeading;
font-size: $fontSizeSub;
}
p{
margin: 0 0 3px 0;
line-height: 1.4em;
color: $colorLight;
}
}
.invoice-to{
padding-right: 12px;
}
.invoice-from{
text-align: right;
padding-left: 12px;
}
}
.invoice-detail{
.table{
border-bottom: 1px solid $colorLine;
thead,
tbody{
font-size: $fontSizeCaption;
font-weight: $bold;
td{
text-align: center;
&:first-child{
text-align: left;
padding-left: 0;
}
&:last-child{
padding-right: 0;
text-align: right;
}
}
}
thead{
color: $colorLight;
}
tbody{
color: $colorHeading;
}
}
}
.invoice-total{
font-size: $fontSizeCaption;
font-weight: $bold;
.listview{
padding: 0;
li{
min-height: auto;
padding: 12px 0;
.hightext{
font-size: $fontSizeSub;
}
.totaltext{
font-size: $fontSizeHeading;
}
}
}
}
.invoice-signature{
.signature-block{
display: inline-flex;
font-size: $fontSizeCaption;
padding: 5px 32px 42px 32px;
border: 2px dashed $colorLine;
}
}
.invoice-bottom{
font-size: 10px;
text-align: center;
padding-top: 24px;
opacity: .4;
}
}