src/ApplicationBundle/Resources/views/voucherTemplate/sales_order.html.twig line 1

Open in your IDE?
  1. {% verbatim %}
  2. <script id="tpl-drawer-sales-order" type="text/template">
  3.     <div class="hb-doc-card hb-doc-card-summary">
  4.         <div class="hb-doc-card-label">Order Total</div>
  5.         <div class="hb-doc-card-value hb-doc-card-value-positive">{{amount}}</div>
  6.     </div>
  8.     <div class="hb-doc-card hb-doc-card-table">
  9.         <div class="hb-doc-card-header">
  10.             <span class="hb-doc-card-title">Line Items</span>
  11.             <span class="hb-doc-card-meta">{{lineCountLabel}}</span>
  12.         </div>
  13.         <div class="hb-doc-table-wrap">
  14.             <table class="hb-doc-table">
  15.                 <thead>
  16.                     <tr>
  17.                         <th>Item</th>
  18.                         <th class="text-right">Qty</th>
  19.                         <th class="text-right">Rate</th>
  20.                         <th class="text-right">Amount</th>
  21.                     </tr>
  22.                 </thead>
  23.                 <tbody>{{linesHtml}}</tbody>
  24.             </table>
  25.         </div>
  26.     </div>
  27. </script>
  29. <script id="tpl-drawer-sales-order-row" type="text/template">
  30.     <tr>
  31.         <td>{{itemName}}</td>
  32.         <td class="text-right">{{quantity}}</td>
  33.         <td class="text-right">{{rate}}</td>
  34.         <td class="text-right">{{amount}}</td>
  35.     </tr>
  36. </script>
  38. <style>
  39.     .hb-doc-card {
  40.         background: #fff;
  41.         border: 1px solid #e5e5e5;
  42.         border-radius: 12px;
  43.         overflow: hidden;
  44.         margin-bottom: 16px;
  45.     }
  46.     .hb-doc-card-summary {
  47.         padding: 14px 16px;
  48.     }
  49.     .hb-doc-card-label {
  50.         font-size: 10px;
  51.         font-weight: 700;
  52.         letter-spacing: 0.08em;
  53.         text-transform: uppercase;
  54.         color: #9a9a9a;
  55.         margin-bottom: 4px;
  56.     }
  57.     .hb-doc-card-value {
  58.         font-size: 22px;
  59.         font-weight: 700;
  60.         line-height: 1.1;
  61.         color: #1a1a1a;
  62.     }
  63.     .hb-doc-card-value-positive {
  64.         color: #4baa6b;
  65.     }
  66.     .hb-doc-card-table {
  67.         padding: 0;
  68.     }
  69.     .hb-doc-card-header {
  70.         display: flex;
  71.         align-items: center;
  72.         justify-content: space-between;
  73.         gap: 12px;
  74.         padding: 12px 16px 10px;
  75.         border-bottom: 1px solid #f0f0ee;
  76.     }
  77.     .hb-doc-card-title {
  78.         font-size: 10px;
  79.         font-weight: 700;
  80.         letter-spacing: 0.09em;
  81.         text-transform: uppercase;
  82.         color: #6a6a6a;
  83.     }
  84.     .hb-doc-card-meta {
  85.         font-size: 10px;
  86.         color: #9a9a9a;
  87.         text-align: right;
  88.     }
  89.     .hb-doc-table-wrap {
  90.         overflow: auto;
  91.     }
  92.     .hb-doc-table {
  93.         width: 100%;
  94.         border-collapse: collapse;
  95.     }
  96.     .hb-doc-table thead th {
  97.         padding: 10px 16px;
  98.         font-size: 10px;
  99.         font-weight: 700;
  100.         letter-spacing: 0.08em;
  101.         text-transform: uppercase;
  102.         color: #9a9a9a;
  103.         background: #fafaf8;
  104.         border-bottom: 1px solid #f0f0ee;
  105.         white-space: nowrap;
  106.     }
  107.     .hb-doc-table tbody td {
  108.         padding: 10px 16px;
  109.         border-bottom: 1px solid #f5f5f5;
  110.         font-size: 12px;
  111.         color: #3a3a3a;
  112.         vertical-align: middle;
  113.     }
  114.     .hb-doc-table tbody tr:last-child td {
  115.         border-bottom: none;
  116.     }
  117.     .hb-doc-table .text-right {
  118.         text-align: right;
  119.         white-space: nowrap;
  120.     }
  121. </style>
  122. {% endverbatim %}