mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-18 16:22:14 +00:00
invoice backend VAT & discount calculations
This commit is contained in:
323
public/css/oasis-invoice.css
vendored
323
public/css/oasis-invoice.css
vendored
@@ -1 +1,322 @@
|
||||
*{outline:0;margin:0;padding:0;box-sizing:border-box;color:#1b2539}*,b,body,h1,h2,h3,h4,html,p,span,strong{font-family:Nunito,serif}html{font-size:100%}.row{display:-webkit-flex;-webkit-flex-wrap:nowrap;width:100%}.row.spaces{margin:0 -15px}.row.spaces div[class^=col-]{padding:0 15px}.row div[class^=col-]{-webkit-flex-grow:1}.row div[class^=col-].align-right{text-align:right}.row .col-left,.row .col-right{width:49%}.row.align-center div[class^=col-]{-webkit-align-self:center}.row.align-bottom div[class^=col-]{-webkit-align-self:flex-end}.invoice-header .col-left,.invoice-header .col-right{display:inline-block}.invoice-header .logo{margin-bottom:5px;display:block;width:260px}.invoice-header .email,.invoice-header .phone{display:block;font-size:.7em;font-weight:400;margin-bottom:2px}.invoice-header h1{line-height:1;padding-bottom:5px;font-size:1.6em}.invoice-header h2{color:#bc30fd;font-weight:600;font-size:1.1em}.invoice-header h4{color:#1b2539;font-weight:600;font-size:.7em}.supplier{float:right;max-width:600px}.supplier .box{background:#f4f5f6;border-radius:15px;padding:20px}.supplier .dates{margin-top:10px}.supplier .dates p{text-align:right;font-size:.9em}.special-wrapper{padding-bottom:25px;border-bottom:1px dashed #d8d8d8;margin:0 -5px 25px}.special-wrapper .special-item{background:#f4f5f6;border-radius:8px;display:inline-block;width:20.9%;margin:0 5px}.special-wrapper .special-item:first-child{width:31.5%}.special-wrapper .special-item .padding{padding:10px 15px}.special-wrapper b{color:#bc30fd;font-size:.9em;font-weight:600;margin-bottom:5px;display:block}.special-wrapper span{font-size:1em;font-weight:600;word-break:break-word;overflow-wrap:break-word;width:100%;display:block}.table{table-layout:fixed;border-collapse:collapse;width:100%}.table .table-row:nth-child(2n){background-color:#f4f5f6;border-radius:12px}.table .table-row .table-cell{text-align:left;word-break:break-word;padding:5px}.table .table-row .table-cell a,.table .table-row .table-cell span{word-break:break-word}.table .table-row .table-cell:first-child{width:280px;padding-left:15px;padding-right:15px}.table .table-row .table-cell:last-child{text-align:right;padding-right:15px}.table tbody .table-row{padding:5px 0}.table thead{background-color:#fff!important;padding-bottom:15px;border-bottom:0}.table thead .table-cell span{color:#bc30fd;font-weight:600;font-size:.9em;white-space:nowrap}.table .table-cell{word-break:break-all}.table .table-cell a,.table .table-cell span{vertical-align:middle;font-weight:500;font-size:.9em}.summary{max-width:300px;margin:20px 0 20px auto;text-align:right}.summary li{padding:2px 0;display:block}.summary li b,.summary li span{white-space:nowrap}.summary li .col-full{width:50%;display:inline-block}.summary span{font-size:1em}.summary b{font-size:1.3em;font-weight:600}.notes{padding-top:25px;border-top:1px dashed #d8d8d8}.invoice-author{display:-webkit-flex;-webkit-justify-content:space-between;-webkit-align-items:flex-end;padding-bottom:25px}.invoice-author .sign{text-align:right}.invoice-author img{max-width:240px;display:block;margin:0 0 0 auto}.invoice-footer{padding-top:15px;border-top:1px dashed #d8d8d8;text-align:center}.invoice-footer p{font-size:1em}.invoice-footer a,h3{color:#bc30fd}h3{font-weight:600;padding-bottom:8px}h3,p,span{font-size:1em}p,span{font-weight:400;padding-bottom:4px;color:#1b2539}.highlight{color:#bc30fd}header,section{border-bottom:1px dashed #d8d8d8;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}footer div{align-self:flex-end}footer h3{display:inline-block}
|
||||
* {
|
||||
outline: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
color: #1b2539
|
||||
}
|
||||
|
||||
*, b, body, h1, h2, h3, h4, html, p, span, strong {
|
||||
font-family: Nunito, serif
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 100%
|
||||
}
|
||||
|
||||
.row {
|
||||
display: -webkit-flex;
|
||||
-webkit-flex-wrap: nowrap;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.row.spaces {
|
||||
margin: 0 -15px
|
||||
}
|
||||
|
||||
.row.spaces div[class^=col-] {
|
||||
padding: 0 15px
|
||||
}
|
||||
|
||||
.row div[class^=col-] {
|
||||
-webkit-flex-grow: 1
|
||||
}
|
||||
|
||||
.row div[class^=col-].align-right {
|
||||
text-align: right
|
||||
}
|
||||
|
||||
.row .col-left, .row .col-right {
|
||||
width: 49%
|
||||
}
|
||||
|
||||
.row.align-center div[class^=col-] {
|
||||
-webkit-align-self: center
|
||||
}
|
||||
|
||||
.row.align-bottom div[class^=col-] {
|
||||
-webkit-align-self: flex-end
|
||||
}
|
||||
|
||||
.invoice-header .col-left, .invoice-header .col-right {
|
||||
display: inline-block
|
||||
}
|
||||
|
||||
.invoice-header .logo {
|
||||
margin-bottom: 5px;
|
||||
display: block;
|
||||
width: 260px
|
||||
}
|
||||
|
||||
.invoice-header .email, .invoice-header .phone {
|
||||
display: block;
|
||||
font-size: .7em;
|
||||
font-weight: 400;
|
||||
margin-bottom: 2px
|
||||
}
|
||||
|
||||
.invoice-header h1 {
|
||||
line-height: 1;
|
||||
padding-bottom: 5px;
|
||||
font-size: 1.6em
|
||||
}
|
||||
|
||||
.invoice-header h2 {
|
||||
color: #bc30fd;
|
||||
font-weight: 600;
|
||||
font-size: 1.1em
|
||||
}
|
||||
|
||||
.invoice-header h4 {
|
||||
color: #1b2539;
|
||||
font-weight: 600;
|
||||
font-size: .7em
|
||||
}
|
||||
|
||||
.supplier {
|
||||
float: right;
|
||||
max-width: 600px
|
||||
}
|
||||
|
||||
.supplier .box {
|
||||
background: #f4f5f6;
|
||||
border-radius: 15px;
|
||||
padding: 20px
|
||||
}
|
||||
|
||||
.supplier .dates {
|
||||
margin-top: 10px
|
||||
}
|
||||
|
||||
.supplier .dates p {
|
||||
text-align: right;
|
||||
font-size: .9em
|
||||
}
|
||||
|
||||
.special-wrapper {
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px dashed #d8d8d8;
|
||||
margin: 0 -5px 25px
|
||||
}
|
||||
|
||||
.special-wrapper .special-item {
|
||||
background: #f4f5f6;
|
||||
border-radius: 8px;
|
||||
display: inline-block;
|
||||
width: 20.9%;
|
||||
margin: 0 5px
|
||||
}
|
||||
|
||||
.special-wrapper .special-item:first-child {
|
||||
width: 31.5%
|
||||
}
|
||||
|
||||
.special-wrapper .special-item .padding {
|
||||
padding: 10px 15px
|
||||
}
|
||||
|
||||
.special-wrapper b {
|
||||
color: #bc30fd;
|
||||
font-size: .9em;
|
||||
font-weight: 600;
|
||||
margin-bottom: 5px;
|
||||
display: block
|
||||
}
|
||||
|
||||
.special-wrapper span {
|
||||
font-size: 1em;
|
||||
font-weight: 600;
|
||||
word-break: break-word;
|
||||
overflow-wrap: break-word;
|
||||
width: 100%;
|
||||
display: block
|
||||
}
|
||||
|
||||
.table {
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.table .table-row:nth-child(2n) {
|
||||
background-color: #f4f5f6;
|
||||
border-radius: 12px
|
||||
}
|
||||
|
||||
.table .table-row .table-cell {
|
||||
text-align: left;
|
||||
word-break: break-word;
|
||||
padding: 5px
|
||||
}
|
||||
|
||||
.table .table-row .table-cell a, .table .table-row .table-cell span {
|
||||
word-break: break-word
|
||||
}
|
||||
|
||||
.table .table-row .table-cell:first-child {
|
||||
width: 280px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px
|
||||
}
|
||||
|
||||
.table .table-row .table-cell:last-child {
|
||||
text-align: right;
|
||||
padding-right: 15px
|
||||
}
|
||||
|
||||
.table tbody .table-row {
|
||||
padding: 5px 0
|
||||
}
|
||||
|
||||
.table thead {
|
||||
background-color: #fff !important;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 0
|
||||
}
|
||||
|
||||
.table thead .table-cell span {
|
||||
color: #bc30fd;
|
||||
font-weight: 600;
|
||||
font-size: .9em;
|
||||
white-space: nowrap
|
||||
}
|
||||
|
||||
.table .table-cell {
|
||||
word-break: break-all
|
||||
}
|
||||
|
||||
.table .table-cell a, .table .table-cell span {
|
||||
vertical-align: middle;
|
||||
font-weight: 600;
|
||||
font-size: .9em
|
||||
}
|
||||
|
||||
.summary {
|
||||
max-width: 300px;
|
||||
margin: 15px 0 10px auto;
|
||||
text-align: right
|
||||
}
|
||||
|
||||
.summary li {
|
||||
padding: 2px 0;
|
||||
display: block
|
||||
}
|
||||
|
||||
.summary li b, .summary li span {
|
||||
white-space: nowrap
|
||||
}
|
||||
|
||||
.summary li .col-full {
|
||||
width: 50%;
|
||||
display: inline-block
|
||||
}
|
||||
|
||||
.summary span {
|
||||
font-size: 1em
|
||||
}
|
||||
|
||||
.summary b {
|
||||
font-size: 1.3em;
|
||||
font-weight: 600
|
||||
}
|
||||
|
||||
.notes {
|
||||
padding-top: 20px;
|
||||
border-top: 1px dashed #d8d8d8
|
||||
}
|
||||
|
||||
.invoice-author {
|
||||
display: -webkit-flex;
|
||||
-webkit-justify-content: space-between;
|
||||
-webkit-align-items: flex-end;
|
||||
padding-bottom: 25px
|
||||
}
|
||||
|
||||
.invoice-author .sign {
|
||||
text-align: right
|
||||
}
|
||||
|
||||
.invoice-author img {
|
||||
max-height: 125px;
|
||||
display: block;
|
||||
margin: 0 0 0 auto
|
||||
}
|
||||
|
||||
.invoice-footer {
|
||||
padding-top: 15px;
|
||||
border-top: 1px dashed #d8d8d8;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.invoice-footer p {
|
||||
font-size: 1em
|
||||
}
|
||||
|
||||
.invoice-footer a, h3 {
|
||||
color: #bc30fd
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-weight: 600;
|
||||
padding-bottom: 8px
|
||||
}
|
||||
|
||||
h3, p, span {
|
||||
font-size: 1em
|
||||
}
|
||||
|
||||
p, span {
|
||||
font-weight: 600;
|
||||
padding-bottom: 4px;
|
||||
color: #1b2539
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: #bc30fd
|
||||
}
|
||||
|
||||
header, section {
|
||||
border-bottom: 1px dashed #d8d8d8;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 20px
|
||||
}
|
||||
|
||||
.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
|
||||
}
|
||||
|
||||
footer div {
|
||||
align-self: flex-end
|
||||
}
|
||||
|
||||
footer h3 {
|
||||
display: inline-block
|
||||
}
|
||||
Reference in New Issue
Block a user