Copy environment

Order Summary 

<div class="order-summary">
    <div class="order-summary__header">
        <h2>Tellimuse kokkuvõte</h2>
    </div>
    <div class="order-summary__content">
        <table class="order-summary__table tablesaw" data-tablesaw-mode="stack" data-tablesaw-hide-empty>
            <thead class="order-summary__head">
                <tr class="order-summary__row">
                    <th class="order-summary__table-header h-text-left text-medium" scope="col">
                        <span class="">Toode</span>
                    </th>
                    <th class="order-summary__table-header h-text-left text-medium" scope="col">
                        <span class="">Toote hind</span>
                    </th>
                    <th class="order-summary__table-header h-text-left text-medium" scope="col">
                        <span class="">Kogus</span>
                    </th>
                    <th class="order-summary__table-header h-text-left text-medium" scope="col">
                        <span class="">Rendiperiood</span>
                    </th>
                    <th class="order-summary__table-header h-text-left text-medium" scope="col">
                        <span class="">Transport</span>
                    </th>
                    <th class="order-summary__table-header h-text-left text-medium" scope="col">
                        <span class="">Rendipunkt/aadress</span>
                    </th>
                </tr>
            </thead>
            <tbody class="order-summary__body">
                <tr class="order-summary__row">
                    <td class="order-summary__table-cell h-text-left">
                        <span class="">Akukäärtõstuk 2.5M manuaalne</span>
                    </td>
                    <td class="order-summary__table-cell h-text-left">
                        <span class="">16€/päev</span>
                    </td>
                    <td class="order-summary__table-cell h-text-left">
                        <span class="">100 tk</span>
                    </td>
                    <td class="order-summary__table-cell h-text-left">
                        <span class="">01.08 2022 - 22.02.2023</span>
                    </td>
                    <td class="order-summary__table-cell h-text-left">
                        <span class="">Ei</span>
                    </td>
                    <td class="order-summary__table-cell h-text-left">
                        <span class="">Uus-Paldiski mnt 3, Keila</span>
                    </td>
                </tr>
                <tr class="order-summary__row">
                    <td class="order-summary__table-cell h-text-left">
                        <span class="">Akukäärtõstuk 2.5M manuaalne</span>
                    </td>
                    <td class="order-summary__table-cell h-text-left">
                        <span class="">16€/päev</span>
                    </td>
                    <td class="order-summary__table-cell h-text-left">
                        <span class="">100 tk</span>
                    </td>
                    <td class="order-summary__table-cell h-text-left">
                        <span class="">01.08 2022 - 22.02.2023</span>
                    </td>
                    <td class="order-summary__table-cell h-text-left">
                        <span class="">Ei</span>
                    </td>
                    <td class="order-summary__table-cell h-text-left">
                        <span class="">Uus-Paldiski mnt 3, Keila</span>
                    </td>
                </tr>
                <tr class="order-summary__row">
                    <td class="order-summary__table-cell h-text-left">
                        <span class="">Akukäärtõstuk 2.5M manuaalne</span>
                    </td>
                    <td class="order-summary__table-cell h-text-left">
                        <span class="">16€/päev</span>
                    </td>
                    <td class="order-summary__table-cell h-text-left">
                        <span class="">100 tk</span>
                    </td>
                    <td class="order-summary__table-cell h-text-left">
                        <span class="">01.08 2022 - 22.02.2023</span>
                    </td>
                    <td class="order-summary__table-cell h-text-left">
                        <span class="">Ei</span>
                    </td>
                    <td class="order-summary__table-cell h-text-left">
                        <span class="">Uus-Paldiski mnt 3, Keila</span>
                    </td>
                </tr>
                <tr class="order-summary__row">
                    <td class="order-summary__table-cell h-text-left">
                        <span class="">Akukäärtõstuk 2.5M manuaalne</span>
                    </td>
                    <td class="order-summary__table-cell h-text-left">
                        <span class="">16€/päev</span>
                    </td>
                    <td class="order-summary__table-cell h-text-left">
                        <span class="">100 tk</span>
                    </td>
                    <td class="order-summary__table-cell h-text-left">
                        <span class="">01.08 2022 - 22.02.2023</span>
                    </td>
                    <td class="order-summary__table-cell h-text-left">
                        <span class="">Ei</span>
                    </td>
                    <td class="order-summary__table-cell h-text-left">
                        <span class="">Uus-Paldiski mnt 3, Keila</span>
                    </td>
                </tr>
                <tr class="order-summary__row">
                    <td class="order-summary__table-cell h-text-left">
                        <span class="">Akukäärtõstuk 2.5M manuaalne</span>
                    </td>
                    <td class="order-summary__table-cell h-text-left">
                        <span class="">16€/päev</span>
                    </td>
                    <td class="order-summary__table-cell h-text-left">
                        <span class="">100 tk</span>
                    </td>
                    <td class="order-summary__table-cell h-text-left">
                        <span class="">01.08 2022 - 22.02.2023</span>
                    </td>
                    <td class="order-summary__table-cell h-text-left">
                        <span class="">Ei</span>
                    </td>
                    <td class="order-summary__table-cell h-text-left">
                        <span class="">Uus-Paldiski mnt 3, Keila</span>
                    </td>
                </tr>
                <tr class="order-summary__row">
                    <td class="order-summary__table-cell h-text-left">
                        <span class="">Akukäärtõstuk 2.5M manuaalne</span>
                    </td>
                    <td class="order-summary__table-cell h-text-left">
                        <span class="">16€/päev</span>
                    </td>
                    <td class="order-summary__table-cell h-text-left">
                        <span class="">100 tk</span>
                    </td>
                    <td class="order-summary__table-cell h-text-left">
                        <span class="">01.08 2022 - 22.02.2023</span>
                    </td>
                    <td class="order-summary__table-cell h-text-left">
                        <span class="">Ei</span>
                    </td>
                    <td class="order-summary__table-cell h-text-left">
                        <span class="">Uus-Paldiski mnt 3, Keila</span>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
 
