You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
162 lines
3.4 KiB
162 lines
3.4 KiB
7 months ago
|
// ================================================================================================
|
||
|
|
// File Name: app-invoice.scss
|
||
|
|
// Description: Invoice Layout page layouts SCSS.
|
||
|
|
// ----------------------------------------------------------------------------------------------
|
||
|
|
// Item Name: Vuexy HTML Admin Template
|
||
|
|
// Version: 1.0
|
||
|
|
// Author: PIXINVENT
|
||
|
|
// Author URL: http://www.themeforest.net/user/pixinvent
|
||
|
|
// ================================================================================================
|
||
|
|
|
||
|
|
@import '../bootstrap-extended/include'; // Bootstrap includes
|
||
|
|
@import '../components/include'; // Components includes
|
||
|
|
|
||
|
|
$product-details-bg: #fcfcfc;
|
||
|
|
$invoice-spacing: 1.45rem 0;
|
||
|
|
$invoice-card-body-padding: 2.5rem;
|
||
|
|
|
||
|
|
// Invoice Preview, Edit & Add
|
||
|
|
.invoice-preview,
|
||
|
|
.invoice-edit,
|
||
|
|
.invoice-add {
|
||
|
|
.invoice-padding {
|
||
|
|
padding-left: $invoice-card-body-padding;
|
||
|
|
padding-right: $invoice-card-body-padding;
|
||
|
|
}
|
||
|
|
.table {
|
||
|
|
th:first-child,
|
||
|
|
td:first-child {
|
||
|
|
padding-left: 2.5rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.logo-wrapper {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
margin-bottom: 1.9rem;
|
||
|
|
.invoice-logo {
|
||
|
|
font-size: 2.142rem;
|
||
|
|
font-weight: bold;
|
||
|
|
letter-spacing: -0.54px;
|
||
|
|
margin-left: 1rem;
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.invoice-title {
|
||
|
|
font-size: 1.285rem;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
.invoice-number {
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.invoice-date-wrapper {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
&:not(:last-of-type) {
|
||
|
|
margin-bottom: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.invoice-date-title {
|
||
|
|
width: 7rem;
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
.invoice-date {
|
||
|
|
margin-left: 0.5rem;
|
||
|
|
font-weight: 600;
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.invoice-spacing {
|
||
|
|
margin: $invoice-spacing;
|
||
|
|
}
|
||
|
|
.invoice-number-date {
|
||
|
|
.title {
|
||
|
|
width: 115px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.invoice-total-wrapper {
|
||
|
|
width: 100%;
|
||
|
|
max-width: 12rem;
|
||
|
|
.invoice-total-item {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
.invoice-total-title {
|
||
|
|
margin-bottom: 0.35rem;
|
||
|
|
}
|
||
|
|
.invoice-total-amount {
|
||
|
|
margin-bottom: 0.35rem;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (min-width: 768px) {
|
||
|
|
.invoice-title {
|
||
|
|
text-align: right;
|
||
|
|
margin-bottom: 3rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Invoice Edit & Add
|
||
|
|
.invoice-edit,
|
||
|
|
.invoice-add {
|
||
|
|
.invoice-preview-card {
|
||
|
|
.invoice-title {
|
||
|
|
text-align: left;
|
||
|
|
margin-right: 3.5rem;
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
.invoice-edit-input,
|
||
|
|
.invoice-edit-input-group {
|
||
|
|
max-width: 11.21rem;
|
||
|
|
}
|
||
|
|
.invoice-product-details {
|
||
|
|
background-color: $product-details-bg;
|
||
|
|
padding: 3.75rem 3.45rem 2.3rem 3.45rem;
|
||
|
|
.product-details-border {
|
||
|
|
border: 1px solid $border-color;
|
||
|
|
border-radius: $border-radius;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.invoice-to-title {
|
||
|
|
margin-bottom: 1.9rem;
|
||
|
|
}
|
||
|
|
.col-title {
|
||
|
|
position: absolute;
|
||
|
|
top: -1.75rem;
|
||
|
|
}
|
||
|
|
.item-options-menu {
|
||
|
|
min-width: 20rem;
|
||
|
|
}
|
||
|
|
.repeater-wrapper {
|
||
|
|
&:not(:last-child) {
|
||
|
|
margin-bottom: 3rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.invoice-calculations {
|
||
|
|
.total-amt-title {
|
||
|
|
width: 100px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media (max-width: 769px) {
|
||
|
|
.invoice-preview-card {
|
||
|
|
.invoice-title {
|
||
|
|
margin-right: 0;
|
||
|
|
width: 115px;
|
||
|
|
}
|
||
|
|
.invoice-edit-input {
|
||
|
|
max-width: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media (max-width: 992px) {
|
||
|
|
.col-title {
|
||
|
|
position: unset !important;
|
||
|
|
top: -1.5rem !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|