app-invoice.css 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. .invoice-preview .invoice-padding,
  2. .invoice-edit .invoice-padding,
  3. .invoice-add .invoice-padding {
  4. padding-left: 2.5rem;
  5. padding-right: 2.5rem; }
  6. .invoice-preview .table th:first-child,
  7. .invoice-preview .table td:first-child,
  8. .invoice-edit .table th:first-child,
  9. .invoice-edit .table td:first-child,
  10. .invoice-add .table th:first-child,
  11. .invoice-add .table td:first-child {
  12. padding-left: 2.5rem; }
  13. .invoice-preview .logo-wrapper,
  14. .invoice-edit .logo-wrapper,
  15. .invoice-add .logo-wrapper {
  16. display: flex;
  17. align-items: center;
  18. margin-bottom: 1.9rem; }
  19. .invoice-preview .logo-wrapper .invoice-logo,
  20. .invoice-edit .logo-wrapper .invoice-logo,
  21. .invoice-add .logo-wrapper .invoice-logo {
  22. font-size: 2.142rem;
  23. font-weight: bold;
  24. letter-spacing: -0.54px;
  25. margin-left: 1rem;
  26. margin-bottom: 0; }
  27. .invoice-preview .invoice-title,
  28. .invoice-edit .invoice-title,
  29. .invoice-add .invoice-title {
  30. font-size: 1.285rem;
  31. margin-bottom: 1rem; }
  32. .invoice-preview .invoice-title .invoice-number,
  33. .invoice-edit .invoice-title .invoice-number,
  34. .invoice-add .invoice-title .invoice-number {
  35. font-weight: 600; }
  36. .invoice-preview .invoice-date-wrapper,
  37. .invoice-edit .invoice-date-wrapper,
  38. .invoice-add .invoice-date-wrapper {
  39. display: flex;
  40. align-items: center; }
  41. .invoice-preview .invoice-date-wrapper:not(:last-of-type),
  42. .invoice-edit .invoice-date-wrapper:not(:last-of-type),
  43. .invoice-add .invoice-date-wrapper:not(:last-of-type) {
  44. margin-bottom: 0.5rem; }
  45. .invoice-preview .invoice-date-wrapper .invoice-date-title,
  46. .invoice-edit .invoice-date-wrapper .invoice-date-title,
  47. .invoice-add .invoice-date-wrapper .invoice-date-title {
  48. width: 7rem;
  49. margin-bottom: 0; }
  50. .invoice-preview .invoice-date-wrapper .invoice-date,
  51. .invoice-edit .invoice-date-wrapper .invoice-date,
  52. .invoice-add .invoice-date-wrapper .invoice-date {
  53. margin-left: 0.5rem;
  54. font-weight: 600;
  55. margin-bottom: 0; }
  56. .invoice-preview .invoice-spacing,
  57. .invoice-edit .invoice-spacing,
  58. .invoice-add .invoice-spacing {
  59. margin: 1.45rem 0; }
  60. .invoice-preview .invoice-number-date .title,
  61. .invoice-edit .invoice-number-date .title,
  62. .invoice-add .invoice-number-date .title {
  63. width: 115px; }
  64. .invoice-preview .invoice-total-wrapper,
  65. .invoice-edit .invoice-total-wrapper,
  66. .invoice-add .invoice-total-wrapper {
  67. width: 100%;
  68. max-width: 12rem; }
  69. .invoice-preview .invoice-total-wrapper .invoice-total-item,
  70. .invoice-edit .invoice-total-wrapper .invoice-total-item,
  71. .invoice-add .invoice-total-wrapper .invoice-total-item {
  72. display: flex;
  73. align-items: center;
  74. justify-content: space-between; }
  75. .invoice-preview .invoice-total-wrapper .invoice-total-item .invoice-total-title,
  76. .invoice-edit .invoice-total-wrapper .invoice-total-item .invoice-total-title,
  77. .invoice-add .invoice-total-wrapper .invoice-total-item .invoice-total-title {
  78. margin-bottom: 0.35rem; }
  79. .invoice-preview .invoice-total-wrapper .invoice-total-item .invoice-total-amount,
  80. .invoice-edit .invoice-total-wrapper .invoice-total-item .invoice-total-amount,
  81. .invoice-add .invoice-total-wrapper .invoice-total-item .invoice-total-amount {
  82. margin-bottom: 0.35rem;
  83. font-weight: 600; }
  84. @media (min-width: 768px) {
  85. .invoice-preview .invoice-title,
  86. .invoice-edit .invoice-title,
  87. .invoice-add .invoice-title {
  88. text-align: right;
  89. margin-bottom: 3rem; } }
  90. .invoice-edit .invoice-preview-card .invoice-title,
  91. .invoice-add .invoice-preview-card .invoice-title {
  92. text-align: left;
  93. margin-right: 3.5rem;
  94. margin-bottom: 0; }
  95. .invoice-edit .invoice-preview-card .invoice-edit-input,
  96. .invoice-edit .invoice-preview-card .invoice-edit-input-group,
  97. .invoice-add .invoice-preview-card .invoice-edit-input,
  98. .invoice-add .invoice-preview-card .invoice-edit-input-group {
  99. max-width: 11.21rem; }
  100. .invoice-edit .invoice-preview-card .invoice-product-details,
  101. .invoice-add .invoice-preview-card .invoice-product-details {
  102. background-color: #fcfcfc;
  103. padding: 3.75rem 3.45rem 2.3rem 3.45rem; }
  104. .invoice-edit .invoice-preview-card .invoice-product-details .product-details-border,
  105. .invoice-add .invoice-preview-card .invoice-product-details .product-details-border {
  106. border: 1px solid #ebe9f1;
  107. border-radius: 0.357rem; }
  108. .invoice-edit .invoice-preview-card .invoice-to-title,
  109. .invoice-add .invoice-preview-card .invoice-to-title {
  110. margin-bottom: 1.9rem; }
  111. .invoice-edit .invoice-preview-card .col-title,
  112. .invoice-add .invoice-preview-card .col-title {
  113. position: absolute;
  114. top: -1.75rem; }
  115. .invoice-edit .invoice-preview-card .item-options-menu,
  116. .invoice-add .invoice-preview-card .item-options-menu {
  117. min-width: 20rem; }
  118. .invoice-edit .invoice-preview-card .repeater-wrapper:not(:last-child),
  119. .invoice-add .invoice-preview-card .repeater-wrapper:not(:last-child) {
  120. margin-bottom: 3rem; }
  121. .invoice-edit .invoice-preview-card .invoice-calculations .total-amt-title,
  122. .invoice-add .invoice-preview-card .invoice-calculations .total-amt-title {
  123. width: 100px; }
  124. @media (max-width: 769px) {
  125. .invoice-edit .invoice-preview-card .invoice-title,
  126. .invoice-add .invoice-preview-card .invoice-title {
  127. margin-right: 0;
  128. width: 115px; }
  129. .invoice-edit .invoice-preview-card .invoice-edit-input,
  130. .invoice-add .invoice-preview-card .invoice-edit-input {
  131. max-width: 100%; } }
  132. @media (max-width: 992px) {
  133. .invoice-edit .col-title,
  134. .invoice-add .col-title {
  135. position: unset !important;
  136. top: -1.5rem !important; } }
  137. @media print {
  138. .invoice-edit hr,
  139. .invoice-add hr {
  140. margin-top: 1rem !important;
  141. margin-bottom: 1rem !important; } }