<div class="order-summary">
    <div class="order-summary__header">
        {% if data.header %}
            <h2>{{ data.header.text }}</h2>
        {% endif %}
    </div>
    <div class="order-summary__content">
        <table class="order-summary__table tablesaw" data-tablesaw-mode="stack" data-tablesaw-hide-empty>
            {% if data.headers %}
                <thead class="order-summary__head">
                <tr class="order-summary__row">
                    {% for header in data.headers %}
                        <th class="order-summary__table-header h-text-left text-medium" scope="col">
                            <span class="">{{ header.title }}</span>
                        </th>
                    {% endfor %}
                </tr>
                </thead>
            {% endif %}
            {% if data.rows %}
                <tbody class="order-summary__body">
                {% for row in data.rows %}
                    <tr class="order-summary__row">
                        {% for cell in row.cells %}
                            <td class="order-summary__table-cell h-text-left">
                                <span class="">{{ cell.content }}</span>
                            </td>
                        {% endfor %}
                    </tr>
                {% endfor %}
                </tbody>
            {% endif %}
        </table>
    </div>
</div>

{
  "language": "en-US",
  "data": {
    "header": {
      "text": "Tellimuse kokkuvõte"
    },
    "headers": [
      {
        "title": "Toode"
      },
      {
        "title": "Toote hind"
      },
      {
        "title": "Kogus"
      },
      {
        "title": "Rendiperiood"
      },
      {
        "title": "Transport"
      },
      {
        "title": "Rendipunkt/aadress"
      }
    ],
    "rows": [
      {
        "cells": [
          {
            "content": "Akukäärtõstuk 2.5M manuaalne"
          },
          {
            "content": "16€/päev"
          },
          {
            "content": "100 tk"
          },
          {
            "content": "01.08 2022 - 22.02.2023"
          },
          {
            "content": "Ei"
          },
          {
            "content": "Uus-Paldiski mnt 3, Keila"
          }
        ]
      },
      {
        "cells": [
          {
            "content": "Akukäärtõstuk 2.5M manuaalne"
          },
          {
            "content": "16€/päev"
          },
          {
            "content": "100 tk"
          },
          {
            "content": "01.08 2022 - 22.02.2023"
          },
          {
            "content": "Ei"
          },
          {
            "content": "Uus-Paldiski mnt 3, Keila"
          }
        ]
      },
      {
        "cells": [
          {
            "content": "Akukäärtõstuk 2.5M manuaalne"
          },
          {
            "content": "16€/päev"
          },
          {
            "content": "100 tk"
          },
          {
            "content": "01.08 2022 - 22.02.2023"
          },
          {
            "content": "Ei"
          },
          {
            "content": "Uus-Paldiski mnt 3, Keila"
          }
        ]
      },
      {
        "cells": [
          {
            "content": "Akukäärtõstuk 2.5M manuaalne"
          },
          {
            "content": "16€/päev"
          },
          {
            "content": "100 tk"
          },
          {
            "content": "01.08 2022 - 22.02.2023"
          },
          {
            "content": "Ei"
          },
          {
            "content": "Uus-Paldiski mnt 3, Keila"
          }
        ]
      },
      {
        "cells": [
          {
            "content": "Akukäärtõstuk 2.5M manuaalne"
          },
          {
            "content": "16€/päev"
          },
          {
            "content": "100 tk"
          },
          {
            "content": "01.08 2022 - 22.02.2023"
          },
          {
            "content": "Ei"
          },
          {
            "content": "Uus-Paldiski mnt 3, Keila"
          }
        ]
      },
      {
        "cells": [
          {
            "content": "Akukäärtõstuk 2.5M manuaalne"
          },
          {
            "content": "16€/päev"
          },
          {
            "content": "100 tk"
          },
          {
            "content": "01.08 2022 - 22.02.2023"
          },
          {
            "content": "Ei"
          },
          {
            "content": "Uus-Paldiski mnt 3, Keila"
          }
        ]
      }
    ]
  }
}
  • Content: 
    .order-summary {
    box-shadow: $elevation-01;
    border-radius: $border-radius-base;
}

.order-summary__header {
    padding: 12px;
    background: $L-background-table-header;
    border-radius: $border-radius-base $border-radius-base 0 0;

    @include bp(lg-min) {
        padding: 32px 16px;
    }
}

.order-summary__content {
    padding: 16px 12px;
    border: 2px solid #e4e8eb;
    border-radius: 0 0 $border-radius-base $border-radius-base;
    border-top: none;
    background: $L-background;

    @include bp(lg-min) {
        padding: 24px 16px 8px;
    }
}

.order-summary__table {
    width: 100%;
}

.order-summary__head {
    display: none;

    @include bp(lg-min) {
        display: table-header-group;
    }
}

span {
    .order-summary__table-header &,
    .order-summary__table-cell & {
        letter-spacing: $letter-spacing-50;
        line-height: $line-height-base;
    }
}

.order-summary__table-header {
    padding-bottom: 18px;
    font-size: 16px;

    @include bp(lg-min) {
        padding-right: 16px;
        font-size: 14px;

        &:last-child {
            padding-right: 0;
        }
    }
}

.order-summary__table-cell {
    padding-bottom: 8px;
    display: flex;
    font-size: 16px;

    @include bp(lg-min) {
        display: table-cell;
        padding-bottom: 24px;
        padding-right: 16px;
        font-size: 14px;
        max-width: 180px;

        &:last-child {
            padding-right: 0;
        }
    }

    &:first-child {
        padding-top: 24px;

        @include bp(lg-min) {
            padding-top: 0;
        }
    }

    &:last-child {
        padding-bottom: 24px;

        @include bp(lg-min) {
            padding-bottom: 0;
        }
    }

    .order-summary__row:first-child & {
        &:first-child {
            padding-top: 0;
        }
    }

    .order-summary__row:last-child & {
        &:last-child {
            padding-bottom: 0;
        }
    }
}

.order-summary__row {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid $L-border;
    margin: 0 -12px;
    padding: 0 12px;

    @include bp(lg-min) {
        display: table-row;
        border-bottom: none;
        margin: 0;
        padding: 0;
    }

    &:last-child {
        border-bottom: none;
    }
}

.tablesaw-cell-label {
    .order-summary__table-cell & {
        width: 33%;
        min-width: 33%;
        font-weight: $font-weight-regular;
        word-wrap: break-word;
        margin-right: 12px;

        @include bp(lg-min) {
            @include visually-hidden();
        }
    }
}
  • URL: /components/raw/order-summary/order-summary.scss
  • Filesystem Path: src/patterns/modules/order-summary/order-summary.scss
  • Size: 2.6 KB
  • Content: 
    import 'tablesaw/dist/tablesaw.jquery.js';
import 'tablesaw/dist/tablesaw-init.js';
import './order-summary.scss';
  • URL: /components/raw/order-summary/order-summary.ts
  • Filesystem Path: src/patterns/modules/order-summary/order-summary.ts
  • Size: 115 Bytes